HTML基础知识
入门
HTML全称：HyperText Markup Language。李爵士创立了HTML，离开公司后创办了一个组织——W3C委员会。 W3C根据浏览器的实际情况总结制定HTML规范文档。
HTML有很多版本，从HTML4.01到XHTML再到HTML5，版本类型由HTML文件头部的DOCTYPE声明，比如HTML5的声明为<!DOCTYPE html>。这里注意我们现在常说的H5并不是指html5，H5是能运行在微信上的网页的统称，和实现技术无关。XHTML、HTML4.01、HTML5都可以。
在HTML5中，声明的DOCTYPE一定要大写，html可以小写。即你可以写成，或者是。我们知道一个完整的html5页面应该是这样
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html> 但是事实上，如果你的head里边没有内容的话，head标签是可以不写上去的。这是符合规范的。具体你可以自己查文档。不过就算你不写，浏览器是会帮你补上的。不但是head，body你同样可以不写，浏览器也会自动补全。但是如果你写了注释的话，注释不会被放在body里边，而是放在html里边，body和head外边。不只如此，html标签同样是一个可省略的标签。
div不可以写在head里边，如果你写了它也不会报错，浏览器会将其自动放到body里边。head里边只放文档属性。
html没有块级元素和内联元素的区别，比如div我们认为它是块级元素，但是事实上你可以用div{display:inline}使它表现为内联元素。所以HTML只用来定义这是什么东西，比如告诉你这是一个section，只管内容不管样式。样式用css来修改。
html里边所有的特殊符号都要转义，比如&需要用&来表示。所有的换行都会被压缩成一个空格。
对于自学的小伙伴们如果想要找练手的可以上Dirbble找一些设计师作品仿。
常用标签
a-----anchor
p-----paragraph
hr----水平分割线
br----line break 换行
ul----unordered list
ol----ordered list
li----list item
dl----discription list 描述列表 一般用来描述键值对dt-dd
dt----description term(词语) 描述
dd----description definition 对描述的定义（解释）
div---divide 划分
span--横向划分
kbd---keyboard 键盘
/*vh（单位，类似于px）---viewport height (与屏幕等高)*/ HTML中声明编码格式可以用<meta charset="utf-8">，也可以用<meta http-equiv="content-type" content="text/html;charset=utf-8">，当然，推荐前者，后者印象中是一个历史遗留问题。equiv–等价物。
noscript
noscript标签用于在当前页面不支持script的时候展示。如果想要看到效果可以尝试禁用浏览器的script。步骤如下：
1. 按F12进入开发者模式，点击右上角的那三个点，进入setting。如下图所示。
2. 找到debugger，选中禁用script。
img
img标签是可替换标签，里边不写内容，内容靠外部src请求，因此它的表现与src关联的资源图片自带的属性有关。当然，我们可以使用img width=100 height=100 src="..." alt="..."来指定图片的宽高属性。注意这里指定的是属性不是内联样式。事实上，在实际开发中，我们不会直接指定元素属性，而是通过css修改元素的宽高。css的优先级高于属性，但是低于内联样式。因为img是可替换标签，很多人认为它是块级元素，但其实它虽然比较特殊，依旧是inline内联元素。
contenteditable
contenteditable表示内容是否可编辑，比如你用<div contenteditable="true">hello</div>展现在浏览器上虽然是字符串hello，但是这个可以由用户直接在浏览器上修改。用户的不会被保存到源码中，当你再一次进行刷新的时候依旧会显示hello。
b strong em i
b(blod) strong em(emphasis) i(italic) 区别：b和strong默认表现形式相同，都是加粗显示。i和em的默认表现形式相同，都是斜体显示。但区别在于前者是一种物理状态，后者是一种逻辑状态。strong和em的区别在于strong表示内容的重要，而em表示加重语气。
iframe
iframe标签用来在当前页面中嵌套另一个html页面。frameborder属性取值为1时（默认值），会为当前iframe绘制边框。我们一般将它的值设为0，不用边框。<iframe src="#" frameborder="0"></iframe>iframe标签还有一个重要的属性——name。name属性一般用于与a或者form标签连用，比如
<iframe name=wcy src="#" frameborder="0"></iframe>
<a target=wcy href="http://qq.com">QQ</a> 点击QQ的时候会在iframe里边打开qq的主页。
iframe的src属性里边一般为网址或者是相对路径。
a
对于a标签，常用的属性target有四个值，target=_blank表示在空页面打开。target="_self"表示在当前页面打开。target="parent"表示在父页面打开，这个页面由谁引出来的谁便是它的父页面。target="_top"最初由谁引进来的就在那个页面打开。
使用a标签要看情况，有的时候就算它是一个button的样式，但是它点击之后会进入一个页面然后进行下载，那它就应该是一个a标签。
a标签的download属性。<a href="#" download>下载</a>。如果http响应为content-type: application/octet-stream那么浏览器就会以下载的形式接受这个请求而不是在页面上展示。如果没有写content-type的话用a标签的download属性可以强制执行下载。
a标签的href属性
1. //qq.com 表示无协议的绝对地址，当前是什么协议跳转的就是什么协议
2. ./xxx.html 相对地址
#xxx 跳转到当前页面的该锚点指向的部分，浏览器地址栏上的路径会加上#xxx。锚点不会发起请求，锚点的作用是页面跳转。
?name=xxx 自动发送get请求。
3. 伪协议<a href="javascript:;">QQ</a>，javascript后边直接写js语句，可以执行。href里边基本都是协议，或者file或者http或者其它，除了这个伪协议。主要的作用就是让a标签点击之后不要跳转。a标签不可以没有href，里边什么都不写的话会刷新当前页面，用#会跳到当前页面开头，所以为了实现这种效果我们用伪协议。
a标签的页面跳转使用的是get请求，form标签默认也是get请求，但是我们一般用form实现post请求，因为form表单一般用来上传数据。form标签也有target，规则与a标签相同。
form
form表单中如果没有提交按钮就无法提交数据。除了form外HTML没有提供其他的方法上传数据。
我们用form表单的post方法上传用户名和密码如下
<form action="" method="post">
<input type="text" placeholder="name" name="name">
<input type="password" name="password" >
<input type="submit" value="">
</form> 输入用户名和密码然后在浏览器查看表单发起的请求我们可以看到下图
其中第一个红框表示的是请求的第四部分遵循的语法，第二个红框标注的是请求的第四部分Form Data。123是我输入的用户名，wer是我输入的密码，中间用&符号连接。如果用户名输入的是中文的话中文会被转换为相应的十六进制编码，每个字节前边加百分号。如下图。
这里如果我们用的是get协议我们的用户名和密码会直接发送到查询参数中，在路径中显示，而不会出现在请求的第四部分。
password虽然是用来输入密码的但是这个密码只是让人看不见，实际上只要是http协议依旧是可以在开发者工具中看见的。
post请求我们可以手动加查询参数比如action="users?xxx=123"，这样提交表单的时候会带上查询参数。但是我们没有办法让get请求出现第四部分。
如果form表单中的button没有声明type="button"，那么它默认是submit按钮，效果等同于<input type="submit">。但是如果写了type="button"就只是一个普通的按钮。input和button的区别在于input是一个空标签而button不是。
<input type="checkbox" id="xxx"><label for="xxx">点我选中</label>我们都知道checkbox是多选框，但是选择的时候只能勾选那个小框未免太单调了，将label的for和input的id搭配使用使得我们点击文字的时候也能够选中。当然，还有另外一种方法也可以实现这个效果，讲input标签用label包裹住，像这样<label><input type="checkbox">点我选中2</label>。注意上边两段代码里边都缺了一个必须的属性——name。如果没有name属性的话，值是提交不上去的。当然，如果没有value属性的话，就没有值了。
对於单选按钮radio，两个radio button有同一个name的话就只能单选，否则是可以多选的。
select下拉列表，主要有5个属性值
<form action="" method="post">
<select name="number" multiple>
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" disabled>3</option>
<option value="4" selected>4</option>
</select>
<input type="submit" value="submit">
</form>- -代表值为空
- 1，2和4都是可以选择的
- 3设为disabled不可选
- 4 selected是默认选中的选项
- select后边加multiple表示这是可以多选的
textarea可以随便拉大小，但是如果真的让它这样随便拉的话很容易打乱布局，所以我们一般会用css将其长宽固定。<textarea style="resize:none" cols="30" rows="10"></textarea>用cols和rows可以手动设置宽高，但是不准。直接用css像素设置即可。
table
table里边的直接子元素。这四个元素在浏览器中渲染的顺序不会改变，就算你把tbody放到thead前边，展示的时候也会先展示thead里边的内容。tbody如果没写的话浏览器渲染的时候会自动补上，但是thead和tfoot不会，因为浏览器不知道它应该放到哪里，所以就直接都放在tbody里边。
<table>
<colgroup></colgroup>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>colgroup需要与col连用,用法如下。width表示的是那一列的宽度。但是现在一般不用，因为有css。
<colgroup>
<col width="100">
<col width="50">
<col width="150">
</colgroup>除了上边列出来的之外还有三个特别重要的
tr----table row
th----table header 表的标题
td----table data 数据其中th和td主要是为了html的语义化。
table的border可以合并，用collapse。
下边是一个完整的table
<table border="1" style="border-collapse:collapse">
<colgroup>
<col width="100">
<col width="50">
<col width="150">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>瑶瑶</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>花花</td>
<td>9</td>
<td>女</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>一些不常用的标签
<meter min="200" max="500" value="350">350 degrees</meter>