1 HTMl简介
HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。
HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
-
什么是超文本？
超文本里面可以存放音频、视频、超链接、文本
-
什么是标记？
列： <a>新闻</a> # <a> </a> 称为标记，左边开始标记，右边结束标记；整体称为超链接 -
发开环境
市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。
-
文件名后缀规范
文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“l”。
2 sublimetext安装
第一步：打开官网(http://www.sublimetext.com/)
第二步：下载sublimetext
第三步：安装（一直下一步对勾下一步就好）
visual studio code
3 标签介绍
HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。
- 那什么是标签呢？
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。
2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。
4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。
注意：不是所有标签都支持互相嵌套。
- h1~h6（识别网页中的标题）
- p（段落标签）
- strong/em（文本内容强调的标签/类型）
- hr/br（文档分割线/文本之间换行）
- ul/ol/dl（列表....）
- li（列表....)
- div/span（网站布局划分标签）
- table（网站中一些表格的信息）
- a（超链接）
- img（图片标签，展示图片）
- form（与服务器进行交互）
- input（文本输入）
- textarea（多行文本输入框）
- select（下拉列表）
4 html的文档结构
HTML文件的结构：一个HTML文件是有自己固定结构的。
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
让我们来解释一下上面的代码：
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
<html></html>称为根标签，所有的网页标签都在<html></html>中。<head></head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。- 在
<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。
5 注释
无论我们学习什么编程语言，一定要重视的就是注释，我个人一直把注释看成是代码之母。 HTML中注释的格式:
<!--这里是注释的内容-->
注意： 注释中可以直接使用回车换行。
并且我们习惯用注释的标签把HTML代码包裹起来。如：
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
HTML注释的注意事项：
- HTML注释不支持嵌套。
- HTML注释不能写在HTML标签中。
6 标签的使用
1 主要标签
- title：网站的标题
- style：定义内部的样式
- link：引入外部的样式表
- body：网站的显示内容
2 标签介绍
-
h1~h6：网页中的标题
<h3>xxx</h3> -
p：定义段落
<p>xxx</p> -
strong：文本强调标签
<strong>xxx</strong> -
em：斜体标签
<em>xxx</em> -
hr：文档分割线
<hr>：分割线，独占一行 -
br：文本之间的换行
xxx<br> -
b：加速标签
-
ul/ol/li：列表<ul></ul>：无序列表 <ol></ol>：有序列表 <li></li>：无序有序列表的子标签-符号表示示例：
<ul> <li>我是无序列表1</li> <!-- 默认li标签有·号--> <li>我是无序列表2</li> <li>我是无序列表3</li> </ul> <ol> <li>我是有序列表5</li> <li>我是有序列表6</li> <li>我是有序列表7</li> </ol> -
dl/dt/dd：定义列表<dl></dl>：定义列表 <dl> <dt>帮助中心</dt> <dd>购物指南</dd> <dd>订单查询</dd> </dl> -
div/span：网站的划分标签
-
table：网站中的一些表格信息
<tr> </tr>：行 <th> </th>：单元格表头 <td> </td>：单元格数据 <caption> </caption>：标题示例：
<table border="1" cellspacing="0"> <!-- 表格 --> <caption>商品清单</caption> <tr> <!-- 行 --> <th>产品名称</th> <!-- th单元格表头 --> <th>品牌</th> <th>数量</th> <th>入库时间</th> </tr> <tr> <!-- 行 --> <td>电视机</td> <!-- td单元格数据 --> <td>小米</td> <td>200</td> <td>2020-02</td> </tr> </table> table属性： border="1"：拥有边框线 cellspacing="0"：拥有实心的边框线 th属性： colspan="2"： 横向合并2个单元格 td属性： rowsapn="3"：纵向合并3个单元格 -
a：超链接
<a>xxx</a> a参数： href="http://www.baidu.com"：链接地址 href="mailto:[email protected]"：邮件地址 title="点击一下，了解更多"：鼠标停留提示 target="_self/_black"：当前窗口打开链接/新窗口打开链接 href="javascript:void(0);"：阻止a标签的默事件 href="#top"：与<p id="top">xxx</p>标签联动跳转 -
img：图片标签
可以单设置一个width或者height 浏览器自动等比例显示 <img src="images/11.jpg" width="200" height="200" alt="加载失败" title="瞅你的损色"> img参数： src="网络地址"：可使用网络上的图片链接地址 src="11.jpg"：当前文件下导入 src="images/11.jpg"：images文件下导入 src="../11.jpg"：当前目录下的上级文件夹下导入 src="C:\Users\Administrator\Desktop\modular\code\images"：绝对路劲导入 width="xxx"：宽度 height="xxx"：高度 alt="加载失败"：图片加载失败时提示作用 title="hello"：鼠标停留提示 -
form：与服务器交互
<form action="http://www.baidu.com" method="post"> form参数： action="http://www.baidu.com"：提示哪个服务器 action=""：默认提交到当前的html文件路径 method="port"：行为方式port或者是get -
input：文本输入
<input type="text" placeholder="用户名"> 男：<input type="radio" name="sex" checked="checked"> 女：<input type="radio" name="sex"> web前端：<input type="checkbox" checked="checked"> python开发：<input type="checkbox"> input参数： name=""：组建健值sex='用户输入内容' type="text"：文档 type="password"：密码 type="radio"：单选框（二选一） checked="checked"：默认选项 type="checkbox：多选框；后跟checked为默认值 type="submit"：登录/注册 按钮 value="注册"：可修改名 type="reset"：重置按钮（整个form表单的内容都会重置） value="重置"：可修改submit文本名；也可设置input框中的默认值 placeholder="用户名"：输入框的提示 -
button按钮
没有任何事件的按钮，空白按钮。 <button>按钮</button> -
textarea：多行文本输入框
<form> <p> <textarea rows="10" cols="40"></textarea> </p> </form> textarea参数： rows="10"：行数10 cols="40"：列数40 -
select_option：下拉列表
<form> <p> <select name="class"> <option value="a">HTML</option> <option value="b">CSS</option> <option selected="">JavaScript</option> <option>Vue</option> </select> </p> </form> <p> <<<<<<< HEAD <select multiple="multiple"> <option value="a">HTML</option> <option value="b">CSS</option> </select> </p> ======= <select multiple=""> <option >HTML</option> <option>Vue</option> </select> </p>
849ca34ff44f42a9c7235f5ab646403b96e53003
select 属性：
name：下拉列表单选框
multiple：下拉列表多选框
option：每一项数据
option属性：
selected：默认参数
- label：字符串关联文本框
```html
<form>
<p>
<label for="username">用户名：</label>
<input type="text" id="username">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" id="pwd">
</p>
</form>
for & id：二者属性值需一致，可有关联性。（鼠标点击用户名，光标自动跳转到文本框）
-
div：容器，可嵌套包裹内容
<body> <!--相当于一个容器，可以嵌套很多层包裹内容--> <div> mjj <div> ljj </div> </div> </body> -
i : 斜体标签，一般用于矢量图标的应用
-
html
<html lang="en"> <!--页面会当做英文页面，提示翻译此页面--> ... </html>
3 文本样式标签
<b></b>：加粗<i></i>：斜体<u></u>：下划线<s></s>：删除线<sup></sup>：上标<sub></sub>：下标
7 html特殊符号
参照表：(http://tool.chinaz.com/Tools/HtmlChar.aspx)
<h2>
《 举头望明月 》
</h2>