1.块级标签
div p h1-h6 hr ul li ol dl dt dd
2.行级标签(行内标签)
a span b strong em i sub sup del
3.行内块标签
img ipunt
1.div
双标签
构建网页的基本标签
无语义标签
可以把div标签理解成一个盒子
可以划分网页结构
<div> </div>
特点:
1.宽度默认撑满父元素(宽度和父元素的宽度一样)
2.高度由内容撑开
3.垂直布局,独立成行(一个div标签占一行)
div标签可以嵌套任何标签
2.p
双标签
段落标签
主要放成段的文字
<p> </p>
特点:
1.宽度默认撑开父元素(宽度和父元素的宽度一样)
2.高度有内容撑开
3.垂直布局,独立成行(一个p标签占一行)
4.自带上下外边距
注意:p标签不能嵌套块级标签p div...
应用场景:文章中的段落,页面中的文字块
h 系列标签:标题标签
标题标签中文字大小依次减小,重要程度依次减弱
注意事项:h1标题一个页面中只有一个,h2~h6可以有多个
-特性
-宽度默认撑满整个元素
-高度默认由内容撑开
-独立成行--垂直布局
-自带外边距
-自带加粗效果
应用场景:
-logo
-文章页标题,内容章节标题
-产品标题
模块标题等
hr标签:水平分割线 块级标签
-特性
-默认自带间距,自带边框
独立成行,垂直布局
作用:在页面中显示一条水平线
br:强制换行标签 不参与标签分类
文本格式化标签
a span b strong em i sub sup del
span:控制文本局部样式,里面一般包着文本
del:删除标签
sup:上标
sub:下标
em:斜体标签 一个语义标签,强调语气,他里面包围的文本显示斜体效果
i:斜体标签
b:加粗标签
strong: 加粗标签 强调语气
1.宽高由内容撑开
2.水平布局,一行放不下会自动折行
3.换行和空格会被解析(只解析一个空格)
4.不能设置宽高
注意:行级标签不能嵌套块级标签和行内块标签
a:超链接标签
行级标签
href:跳转的路径
网址,本地文件,空链接(#占位,跳转到当前页的顶部),伪链接(href="JavaScript:" 假链接,不跳转的)
title:提示信息的作用
target:被链接文档在哪里显示
1.target="_self",在当前窗口跳转,默认值
2.target="_blank"在新窗口跳转
语法:
<a href="">内容</a>
特性:
1.宽度默认由内容撑开
2.高度默认由内容撑开
3.默认横向显示,水平布局,一行排不下,自动拆行
4.换行和空格会被解析
5.自带文字颜色
6.自带下划线
7.鼠标指针的形状为手型
8.去掉a标签下划线 text-decoration:none
会跳转到当前页面,点击一次跳转一次,刷新一下页面
#空链接 占位,跳转到当前页的顶部 只跳转一次
伪链接 失去跳转功能
img 行内块标签
src:图片的路径
alt:预替换文本,当图片加载失败的时候提示的文字
width:宽 px 可以省略
height:高 px 可以省略
title:提示信息的作用
可以设置宽高
特性:
1.默认横向显示,水平布局,一行排不下,自动拆行
2.换行和空格会被解析
3.可以设置宽高