HTML是用来描述网页的一种语言。该语言是一种标记语言（即一套标记标签，HTML使用标记标签来描述网页)，而不是编程语言。它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。
1.HTML5简介
1.1 HTML5发展历程
HTML的发展历史可以追溯到很久以前。1993年，HTML首次以因特网草案的形式发布。20世纪90年代，人们见证了HTML的快速发展，从HTML1.0版、HTML2.0版，到HTML3.2版和HTML4.0版，再到1999年的HTML4.01版，一直发展到HTML5。
HTML5相比之前的版本提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则提供了许多新的网页功能，例如使用网页实现动态渲染图形、图表、图像和动画，以及在不需要安装任何插件的情况下，直接使用网页播放视频等。
1.2 HTML5设计理念
HTML5是一个里程碑式的规范，它为下一代Wb发明指明了方向，其设计理念囊括了诸如兼容性、实用性、互用性之类的概念，即便W3C(万维网联盟)与WHATWG(网页超文本应用技术工作组)之间有多大的分歧，它们也都遵循HTML5的设计理念。
(1)化繁为简。HTML5为了尽可能简化，避免了一些不必要的复杂设计。如doctype的改进，在以往的HTML版本中，第一行doctype过于复杂，几乎没有几个人能够记住，在实际的Web开发中也没有意义，在HTML5中就非常简单：为了让一切变得简单，HTML5对每个细节都有非常明确的规范说明，不允许有任何歧义和模糊出现。
(2)向下兼容。HTML5有很强的兼容能力，其允许存在不严谨的写法，例如一些表情的属性值没有用引号括起来，标签属性中包含大写字母，有的标签没有闭合等，对于这些不严谨的错误处理方案，在HTML5的规范中都有着明确的规定。对于HTML5的一些新特性，如果浏览器不支持，也不会影响网页的显示。例如，HTML5中的input标签的type属性增加了很多类型，如果浏览器不支持这些类型，则默认会将其视为text,实现了优雅降级。
(3)支持合理存在的内容。HTML5的设计者们花费了大量的精力来研究通用行为，例如，谷歌公司分析了上百万的页面，从中提取了dv标签的d名称，如很多人采用以下方法
标记导航区域：
<div class="nav"> <!-导航区域-> </div>
既然这样的行为已经大量存在，HTML5就会进行改进，增加nav标签，用于导航区域。
(4)解决现实问题。对于HTML5无法实现的一些功能，将会寻求其他方法来实现。例如，绘图、多媒体、地理位置、实时获取信息等功能，通常会开发一些相应的插件间接实现这些功能。HTML5的设计者专门研究了这些功能需求，开发了一系列用于Wb应用的接口。
HTML5规范的制定是开放的，所有人都可以获取草案的内容，也可以参与规范的制定，提出自己的意见。因为其开放性，所以HTML5可以得到更加全面的发展，一切以用户需求为最终目的，用户需要什么，就规范什么内容。
(5)最终用户优先。这在本质上是一种解决冲突的机制。在遇到无法解决的冲突时，HTML5规范会把最终用户的诉求放在第一位。因此，HTML5的绝大部分功能都非常实用。HTML5规范的制定遵循以下优先顺序：用户>编写HTML的开发者>浏览器厂商>规范制定者>纯粹的理念。
(6)通用访问。HTML5的通用访问原则包括以下3方面。
- 可访问性：HTML5考虑了残障用户的需求，以屏幕阅读器为基础的元素已经被添加进规范中。
- 煤体中立：HTML5规范不仅仅是为了某些浏览器而设计的。HTML5的新功能可能在未来的某一天在不同设备和平台上都能够运行。
- 支持所有的语种：HTML5规范支持所有的语种。
- 下面我们将从新建HTML5文档开始，介绍HTML5的基础知识。
2.新建HTML5文档
HTML5是一种标记语言，主要以文本形式存在，因此所有记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm,将HTML源代码输入记事本、Sublime、Text、WebStorm等编辑器并保存之后，可以在浏览器中打开文档以查看其效果。
2.1创建空白文档
一个完整的HTML文档包括头部信息()和主体内容()。为了使网页内容清晰、明确，并容易被他人阅读，或者被浏览器及各种设备所理解，新建HTML5文档后需要构建基本的网页结构。
使用Windows系统自带的记事本工具编写一个名为index.html的
空白网页，其标题为“网页标题”，如图1-2所示。
(1)使用记事本新建一个文本文件，并将其保存为index.html。
(2)在文本文件中输入以下多行字符。
(3)保存文件，双击index.html使用浏览器打开·。
![[Pasted image 20240525205639.png]]
通过上面的示例代码，可以看到空白网页是由固定的结构构建的。图1-2右图所示的页面是一个空白页面，是因为访问者看到的内容主体部分（即<body和之间的部分）没有内容，是空的。
每个网页都包含doctype、html、head和body元素，它们是网页的基础。在上面的示例页面中，用户可以定制的内容包括两项：一项是设置lang属性的语言代码；另一项是和标签之间的区域表示网页文档的头部。头部代码中，有一部分是浏览可见的，即 之间的文本。这些文本会出现在浏览器标签页中。某些浏览器会在窗口的顶部显示这些文本，作为网页的标题显示。此外，头部文本通常还是浏览器书签的默认名称，它们对搜索引擎来说是非常重要的信息。
2.2添加网页内容
通常，网页都包括以下3部分内容。
- 文本：网页中的纯文字，如新闻资讯、产品介绍、注册声明等。
- 外部引用：包括图像、视频、音频、动画、样式表（控制页面显示效果）和JavaScript文件（为页面添加行为）等引用。这些引用还可以指向其他HTML页面和资源。
- 标记：对文本内容进行描述，确保浏览器能够正确显示。
<!doctype html> <html lang="en"> 网站登绿界面 <head> <title>网站登录界面</title> 使用手机扫码登录 </head> <body> <article> <h1>使用手机扫码登录<h1> 请扫描二维码登录网站查看网站信息 <img src="images/saoma.jpg"width="100"alt= "扫码登录网站"> <p>请扫描<em>二维码</em>登录网站查看 <a href="https:/wx.qq.com"rel="external'"title="登录网站">网站信息<a><p> </article> </body> </html>
以上代码包含了3部分：功能介绍、外部文件引用（图像的src值和链接的href值）和标记。HTML提供了很多元素，本例演示了6种常见的元素，分别是a、article、em、
3.头部信息
HTML文档的头部区域用于说明文档头部的相关信息（包括网页标题、网页元信息、文档视口参数等)，这些信息主要被浏览器和搜索引擎所采用，不会显示在网页中。
3.1 网页标题
HTML页面的标题一般用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head与之间。标题标签以
html> <head> <title>HTML5新特性</title> </head> <body> HTML5智能表单 </body> </html>
title元素必须位于head部分。页面标题会被百度、Google等搜索引擎采用，从而使搜
索引擎能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示。
3.2网页元信息
元信息标签可以提供有关页面的元信息(meta-information),比如针对搜索引擎
和更新频度的描述和关键词。
- 定义网页描述信息<meta name-"Description"content=“HTML5网页设计技术”/>
- 定义网页关键词：<meta name="Keywords"content=“HTML,CSS,JavaScript,Bootstrap,Vue.js”/>
标签位于文档头部，标签内不包含任何内容。使用<m㎡eta>标签的属性，可以定义与文档相关联的名称/值对。
下面列举常用元信息的设置代码。
(1)设置UTF-8编码。
<meta http-equiv="Content-Type"content="text/html";charset="UTF-8"/>
HTML5简化了子符编码设直万式：,其作用与上面代码是相同的。
(2)设置GB2312编码。
每个HTML文档都需要设置字符编码类型，否则网页在最终显示时可能会出现乱码现象。上面介绍的两种编码形式中，UTF-8是国家通用编码，独立于任何语言，因此都可使用。
使用refresh属性值可以设置页面刷新时间或跳转页面，如8秒之后刷新页面。
<meta http-equiv="refresh"content="8;url=https://www.baidu.com"/>
使用expires/属性值可以设置网页缓存时间。
<meta http-equiv="expires"content="Sunday 25 September 2022 12:00 GMT"/>
类似设置还有以下内容:
- 设置网页作者名称：<meta name-="author’"content=-“https:/www.baidu.com”/>。
- 设置网页版权：<meta name–"copyright’"content=-“https:/www.baidu.com”/>。
- 设置网页创建时间：<meta name=-"date"content=-“2022-12-19T18:17:31+00:00”/>。
3.3文档视口
在移动Web开发中，经常需要定义viewport(视口)，即浏览器显示页面内容的屏幕区域。一般移动端浏览器都默认设置一个<meta name=-“viewport’”>标签，定义一个虚拟的布局视口，用于解决早期页面在手机上显示的问题。
由于iOS和Android等系统基本都将其视口分辨率设置为980px。因此，PC端网页基本能够在手机端上呈现，只不过显示得很小，用户可以通过手动缩放网页进行阅读。但这种方式用户体验很差，建议使用标签设置视口大小。
设置标签的具体代码如下：
meta id="viewport"name="viewport"content="width=devicewidth;initial-scale=1.0;maximum-scale=1;user-scalable=no;">
4.基本结构
HTML文档的主体部分包括了要在浏览器中显示的所有信息。这些信息需要在特定的结构中呈现。
4.1定义文档内容
HTML5包含一百多个标签（大部分继承自HTML4),这些标签基本上都被放置在主体区域内(),下面是常用的一些标签。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>:用于定义文档标题。 <p>:用于定义段落文本。 <u>、<ol>、<i心>等：用于定义信息列表、导航列表、榜单结构等。 <table>、<tr>、<td>等：用于定义表格结构。 <form>、<input>、<textarea>等：用于定义表单结构。 <span>:用于定义行内包含框。
在设计网页时，正确使用HTML5标签，可以避免代码冗余。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>主体内容在浏览器中的显示</title> </head> <body> <h1>HTML5文档结构<h1> <p>一个完整的HTML5文件包括标题、段落、列 表、表格、绘制的图形及各种嵌入对象，这些对象统称为 HTML元素<p> <ul> <i>文档类型声明<i> <1i>主标签<1i> <i>头部信息<i> <li>主体内容<li </ul> </body </html>
为了更好地使用标签，可参考W3 Schooll网(http:/www.w3school…com.cn/tags/index.)ASP页面中的信息。
4.2正确使用Div元素
在设计网页时经常需要在内容外围添加一个容器，从而可以为内容应用CSS样式或JavaScript效果，此时就需要使用div元素。
body> <div> <article> <h1>文章标题<h1> <p>文章内容<p> <footer> <p>注释信息<p> <address><a href="#">HTML5 CSS3</a> </address> </footer> </article> </div> </body>
代码中有一个dv元素包含所有内容，页面的语义并没有发生变化，但提供了一个可以用CSS添加样式的通用容器。与footer、nav、hl~h6、p、header、article、section、aside等元素一样，在默认情况下div元素自身没有任何样式，只是其包含的内容从新的一行开始。可以对dv添加样式，以实现网页效果的设计。
div没有任何语义。在一般情况下，如果语义不合适，使用header、footer、main(仅使用一次)、article、section、aside或nav代替div会更合适。但若语义不合适，也不必为了避免使用div而使用上述元素。div适合所有页面容器，可以作为HTML5的备用容器使用。
div元素对使用JavaScript3实现一些特定的交互行为或效果也有帮助。例如，在页面中展示一张图片或一个对话窗口，同时让背景页面覆盖一个半透明的层（这个层通常是一个div)。
4.3使用id和class
在使用标签定义页面文档中大部分结构时，为了能够识别不同的结构，一般通过定义id或clss属性给它们赋予额外的语义，给CSS样式提供有效的“钩子”。
- id属性
- id属性用于规定元素的唯一id,常与CSS3样式相结合，实现对元素的控制。例如，以下代码是在页面中设计一个列表结构，并为其分配一个id,自定义页面导航模块。
<ul id="nav"> <li<a href="#">首页</a></li> <li><a href="#">视频</a><li> <li><a href="#">发现</a></i </ul>
class属性
class属性定义了元素的类名，用于设置
标签中的元素的样式，其值为CSS3样式中的class选择符。与id不同，同一个class可以应用于页面上任意数量的元素，因此class非常适合标识样式相同的对象。例如，以下代码在
- 标签中使用clss属性，使页面中的标题和段落居中显示。
<!doctype html> <html <head> <meta charset="utf-8"> <style> .center text-align:center; } </style> </head <body> <h1 class-="center'">标题居中<hl> <p class-="center">段落居中。<p> </body </html>
在代码中使用id标识页面中的元素时，id名称必须是唯一的。id可以用于标识持久的结构性元素，如主导航或内容区域；id还可以用来标识一次性元素，如某个链接或表单元素。
4.4使用title
title属性规定关于元素的额外信息。在页面中使用title属性可为文档中的任何部分加上提示标签，例如：
<ul title="列表提示"> <li><a href="#"title="链接提示">列表项目</a><li> </ul>
4.5使用role
role属性的作用是告诉Accessibility类应用（如平面阅读器等）当前元素扮演的角色，主要供残疾人使用。使用role可以增强文本的可读性和语义化。例如，以下代码告诉屏幕阅读器，此处有一个复选框，并且已经被选中：
<divrole="checkbox"ariachecked="checked"><inputtype="checkbox"checked></div>
role常用的属性值如下:
(1)role-“banner”(横幅)：面向全站内容，通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的项端，而且通常横跨整个页面的宽度。使用方法：将其添加到页面级的header元素，每个页面只用一次。
(2)role=“navigation”(导航)：文档内不同部分或相关文档的导航性元素（通常为链接)的集合。
使用方法：与nav元素是对应关系。应将其添加到每个nav元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但是同nav一样，不应过度使用。
(3)role=“main”(主体)：文档的主要内容。
使用方法：与main元素是对应关系。最好将其添加到标签中，也可以添加到其他表示主题内容的元素中（可能是dv)。在每个页面只用一次。
4.6html注释
HTML5注释的写法如下：
<!-注释内容-> • 1
在HTML5文档中添加注释，可以标明区块开始和结束的位置，提示代码开发者某段代码的意图，或者阻止内容显示等（这些注释只会在源代码中可见，在浏览器中则不可见)
5.主体结构
使用HTML5结构化元素，用户可以方便地创建网页的主体框架。
5.1 页眉
标签是一个语义标签，用于定义文档或者文档的一部分区域的页眉
<body> <header> <h1>晨光洒落，秋日明朗<h1> <h3>藏在市井里的美好，朴素而平常<h3> </header> </body
5.2导航
标签用于表示HTML页面中的导航，可以是页与页之间的导航，也可以是页的段与段之间的导航。
<nay> <a href-"index.html">官网</a> <a href-"e-shop.html">商城</a> <a href="register.html">注册</a> </nay>
在以上代码中，nav元素包含3个用于导航的超链接，即“官网”“商城”“注册”。该导航链接可用于全局导航，也可以放置在页面中的某个板块，作为区域导航。
5.3主要区域
标签用于指定文档的主体内容，并且标签中的内容在文档中是唯一的，不在文档中重复出现的内容，如侧边栏、导航栏、版权信息、站点标志或搜索表单等。
<main role="main"> <article> <h4>01<h4> <p>岁月不晚不早，秋日恰似春朝。<p <article> <article> <h4>02</h4> ≤>夏天倾尽所有，酝酿了一个浪漫的秋。<p> <article> <article> <h4>03</h4> <p>秋天的声音很动听，日子也变得柔情。<p </article> </main>
main元素在一个页面中只能使用一次。在main开始标签中加上role=“main”,可以帮助平面阅读器定位页面中的主要区域。
5.4文章块
标签定义外部的内容，用于标识页面中一块完整的、独立的、可被转发的内容，如论坛帖子、新闻文章、用户评论、微博信息条等。
<main role="main"> <article> <h1>今日看点</h1> <p>我国自主研发大丝束碳纤维问世，被称为"新材料之王"。<p> <article> </main>
可以将article嵌套在另一个article中，只要里面的article.与外面的article是部分与整体的关系。一个页面可以有多个article元素。例如，新闻页面中一般包括多篇新闻文章，其中每一篇都是其自身的article。一个article可以包含一个或多个section元素。
5.5区块
标签用于定义文档中的节，多用于对内容进行区分（如章节、页眉、页脚或文档中的其他部分)。
<section> <article> <header><h4>网友A的▣复<h4></header> <p>评论内容<p> <footer>发布时间：2023/12/3</footer>: </article> <article> <header><h4>网友B的▣复<h4><header> ≤p>评论内容<p> <footer>发布时间：2023/12/2</footer≥ <article> </section>
section用于定义通用区块，但不要将其与div元素混淆。从语义上讲，section标记的是页面中的特定区域，而div测不传达任何语义。div元素关注结构的独立性，而section元素包含的内容可以单独存储到数据库中，或输出到Wod文档中。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用dv元素。
5.6 附栏
标签用于定义当前页面或者文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
<aside> <nav> <h2>友情链接导航<h2> <ul> <li><a href-"https://www.zhihu.com/"></a><i> <li><a href-"https://www.ctrip.com/"></a>i> <li><a href-"https://www.douyin.com/">a><i> </ul> </nav> </aside>
aside元素主要有两种用法：一种是包含在article中，aside内容可以是与当前内容有关的参考资料或解释等；另一种是作为页面或站点辅助功能部分，在article.之外使用，如设计侧边栏，其中的内容可以是文章列表、友情链接导航、评论列表等。
5.7 页脚
:标签通常用于定义网页的底部布局，表示页脚，可以用作article、aside、blockquote、body、details、fieldset、figure、nav、section或td结构的页脚。
<footer> <p>©2028 Gandalf/p> </footer>
不能在footer内嵌套header:或另一个footer。同时，也不能将footer嵌套在header:或address元素里。
