一、基础认知
1.目标：
认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页
2.学习路径：
1）基础概念铺垫（了解）
a.认识网页
问题一：网页由哪些部分组成？
答：文字、图片、音频、视频、超链接
问题二：我们看到的网页背后本质是什么？
答：前端程序员写的代码
问题三：前端的代码是通过什么软件转换成用户眼中的页面的？
答：通过浏览器转换（解析和渲染）成用户看到的网页
b.五大浏览器和渲染引擎
> 浏览器是网页显示、运行的平台、是前端开发必备利器
> 常见的五大浏览器：IE浏览器(edge浏览器)、火狐浏览器（Firefox)、谷歌浏览器(Chrome)，Safari浏览器、欧朋浏览器（Opera)
> 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
> 浏览器出品的公司不同，内在的渲染引擎也是不同的：
> 注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也是不同的。
c.Web标准
> 为什么需要Web标准？
答：不同的浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差
> Web标准的构成
Web标准中分成三个构成
Web标准要求页面实现：结构、表现、行为三层分离
2）HTML初体验
a.HTML的感知
HTML(Hyper Text Markup Language) 中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、视频、音频等内容进行描述
案例：文字变粗案例
体验构建一个网页，需要在网页中显示一个加粗的文字
需要注意的是本人使用的是mac电脑，所以创建文件和修改为html的步骤可能和windows不一样
1）在终端通过touch命令创建一个.txt的文本文件（需要注意的是第一步一定要创建一个.txt的文本文件，不要直接创建一个.html的文件）
2）在这个文本文件里面写东西，此时一定要是一个纯文本文件，而且要在写完东西之后对他的文件后缀进行修改成.html，不要创建好txt文件之后就对他的后缀名进行修改，不然标签样式也是不显示
3）保存文件，修改.txt后缀为.html
此时后缀是.html，前面的图标不是浏览器，仍然是txt，双击打开仍然是网页
刷新图标变成了浏览器图标
b.HTML骨架结构
HTML页面固定结构
> 网页类似于一篇文章：每一页文章内容是有固定的结构的，如：开头、正文、落款等
> 网页中也是存在固定的结构的，如：整体、头部、标题、主体
> 网页中的固定结构是要通过特定的HTML标签进行描述的
c.开发工具的使用
> 为什么要使用VS Code
刚刚通过文本编辑器，如：记事本、完全可以编写网页源代码，但是效率，不忍直视
> 实际开发中，注意开发的效率和便捷性，因此我们会使用一些开发工具
开发工具有很多：Visual Studio Code、 Webstrom、Sublime、Dreamweaver、Hbuilder
> 前端开发神器：VS Code ->速度快、体积小、插件多
> VSCode的使用
c.1
首先需要创建一个文件夹，用于放这个项目的代码
c.2
打开VSCode，然后选择Open，打开刚才创建的文件夹
c.3
此时刚才的文件夹就导入到了VSCode里面，然后可以在里面新建文件夹，新建文件，第一个标志是新建文件，第二个标志是新建文件夹，第三个标志是刷新
c.4点击第一个图标，新建一个.html的文件，在文件里面直接使用!然后回车就可以直接生成HTML骨架
c.5然后修改他的标题和在主体当中添加文字，需要注意的是写一部分代码我们就需要保存一下，VSCode是不会自动保存代码的，修改后没有保存的代码，文件上面是一个圆圈，修改后文件保存，文件上面是一个叉号
d.运行代码，右击选择默认的浏览器，点击进行运行就可以，新安装的是没有这个选项的，我们需要添加一个open in browser的拓展
运行的快捷键是option+B,保存的快捷键是command+S,我们每次进行完修改都需要command+S保存一下，VSCode不会自动保存代码，但是运行的话只需要运行一次，然后在网页进行刷新就可以，不需要每次进行完修改就运行
3）语法规范
a.HTML的注释
> 什么是注释？
在之前上课学习时，同学们会在书写段落间记录内容的注解，方便下次看到此处理解
程序员在写代码时，也会加注释，方便下次看到此处时方便想起功能和含义
> 注释的作用：
为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
> 注释的快捷键
在VSCode中:command+/
HTML中的代码注释效果如下：
b.HTML标签的构成
结构说明：
> 标签由<>、/、英文单词或者字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名
> 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
> 少数标签由一部分组成，我们称之为单标签，自成一体，无法包裹内容<br> <hr>
c.HTML标签的关系
HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）
兄弟关系（并列关系）
二、HTML标签
目标：
学习HTML排版、媒体、链接等基础标签，完成基础网页的开发
学习路径
1.排版标签
1）标题标签
a.场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主体
b.代码：h系列标签
c.语义：1～6级标题，重要程度依次递减
d.特点：
文字都有加粗
文字都有变大，并且从h1->h6文字逐渐减小
独占一行
2）段落标签
a.场景：在新闻和文章的页面中，用于分段显示
b.代码：<p>我是一段文字</p>
c.语义：段落
d.特点
段落之间存在间隙
独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<p>阿卡贝拉（意大利语：Acappella）即无伴奏合唱。其起源于可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器音频示例：阿卡贝拉《千与千寻》</p>
<p>“翻唱“是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌曲，不断在翻唱中突破自己，给大家带来不一样的风格，视频示例：有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>
我们写代码的时候如果文字过多，下面就会有一个滚动条，需要滚动代码来实现
为了方便，不需要滚动的话，可以设置为自动换行，就会在有限的屏幕里面自动换行显示文字和代码（Word Wrap)
3）换行标签
a.场景：让文字强制换行显示
b.代码:<br>
c.语义：换行
d.特点
单标签
让文字强制换行
4）水平线标签
a.场景：分割不同主题内容的水平线
b.代码：<hr>
c.语义：主题的分割转换
d.特点：
单标签
在页面中显示一条水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是文章标题</h1>
<hr>
<p>阿卡贝拉（意大利语：Acappella）即无伴奏合唱。<br>其起源于可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器音频示例：阿卡贝拉《千与千寻》</p>
</body>
</html>
2.文本格式化标签
a.场景：需要让文字加粗、下划线、倾斜、删除线等效果
b.代码：
c.突出重要性的强调语境，就用后面的标签
d.标签语义化
> 实际项目开发中选择标签的原则：标签语义化
即：根据语义选择对应正确的标签，如：需要写标题，就使用h系列标签，如：需要写段落，就使用p标签
> 好处：
对人：好理解，好记忆
对机器：有利于机器解析，对搜索引擎（SEO）有帮助
> 推荐
使用strong、ins、em、del表示的语义更强烈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
<strong>加粗</strong>
<b>加粗</b>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>
</html>
3.媒体标签
1）图片标签
a.场景：在网页中显示图片
b.代码：<img src = "" alt = "">
c.特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置
d.标签属性
属性注意点：
d.1 标签的属性写在开始标签内部
d.2 标签上可以同时存在多个属性
d.3 属性之间以空格隔开
d.4 标签名与属性之间以空格隔开
d.5 属性之间没有顺序之分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<img src="bridge.jpg">
</body>
</html>
e.图片标签的属性详细
e.1 src
主要存放图片的路径
e.2 alt
> 属性名：alt
> 属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本
e.3 title
> 属性名：title
> 属性值：提示文本 当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
e.4 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width或者height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片会变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<img src="bridge.jpg" alt="我是一张图片" title="这是一个title，鼠标悬停的时候显示" width="200">
</body>
</html>
图片路径正常的时候如上图所示，但是当图片加载错误的时候，就会显示一个失败的图片，此时鼠标悬停也能显示悬停文字
2）路径
a.场景
页面需要加载图片，需要先找到对应的图片，页面需要找到图片，也是需要通过路径才能找到
b.路径可分为：
> 绝对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
mac电脑的绝对路径，没有盘符，从/开始
例如：盘符开头：D:\day01\images\1.jpg
完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif
<body>
<img src="/Users/hanvon/Desktop/Code/bridge.jpg">
</body>> 相对路径
概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
同级目录：当前文件和目标文件在同一目录中
代码步骤：直接写目标文件的名字即可
方法一：<image src = "目标图片.gif">
方法二：<image src = "./目标图片的.gif>
<body>
<img src="bridge.jpg" width="200">
<img src="./bridge.jpg" width="200">
</body>
下级目录:目标文件在下级目录中
<body>
<img src="images/dog.jpg" width="200">
</body>
上级目录:目标文件在上级目录中
../是返回到上一级目录，需要注意的是../是返回到上一级目录，而不是返回到她所在的文件及，比如上图../是返回到了Demo这个目录下，而不是page这个文件夹，../之后还可以../page
3）音频标签
a.场景：在页面中插入音频
b.代码：<audio src = "./music.mp3 controls><audio>
c.常见属性：
d.注意点：
音频标签现在支持3种格式：MP3,Wav,Ogg
<body>
<audio src="1.mp3" controls autoplay loop></audio>
</body>4）视频标签
a.场景：在页面中插入视频
b.代码：<video src = "./video.mp4" controls></video>
c.常见属性：
<body>
<video src="001今日课程介绍.mp4" controls autoplay loop width="400"></video>
</body>这样的话是没有办法自动播放的，需要我们添加muted实现，但是这个添加之后是静音播放，只能看视频
4.链接标签
a.场景：点击之后，从一个页面跳转到另一个页面
b.称呼：a标签、超链接、锚链接
c.代码：<a href = "./目标网页.html">超链接</a>
d.特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
<body>
<!-- 第一种：跳转到线上的网址 -->
<a href="https://www.baidu.com">跳转到百度</a>
<br>
<!-- 第二种：跳转到当前项目的网页 -->
<a href="01-标题标签.html">挑战到当前项目的网页</a>
<br>
<!-- 第三种：不知道跳转到哪个网页，直接使用#，后续在进行替换 -->
<a href="#">不知道跳转到哪个网页，后续进行替换</a>
</body>
点击第一个链接可以跳转到百度，点击第二个链接跳转到当前自己项目的页面，点击第三个不进行跳转
e.链接标签的target属性
属性名：target
属性值：目标网页的打开形式
<body>
<!-- 第一种：跳转到线上的网址 -->
<a href="https://www.baidu.com">跳转到百度</a>
<br>
<!-- 第二种：跳转到当前项目的网页 -->
<a href="01-标题标签.html">挑战到当前项目的网页</a>
<br>
<!-- 第三种：不知道跳转到哪个网页，直接使用#，后续在进行替换 -->
<a href="#">不知道跳转到哪个网页，后续进行替换</a>
<br>
<!-- 跳转到新的窗口 可以使用target值去修改 默认是_self，覆盖掉元网页，可以设置为_blank，跳转到一个新的网页 -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
这个样式就是当前这个链接标签页面还存在，百度页面是一个新的页面
综合案例
1.招聘案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>招聘案例</title>
</head>
<body>
<h1>腾讯高级web前端开发招聘</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验，<strong>精通html5/css3/javascript等</strong>web开发技术</p>
<p>熟悉bootstap,vue,angularjs,reactjs等框架</p>
<p>代码风格严谨，能高保真还原设计稿，能兼容各种浏览器</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力</p>
<p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通能力和团队协作能力</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src = "map.jpg">
</body>
</html>实现的效果
2.跳转案例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>今日搜索热词</h1>
<hr>
<h2>1.阿卡贝拉</h2>
<p>阿卡贝拉（意大利语：Acappella）即无节奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="one.html">"阿卡贝拉《千与千寻》"</a></p>
<h2>2.翻唱</h2>
<p>“翻唱“是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌曲，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="two.html" target="_blank">由一种悲伤（翻唱（视频示例）</a></p>
</body>
</html>one.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>阿卡贝拉《千与千寻》- AZA微唱团</h1>
<hr>
<h2>音频</h2>
<audio src="1.mp3" controls autoplay ></audio>
</body>
</html>two.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>有一种悲伤（翻唱）-《A kind of Sorrow》 - Madilyn</h1>
<hr>
<h2>视频</h2>
<video src="../001今日课程介绍.mp4" controls width="300"></video>
</body>
</html>实现的效果是：
进入到index首页，点击第一个超链接，进入到第一个页面，还是在当前页面，覆盖掉原页面，点击第二个链接，进入到第二个页面，是进入到新的页面，不覆盖掉原页面。
三、继续学习HTML标签
列表标签
表格标签
表单标签
语义话标签
字符实体
综合案例
1.列表标签
目标：能够使用无序列表、有序列表、自定义标签，实现网页中列表结构的搭建
学习路径：
1.列表的应用场景
1）场景：在网页中按照行展示关联性的内容，如：新闻列表、排行表、账单等
2）特点：按照行的方式，整齐显示内容
3）种类：无序列表、有序列表、自定义列表
2.无序列表
1）场景：在网页中表示一组无顺序之分的列表，如：新闻列表
2）标签组成：
3）显示特点：
列表的每一项前默认圆点标识
4）注意点：
ul标签中只允许包含li标签
li标签中可以包含任意内容
<body>
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>菠萝</li>
</ul>
</body>
3.有序列表
1）场景：在网页中表示一组有顺序之分的列表，如：排行表
2）标签组成：
3）显示特点
列表的每一项前面默认显示序号标识
4）注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容
<body>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>菠萝</li>
</ol>
</body>
4.自定义列表
1）场景：在网页的底部导航中通常会使用自定义列表实现
2）标签组成：
3）显示特点：
dd前会显示默认缩进效果
4）注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签中可以包含任意内容
<body>
<dl>
<dt>支持</dt>
<dd>支持文档</dd>
<dd>联系我们</dd>
<dd>错误报告</dd>
<dd>系统状态</dd>
</dl>
</body>
2.表格标签
目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建
学习路径：
1.表格的基本标签
1）场景：在网页中以行+列的单元格的方式来展示数据，如学生成绩表
2）基本标签：
3）注意点：
标签的嵌套关系：
table>tr>td
<body>
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小哥哥真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
</body>
2.表格的相关属性
1）场景：设置表格基本展示效果
2）常见相关属性：
3）注意点：
实际开发时针对样式效果推荐使用CSS
直接给table设置属性，不需要给td或者tr设置属性
<body>
<table border="2" width = "600" height = "300">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小哥哥真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
</body>
3.表格标题和表头单元格标签
1）场景：在表格中表示整体大标题和一列小标题
2）其他标签
3）注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部，用于替换掉td
<body>
<table border="1">
<caption><h2>学生成绩表</h2></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小哥哥真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
</body>
4.表格的结构标签（了解）
1）场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
2）结构标签：
3）注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
<body>
<table border="1">
<caption><h2>学生成绩表</h2></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小哥哥真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</tfoot>
</table>
</body>设备了表格的结构标签和没有设置效果是一样的，但是对于浏览器来说效果更高
5.合并单元格
1）场景：将水平或垂直多个单元格合并成一个单元格
2）合并单元格的步骤
a.明确合并哪几个单元格
b.通过左上原则，确定保留谁删除谁
上下合并---->只保留最上的，删除其他
左右合并-----> 只保留最左的，删除其他
c.给保留的单元格设置：跨行合并(rowspan)或者夸列合并（colspan)
注意点：
只有同一个结构标签中的单于格才能合并，不能跨结构标签合并（不能跨：thead 、tbody、tfoot)
<body>
<table border="1">
<caption><h2>学生成绩表</h2></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小哥哥真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
</body>
3.表单标签
使用场景：网页的登陆、注册和搜索等
目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建
学习路径：
1.input标签
1）场景：在网页中显示收集用户信息的表单效果，如：登陆页、注册页
2）标签名：input
input标签可以通过type属性值的不同，展示不同效果
3）type属性值：
需要注意的是:
radio标签在一个的情况下，选择之后就不能进行取消，checkbox标签选择之后可以取消，file文件，一点直接可以跳转进行文件的选择
<body>
<!-- 写什么就显示什么 -->
文本框: <input type="text">
<br>
<br>
密码框: <input type="password">
<br>
<br>
单选框: <input type="radio">
<br>
<br>
多选框: <input type="checkbox">
<br>
<br>
上传文件: <input type="file">
</body>
4）input系列标签-文本框
a.场景:在网页中显示输入单行文本的表单控件
b.type属性值:text
c.常用属性:
<body>
用户名: <input type="text" placeholder="请输入用户名">
<br>
<br>
密码: <input type="password" placeholder="请输入密码">
</body>用户输入的时候提示文字消失，显示用户输入的东西，当用户删除完框里面的内容，文本内容没有时，就显示提示文字
5）input系列标签 - 单选框
a.场景：在网页中显示多选一的单选表单控件
b.type属性值：radio
c.常用属性值：
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
<body>
性别: <input type="radio" name="sex" checked> 男
<input type="radio" name = "sex"> 女
复选框: <input type="checkbox" checked>
</body> 
男女只能同时选中一个，不能两个同时选中
6）input系列标签-文件选择
a.场景：在网页中显示文件选择的表单控件
b.type属性值：file
c.常用属性:
<body>
上传文件: <input type="file" multiple>
</body>
7）input系列标签-按钮
a.场景：在网页中显示不同功能的按钮表单控件
b.type属性值：
c.注意点：
> 如果需要实现以上按钮功能，需要配合form标签来使用
> form使用方法：用form标签把表单标签一起包裹起来即可
<body>
账号： <input type="text">
<br>
<br>
密码： <input type="password">
<br>
<br>
<input type="submit">
<input type="reset">
</body>
submit标签和reset标签上面都自动带有字，而且不需要和js交互就能实现提交给服务器的功能和重置的功能，但是需要配合form来使用，不然我们不知道需要提交哪些内容，需要form来控制提交的范围
<body>
<form>
账号： <input type="text">
<br>
<br>
密码： <input type="password">
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>普通的按钮是没有文字显示的，我们可以通过value属性来给按钮上面添加文字，所以如果想要修改提交的默认文字，我们也可以设置value属性来修改文字
2.button按钮标签
1）场景：在网页中显示用户点击的按钮
2）标签名：button
3）type属性值（同input的按钮系列)
4）注意点：
> 谷歌浏览器中button默认是提交按钮
> button标签是双标签， 更便于包裹其他内容：文字、图片等
<body>
<form>
账号： <input type="text">
<br>
<br>
密码： <input type="password">
<br>
<br>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">我是普通按钮，没有任何功能</button>
</form>
</body>button和刚才的input标签type属性功能一样，同样也需要放到form标签中去使用
3.select下拉菜单标签
1）场景：在网页中提供多个选择项的下拉菜单表单控件
2）标签组成：
> select标签：下拉菜单的整体
> option标签：下拉菜单的每一项
3）常见属性：
selected:下拉菜单的默认选择
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>广东</option>
<option selected>深圳</option>
</select>
</body>没有设置默认选择的时候，第一个是默认选择项，设置了默认选择以后，设置的默认选择项是展示项
4.textarea文本域标签
1）场景：在网页中提供可输入多行文本的表单控件
2）标签名：textarea
3）常见属性：
> cols:规定了文本域内可见宽度
> rows:规定了文本域内可见行数
4）注意点：
> 右下角可以拖拽改变大小
> 实际开发时针对样式效果推荐用CSS设置
<body>
<textarea>
</textarea>
</body>直接使用textarea标签就可以
5.label标签
1）场景：常用于绑定内容与表单标签的关系
2）标签名：label
3）使用方法：
a.
> 使用标签label把内容（如：文本）包裹起来
> 在表单标签上添加id属性
> 在label标签的for属性中设置对应的id属性值
b.
> 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
> 需要把label标签的for属性删除即可
<body>
<!-- label标签主要还单选标签配合使用，实现点击文字的时候能够选中按钮 -->
性别：
<!-- 第一种方式 -->
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<!-- 第二种方式 -->
<label><input type="radio" name="sex"> 女</label>
</body>
实现的效果，我点击文字，前面的圆圈也会被选中
4.语义话标签
目标：能够认识开发中常用的没有语义布局标签(div、span）和有语义的布局标签
学习路径：
1.没有语义的布局标签
1）场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
> div标签：一行只显示一个（独占一行）
> span标签：一行可以显示多个
<body>
这是div标签
<div>这是div标签</div>
<div>这是div标签</div>
这是span标签
<span>这是span标签</span>
<span>这是span标签</span>
</body>
文字加上这两个标签和没有加标签效果是一样的
2.有语义的布局标签（了解）
1）场景：在HTML5版本中，推出了一些有语义的布局标签供开发者使用
2）标签：
3）以上标签显示特点和div一致，但是比div多了不同的语义
<body>
<header>网页头部</header>
<header>网页导航</header>
<header>网页底部</header>
<header>网页侧边栏</header>
<header>网页区块</header>
<header>网页文章</header>
</body> 
5.字符实体
目标：能通过字符实体在网页中显示特殊符号
学习路径：
1.HTML中的空格合并现象
1）场景：如果html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
2.常见字符实体
1）场景：在网页中展示特殊符号效果时，需要使用字符实体来代替
2）结构：&英文
3）常见的字符实体：
<body>
这是一个文本，
我们很幸运
</body>
<body>
这是一个文本， 我们很幸运
</body>
如果我们只是单纯的对文字加入空格，或者是对文字换行写，都是不起效果的，这个时候需要加入字符
<body>
这是一个文本， 我们很幸运
</body> 
6.综合案例
1.学生信息表
<body>
<!-- caption是不加粗的，th是自带加粗效果的 -->
<table border="2" width = "600" height = "300">
<caption><h2>学生信息表</h2></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</table>
</body>实现的效果是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的使用</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form>
昵称： <input type="text" placeholder="请输入昵称">
<br>
<br>
性别： <label><input type="radio" name="sex" checked>男</label> <label><input type="radio" name = "sex">女</label>
<br>
<br>
所在城市：
<select>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<br>
<br>
婚姻状况：<label><input type="radio" name="status" checked>未婚</label> <label><input type="radio" name="status">已婚</label>
<label><input type="radio" name="status">保密</label>
<br>
<br>
喜欢的类型：<label><input type="checkbox" checked>可爱</label>
<label><input type="checkbox" checked>性感</label>
<label><input type="checkbox">御姐</label>
<label><input type="checkbox">萝莉</label>
<label><input type="checkbox">小鲜肉</label>
<label><input type="checkbox">大叔</label>
<br>
<br>
个人介绍：
<br>
<br>
<textarea></textarea>
<dl>
<dt><strong>我承诺</strong></dt>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</dl>
<input type="checkbox">我同意所有条款
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
</form>
</body>
</html>实现的效果为：
