什么是html？
html是什么呢？html是一套规则，浏览器认识的规则。
html文件是后缀为.html的文件。
要想学习前端？我们必须要了解以下三个基础知识。
- html
- javascript
- css
我们可以把html比喻成一个裸体的美女~，那么css（样式）就可以比喻成漂亮的衣服，javascript可以比喻成这个人的思想和行为，通过以上三种知识，我们就可以完成90%以上的网站前端开发。
要做一个网站，以上三种语言必不可少，觉得亚历山？别担心，so easy，因为学渣都觉得很简单（本人学渣）。
废话不多说下面开始介绍本文重点：html(20个标签)，对于htl只要学习这20个标签，其他有用到再扩展即可，学会这20个标签你就可以完成html页面下图页面的开发，是不是比背英文单词还简单。
html在开发实践中的应用
- 静态html页面
- 开发后台程序：
- 写Html文件（充当模板的作用）
- 数据库获取数据，然后替换到html文件的指定位置（Web框架）
html运行？
- 找到文件路径，直接浏览器打开
编写Html文件
创建html文件
鼠标右键，新建xxxx.txt文本，修改后缀为xxxx.html，至此一个html文件就创建成功，我们可以直接双击，该页面即可显示。
一个标准的页面html页面格式如下：
<--html页面基本格式-->
<!DOCTYPE html> <--html默认表示html5，DOCYTPE表示页面遵循某种规范--> <html lang="en"> <--一个页面只能有一个html标签，lang表示遵循某种语言，网站上的翻译是通过识别lang="en"来进行翻译的--> <head> <meta charset="UTF-8"> <--charset="UTF-8"表示页面编码格式--> <title>Document</title> <--页面标题，整个head头部只有此标签可以被用户查阅--> </head> <body> </body> </html>
- title标签，标签表示是网站的标题
- head标签，标签表示是网站的头部
- body标签，表示网页的内容
- 代码的注释： <!-- 注释的内容 -->
标签分类
标签分为自闭和标签和主动闭合标签 ，格式如下：
- 自闭合标签
1、<meta />
2、<meta>
ps:推荐采用第一种
- 主动闭合标签
<div></div>
head内部标签
- meta标签： 编码，跳转，刷新，关键字，描述，IE兼容
- IE兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- 编码：<meta charset="UTF-8" /> ====>指定页面编码，自闭和标签，最后的 “ / ” 可以省略，但不建议省略。
- 跳转和刷新：<meta http-equiv="Refresh" Content="5; Url=https://www.baidu.com" />、<meta http-equiv="Refresh" Content="5" />
- 关键字：<meta name="keywords" content="汽车，汽车之家，汽车网，汽车图片，新闻，评测" />
- 描述：<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片" />
ps：以上比较常用的点为1，2 ，其他用到查询即可只需有印象。
- title标签 ====> 用来描述页面标题
<title>博客园</title>
- <link /> 搞图标，欠
- <style />欠
- <script> 欠
ps：head的内部标签一般外部看不到，只有title标签是外部可查阅的
body内部标签
form标签
form表单属性，主动闭合标签
<form action="/index/" method="GET" enctype="multipart/form-data"> </form> <-- 1、action="/index/"表示要传送给哪个url 2、method="GET"表示以什么方式传送，GET参数放在url头部，POST参数放在身体 3、exctype="multipart/form-data" 选填，在需要传送文件时，需要填写该参数，该参数表示把文件一点一点的传送给后台 -->
input系列
input标签 checked属性： -radio单选框：checked="checked"表示默认选中，不可多选 -checkbox复选框：cheked="checked"表示默认选中，可以多选 value属性： -文本框：表示文本框输入的内容 -submit按钮：表示按钮名称 -button按钮：表示按钮名称 -radio单选框：表示数据传输键值对的value，ps:value="1" value="2" -checkbox复选框：表示数据传输键值对的value， ps：value="1" value="2" key：["1","2"] name属性：标签名称，数据传输中键值对的key -text文本框：表示文本框的名字 -radio单选框：同名的radio，互斥，ps：name="sex" 则name都为sex表示不能同时选中 -checkbox复选框：名字相同，checkbox会放入同一个list数组中， ps：name="hobby" -file文件：数据传输中键值对的key，ps：file属性依赖于form表单的enctype="multipart/form-data"，表示把文件一点一点的传送给后端 type属性： -type="text" <!-- 输入文本框 --> -type="password" <!-- 输入文本框，内容隐藏 --> -type="submit" <!-- 表单提交按钮 --> -type="buttion" <!-- 按钮 --> -type="redio" <!-- 单选框 --> -type="checkbox" <!-- 复选框 --> -type="file" <!-- 文件传输 --> -type="reset" <!-- 重置按钮 -->
textarea标签
<textarea name="textarea" cols="30" rows="10"></textarea> <!-- -textarea：多行文本 -name：数据传送中键值对的key -cols:显示的函数，超出则换行 -rows：显示的列数，超出则出现滚动条 -style中的属性值: ps：font-size：扩展，此字段与cols和rows字段相对，如果font-size越大，则边框越大 width：设置多行文本宽度 height：设置多行文本高度 font-size大小不影响边框大小 -->
select标签
<select name="CityValue" id="" size="15" multiple="multiple" > <optgroup label="福建省"> <option value="1" selected="selected">泉州</option> <option value="2" selected="selected">福州</option> </optgroup> <optgroup label="四川省"> <option value="3">南充</option> <option value="4">成都</option> <option value="5">汶川</option> </optgroup> </select> <!-- select -name：表示选择框的名称 -size：表示下拉列表的长度 -multiple：表示是否支持多选 optgroup label：表示分组名称，无法选择 ps：可以不写此标签，用的比较少，如上面代码一样 option： -value：传送到后端value值 ps：如果select的multiple属性值为multiple，则传送到后端的值为数组[value1，value2] -->
a标签
- 锚
- 跳转
<head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ height:600px; width:100%; } </style> </head> <body> <a href="#i1">第一章节</a> <a href="#i2">第二章节</a> <a href="#i3">第三章节</a> <div id='i1' class='content'>1</div> <div id='i2' class='content'>2</div> <div id='i3' class='content'>3</div> </body> <--href='#某个标签的ID' 标签的ID不允许重复-->
<a href="http:www.baidu.com"> <--href填写地址-->
其他标签
- 图标： > < ===>空格，大于，小于号
- p标签，段落 <p></p>
- br，换行，br标签是个行内标签<br />
标签：
- 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
- 行内（内联）标签： span（白板）
- 标签之间可以嵌套
- 标签存在的意义：定位，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列 ====> h1,h2......h6 和 h1最大
- div，块级标签，白板
- span，行内标签，白板
img标签
src ==> 图片路径
alt ==> 图片加载出错时显示
title ==> 鼠标放置在图片上时显示说明：郁金香
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" title="郁金香"/>
列表标签
<ul><li>1</li> <li>2</li> <li>3</li> </ul> <ol><li>a</li> <li>b</li> <li>c</li></ol> <dt>第一章</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> <dt>第二章</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd>
- 表格 ==> 标准格式如下:
colspan = '' ==> 表示占多少行
rowspan = '' ==> 表示占多少列
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
<table border="1"> <thead> <tr> <th>主机名</th> <th>ip</th> <th>port</th> </tr> </thead> <tbody> <tr> <td colspan="2">主机1</td> <td rowspan="2">192.168.1.1</td> <td>9000</td> </tr> <tr> <td>主机1</td> <td>主机1</td> <td>主机1</td> </tr> <tr> <td>主机1</td> <td>主机1</td> <td>主机1</td> </tr> </tbody> </table>
label
<--用于点击文件，使得关联的标签获取光标--> <label for="username">用户名：</label> <input id="username" type="text" name="user" />
20个标签
以上为HTML的20个左右的标签，可以满足日常开发的使用。