Web前端学习笔记：HTML5四部曲之二——HTML5块级标签、行级标签、结构标签
1.块级标签与行级标签
| 块级标签 | 行级标签 |
|---|---|
| 自动换行，前后隔一行 | 不会自动换行，从左往右依次显示 |
| 宽度默认是100% | 宽度由文字内容撑开 |
| 可以设置宽度、高度、边距等属性 | 不能设置上述属性 |
| 标题、段落、列表、分区… | 图片、超链接 |
2.块级标签
块级标签，此类标签在网页中显示为块，一般独占一行。新的块级标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。
2.1 标题标签：＜h1＞＜/h1＞…＜h6＞＜/h6＞
<h1>一级标题h1>
<h2>二级标题h2>
标题标签的作用是设置段落标题的大小，共设置了6级，从1级到6级每级标题的字体大小依次递减。
2.2 水平线标签：＜hr/＞
<h1>一级标题h1>
<hr/>
<h2>二级标题h2>
水平线标签的作用是添加水平分隔线，让页面更容易区分段落。
2.3 段落标签：＜p＞＜/p＞
<p>第一段文字p>
<p>第二段文字p>
使用段落标签可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。
2.4 换行标签：
<p>第三段文字被<br/>换行了p>
使用换行标签可以控制段落中文字的换行显示。一般的浏览器会根据窗口的宽度自动将文本进行换行显示。
2.5 引用标签：＜blockquote＞＜/blockquote＞
<blockquote cite="http：//www.jredu100.com">引用内容会缩进blockquote>
使用引用标签来表示引用的文字，同时会将标签内的文字缩进显示。其cite属性表明引用的来源，一般表明引用网址。
2.6 预格式标签：＜pre＞＜/pre＞
<pre>预格式标签pre>
预格式标签可以将文字按照原始的排列方式进行显示。
2.7 无序列表标签：＜ul＞＜li＞＜/li＞＜/ul＞
<ul type="disc">
<li>圆形无序列表标签li>
<li>圆形无序列表标签li>
ul>
<ul type="circle">
<li>空心圆形无序列表标签li>
<li>空心圆形无序列表标签li>
ul>
<ul type="square">
<li>方形无序列表标签li>
<li>方形无序列表标签li>
ul>
无序列表是将文字段落向内缩进，并在每个列表项前面加上圆形（●）、空心圆形（〇）或方形（■）等符号，以达到醒目的效果。由于无序列表没有顺序编号，而是采用项目符号的形式，所以又被称为符号列表。
2.8 有序列表标签：＜ol＞＜li＞＜/li＞＜/ol＞
<ol type='a' reversed="reversed" start="5">
<li>有序列表标签，倒序，从第五个序号开始li>
<li>有序列表标签，倒序，从第五个序号开始li>
<li>有序列表标签，倒序，从第五个序号开始li>
ol>
有序列表是将文字以特定的顺序来进行排列，每个列表项会向内缩进，并且它们之间以编号来标记，比如1、2、3、…。
2.9 定义列表标签：＜dl＞＜dt＞＜/dt＞＜dd＞＜/dd＞＜/dl＞
<dl>
<dt>概念dt>
<dd>描述dd>
<dd>描述dd>
dl>
定义列表适用于对名词、概念或主题的定义，第一部分是名词、概念或主题，并且通常只有一项，第二部分是相应的解释和描述，可以有多项。
2.10 分区标签：＜div＞＜/div＞
<div style="width: 100px;height: 100px;background-color: red">这是一个divdiv>
＜div＞标签可定义文档中的分区或节，将文档分割为独立的、不同的部分。它是可用于组合其他HTML5标签的容器。除此之外，由于它属于块级标签，浏览器会在其前后换行显示。
＜div＞标签的一个常见的用途是文档布局。它可以取代使用表格定义布局的老式方法。如果与CSS一同使用，＜div＞标签可用于对大的内容块设置样式属性。
3.行级标签
与块级标签不同，行级标签在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素。
3.1 图片标签：＜img/＞
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度logo" title="百度搜索" width="200px"/>
1．src属性
图片的路径地址。路径地址的写法共有三种，分别为相对路径、绝对路径、网络地址。
2．height和width属性
图片的宽度和高度，推荐用CSS（style=“width：100px；height：100px；”）代替。
3．title属性
图片的标题，即当鼠标指在图片上后显示的文字。
4．alt属性
由于图片无法加载时显示的文字
5．align属性
设置图片周围文字相对于图片的位置。常用属性值有top、center、bottom，用处不大，推荐用CSS来控制样式，此处不再赘述。
3.2 超链接标签：＜a＞＜/a＞
<a href="#">这是一个超链接a>
＜a＞标签可以设置一个超链接，单击超链接可以跳转到新的文档或者当前文档中的某个部分。
1．超链接标签的属性
（1）href属性
描述链接的地址，这个地址可以是网络链接，也可以是本地文件。当用#时，表示这是一个空的超链接。
（2）target属性
定义通过超链接打开的文档在何处显示。常用的两个属性值分别为_self（在与链接相同的框架中打开被链接文档）和_blank（在新窗口中打开链接），默认属性值为_self，其他属性值可以通过查阅帮助文档了解。
补充：锚链接的用法
（1）本页面锚链接
①设置锚点：
＜a name=“top"＞＜/a＞。
②在超链接上，使用#name跳转到对应锚点。
＜a href=”#top" target="_self"＞这是一个超链接＜/a＞
（2）页面间锚链接
①在即将跳转页面的指定位置，设置锚点。
＜a name=“weixin"＞＜/a＞。
②在超链接的href属性中，使用"页面地址.html#name”。
＜a href="t.html#weixin"＞跳转到新页面指定部分＜/a＞
2.2.3 其他常用的行级标签
<span>这是由span包括的文字span>
＜span＞标签常常被用来组合文档中的行内元素，无实际意义，用于包裹某部分文字，修改特定样式。
<i>斜体ii>
<em>强调斜体emem>
<cite>引用斜体citecite>
<b>加粗bb>
<strong>强调加粗strongstrong>
<small>小字smallsmall>
<s>划线ss>
<q>加引号qq>
<code>代码codecode>
4.结构标签
使用结构标签可以提升网页文档的可读性，并且有利于搜索引擎优化。
HTML5新增的结构标签主要包括以下7个：＜section＞、＜article＞、＜header＞、＜hgroup＞、＜footer＞、＜nav＞、＜aside＞
习题
1．常用的列表分为____ 、____ 、____ 三种。
2．写出5个常见的块级标签：____ 、____ 、____ 、____ 、____ 。
3．列出＜img＞标签的常用属性及作用。
4．列出超链接标签的常用属性及作用。
5．如何设置一个跳转到其他页面的指定锚链接？
6．如何单击超链接发送邮件？
7．写出＜em＞、＜strong＞、＜i＞、＜b＞的区别。
8．HTML5新增的结构标签包括＜header＞、____ 、____ 、____ 、＜footer＞、____ 、＜hgroup＞。
9.网页设计小案例。
参考答案
1．常用的列表分为 无序列表 、有序列表 、定义列表 三种。
2．写出5个常见的块级标签：div 、h1 、p 、ul 、dl 。
3．列出＜img＞标签的常用属性及作用。
src：图片地址
width/hight：图片宽/高
title：图片标题
alt：由于图片无法加载时显示的文字
4．列出超链接标签的常用属性及作用。
href：超链接地址
target：定义通过超链接打开的文档在何处显示。
5．如何设置一个跳转到其他页面的指定锚链接？
①在即将跳转页面的指定位置，设置锚点。
＜a name=“weixin"＞＜/a＞。
②在超链接的href属性中，使用"页面地址.html#name”。
＜a href="t.html#weixin"＞跳转到新页面指定部分＜/a＞
6．如何单击超链接发送邮件？
？
7．写出＜em＞、＜strong＞、＜i＞、＜b＞的区别。
em和strong附带强调语义
<i>斜体i>
<em>强调斜体emem>
<b>加粗bb>
<strong>强调加粗strongstrong>
8．HTML5新增的结构标签包括＜header＞、＜section＞、＜article＞、＜hgroup＞、＜nav＞、＜aside＞、＜footer＞。
9.网页设计小案例
<html lang="zh">
<head>head>
<body>
<h1>促销信息h1>
<dl>
<dt><img src="https://img-blog.csdnimg.cn/2021010517252713.png" alt="电脑" title="笔记本电脑">dt>
<dd>笔记本拍卖dd>
<dd>四核，4G内存，256G硬盘dd>
<dd>跳楼疯抢价<span style="font-size: 36px;color: red;">1span>元起dd>
dl>
这台笔记本电脑<span style="color: red;">不错span>，快速<span style="font-size: 36px;color: green;">抢购span>吧！
body>
html>
参考文献
1.Web前端学习笔记：HTML5+CSS3+JavaScript-王涛 杨延成 姜浩-微信读书