web前端人生——html

存在即合理
爲什麼存在這麼多瀏覽器——主要有利潤可尋。

瀏覽器內核分爲兩部分——渲染引擎和JS引擎。渲染引擎：負責取得網頁的內容（html，xml、圖像等等）、整理信息（例如加入css等），以及計算網頁的顯示方式，然後輸出至顯示器或打印機。不同的瀏覽器的內核對同一網頁的語法解釋會有所不同，所以渲染效果也不相同。

JS引擎則是解析JavaScript語言，執行JavaScript語言來實現網頁的動態效果。

瀏覽器內核更傾向於指渲染引擎。常見內核爲：IE內核，firefox內核，safari內核（webkit），chrome內核（chromium/blink），opera內核(presto)。

移動瀏覽器：使用最高爲webkit內核。

web標準——針對多個瀏覽器對同一個網頁內容顯示相同效果，規定了web標準。主要構成：結構（構成網頁的基本元素——html），表現（設置外觀樣式——css），行爲（對網頁進行交互——JavaScript）三個方面。

HTML——超文本標記語言，用來描述網頁的語言。超文本指：可以加入圖片，聲音，動畫，多媒體等，以及可以從一個文件跳轉到另外一個文件，與世界各地主機的文件進行連接。

HTML語言的語法骨架格式：

<HTML>
	<head>
	<title></title>
	</head>
	<body>
	</body>
</HTML>

HTML標籤：所有HTML中標籤的一個根節點。稱爲跟標籤
head標籤：文檔的頭部（頁面的頭部），文檔頭部描述了文檔的各種屬性和信息，包括文檔的標題、在web中的位置以及和其它文檔的關係等。絕大多數文檔頭部包含的數據不會真正作爲內容顯示給讀者。注意在head標籤中我們必須設置的標籤是titile
title標籤：文檔的標題
body標籤：文檔的主體。body元素包含文檔的所有內容（例如文本、圖片、視頻等）

html標籤分類

雙標籤——一對尖括號 <></>
單標籤——一個尖括號</>。例如<br /> 。/稱爲關閉符。

<!DOCTYPE html> #告訴使用那個html版本，即告訴你使用html5
<html lang="en"> #採用語言
<head>
	<meta charset="utf-8"> #字符集編碼
	<title>Document</title>
</head>
<body>
 hello world！
</body>
</html>

排版標籤

標題標籤：單詞head的縮寫。HTML提供了6個等級的標題，即<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
段落標籤：單詞paragraph縮寫。<p>
水平線標籤：單詞horizontal的縮寫。<hr />
換行標籤：單詞break的縮寫。<br />。注意換行的距離沒有段落與段落之間的距離大。

本文格式化標籤

b,i,s,u只有使用，沒有強調含義；而strong，em，del，ins語義更強烈（推薦使用語氣強烈的）
7. 加粗 <strong>或<b>
8. 傾斜<em>或<i>
9. 刪除線<del>或<s>
10. 下劃線<ins>或<u>

div和span標籤

這兩個標籤沒有語義，是網頁佈局主要的兩個盒子。
div是division的縮寫（分割，分區含義），用很多div來組合網頁，一行只能一個div。
span跨度，範圍，一行可以顯示多個span

圖像標籤img

image的縮寫，src是img的必須屬性：<img src="url" / >，其它對應的img屬性：

鏈接標籤 a

單詞achor的縮寫，格式：<a href="跳轉目標" target="目標窗口彈出的方式"> 文本或圖像</a>
href的屬性爲url；target取值有self和blank。self爲默認值，blank爲在新窗口中打開方式。
注意事項：

外部鏈接，則需要添加http://；而內部鏈接則可以直接鏈接內部頁面名稱即可。
若沒有確定鏈接目標時，可以將屬性值定義爲#，表示鏈接佔時爲空鏈接
可以創建文本，圖像，視頻等鏈接

錨的重點（主要用於目錄快速定位文章內容）

通過創建錨點鏈接，用戶能夠快速定位到目標內容。創建錨點鏈接分爲兩步：

使用"a href="#id名"鏈接文本/a"創建鏈接文本。
使用相應的id名標註跳轉目標的位置。

<a href="#live">3 個人生活</a>
....
<h3 id="live">個人生活</h3>

base標籤

設置整體連接的打開狀態。針對<a>標籤中的target屬性的設置——較爲麻煩，用base標籤來進行統一設置。
<base target="_blank" /> 所有的鏈接以新的窗口打開。若針對某個鏈接狀態的打開，仍需使用<a>標籤的屬性target

特殊字符標籤

註釋標籤

（以結尾）

路徑

相對路徑

同級路徑：只需輸入文件名稱即可
下級路徑：需要文件夾和文件名
上級路徑：../../表示上兩級路徑

絕對路徑

本地路徑
網絡路徑
從根路徑出發，得到完整的文件路徑

列表標籤

特點——整齊，整潔，有序

無序列表<ul>和<li>標籤構成
沒有順序級別之分，是並列的

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
<\ul>

注意事項：

<ul>標籤裏只能放<li>標籤
<li>標籤中可以放其它標籤

有序列表<ol>和<li>標籤構成

<ol>
	<li>...</li>
	<li>...</li>
	<li>...</li>
<\ol>

注意事項：

<ol>標籤裏只能放<li>標籤
<li>標籤中可以放其它標籤

自定義列表 dl,<dt>和<dd>組成
常用於對術語或名詞進行解釋和描述，自定義列表沒有任何項目符號

<dl>
<dt>名詞1 </dt>
<dd>名詞1的解釋1</dd>
<dd>名詞1的解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2的解釋1</dd>
<dd>名詞2的解釋2</dd>
</dl>

表格

表格不是用來佈局，主要是用來顯示數據的。
創建格式

<table width="500" border="1">
<caption>表格標題</caption>
<tr> #每行
<td>單個內的文字</td>
...
<td>單個內的文字</td>
</tr>
...
</table>

表格屬性

一般表格的border,cellspacing,cellpadding的屬性值都爲0。
注意：
給table標籤的align屬性設置center，是表格居中對齊；而對tr標籤的align屬性設置center，是此行的單元格內容都居中對齊。

表頭標籤（第一行或第一列採用）`<th>`

table head的縮寫，用來代替<td>。增加了加粗且居中功能。

表格標題caption

僅存在於表格裏面，離開表格標籤是不能用的，而且緊跟table標籤之後。

表格結構 thead,tbody

使用表格佈局的時候，可以將表格劃爲頭部，主體和頁腳

<table>
 <caption> </caption>
	 <thead>
		 <tr> #每行
		<td>單個內的文字</td>
		...
		<td>單個內的文字</td>
		</tr>
	 </thead>
	 <tbody>
		 <tr> #每行
		<td>單個內的文字</td>
		...
		<td>單個內的文字</td>
		</tr>
	</tbody>
</table>

合併單元格屬性（從上到下，自左向右）

跨行合併 rowspan，例如<td rowspan="2"> 單元格內容</td>，合併兩個單元格
跨列合併 colspan

表單

表單由三部分組成：表單控件，提示信息，表單域（將表單的信息放在一起提交過去）

input控件
格式

radio屬性選擇如果是一組，則我們必須給他們命名相同的名字name

<td>
	男<input type="radio" name="sex"/>
	女<input type="radio" name="sex" checked="checked"/> #只能多選一(默認女被選中)
</td>

lable標籤

爲input標籤服務的

<label> 用戶名：<input type="text" /> </label>
<label for="pwd">
	用戶名:<input type="text" />
	密碼：<input type="password" id="pwd" /> #無論點擊哪個漢字可以到密碼框
</label>

textaera控件（文本域）

文本框只能寫一行文本；文本域可以寫多行。

<textarea cols="每行字符數" rows="顯示的行數">文本內容
</textarea>

下拉菜單select

<select name="" id="">
<option value="">選擇年份</option>
<option value="" selected="selected">1990</option> #默認被選中
<option value="">1991</option>
</select>

表單域form

便於分離。

<form action="url地址" method="提交方式" name="表單名稱">
	用戶名:<input type="text" name="yourname"/><br/>
	密碼：<input type="password" id="pwd" name="pass"/><br/>
	<input type="submit" value="提交">
	<input type="reseet" value="重填">
	#若採用get提交後會在網址後面加上"?yourname=   &pass=   "## 標題  
</form>

action屬性：在表單收集信息後，需要將信息傳遞給服務器，action用於指定接收並處理表單數據的服務器程序的url地址。
method屬性：設置表單數據的提交方式: get或post
name屬性：指定表單名稱，用以區分同個頁面有多個表單