目录
学前准备
1）百度上的关于操作系统上的使⽤统计
百度统计流量研究院
2）谷歌浏览器下载
谷歌浏览器下载
3）浏览器的使⽤技巧——WEB前端助⼿(FeHelper) 前端⼈员的神器
可参考网站上的安装说明进行安装（后缀crx改为zip =》 直接拖入更多工具/拓展程序中）
4）工具介绍
SublimeText（高级记事本显示代码高亮，推荐）
Notepad++
aptana
EditPlus
VSCode（轻量级集成开发环境，推荐）
Hbuilder
WebStorm
一、HTML简介
1.1 HTML是什么
HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是 超⽂本标记语⾔
HTML不是⼀种编程语⾔，⽽是⼀种 标记语⾔
超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成
⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm
html⽂档也叫 Web⻚⾯ ，其实就是⼀个⽹⻚，html⽂件⽤ 编辑器打开 显示的 是⽂本 ，可以⽤⽂本的⽅式 编辑它
如果⽤ 浏览器打开 ，浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚
1.2 HTML发展历史
1.3 HTML⽂档类型的设定
HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：
(2) XHTML ，其基本结构如下：
(3) HTML5 ，其基本格式如下
二、HTML基础语法
2.1 HTML基本结构
HTML⽂件的扩展名为 .html 或者 .htm
HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息（包括标题，字符集等），“主体”部分提供⽹⻚的具体内容
HTML是由： 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 <html>...</html>标签包裹
HTML标签（标记）的语法是由 < 和 > 括起来（比如head标签，body标签~）。
HTML标签有两种： 双标签 ： <标签名>....</标签名> 和 单标签 ： <标签名 />（双标签： <h1>....</h1>，单标签： <hr />）
HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>
HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果
2.2 注释
2.3 HTML注释
html⽂档代码中可以插⼊注释，注释是对代码的说明和解释
<!-- 这就是唯⼀的⼀种HTML注释了 -->
2.4 HTML中HEAD头部设置
head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置
在head中常包含如下⼦标签：
三、HTML文本标签
3.1 常用文本标签如下
<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗（搜索引擎会对此强调的内容进行收录，优先展示）
<cite></cite> 作品的标题（引⽤）
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
3.2 举例
<!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标题标签</h1>
<h2>H2标题标签</h2>
<h3>H3标题标签</h3>
<h4>H4标题标签</h4>
<h5>H5标题标签</h5>
<h6>H6标题标签</h6>
<u>u下划线标签</u><br/>
<del>del删除线标签</del><br/>
<b>b加粗标签</b><br/>
<strong>strong强调加粗标签</strong><br/>
<i>i斜体标签</i><br/>
<em>em强调斜体标签</em><br/>
<br/>
<cite>清明上河图</cite>是我国十大传世名画之一 <br/><br/>
水分子：H<sub>2</sub>O <br/>
2<sup>4</sup>=16
</body>
</html>
四、HTML格式化标签
4.1 常见格式化标签
<br/> 换⾏
<p>...</p> 换段
<hr /> ⽔平分割线
列表：
<ul>...</ul> ⽆序列表
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> ⾃定义列表
<dt>...</dt> ⾃定义列表头
<dd>...</dd> ⾃定义列表内容（会有自动缩进）
<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化（两个标签之间自动换行）
<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。（两个标签之间不换行，无法指定宽、高、尺寸）
4.2 举例
<!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>HTML格式化标签</h1>
<hr>
<div style="width: 600px">
<p>
据今日俄罗斯电视台（RT）援引当地媒体报道，以色列情报和特殊使命局（又称摩萨德）已获得中国新冠肺炎疫苗，并带回开始进行“研究”。
</p>
<p>
以色列媒体12频道（Channel 12）周一报道称，最近几周，摩萨德将中国疫苗带到了以色列。目前还不清楚该情报机构究竟是如何获得这种疫苗的。
</p>
</div>
我的爱好：
<ul>
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ul>
<ul type="circle">
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ul>
<ol>
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ol>
<ol type="a">
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ol>
<dl>
<dt>问：HTML是什么</dt>
<dd>答：超文本标记语言</dd>
</dl>
<div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span>
</body>
</html>
4.3 小技巧
1）快速生成多个列表项
五、HTML图像标签
5.1 简介
在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />（也可以将图片作为背景，插入图片）
其中img标签中常⽤属性如下：
src： 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：⽂字提示属性（鼠标放置上去的提示信息）
width：图⽚宽度（宽/高只指定一个的话，另一个会根据比例自适应变动）
height：图⽚⾼度
border：边框线粗细
5.2 举例
<!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>HTML图片img标签</h1>
<img src="./images/11.jpg" alt="图片1" width="600">
<img src="./images/12.jpg" alt="图片2" width="600">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下" width="200">
</body>
</html>
5.3 理解绝对路径与相对路径
绝对路径：
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)
例如：
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。
相对路径：
相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录）
例如：
在Web开发中，"/"代表Web应⽤的根⽬录。
"./" 代表当前⽬录,
"../"代表上级⽬录。这种类似的表示，也是属于相对路径。
5.4 小技巧
1）快速生成标签
六、HTML超链接标签
6.1 超级链接标签a
格式：
<a href="链接⽬标url地址">显示⽂字</a>
a标签属性
href: 必须，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认，点击回退可以回到上一个页面）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（鼠标放上去，可以看到详情）
锚点链接（可以通过id定位，在页面内跳转）
定义锚点： <a id="自己定义的名称"></a> 以前使⽤的是 <a name="自己定义的名称"></a>
使⽤锚点： <a href="#a1">跳到a1处</a>
6.2 举例
<!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>HTML实例-超级链接a标签</h1>
<!-- 锚点超级链接 -->
<a href="#girl1">美女1</a><br/><br/>
<a href="#girl2">美女2</a><br/><br/>
<!-- 普通超级链接 -->
<a href="https://ww.baidu.com" title="百度链接">百度(本窗口打开)</a><br/>
<a href="https://ww.baidu.com" target="_blank">百度(新窗口打开)</a> <br/><br/>
<a href="./Demo.html" target="_blank" >图片标签实例</a><br/><br/>
<a id="girl1"></a>
<h4>美女1</h4>
<img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/>
<a id="girl2"></a>
<h4>美女2</h4>
<img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/>
</body>
</html>
七、HTML表格标签
7.1 表格中的标签
th与td相比，th默认有 加粗居中 效果
7.2 举例
1）简单的表格
<!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>HTML实例-表格标签</h1>
<table>
<!-- 表头 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<!-- 第一行数据 -->
<tr>
<td>1001</td>
<td>同学1</td>
<td>21</td>
<td>1班</td>
</tr>
<!-- 第二行数据 -->
<tr>
<td>1002</td>
<td>同学2</td>
<td>15</td>
<td>1班</td>
</tr>
<!-- 第三行数据 -->
<tr>
<td>1003</td>
<td>同学3</td>
<td>15</td>
<td>1班</td>
</tr>
</table>
</body>
</html>
7.3 小技巧
快速生成表格
八、HTML表单标签（重要）
8.1 form 表单标签
1）form标签常⽤属性：
- *action属性:提交的⽬标地址(URL)
- *method属性:提交⽅式:get(默认)和post
- get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
- post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
- enctype:提交类型
- target: 在何处打开⽬标 URL。
- name:属性为表单起个名字.在HTML5中使⽤ id 代替。
2）举例
<!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>HTML实例-表单标签：form, input, select, textarea</h1>
<form action="a.html" method="GET">
姓名：<input type="text" name="uname"/> <br/><br/>
密码：<input type="password" name="upass"/> <br/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
8.2 input 表单项标签input定义输入字段
1）input常用属性
⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。
*type属性:表示表单项的类型:值如下:
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果（如果有默认值，则会恢复默认值，而不是清空的意思）
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
HTML5新增属性 email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域
- max 规定允许的最⼤值
- min 规定允许的最⼩值
- step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
- value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条
- max 规定允许的最⼤值
- min 规定允许的最⼩值
- step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
- value 规定默认值
⽇期选择器 Date pickers
- date - 选取⽇、⽉、年
- month - 选取⽉、年
- week - 选取周和年
- time - 选取时间（⼩时和分钟）
- datetime - 选取时间、⽇、⽉、年（UTC 时间）
- datetime-local - 选取时间、⽇、⽉、年（本地时间）
search ⽤于搜索域，⽐如站点搜索或 Google 搜索
color 颜⾊选择
8.3 select 标签创建下拉列表
1）常用属性
name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
2）举例
<!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>HTML实例-表单标签：form, input, select, textarea</h1>
<form action="a.html" method="GET">
学历：<select name="education" id="">
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3" selected>硕士</option>
<option value="4">博士</option>
</select>
</form>
</body>
</html>
8.4 textarea 多行的文本输入区域
1）常用属性
name :定义名称,⽤于存储⽂本区域中的值。
cols ：规定⽂本区内可⻅的列数。
rows ：规定⽂本区内可⻅的⾏数。
disabled： 是否禁⽤
readonly： 只读
...
默认值是在两个标签之间
2）举例
无value属性，而是在标签开始结束中间添加内容，如图：
8.5 button 标签定义按钮
可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
8.6 fieldset 元素可将表单内的相关元素分组（圈框）
disabled属性：定义 fieldset 是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
8.7 legend – 标签为 fieldset 、 figure 以及 details 元素定义标题
8.8 optgroup html5标签-- 定义选项组
此元素允许您组合选项，允许进行分组
8.9 datalist html5标签-- 定义可选数据的列表
与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
九、HTML框架标签
1）常用属性：
src：规定在 iframe 中显示的⽂档的 URL
name：规定 iframe 的名称
height：规定 iframe 的⾼度。
width：定义 iframe 的宽度。
frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
2）举例
<!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>HTML框架标签：iframe</h1>
<ul>
<li><a href="f.html" target="myframe">表单标签实例</a></li>
<li><a href="e.html" target="myframe">表格标签实例</a></li>
<li><a href="c.html" target="myframe">图片标签实例</a></li>
</ul>
<iframe src="f.html" name="myframe" frameborder="1" width="80%" height="500"></iframe>
</body>
</html>
十、HTML5多媒体标签
10.1 新增布局标签
将一些标签的含义更加具体化，这样可以快速区分页面中的各个部分，提高检索内容的速度
10.2 新增的input type属性
这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示
更多新增type 参考w3c
10.3 新增的input属性
10.4 多媒体标签（了解）
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不⽀持播放
</audio> <br/>
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不⽀持播放
</audio> <br/><br/>
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不⽀持视频播放
</video> <video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了，不⽀持视频标签
</video> <br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />
8952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
