HTML标签部分（块级⾏级）⼀.基本块级标签
1.HTML标签的分类：
a.块级标签：显⽰为块状，独占⼀⾏，⾃动换⾏。
b.⾏级标签：在⼀⾏中，从左往右依次排列，不会⾃动换⾏。
2.h标签（标题标签）
h标签：标题标签，显⽰为⿊体加粗
标题标签，共分六种：h1~h6:h1最⼤，h6最⼩！
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
2.hr标签
<!--hr标签：表⽰⼀条⽔平线-->
<hr />⾃闭和标签
3.p标签（段落标签）
p标签：表⽰段落标签。相当于我们⽂章中的⼀段⽂字！！
4.<br />换⾏符
注意：在代码中，直接回车换⾏，浏览器不认识。必须使⽤换⾏符<br />告诉浏览器这⾥要换⾏。
5.pre标签（预格式标签）
pre标签会保留代码中的空格，回车等符号，直接在浏览器中显⽰。
pre标签常⽤于在⽹页中显⽰代码，保留代码格式
6.blockquote（块引⽤标签）
blockquote：块引⽤标签。表明⼀段话是从其他⽹站引⽤的。
有⼀个重要属性：cite=""表⽰这段话的引⽤来源，常放⼀个⽹站地址。
但是浏览器显⽰并没有任何区别。
⼆.基于布局的块级标签
1.⽆序列表
有多个列表项组成，每个列表前⾯带⼩⿊点，称为⽆序列表。⽤<ui>表⽰。列表中的每⼀个⼩项⽤<li>表⽰。
<ul>
<li>这是⽆序列表第⼀项</li>
<li>这是⽆序列表第⼆项</li>
<li>这是⽆序列表第三项</li>
<li>这是⽆序列表第四项</li>
</ul>
2.有序列表
有序列表⽤<ol>标签，列表中的每⼀个⼩项⽤<li>表⽰。
<ol>
<li>这是有序列表第⼀项</li>
<li>这是有序列表第⼆项</li>
<li>这是有序列表第三项</li>
<li>这是有序列表第四项</li>
</ol>
3.定义列表（定义描述列表）
定义列表<dl>，⾥⾯有⼀个标题<dt>，有多个描述项<dd>.
标题默认顶格显⽰，描述项相对标题向后缩进。
<dl>
<dt>这是dl列表的标题</dt>
<dd>这是dl列表的描述项1</dd>
<dd>这是dl列表的描述项2</dd>
<dd>这是dl列表的描述项3</dd>
</dl>
4.图⽚组合标签（了解）
组合标签<figure>,⾥⾯有两部分；
①图⽚<img/>后续讲解；
②图⽚的标题：<figcaption></figcaption>
5.分区标签div（最常⽤的标签）
没有任何的特殊作⽤，仅仅起到⼀个包裹的功能，常⽤于⽹页中划分区块。
此标签中可以包裹任何内容，需要配合CSS⼀起使⽤。
三.基本⾏级标签
1.块级标签与⾏级标签的区别(很重要)
①块级标签：默认宽度100%(占满⼀⾏)；
块级标签⾃动换⾏(独占⼀⾏，右边不能有任何东西)；
块级标签可以使⽤CSS设置宽度⾼度！
②⾏级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；
html href属性⾏级标签不会⾃动换⾏(⼀⾏当中，从左往右依次排列)；
⾏级标签的宽度⾼度不能设置！
2.常见的⾏级标签
1、span标签：
① span标签只是包裹作⽤，没有任何其他含义；
② span作⽤与div类似，需配合CSS使⽤。只不过div是块级标签、span是⾏级标签。
2、[em/strong i/b 区别] ：{重点}
① em和i都能倾斜。strong和b都能加粗！但是，i和b仅仅是单纯的倾斜加粗，⽽em和Strong多了强调的语义。
② em和strong都表⽰强调，但是strong强调的级别更⾼！
注意：
1、强调的⽬的：让搜索引擎知道⽹页重点强调的内容！便于搜索引擎显⽰！
2、Strong和em都可以多层嵌套，表⽰强调程度的递增！
3、q标签
q标签：表⽰短引⽤。
cite属性：⽤于声明引⽤的来源。
【常⽤的引⽤标签】
<blockquote>⽤于引⽤⼀段内容</blockquote>
<q>⽤于引⽤⼀句话</q>
<cite>常⽤于引⽤作品名、书画名等</cite>
相同点：三个引⽤标签，都⽤cite属性表⽰引⽤来源
不同点：①引⽤的内容不同。
blockquote->⼀段话，q->⼀句话，cite->作品名
②显⽰的默认效果不同。
blockquote->默认整段向右缩进；
q->默认加引号；
cite->默认倾斜！
4、small和big
small标签：将字体缩⼩⼀号；
big标签：将字体放⼤⼀号；
注意：
① small和big可以多层嵌套，直到字体达到最⼩或最⼤为⽌；
②这俩标签已经被淘汰，并不建议使⽤。
5、img 图⽚标签
① src属性：表⽰图⽚的路径
[图⽚路径的合法⽅式]
a.⽹络链接：由于图⽚在其他⽹站，如果其他⽹站删除图⽚，我们也不能访问，所以不建议使⽤这种⽅式；                  <img src="www.baidu/img/bd_logo1.png" />
b.绝对路径：使⽤绝对路径的图⽚，只有在本机使⽤file协议才能访问！所以，严禁使⽤这种⽅式！
<img src="file:///E:/icon.jpg" />
c.相对路径：
①图⽚与当前⽂档在同⼀层⽂件夹：直接写图⽚名
eg:<img src="icon.jpg" />
②图⽚在当前⽂档的下⼀层⽂件夹：⽂件夹名/图⽚名
eg:<img src="img/icon.jpg" />
③图⽚在当前⽂档的上⼀层⽂件夹： ../图⽚名 (../表⽰后退⼀层)
eg:<img src="../icon.jpg" />
但是，⼀定要注意：图⽚必须包含在项⽬⾥⾯，不能访问项⽬外的图⽚。
② height：图⽚的⾼度 width：图⽚的宽度
eg:<img src="img/icon.jpg" height="500" width="10" />
③ title：图⽚的标题，也就是⿏标指上后看到的提⽰⽂字
eg:<img src="img/icon.jpg" title="⿏标指上后看到的提⽰⽂字" />
④ alt: 图⽚⽆法加载时显⽰的⽂字。省略alt，将默认显⽰title内容。
eg:<img src="img/icon.jpg" alt="图⽚⽆法加载时显⽰的⽂字" />
⑤ align：图⽚周围的⽂字相对于图⽚如何对齐。
可选值：top->图⽚顶部 center->图⽚中部 bottom->图⽚底部
eg: <img src="img/icon.jpg" align="top" />12345
6.a标签（超链接）
a标签属性
①href属性：表⽰超链接需要跳转的页⾯。
A.可以写⽹络地址：
<a href="www.baidu">这是⼀个超链接</a>
B.可以打开本地html⽂件：
采⽤相对路径确定⽂件地址。与img标签确定⽅式相同。
②title属性：⿏标指上后显⽰的提⽰⽂字。
③target属性：设置新页⾯打开的窗⼝位置
可选值：-self⾃⾝页⾯打开（默认）-blank新窗⼝打开
【超链接的特殊应⽤】
1.功能性链接：（了解）
mailto：//点击链接给指定邮箱发送邮件
代码⽰例：
<a href="mailto://jianghao@jerei" >发邮件！！</a>
tencent://message/?uin=1097270356 点击与指定QQ聊天
还有：tell：//⼿机端点击打电话；
message：//⼿机端点击；
ftp://使⽤ftp协议进⾏⽂件的上传下载；
2.锚链接：（重点）
①在页⾯的指定位置设置⼀个锚点，⽤name属性表⽰锚点的名字；
<a name="top"></a>
②将超链接的href属性，设置为#加锚点的名字；
<a href="#top">点击链接，跳转到top锚点位置</a>
>>>页⾯间锚链接
①在新页⾯的指定位置设置⼀个锚点，⽤name属性表⽰锚点的名字；
<a name="top"></a>
②将超链接的href属性，设置为“新页⾯地址#加锚点名字”；
<a href="test.html#top">点击链接，跳转到test.html的top锚点位置</a>
7.W3c规范：
1.W3c：万维⽹联盟，负责制定和维护Web⾏业开发标准；
2.W3c要求的规范：
①规范中倡导两个分离：
内容与表现分离；（HTML与CSS分离开）
内容与⾏为分离：（HTML与JavaScript分离开）
②HTML语⾔要遵循语义化！！
③关于代码书写的规范：
标签与属性必须要⼩写
标签必须要闭合
属性值必须⽤引号引起来（img src="属性值"）
标签必须正确嵌套（不能交叉，块级标签可以包裹⾏级标签，⾏级标签不能包裹块级标签）8. 其他的⾏级标签:[了解即可]
(1)u标签：带下划线
代码：
<u>u标签带下划线</u>
<span >css实现下划线</span>
(2)s标签：带删除线
代码：
<s>s标签带删除线</s>
<span >css实现删除线</span>
(3)定义专业术语(dfn 定义专业术语 abbr 专业术语缩写词)
提⽰搜索引擎，当前为⼀段计算机代码。
但是code不会保留代码格式，需要配合pre标签共同使⽤。
(5)var：表⽰变量
代码：
<var>x</var>+<var>y</var>=<var>z</var>
(6)bdo：定义⽂本的显⽰⽅向
rtl 从右向左 ltr从左向右
(7)kbd：需要⽤户输⼊的⽂字
(8)sup，sub：上下标
(9)time：表⽰时间
HTML5语义化标签
1.header：表⽰⽂章的头部
2.footer：表⽰⽂章的底部
3.section：表⽰⽹站或者⽂章的⼀个章节，也就是⽂章的⼀⼤块
4.article：表⽰⼀篇⽂章
5.aside：表⽰与⽂章相关，但是不属于⽂章⼀部分的内容
6.hgroup：表⽰包裹⼀组标题标签h1~h6
7.nav：表⽰⼀个导航栏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。