HTML语法
目录
一、前端三剑客
- HTML：超文本标记语言, 主要用来作文本容器和定位
- CSS：渲染HTML标签
- JS：为HTML做动画效果
二、HTML基础知识
1. html文档树
2. 标签的定义
- 由一对尖括号包裹的单词构成，例：<body>
- 不区分大小写，不能以数字开头
- 标签分为两部分：开始标签和结束标签，中间放被标记的内容，例：<h1>content</h1>
- 自闭和标签：<hr/> <input/> <img/>
- 标签之间可以*嵌套
3. 标签的属性
- 通常以键值对形式出现，例如 name=“alex”
- 属性只能出现在开始标签和自闭和标签中
- 属性名需要小写，属性值必须用双引号或单引号包裹
- 如属性名和属性值完全一样，单写属性名即可，例: readonly
三、HTML基础标签
1. 标准声明标签
Declare the page follow the stadard of w3c
<!DOCTYPE html>
<!--
// Show the standard of the page
alert(window.top.document.compatMode)
-->
2. Head头部标签
<meta>
<meta name="keywords" content="xxx">
<meta name="description" content="xxx">
<!--Wait for n seconds then skip to the url-->
<meta http-equiv="Refresh" content="n";URL="xxx">
<meta http-equiv="content-Type" charset="utf8">
<!--The page can be showed in the standard of IE7-->
<meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7">
Other
<!--Show the name of website in the bar-->
<title>title</title>
<!--Show the logo of website in the bar-->
<link rel="icon" href="path">
3. 常用标签
all labels can be divided between block and inline
<!--the title label; the range of n is one to six-->
<hn>....</hn>
<!--Possesse one row and have the some gap to neighboring rows-->
<p>...</p>
<!--Automatically write in next row-->
<br/>
<!--This is a block tags, possessing one row-->
<div>...</div>
<!--This is a inline tags,having nothing-->
<span>...</span>
<b>...</b> <!--blod font-->
<em>...</em> <!--Italic-->
<strike>...</strike> <!--underline-->
<del>...<del> <!--draw a line in the word of middle-->
<hr/> <!--cross line-->
<sub>...</sub> <!--subsript-->
<sup>...</sup> <!--superscript-->
<!--alt: Showing when the image is invalid; title: Showing when the mouse is above the image-->
<img src="path" width="n px" height="m px" alt="str" title="str">
<!--"_blank" means that open a new target for the url-->
<a href="url" target="_blank" title="str">...</a>
<a href="#id_name">...</a>
4. 列表标签
<!--unorderde list-->
<ul>
<li>...</li>
</ul>
<!--ordered list-->
<ol>
<li>...</li>
</ol>
<!--Category-->
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
5. form表单标签
In those label transmitting data, the attribution of name is the key of the data transmitted
<!--<form action="url" method="post">-->
<form action="url" method="get">
<p> <input type="text"></p>
<p> <input type="passwordt"></p>
<p> <input type="submit" value="str"></p>
<p> <input type="buttom" value="str"></p>
<p> <input type="checkbox"></p>
<p> <input type="radio" value="str"></p>
<p> <input type="radio" value="str"></p>
<p><input type="file"></p>
<p><input type="reset"></p>
<select name="str" multiple="multiple" size=int>
<option value="str">...</option>
<option value="str">...</option>
<optgroup>
<option value="str">...</option>
</optgroup>
</select>
<textarea rows="n" cols="m">...</textarea>
<label for="name">...</label>
<input id="name" type="text">
</form>
6. 表格标签
Attribution of table: cellspacing cellpadding
Attribution of td or th: rowspan colspan(To merge many rows or columns)
<table border="1">
<tr>
<td>...</td>
<th>...</th>
</tr>
</table>
四、HTML特殊符号
<!--Space-->
 
<!--Copy right-->
©
<!--"<"-->
<
<!--">"-->
>
五、HTTP协议
超文本传输协议，这个协议规定了浏览器和服务器之间相互通信的规则
特点
- 基于请求、响应；根据不同请求，响应不同的数据
- HTTP是无状态协议，FTP是有状态协议（无状态协议意味着每次请求的是独立的，每次请求都需要重新建立连接）
URL（统一资源定位符）
协议名://域名:端口/路径, 例： http://www.baidu.com:80/...
请求协议
- get请求
- 没有请求体，提交的数据放在url之后
- 数据大小在1k内
- post请求
- 有专门请求体来存放数据
- 数据大小没有限制
- 会用unicode编码来处理中文
请求体内容
- refer：显示转跳网页前的网页地址
- content-type：表单的数据类型
- Content-length：请求体的长度
- kye=value：表单输入数据，key是表单字段名称
响应码
- 200：请求成功
- 404：请求资源不存在
- 500：请求资源找到，但服务器崩了，无法返回数据
- 302：重定向，服务器给浏览器放回了一个新的url，让浏览器重发一次请求
- 304：告诉浏览器可以从缓存资源中获取相应请求内容，不用重新发起请求