目录
1. 什么是 HTML ？HTML 的作用
2. HTML 常见标签
2.1 注释标签
2.2 标题标签：h1 - h6
2.3 段落标签：p
2.4 换行标签：br
编辑
2.5 格式化标签
2.6 图片标签：img
2.7 超链接标签：a
2.7.1 外部链接：href 引用其他网站的地址
编辑
2.7.2 锚点链接: 可以快速定位到页面中的某个位置
2.8 表格标签
2.9 列表标签
2.9.1 无序列表
2.9.2 有序列表
2.9.3 自定义列表
2.10 表单标签
2.10.1 form 标签
2.10.2 input 标签
3 HTML 的综合练习——在线简历
1. 什么是 HTML ？HTML 的作用
HTML 的全称是 "Hyper Text Markup Language"，超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
本篇文章使用 Visual Studio Code 来写 HTML 。
在 vscode 中，使用 html : 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>Document</title>
</head>
<body>
</body>
</html>默认设置：
语言：英语
字符集： UTF - 8
浏览器：edge
html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题
上述四对标签中，标签之间的关系，可以用父子标签与兄弟标签来描述。head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)，title 是 head 的子标签。head 是 title 的父标签。head 和 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>我的第一个 html 网页</title>
</head>
<body>
你好 世界
<p></p>
欢迎来到新世界
</body>
</html>
和程序相关的一切，都不能是中文，否则会出现错误。只有注释才能写中文。
2. HTML 常见标签
2.1 注释标签
注释不会显示在界面上。目的是提高代码的可读性。语法格式：
<!-- 注释 -->
......
<body>
你好 世界
<!-- 你好世界！！我来拉！！-->
欢迎来到新世界
</body>
......注释的原则
要和代码逻辑一致
尽量使用中文
不要传递负能量
2.2 标题标签：h1 - h6
标题标签有六个，数字越大，字体越小：
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
2.3 段落标签：p
p 标签表示一个段落。其语法格式为：
<p> 这是一个段落 </p>
注意事项：
p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版
html 内容首尾处的换行, 空格均无效
在 html 中文字之间输入的多个空格只相当于一个空格
html 中直接输入换行不会真的换行, 而是相当于一个空格
2.4 换行标签：br
br 是 break 的缩写，表示换行。br 是一个单标签(不需要结束标签) 。br 标签不像 p 标签那样带有一个很大的空隙。<br/> 是规范写法。不建议写成 <br>。
在 cvcode 中，手动给文章分段分行，但在网页中并不会显示分段分行，这就需要上一节与这节用到的段落标签 p 以及换行标签 br 了。
自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。
HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。
事实上，每一个HTML文档都是一种静态的网页文件，
这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，
只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。
HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，
从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]
万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。
作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），
所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。
超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3] 
但在使用段落标签以及分行标签之后：
自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。</br>
HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。</br>
事实上，每一个HTML文档都是一种静态的网页文件，</br>
这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，</br>
只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。</br>
HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，</br>
从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。</br>
HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]
<p></p>
万维网（world wide web，简称www）上的一个超媒体文档称之为一个页面（外语：page）。</br>
作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），</br>
所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。</br>
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。</br>
超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3]</br>
2.5 格式化标签
加粗：strong 标签 和 b 标签
倾斜：em 标签 和 i 标签
删除线：del 标签和 s 标签
下划线：ins 标签 和 u 标签
<em>超市</em> <strong>大甩卖!</strong> <b>全场商品</b> 不要<del>9.9折</del>,全场<ins>一折起！</ins>
<hr>
2.6 图片标签：img
img 标签必须带有 src 属性，表示图片的路径。
img 标签的其他属性：
alt：替换文本。当文本不能正确显示的时候, 会显示一个替换的文字。
title：提示文本。鼠标放到图片上, 就会有提示。
width/height：控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。
border：边框, 参数是宽度的像素。 但是一般使用 CSS 来设定。
注意：
1. 属性可以有多个, 不能写到标签之前。
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行。
3. 属性之间不分先后顺序。
4. 属性使用 "键值对" 的格式来表示。
关于目录结构: 对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好。
1) 相对路径：以 html 所在位置为基准, 找到图片的位置。
同级路径：直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: ../image/1.jpg
2) 绝对路径：一个完整的磁盘路径, 或者网络路径。例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
代码示例：
<!-- 相对路径 -->
<img src="mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>
<hr>
<!-- 绝对路径 -->
<img src="C:/Apps/html/mountain.jpg" title="山川湖泊" alt="这是一张风景图" width="600px" height="400px"><br>
<hr>
如果把图片放到 Apps 这个文件夹中，与 html 这个文件同级，想读路径该如何写呢？
<!-- 相对路径 -->
<img src="../mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>如果是网络图片呢？
<!-- 网络地址 -->
<img src="https://upd10.sogoucdn.com/static/sogou/images/logo.png?v=1" title="sogou" alt="搜狗图标" width="400px" height="100px"><br>
2.7 超链接标签：a
2.7.1 外部链接：href 引用其他网站的地址
href：必须具备, 表示点击后会跳转到哪个页面。
target：打开方式，默认是 _self。如果是 _blank，则用新的标签页打开。
<h2>编程导航网站</h2>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.sogou.com/" target="_blank">搜狗</a>
<a href="https://cn.bing.com/" target="_blank">必应</a>
<p></p>
2.7.2 锚点链接: 可以快速定位到页面中的某个位置
<a href="#mountain">hello</a>, <a href="#sogou">world</a>
<hr>
<!-- 网络地址 -->
<a href="https://www.sogou.com/" target="_blank">
<img id = "sogou" src="https://upd10.sogoucdn.com/static/sogou/images/logo.png?v=1" title="sogou" alt="搜狗图标" width="400px" height="100px"><br>
</a>
<!-- 相对路径 -->
<img id = "mountain" src="../mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>2.8 表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域
table 包含 tr , tr 包含 td 或者 th。
<table border="1" width ="400px" height = "200px">
<thead>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
性别
</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>莉丝</td>
<td>45</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>26</td>
<td>男</td>
</tr>
</tbody>
</table>
如果信息相同，想要合并单元格，HTML 也提供了语法支持：
合并单元格：
跨行合并: rowspan="n"
跨列合并: colspan="n"
步骤
1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格
<table border="1" width ="400px" height = "200px">
<thead>
<th>
姓名
</th>
<th>
年龄
</th>
<th>
性别
</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">28</td>
<td>男</td>
</tr>
<tr>
<td>莉丝</td>
<td>女</td>
</tr>
<tr>
<td colspan="2">王五</td>
<td>男</td>
</tr>
</tbody>
</table>
2.9 列表标签
2.9.1 无序列表
无序列表，unorderedlist。
<h3>西天取经(无序列表)</h3>
<ul>
<li>唐三藏</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<li>白龙马</li>
</ul>
2.9.2 有序列表
有序列表，orderedlist。
<h3>事务具备以下四大特性(有序列表)</h3>
<ol>
<li>原子性</li>
<li>持久性</li>
<li>隔离性</li>
<li>一致性</li>
</ol>
2.9.3 自定义列表
自定义列表，dl，definitionlist，dt 则是 definitionterm 的缩写，而 dd 为 definitiondescription 的缩写。
<h3>自定义列表</h3>
<dl>
<dt>企鹅们的日常活动</dt>
<dd>吃鱼</dd>
<dd>睡觉</dd>
<dd>打豆豆</dd>
</dl>
2.10 表单标签
表单是让用户输入信息的重要途径。
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签。
表单控件: 输入框, 提交按钮等. 重点是 input 标签。
2.10.1 form 标签
描述了要把数据按照什么方式，提交到哪个页面中。关于 form 需要结合服务器 & 网络编程来进一步理解。后面再详细研究。
2.10.2 input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框。
type(必须有)，取值种类很多多, button, checkbox, text, file, image, password, radio 等。
name：给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。
value：input 中的默认值。
checked：默认被选中. (用于单选按钮和多选按钮)
maxlength：设定最大长度
<form action="https://www.baidu.com" method="get">
<!-- 文本框 -->
姓名：<input type="text" id="username" name="name"> <br>
<!-- 密码框 -->
密码：<input type="password"> <br>
<!-- 单选框 -->
性别：<input type="radio" name="sex" value="男">男    
<input type="radio" name="sex" value="女">女   
<input type="radio" name="sex" value="第三性">第三性别
<!-- 复选框 -->
爱好：<input type="checkbox">散步   
<input type="checkbox">打太极   
<input type="checkbox">听音乐   <br>
<!-- 普通按钮 -->
<input type="button" value="按钮"><br>
<!-- 头像 -->
头像：<input type="file"><br>
<!-- 选择框 -->
大学：<select>
<option>北京大学</option>
<option selected="selected">清华大学</option>
<option>陕西师范大学</option>
<option>中山大学</option>
</select><br>
备注：<textarea rows="7" cols="100">
</textarea><br>
<!-- 提交按钮 -->
<input type="submit" value="提交"><br>
<!-- 清空按钮 -->
<input type="reset" value="清空"><br>
</form>
<hr>
3 HTML 的综合练习——在线简历
