HTML5基础教程：从入门到精通-CSDN博客

本文链接：https://blog.csdn.net/m0_47224321/article/details/120514829

本文详细介绍了HTML的基础知识，包括浏览器内核、Web标准、HTML介绍、HTML骨骼、标签分类、标签关系等内容。讲解了HTML的结构、表现和行为三大标准，以及常用的HTML标签和属性。此外，还提到了表单标签、图像标签、链接标签的使用，以及HTML5的文档类型和字符集。最后，强调了HTML标签的语义化和如何快速生成HTML模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

1、开发工具
五大浏览器：
谷歌、火狐、IE、Safari、opera

2、认识网页
（1）静态：不修改源代码，页面的数据永远不会发生改变
（2）动态：页面会随时发生数据的改变。
（3）网页由图片、文字、链接、视频、音频等组成。

3、浏览器内核
内核：
- 渲染引擎---------》将代码渲染显示到浏览器。
- JS引擎--------》给网页添加动态效果。

（1）谷歌----------->Blink
（2）火狐----------->Gecko
（3）IE------------>Trident
（4）Safari------------>Webkit
（5）Opera------------>Presto

二、Web标准

因为有不同的浏览器----》不同的浏览器的内核不一样-----》同样的源代码，显示的效果不一样。
作用：展示的内容统一。
主要包括：
（1）结构（Structure）------》编写的html代码-----》结构；
（2）表现（Presentation）-------》编写CSS代码------》控制内容的显示样式（字体大小、颜色等等）；
（3）行为（Behavior）-------》编写JS代码-----》页面与用户进行交互。
颜色值：
红色：red #FF0000 #ff0000 #F00
绿色：green #00FF00 #0F0
蓝色: blue #0000FF #00F
白色：white #FFFFFF #FFF
黑色：black #000000 #000

三、HTML介绍

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。
所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
- HTML 不是一种编程语言，而是一种标记语言 (markup language) 语言就有自己的规范。
- 标记语言是一套标记标签 (markup tag)，使用尖括号< >。
总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。用文字来描述网页标签。

四、HTML骨骼

<html>		表示整个html的开始
	<head>		头信息
		<title>		标题
		</title>
	</head>
	<body>		页面的主体部分
	</body>
</html>		整个html页面结束

标签可以理解为一个盒子，盒子是用来存放内容的。
1、 HTML标签：
作用所有HTML中标签的一个根节点。最大的标签根标签；
2、head标签：文档的头部
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title；
3、title标签：文档的标题
作用：让页面拥有一个属于自己的标题。
4、body标签：文档的主体以后我们的页面内容基本都是放到body里面的。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

五、submit

sublime text4快速生成html模块:
1、点击tools----->install Package Controll ,此时再从perferences里查看，将会看到Package Controll
2、安装完Package Controll后再安装Emmet插件，该插件可以实现快速生成html模板。
打开Package Controll然后选中它（注意此处要稍等一会儿才会弹出安装其他包的框），然后输入Emmet进行查找并进行下载。下载完成后，此时，再输入html:5 + Tab将会自动快速生成模板（此处要注意你该界面右下角选择的是HTML而不是默认的text）

六、标签分类

双标签：<标签名> 要显示的内容</标签名>
单标签：<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

七、标签关系

嵌套关系----------->父子关系
并列关系----------->兄弟关系
倡议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

八、文档类型

<!DOCTYPE html>-------》html的版本是html5

九、字符集

<meta charset="UTF-8">

（1）utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
（2）gb2312 简体中文包括6763个汉字
（3）BIG5 繁体中文港澳台等用
（4）GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
（5）UTF-8则包含全世界所有国家需要用到的字符
记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

十、标签语义化

核心：合适的地方给一个最为合理的标签。
p—段落
img–图片
h—标题标签
a–链接

十一、标签

（一）标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

（1）h1级别最大的，依次减小。
（2）一般h1 都是给logo使用，或者页面中最重要标题信息。
（3）效果：共六级，字体大小逐渐减小，并有加粗的效果。

（二）段落标签
<p>文本内容</p>
特点：
（1）P标签一行只能放一个。
（2）自动换行

（三）水平线
<hr/>

（四）换行标签
<br/>
段落标签与换行标签的区别：
（1）段落标签两段之间的距离较大
（2）换行之后，行与行的距离较小。
距离是可以修改的，需要用到CSS。

（五）div span
div、span没有语义。
我们布局使用的是CSS+div
特点：
（1）div单独占一行。
（2）span同一行上可以放多个span

（六）文本格式化标签

加粗：<b></b>  <strong></strong>
斜体：<i></i>   <em></em>
删除线：<s></s>   <del></del>
下划线：<u></u>   <ins></ins>

（七）标签属性
格式：
<标签名属性1=“属性值1” 属性2=“属性值2”> 内容</标签名>
注意：
（1）标签属性可以有多个，之间用空格隔开，必须写在开始标签中；
（2）多个属性之间没有顺序
（3）属性1=“属性值1”------》key-value 采取键值对的形式

（八）图像标签
<img/>
属性：
（1）src 设置图像路径
（2）width
（3）height
（4）alt 当图像无法正常显示时显示的文本
（5）title 当鼠标悬停时显示的文本
（6）border 边框

（九）链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
（1）href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用；
（2）target：用于指定链接页面的打开方式，其取值有self和_blank两种，其中self为默认值，blank为在新窗口中打开方式。
在网页中所有点击之后可以跳转的内容都是超连接：
1、外部链接需要添加 http:// www.baidu.com
2、内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
3、如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4、不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

（十）base标签
<base target=”_blank”/>
（1） base标签可以设置整体的链接打开方式。
（2）base要写在head标签中。

十二、锚点定位

使用方法：
<a href="#id名">连接的文本</a>
在相应的位置上的标签声明id

代码演示：
第一部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>楚乔传</h1>

	<p>中国大陆 67集（TV版）/58集（DVD版）</p>

	<p>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1] 该剧改编自潇湘冬儿小说《11处特工皇妃》，讲述了西魏乱世中，一个特立独行的女奴楚乔，在协助建立新政权过程中关于守护、背叛、信仰、爱情的故事。</p>

	第1集<br>
	第2集<br>
	<a href="#three">第3集</a><br>
	第4集<br>
	<a href="02锚点定位第二个页面.html#five">第5集</a><br>

	<h3>第1集(分集以TV版为准)</h3>
	<p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>

	<h3>第2集(分集以TV版为准)</h3>
　	<p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>

    <h3 id="three">第3集(分集以TV版为准)</h3>
    <p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>
　
    <a href="">返回顶部</a>

</body>
</html>

第二部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h3>第4集(分集以TV版为准)</h3>
	<p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>

	<h3 id="five">第5集(分集以TV版为准)</h3>
　	<p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>

    <h3>第6集(分集以TV版为准)</h3>
    <p>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她</p>
</body>
</html>

十三、特殊字符标签

在这里插入图片描述
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	------&nbsp;&nbsp;&nbsp;特殊字符标签&nbsp;&nbsp;&nbsp;------<br/>

	段落标签的格式是：&lt;p&gt;我是段落&lt;p&gt;<br/>

	版权：&copy;
</body>
</html>

十四、注释标签

<!--注释的内容-->

快捷键：ctrl+/

注释的重要性：
1、多写注释是非常好的习惯，团队协作更顺畅。
2、注释是写给队友看的（不怕神一样的队友就怕猪一样的队友），浏览器是不执行的。

十五、路径

路径分为两种：

相对路径：（必会）
绝对路径：（了解）
在实际开发中，一般会用到图片，各司其职，创建一个文件夹images。

绝对路径：

<!--加载本地图片-->
<img src="C:\Users\Lenovo\Desktop\1.jpg" alt="">

<!-- 加载网络图片 -->
	<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F6d%2Faf%2F40%2F6daf402f784738eaf4f95b3288c8b036.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635320897&t=f727a737acf6b99ebf7357afec33dc8b" alt="">

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!--同一路径-->
	<img src="wo.jpg" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!--下一级目录-->
	<img src="images/wo.jpg" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!--上一级目录-->
	<img src="../wo.jpg" alt="">
</body>
</html>

十六、列表标签

无序列表（掌握）格式

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
</ul>

注意：
1、<ul></ul>只能嵌套li，不能嵌套其他标签。（虽然不报错，能够正常显示，但是这样做是不科学的，不建议）；
2、li标签是一个容器，可以容纳任何标签。

有序列表（了解）格式

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

注意：与ul一样

自定义列表（理解）
格式

<dl>
	<dt>名词1</dt>
	<dd>名词1的解释</dd>
	<dd>名称1的解释</dd>
</dl>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>四大名著</h1>
	<ul>
		<li>
			<h3><img src="images\sanguo.jpg" width="80" height="100" alt="">三国演义</h3>
			<p>《三国演义》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
		</li>
		<li>
			<h3><img src="images\hongloumeng.jpg" width="80" height="100" alt="">红楼梦</h3>
			<p>《红楼梦》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
		</li>
		<li>
			<h3><img src="images\shuihuzhuan.jpg" width="80" height="100" alt="">水浒传</h3>
			<p>《水浒传》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
		</li>
		<li>
			<h3><img src="images\xiyouji.jpg" width="80" height="100" alt="">西游记</h3>
			<p>《西游记》故事开始黄巾兵起义，结束于司马氏灭吴开晋，以描写战争为主，反映了魏、蜀汉、吴三个政治集团之间的政治和军事斗争，展现了从东汉末年到西晋初年之间近一百年的历史风云，并成功塑造了一批叱咤风云的英雄人物。</p>
		</li>

	</ul>
</body>
</html>

总结：
在这里插入图片描述

十七、表格

<table>
	<tr>
		<td>单元格内的文字</td>
	</tr>
</table>

注意：

table标签是用来定义一个表格的；
tr是用来定义表格中的行，必须嵌套在table标签中，在tr中有几个td，就有几个单元格，也就是有几列；
表格中没有列的概念。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0" width="400" height="30" align="center">
		<tr align="center">
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
		<tr align="center">
			<td>张三</td>
			<td>18</td>
			<td>男</td>
		</tr>
		<tr align="center">
			<td>李四</td>
			<td>20</td>
			<td>女</td>
		</tr>
	</table>
</body>
</html>

（一）表格属性

注意：

在实际开发中，“三参为零”：boder cellspacing cellpadding ,比如：新浪股票；
align可以设置表格居中对齐，还可以控制单元格中内容的位置，在对应的位置上添加即可。

（二）表头标签
表头标签一般位于第一行。
<th></th> 来代替<td></td>
效果：加粗且居中

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0" align="center" width="500">
		<caption>学生信息</caption>
        
        <tr>
        	<th>姓名</th>
        	<th>年龄</th>
        	<th>性别</th>
        </tr>
        <tr>
        	<td>张三</td>
        	<td>18</td>
        	<td>男</td>
        </tr>
	</table>
</body>
</html>

（三）表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：
（1）必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<thead></thead>：用于定义表格的头部。
（2）位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
<tbody></tbody>：用于定义表格的主体。

（四）表格标题

<table>
	<caption>我是表格标题</caption>
</table>

注意：

caption 标签必须紧随 table 标签之后；
只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table align="center" border="1" cellspacing="0" cellpadding="0" height="300" width="500">
		<caption><h3>小说排行榜</h3></caption>
		<tr align="center">
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="./down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr align="center">
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down.jpg" alt=""></td>
			<td>321</td>
			<td>112</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
	</table>
</body>
</html>

（五）合并单元格

跨行合并 rowspan=“合并的个数”

跨列合并 colspan=“合并的个数”

（1）合并的思想：将多个单元格进行合并的时候，就会有多余的，把多余的单元格（td）删除就可以了！！！删除的个数= 合并的个数-1；

（2）合并的顺序：先上后下，先左后右。

（3）步骤：先根据需求确认是跨行还是跨列合并，先左后右，先上后下，最后删除多余的。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0" align="center" width="500">
		<tr>
			<td>123</td>
			<td>321</td>
			<td rowspan="3">abc</td>
		</tr>
		<tr>
			<td colspan="2">123</td>
			<!-- <td>321</td> -->
			<!-- <td>abc</td> -->
		</tr>
		<tr>
			<td>123</td>
			<td>321</td>
			<!-- <td>abc</td> -->
		</tr>
	</table>
</body>
</html>

十八、表单标签

在HTML中，一个完整的表单通常由三部分：

表单控件（也称为表单元素）
提示信息
表单域
（1）提示信息
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
（2）表单域
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
（3）表单控件

------input控件

-------下拉菜单

<select>
	<option>选项1</option>
	<option>选项2</option>
</select>

注意：
1、select中至少包含一对option；
2、在option 中定义selected =" selected "时，当前项即为默认选中项。

-------文本域
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea></textarea>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table cellpadding="0" cellspacing="0" align="center" width="500">
		<caption><h3>青春不常在，抓紧谈恋爱</h3></caption>
		<tr height="40">
			<td>所在地区</td>
			<td>
				<input type="text">
			</td>
		</tr>
		<tr height="40">
			<td>用户名</td>
			<td>
				<input type="text">
			</td>
		</tr>
		<tr height="40">
			<td>性别</td>
			<td>
				<input type="radio" name="sex"><img src="images/man.jpg" alt="">男
				<input type="radio" name="sex"><img src="images/women.jpg" alt="">女
			</td>
		</tr>
		<tr height="40">
			<td>密码</td>
			<td>
				<input type="text">
			</td>
		</tr>
		<tr height="40">
			<td>出生年月</td>
			<td>
				<select name="" id="">
					<option value="">选择年份</option>
					<option value="">1995</option>
					<option value="">1996</option>
					<option value="">1997</option>
				</select>
				<select name="" id="">
					<option value="">选择月份</option>
					<option value="">1</option>
					<option value="">2</option>
					<option value="">3</option>
				</select>
			</td>
		</tr>
		<tr height="40">
			<td>爱好</td>
			<td>
				<input type="checkbox">学习
				<input type="checkbox">打篮球
				<input type="checkbox">看美女
			</td>
		</tr>
		<tr height="40">
			<td>自我介绍</td>
			<td>
				<textarea name="" id="" cols="30" rows="10"></textarea>
			</td>
		</tr>
		<tr height="40">
			<td></td>
			<td>
				<img src="images/btn.png" alt="">
			</td>
		</tr>
		<tr height="40">
			<td></td>
			<td>
				<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
			</td>
		</tr>
		<tr height="40">
			<td></td>
			<td>
				<h3>我承诺</h3><br/>
			
				<ul>
					<li>年满18岁、单身</li>
					<li>抱着严肃的态度</li>
					<li>真诚寻找另一半</li>
				</ul>
			</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述
代码演示二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table cellspacing="0" cellpadding="0" align="center">
		<caption><h3>会员登录</h3></caption>
		<tr height="30">
			<td>登录账号</td>
			<td><input type="text" value="邮箱/ID/手机号"></td>
		</tr>
		<tr height="30">
			<td>密码</td>
			<td><input type="password" value="密码"></td>
		</tr>
		<tr height="30">
			<td></td>
			<td><input type="checkbox" checked="checked">两周内自动登录</td>
		</tr>
		<tr height="30">
			<td></td>
			<td>
				<input type="image" src="images/login.png">
				<a href="#">忘记密码</a>
			</td>
		</tr>
		<tr height="30">
			<td>其他账号登录</td>
			<td>
				<img src="images/ico1.png" alt="">&nbsp;QQ账号
				<img src="images/ico2.png" alt="">&nbsp;新浪微博
				<img src="images/ico3.png" alt="">&nbsp;百度账号
			</td>
		</tr>
		<tr height="30">
			<td></td>
			<td>
				<a href="03表单2.html#zhuce" target="_blank">还不是会员?立即注册</a>
			</td>
		</tr>
	</table>
</body>
</html>

-------lable标签
label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点，可以提高用户体验。
如何绑定元素呢？

代码演示：

<!--只有点击输入框的时候，输入框才能获取焦点-->
用户名：<input type="text"><br/>

<!-- 如果label标签中只有一个input标签，可以这样写 
	此时点击用户名三个字，输入框也可获取焦点-->
<lable>用户名：<input type="text"></lable><br/>

<!-- 如果label标签中有多个input标签，需要使用for属性，属性值是id值
	此时点击用户名三个字，输入框也可获取焦点-->
	<label for="password">
		用户名：<input type="text">
		密码：<input type="password" id="password">
	</label>

-------表单域
<form action="url地址" method="提交方式" name="表单名称"></form>
1、表单提交数据注意细节：
（1）form 标签是表单标签
（2）action 属性设置提交的服务器地址
（3）method 属性设置提交的方式 GET(默认值)或 POST
2、表单提交的时候，数据没有发送给服务器的三种情况：
（1）表单项没有 name 属性值；
（2）单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器；
（3）表单项不在提交的 form 标签中。
3、GET 请求的特点是：
（1）浏览器地址栏中的地址是：action 属性[+/?+请求参数] 请求参数的格式是：name=value&name=value
（2）不安全
（3）它有数据长度的限制
4、POST 请求的特点是：
（1）浏览器地址栏中只有 action 属性值
（2）相对于 GET 请求要安全
（3）理论上没有数据长度的限制

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
	<form action="http://localhost:8080" method="get">
		
		用户名：<input type="text" name="username" value="张三"><br>
		密码： <input type="text" name="password"><br>
		性别：<input type="radio" name="sex" value="boy">男 
			<input type="radio" name="sex" value="girl">女<br>
		喜欢类型：<input type="checkbox" name="hobit" value="danchui">单纯
		<input type="checkbox" name="hobit" value="wumei">妩媚
		<input type="checkbox" name="hobit" value="shanliang">善良
			<br>
		地区：
			<select name="area" id="">
				<option value="qd">青岛</option>
				<option value="bj">北京</option>
				<option value="jn">济南</option>
			</select>
			<br>
		<input type="submit">
		<input type="reset">

	</form>

	手机号：<input type="text" name="phone">


</body>
</html>