标签的类型
标签根据自身的属性特征可以分为两种:
1.块标签:
h1-h6,p,hr,br,ul,ol,li,dl,dt,dd,pre,div
特点如下:
a.独占一行,就算设置宽高,也是独占一行.
b.可以设置宽高,如果不设置,默认的宽为整个浏览器的宽度,高度为其内部的内容高度.
c.支持上下的margin和padding属性
2.行标签:
img,a,span,code,strong,em,sub,sup,span
行标签a在html5中可以包块元素(div),但是文档声明时必须是html5
特点如下:
a.不独占一行,多个标签可以在一行显示
b.不支持宽高设置,其宽高由内容撑出
c.不支持上下的margin和padding属性
标签根据标签的语义也可以分为两种:
1.有意义标签
2.无意义标签 div span
标题标签（双标签）
h1-h6 独占一行
h1标签在一个文档里只允许出现一次。
标题标签一般用在文章的标题部分,字体效果:字体会加粗,字体大小不一
h1=32px;
h2=24px;
h3=18.72px;
h4=16px; # 系统默认大小
h5=13.28px;
h6=12px;
代码区域双标签 code
用来显示计算机源码或者其他机器可以阅读的内容。
写在code标签里的内容会以打印体的形式展现
缺点:不会按照代码原有的格式输出
预处理双标签 pre
特点:会原样保留内容中的空格和换行,但是依然不识别尖括号
img单标签
- src:填写当前需要展示的图片所在的位置,可以加载网络图片或者本地图片
- alt:当图片不能加载时,显示alt 内容对图片进行说明.
绝对路径：从电脑的根目录一直找到图片的位置停止
<img src="/Users/lanouhn/Desktop/1.jpg" alt="绝对路径">
相对路径：从当前文档所在的文件夹位置一直找到图片的位置停止
- 所需图片若与文档同一层则写图片名
- 所需图片在文档的下级使用"/"逐层查找
- 所需图片在文档的上级使用"../"逐层上找
// 下级：
<img src="img/button1.png" alt="next">
// 上级：
<img src="../../1.jpg" alt="pre">
超链接双标签 a
- href:将要跳转到的网络位置或本地位置
- 网络位置
- 本地位置
- 锚链接
- 点击下载文件
- 点击链接在新窗口打开
- 空链接
<a href="###">不标准空链接写法</a>
<a href="javascript:void(0)">标准空连接写法</a>
其他标签
- 分割线单标签 hr
- 换行符单标签 br
- 段落标签 双标签p 独占一行
- 加粗效果标签 双标签 strong
- 斜体双标签 em
- 上标双标签 sup
- 下标双标签 sub
- 无序列表 ul li
- 有序列表 ol li
- 自定义列表 dl dt dd
dt:自定义标题会顶格显示
dd:对于标题的详细描述,首行缩进
div无意义双标签 用来对整个网页的结构进行划分
span无意义双标签 用来对整个网页的结构进行划分
标签的嵌套规则
1.块元素可以包含内联元素或某些块元素，
但内联元素却不能包含块元素，它只能包含其它的内联元素：
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错
2.块级元素不能放在 <p> 里面：段落里不能再分块了。
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，
这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt
注意: 块标签可以嵌套行标签与块标签! 但是行标签只能嵌套行标签,不能嵌套块标签.
html5新增标签
- 标记标签
mark双标签 - 单词内换行标签
wbr双标签 - 拼音标注标签
ruby双标签, - 需要和
rt,rp标签配合使用, - rt:在
rt标签里写上需要标注的信息, - rp:当浏览器不支持时,会显示该标签里的内容.