HTML5入门与进阶：深入解析HTML元素与标签-优快云博客

学了好久HTML，现在HTML5出来了，跟自己想的有点不一样，总结一下，以便以后深入研究。

1.HTML (Hyper Text Markup Language) 是用来描述网页的一种标记语言。

2.HTML 文档和 HTML 元素是通过 HTML 标签进行标记的，比如：

HTML 标题：标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落：段落是通过 <p> 标题定义的。

<p>This is a paragraph</p>

HTML 格式化：文本格式化、预格式文本、地址、文字方向、块引用等。比如：

<bdo>           定义文本显示的方向。 
<del>           定义删除文本。 
<strong>        定义强调文本。
<pre>           定义预格式文本。
<blockquote>    定义长引用。

HTML 样式：通过style属性或者link标记引入外部样式表控制。

<link rel="stylesheet" href="/c3.css" />
<p style="background-color:green">This is a paragraph.</p>

HTML 使用超级链接与网络上的另一个文档相连。

1.<a href="链接目标url">链接文本或图片</a>
2.<a href="www.w3school.com" target="_blank">点我!</a>    
  Target 属性：定义被链接的文档在何处显示。target可能的值有： 
    _blank    打开一个新窗口 
    _parent   显示在上一层窗口中（frame）
    _top      显示在最上层窗口 （frame）
    name      显示在名字叫name的窗口中 （frame）
    _self     显示在当前窗口,缺省的属性
3.<a name="tips">Useful Tips Section</a>
  name 属性:用于创建 HTML 页面的书签。
  同一页面：<a href="#tips">Useful Tips Section</a>
  不同页面：<a href="http://w3cshool.htm#tips">Useful Tips Section</a>

HTML 表格

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

HTML 支持有序、无序和定义列表

无序列表:无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表:同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML 表单和输入

表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

<form>
...
  input 元素
...
</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）:当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

单选按钮（Radio Buttons）:当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框（Checkboxes）:当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

3.HTML 元素的语法：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
HTML标签、属性尽量小写（新规范）

例如：

<html>
 <body>
    <p>This is my first paragraph.</p>
 </body>
</html>

解释：html 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。元素内容是另一个 HTML 元素（body 元素）。
body 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。元素内容是另一个 HTML 元素（p 元素）。
p 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：This is my first paragraph。

4.HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：<body bgcolor="yellow"> </body>拥有关于背景颜色的附加信息。
属性总是在 HTML 元素的开始标签中规定。

属性可以自定义。比如：

以前：<a myresponse="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>  新标准：<a data-myresponse="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

注意：为防止造成自定义属性名混乱的问题，而且更为重要的是假如新的HTML标准中需要使用这个自定义属性，而且其含义与你的自定义属性中含义并不相同，这是一个大家都不希望看到的情况。于是在HTML5中给出了解决方案：只要是自定义属性都需要带上"data-"前缀。

5.HTML 注释：可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

<!-- This is a comment -->

6.HTML字符实体：一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。

显示结果 	描述 	实体名称 	实体编号
  	空格 	&nbsp;	&#160;
< 	小于号 	&lt;	&#60;
> 	大于号 	&gt;	&#62;
& 	和号 	&amp;	&#38;

7.HTML 元素与合法的 Doctype

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。以下面这个 <!DOCTYPE> 标签为例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

8.HTML URL 编码

URL （Uniform Resource Locator（统一资源定位符））编码的作用是把字符转换为可在因特网上安全传输的格式。

Web 浏览器通过使用 URL 从 web 服务器上请求页面。URL 是网页的地址，比如：www.w3school.com.cn。

URL 编码： 在因特网上传送 URL 的话，只能使用 ASCII 字符集。由于 URL 经常会包含 ASCII 字符集以外的字符，所以必须对 URL 进行转换。URL 编码所做的事情就是把 URL 转换为有效的 ASCII 格式。在进行 URL 编码时，每一个非安全的 ASCII 字符会被替换为 "%hh" 格式，其中 hh 是两位十六进制数，它对应于该字符在 ISO-8859-1 字符集里的字符编码值。URL 中不能含有空格，URL 编码通常会将空格替换为加号（+）。

http://m546.mail.qq.com/cgi-bin/frame_html?sid=eXSgH4aWgycvZnc4&r=cf8320fb831974072dc931c069e97849

9.HTTP 状态消息

当浏览器从 web 服务器请求服务时，可能会发生错误。从而有可能会返回下面的一系列状态消息：

1xx: 信息
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议

2xx: 成功
200 OK	请求成功（其后是对GET和POST请求的应答文档。）
201 Created	请求被创建完成，同时新的资源被创建。
202 Accepted	供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content	没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content	没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它。

3xx: 重定向
300 Multiple Choices	多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently	所请求的页面已经转移至新的url。
302 Found	所请求的页面已经临时转移至新的url。
303 See Other	所请求的页面可在别的url下被找到。
304 Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused	此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的url。

4xx: 客户端错误
400 Bad Request	服务器未能理解请求。
401 Unauthorized	被请求的页面需要用户名和密码。
402 Payment Required	此代码尚无法使用。
403 Forbidden	对被请求页面的访问被禁止。
404 Not Found	服务器无法找到被请求的页面。
405 Method Not Allowed	请求中指定的方法不被允许。
406 Not Acceptable	服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required	用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout	请求超出了服务器的等待时间。
409 Conflict	由于冲突，请求无法被完成。
410 Gone	被请求的页面不可用。
411 Length Required	"Content-Length" 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed	请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large	由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long	由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416 	服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed	 

5xx: 服务器错误
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
501 Not Implemented	请求未完成。服务器不支持所请求的功能。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable	请求未完成。服务器临时过载或当机。
504 Gateway Timeout	网关超时。
505 HTTP Version Not Supported	服务器不支持请求中指明的HTTP协议版本。

转载于:https://www.cnblogs.com/Cwzhh/archive/2012/01/05/2313500.html