浏览器上网的过程(http请求与响应)
-
打开浏览器，输入url地址，浏览器解析url(本地缓存和DNS等省略)。
-
url中指定协议时按照指定的协议交互，没有指定默认http协议交互，根据url发送http请求，如果服务器端返回以301之类的重定向，浏览器根据相应头中的location再次发送HTTP请求。
-
浏览器收到服务端返回的HTTP响应头信息、服务端发送文档内容。
-
据解析的头信息设置必要的数据，如cookie，编码，语言等声明的处理。
-
然后进行页面解析渲染，渲染后漂亮的页面就出现了。
html语言
-
超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。
-
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
html结构
<!DOCTYPE html> <!--告诉浏览器使用什么样的html或者xhtml来解析html文档-->
<html lang="en"> <!--html文件声明开始-->
<head> <!--文档的头部，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。-->
<meta charset="UTF-8">
<title>Title</title> <!--定义网页标题，在浏览器标题栏显示。-->
</head>
<body> <!--可见的网页主体内容-->
</body>
</html>
DOCTYPE
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
-
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
-
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
head内常用标签
meta标签
meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
name属性
#主要用于描述网页，与之对应的属性值为content，content中的内容
主要是便于搜索引擎机器人查找信息和分类信息用的。
#关键词:
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的
时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录
中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能
找到咱们的网站。
例：
<meta name="keywords" content="数据恢复软件,硬盘分区工具,
系统备份,DiskGenius,数据恢复,硬盘分区,移动硬盘分区,备份软件,
一键备份">
#描述
例：
<meta name="description" content="DiskGenius，专家级数据
恢复软件，集数据恢复、硬盘分区、系统备份还原等多种功能于一身的
超级工具软件">
http-equiv属性
#相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以
帮助正确地显示网页内容，与之对应的属性值为content，content中
的内容其实就是各个参数的变量值。
#刷新和跳转
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="2;Url=http://www.jd.com" /> #指定2秒之后跳转页面至另一个网页
#设置http信息内容
<meta http-equiv="content-Type" charset=UTF8">
告诉浏览器接收文本内容编码方式为utf8格式
#X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同
学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候
微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，
如下的代码如果使用IE8的时候他会以IE7的模式运行。
非meta标签
<title>博客园</title> #设置显示标题内容
<link rel="icon" href="http://www.jd.com/favicon.ico"> #设置网页头部图标
<link rel="stylesheet" href="css.css"> #导入css
<script src="hello.js"></script> #导入js
body内常用标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
div与span
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要
通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意
义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一
行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
图形标签img
#基本格式：
<img src="redmeat.png" alt="红烧肉">
#可选属性
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
超链接标签a
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一
个网页，也可以是相同网页的不同位置，还可以是一个图片，一个电子
邮件地址，一个文件，甚至是一个应用程序。
<a href="链接" target="_blank" >点击</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.html"）
锚 URL - 指向页面中的锚（href="#top"） #回到页面顶端
列表标签
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空
心圆圈)、square(实心方块)]
例：
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>: 有序列表
<li>:列表中的每一项.
例：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
例：
<dl>
<dt>河北省</dt>
<dd>保定市</dd>
<dd>石家庄</dd>
</dl>
table标签
表格：
<table>
<tr> #表格的一行
<td>标题</td> #使用th可加黑加粗内容
<td>标题</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
#<tr>和<th>和<td>
<tr>: table row
<th>: table head cell
<td>: table data cell
#属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
表单标签form
功能: 表单用于向服务器传输数据，从而实现用户与web服务的交互。
表单属性
-
action:表单提交的目的地址(URL),一般输入web服务器中表单处理函数或者脚本的地址。
-
method:表单提交方式，常用post，表示将表单输入结果作为文档发送。在有些特殊情况下可能需要get方法，表示将表单结果作为URL报头的一部分提交，例如百度搜索会看到较多。
-
enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。
指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值
常用表单示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<p>用户: <input type="text" name="username" placeholder="用户"></p>
<p>密码: <input type="password" name="pd"></p>
<p>爱好: <input type="checkbox" name="hobbies" value="basketball"> 篮球
<input type="checkbox" name="hobbies" value="football"> 足球
<input type="checkbox" name="hobbies" value="baseball"> 棒球
</p>
<p>性别: <input type="radio" name="sex" value="m"> 男
<input type="radio" name="sex" value="f"> 女
</p>
<p><input type="button" value="按钮"></p>
<p><input type="file"></p>
<p><input type="reset"></p>
<p>籍贯:
<select name="jiguan">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="hubei" selected>湖北省</option>
<option value="hunan">湖南省</option>
</select>
</p>
<input type="submit">
</form>
</body>
</html>
input接收文本输入
#要求用户在表单中输入信息，可使用<input>标签，该标签必须位于
<form></form>标签内。
格式：<input type="" name="" value="">
type属性：指定要显示哪种表单元素
常用type的有：
text 文本输入框
password 密码输入框 (只是在视觉上的保护--密码传输时没有加密或其它保护措施)
radio 单选框 #checked默认被选中
checkbox 多选框 #checked默认被选中
submit 提交按钮，点击后将表单数据打包发送给server
button 按钮，和submit不同点击无任何时间，需要配合js使用。
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：
1 请求方式必须是post
2 enctype="multipart/form-data"
name和value属性：
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
size属性：
指定文本框的宽度大约为多少个字符，如果使用不是等宽字体，则输入
框的宽度随用户输入字符而异。如果输入太长，不能全部显示在文本框中，大多数浏览器将向左滚动文本。
maxlength属性：
指定文本框允许用户输入的最大字符数。如果用户输入超过指定的长度，多余的字符将不会显示。
size和maxlength只能用于type="text"或type="password",因为其它输入类型（复选框，单选按钮）的大小是固定的。
select标签
示例：
<select name="jiguan">
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="hubei" selected>湖北省</option>
<option value="hunan">湖南省</option>
</select>
属性：
<select> 下拉选标签属性
name:表单提交项的键.
size：选项个数 没有指定默认为1
multiple：multiple
<optgroup>为每一项加上分组
<option> 下拉选中的每一项 属性：
value:表单提交项的值.
selected: selected下拉选默认被选中
多行文本框
示例：
<p>
<textarea name="resume" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
<!--placeholder：占位字符。-->
</p>
#rows和cols属性控制输入框文本的宽度和高度。
label标签
#定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
例：
<form method="post" action="">
<label for=“username”>用户名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
效果就是点击用户名光标就进入输入框内。