Introduction to HTML
前端页面的构造像网络协议一样是分层的，每一层考虑不同的问题：
- 结构（树形）骨架：HTML
Hyper Text（超文本）：利用超链接把不同文本连接在一起，形成网状文本，也就是一个Graph。爬虫的工作就是在遍历这个Graph。 - 美化格式化：CSS
- 交互逻辑：JavaScript
HTML由标签构成，类似的排版标记语言还有markdown、epub、mobi、azw。
网页一开始出现的时候，每个浏览器所解析的HTML不一样：要么标签不一样，要么一样的标签，实现方式不一样。直到2007年才有了统一的标准。2011年制定了HTML5.
HTML真的是语言吗？
前端的HTML和CSS相当于后端的SQL、网络通信中的各种协议，它们具有一定的语法格式和语义，因此被称之为语言。但由于没有判断和循环，无法作为逻辑与思想的载体，只能起到标记作用，本质上不能算是一种语言。
<!-- DOCTYPE指文档类型 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
在【开始标签中可以定义属性】。属性是由【等号连接的】键值对构成，值需要用引号(单双都可)引起来。但是用得少，因为大部分属性用CSS来设置。
一个html文件由标签的嵌套组成，所以结构是一棵树，称之为DOM。
标签的分类
- Block-level element：自己一定要占满一行。
- <div>表示一块儿矩形区域
- Inline-element：可以接在别的元素右边。
- <span>
注意：<div>、<span>标签没有任何渲染作用，只起到一个包裹作用，便于被CSS、JS选中。
文件标签
-
The <head> tag
The head tag contains some metadata about the main content:- 指明字符集，便于浏览器正确解析
- authors description of the page
- page title
- 引入CSS、JS文件
-
The <body> tag
即浏览器的显示窗口。Body标签里面一般是三段式：header（导航栏、轮播图）、中间主要内容、footer（版权声明、联系方式、相关链接）。
常用标签
-
文本标签：和文字有关的标签
- 标题：<h>
尽管h标签能起到装饰渲染的效果（加粗、改变字体大小，自动换行），但是也不能把他们作为css的替代。主要是用来提高程序可读性。还有其他类似的标签，没有任何样式，就为增加语义。 - 换行标签
<br> - 段落：<p>
换行 + 段间距 - 水平分割线
<hr>
- 标题：<h>
-
列表：<ul>、<ol>
列表中的每一项用<li>表示。 -
链接：<a href="url ">
- href 属性， “href” stands for hypertext reference。它的值可以是一个网络链接，也可以一个资源的相对路径，还可以是一个某个标签的id值。
- 把 href 用 element id 赋值，就可以用于跳转到当前页面的某一部分。并且跳转到指定区域之后，URL里面也会有这个区域的id，当你把这个URL发送给别人时，别人也可以直接打开到指定区域，从而起到了书签的作用。
- <a> tag既是block也是inline element。因为有时需要把块儿级元素：一块区域、一张图片、一段文字等变成可点击的状态，比如logo。
- target属性，属性值设置为_blank的时候，点击链接会打开一个新窗口，而不是覆盖当前窗口。如果不设置，默认值就是_self，表示在当前窗口打开新窗口。
-
图片标签：<img src="" alt="" />
- src属性用于指定图片路径。
- width、height属性用于设置图片大小。设置宽度和高度属性的好处：可以让浏览器预留位置，否则网页在图片的加载过程中就会不停地跳跃。并且如果有些图片加载不出来，那么网页的布局就会被打乱。
表单标签
采集用户输入的数据，以便与服务器进行交互。
<form action=“url” method=“”>
<表单元素>
</form>
<form>标签把表单的所有部分包裹在一起，设置提交URL，提交方式（get/post）。表单项中的数据要想被提交必须指定其name属性，本质就是提交的参数的名字。
get也可以提交数据，比如搜索引擎的关键字。
利用get和post提交数据的区别：
get：数据显示在地址栏：大小有限制、不安全。
post：把数据封装在请求体中：没有大小限制，安全。
表单元素
- 输入标签
<input type=“” label=“” />
type属性取值的不同就决定了input标签的不同功能和外观
- 明文输入框：text
<input type="text" value="姓名">：设置默认值。 - 密文输入框：password
使用label标签给输入框起名，for属性和id属性必须一致。
<label for="username">账号</label>
<input type="text" name="user" id="username">
- 单选框：radio
默认情况下单选框不会互斥, 要想单选框互斥就必须增加name属性，并且设置一样的值。
要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性。 - 多选框：checkbox
如果想互斥，必须要有相同的name属性 - file：文件选择框
- 按钮
普通按钮：button
图片按钮：image
重置按钮：reset
提交按钮：submit
- 下拉列表
<select>
<option>列表数据</option>
<option>列表数据</option>
<option selected="selected">列表数据</option>
</select>
- 多行输入框
用于评论、留言区需要输入大段文字的地方。
<textarea cols="30" rows="10"> </textarea>
更详细的文章：表单标签<form>的使用
