HTML总结

2019-01-02 本文已影响0人好心情_lyh

1、基本概念

HTML
超文本标记语言
H Hyper
T text （超链接图片视频音频等）
M markup（标记，标签 <不是编程语言>）
L language

HTML是一个树状结构，标签间是有父子，兄弟关系的

html结构
------head
显示网页信息声明 title/meta/link/script
title是必填项
-----------title
------body
------------所有可显示内容
所有要在页面主体区域显示的内容必须写在body内

文档声明头：告诉浏览器你要用的H5标准来解释当前的HTML文档
<!DOCTYPE html>

元素分类
块级元素：默认情况下，沾满爸爸整行，可以设置宽高如：div p ul li
内联/行内元素：元素并列在同一行，不能够设置宽高，也就是说他们的内容多少决定了标签的大小如：a span b i
img（行内块级元素/置换元素可以设置宽高）

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
　　(1)display:inline;转换为行内元素
　　(2)display:block;转换为块状元素
　　(3)display:inline-block;转换为行内块状元素

实体字符（都是以&开头；结尾的）

特殊字符	字符实体
大于号(>)	>
小于号(<)	<
引号"	"
®	®
©	©
&	&
一个英文的空格
一个汉字的空格	&emsp;

结构层(HTML)、表现层(CSS)、行为层(JavaScript)
样式：模样的形式（对齐方式，颜色，宽高大小）
锚点：页内跳转，在地址栏上会拼接上#targetId
“#”回到页面顶部

2、重要标签&属性

<div>块级元素
实际意义（应用场景）：它可以作为一个容器

<p>段落标签语言

<img> 图片标签:

src属性：指定显示图片的路径
alt属性：图片备注
全局属性title：鼠标移上去的提示

<a>

href：指定超链接的目标网址（如果是线上地址，必须以HTTP开头的完整路径）
target:指定了目标链接的打开方式
a标签绑定手机号码,发短信，发邮件，下载

<a href="#targetId">锚点测试</a>
<a href="tel:13539748339">点击请联系我</a>
<a href="sns:13539748339">点击请联系我</a>
<a href="mailto:13539748339@qq.com">点击请联系我</a>

<table>

border 边框
cellspacing 单元格与单元格之间的间隙
cellspadding 内边距内容与边框之间的距离
tr 表示table的一行
th/td 一个单元格
rowspan 跨行
colspan 跨列

<ul> <li>无序列表 <ol>有序列表

start 开始下标
type 指定序列号类型
reverse 倒序

<dl><dt><dd>列表标签标题列表 (开头有缩进)

一些常用的行内元素

span标签行内元素，包裹文字
sup 上标
sub 下标
b 粗体
i 斜体
-mark 定义带记号文本文本被加颜色背景

input属性

placeholder 空内容时占位提示内容
value 可以指定input的默认值
autofocus 自动获取鼠标焦点
autocomplete 自动提示之前提交的内容
required 必填项,否则无法提交
readonly 只读
disabled 禁用
accept 文件接收类型
multiple 上传文件多选
name属性：指定向后台传值的字段（后台通过这个字段来获取用户的输入）

type:number 并不是说,你只能输入数字,而是HTML会将内容尽量转为数字,
它在移动端时是非常有意义的,例如电话号码输入框(弹出数字键盘)

audio属性

controls 显示出控制板
autoplay 现在已经被谷歌浏览器禁用了,设置了也不会自动播放(可以设置捕获用户行为来进行播放)
loop 循环播放

利用source解决音频兼容问题

<audio>
        <source type="audio/mpeg" src="media/生日歌 - 英文童谣 英文.mp3"/>
        <source type="audio/ogg" src="media/生日歌 - 英文童谣 英文.ogg"/>
    </audio>
<audio src="">
    你的浏览器不支持audio标签,请升级浏览器!
</audio>
<!--如果不支持audio标签,就表示为自定义标签显示文字-->

video属性

width/heigth 设置视频宽高
controls 显示操作台
Preload 预加载
muted 静音
poster 设置海报地址
autoplay 自动播放(目前大部分浏览器不再支持)

Mp4 WebM Ogg
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

3、重要知识点

路径问题
绝对路径：表示路径的完整描述信息 D:\study\classfile\2018.12.24helloworld\img
相对路径：根据相对位置得到路径信息
/ 进入文件夹
./ 表示当前文件夹
../ 表示上一层文件夹

form标签

method属性：指定通讯方式（常用get/post/put/delete）
form表单提交的方式get和post的区别
1.传值方式不同,get会把传递的值以URL查询字符串的形式显示在地址栏里,而post是把要传递的值放在了请求体里面,相比来说post会更安全一点,千万不要把带有密码的内容以get的方式传值.get传值多个值用&连接用?查询字符串
2.传输数据量的大小,因为get的内容是放在地址栏的,但是地址栏能传输数据大小是有限制的,所以get方式传输数据的大小是有限制的,大约3000字符.post方式理论上说是没有大小限制的.
3.一般情况下需要从服务器获取数据是用get方式,一般向服务器发送数据时,用post的方式,
4.当需要向后台传递文件信息是必须post请求,同时在form标签修改enctype属性为multipart/form-data
其他参考资料:https://www.cnblogs.com/logsharing/p/8448446.html#!comments
https://blog.csdn.net/qq_28483283/article/details/80207674

src与href的区别
使用src的标签：img JavaScript iframe
href 超文本引用
当前元素与外链资源建立一种联系
src source资源引入
当前元素正确显示必须的资源
如果src地址写错，会影响页面显示出错，而href不会影响

meta使用

<!--设置页面编码-->
<meta charset="UTF-8">
<!--设置页面描述-->
<meta name="Description" content="这里描述网站的内容"/>
<!--设置页面关键字-->
<meta name="Keywords" content="CSS,HTML,JavaScript,前端"/>
<!--设置页面是否缓存和方式-->
<meta http-equiv="Pragma" content="no-cache" />
<!--声明作者信息-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--指定渲染引擎的类型和版本,使兼容性更好-->
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<!--移动端关闭电话号码识别-->
<meta name="format-detection" content="telephone=no" />
<!--移动端关闭邮箱地址识别-->
<meta name="format-detection" content="email=no" />
<!--合二为一的写法-->
<meta name="format-detection" content="telephone=no,email=no" />
<!--解决防盗链的问题,可以播放别的网站的多媒体链接-->
<meta name="referrer" content="never"/>
<!--设置标签图标-->
<link rel="shortcut icon" type="text/css" href=""/>

HTML总结

1、基本概念

2、重要标签&属性

3、重要知识点

猜你喜欢

热点阅读