html介绍

浏览器上网的过程(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>
效果就是点击用户名光标就进入输入框内。