HTML语法分析
什么是HTML
htyper text markup language 即超文本標記語言HTML是一個網頁的主體部分，也是一個網頁的基礎。因為一個網頁可以沒有樣式，可以沒有交互，但是必須要有網頁需要呈現的內容。所以HTML部分是整個前端的基礎
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言.
它是一種用于創建網頁的標記語言。標記語言是一種將文本（Text）以及文本相關的其他信息結合起來，展現出關于文檔結構和數據處理細節的計算機文字編碼。與文本相關的其他信息（包括例如文本的結構和表示信息等）與原來的文本結合在一起，但是使用標記（markup）進行標識
網頁==HTML文檔，由瀏覽器解析，用來展示的 靜態網頁：靜態的資源，如xxx.html 動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的
什么是標簽
HTML作為一門標記語言，是通過各種各樣的標簽來標記網頁內容的。
HTML標簽
是由一對尖括號包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭. 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫. 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體. 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img /> 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標簽的屬性
通常是以鍵值對形式出現的. 例如 name="alex" 屬性只能出現在開始標簽 或 自閉和標簽中. 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex" 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
!DOCTYPE標簽
由于歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在
W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為Compatibility
Mode)；由于W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode)，這就是二者最簡單的區別。
這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上
window.top.document.compatMode： //BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 //CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面
這個屬性會被瀏覽器識別并使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,
這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那么，那么就等同于開啟了標準模式，那么瀏覽器就得老老實實的按照W3C的
標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用
HTML文檔結構
固定結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
上面的代碼解釋如下：
首先，<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位于<html>標簽之前，表明該文檔是HTML5文檔
HTML文檔包含了HTML標簽及文本內容，不同的標簽在瀏覽器上會顯示出不同的效果，所以我們需要記住最常見的標簽的特性
HTML注釋
無論我們學習什么編程語言，一定要重視的就是注釋，注釋的重要性不言而喻，我們在此不再啰嗦，下面我們說一下HTML中注釋的格式
<!-- 注釋 -->
在sublime中的快捷鍵 win -- ctrl + /
注意：注釋中可以直接使用回車換行。并且我們習慣用注釋的標簽把HTML代碼包裹起來
<!-- xxx部分 開始
這里放你xxx部分的HTML代碼
xxx部分 結束 -->
注釋的注意事項
HTML注釋不支持嵌套 HTML注釋不能寫在HTML標簽中
HTML標簽屬性
設置標簽屬性
屬性一般以鍵值對的方式寫在開始標簽中
<div id="i1">這是一個div標簽</div> <p class='p1 p2 p3'>這是一個段落標簽</p> <a >這是一個超鏈接</a> <input type='button' onclick='addclick()'></input>
為什么能設置屬性
你可以這樣簡單理解，因為最終我們這些標簽會通過css去美化，通過javascript來操作，那么這些標簽我們可以看成是一個對象，對象就應該有它自己的屬性和方法。那么你像上面說到input標簽，type=‘button’就是它的屬性，onclick=‘addclick()’就是它的方法
注意事項
HTML標簽除一些特定屬性外可以設置自定義屬性，一個標簽可以設置多個 屬性用空格分隔，多個屬性不區分先后順序 屬性值要用引號包裹起來，通常使用雙引號也可以單引號 屬性和屬性值不區分大小寫，但是推薦使用小寫
標簽分類
HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。
常用的塊狀元素
<div> <p> <h1>~<h6> <ol> <ul> <table> <form> <li>
block特點
每個塊級元素都從新的一行開始，并且其后的元素也另起一行。獨占一行 元素的高度、寬度、行高以及頂和底邊距都可設置。 元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
常用的行內元素
<a> <span> <br> <i> <em> <strong> <label>
inline特點
和其他元素都在一行上； 元素的高度、寬度及頂部和底部邊距不可設置； 元素的寬度就是它包含的文字或圖片的寬度，不可改變
常用的行內塊狀元素
<img> <input>
inline-block特點
和其他元素都在一行上； 元素的高度、寬度、行高以及頂和底邊距都可設置
注意：
我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為后面頁面布局做好了準備
標簽嵌套規則
塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素
<div><div></div><h1></h1><p><p></div> OK <a href=”#”><span></span></a> OK <span><div></div></span> 錯誤 #<div>是塊元素，<span>是行元素所以這個式子是錯的
塊級元素不能放在p標簽里面
<p><ol><li></li></ol></p> 錯誤 <p><div></div></p> 錯誤
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等標簽
第一個HTML頁面
<!-- 注釋 --> <!-- 標簽: 由<>包裹,由字母開頭,可以結合合法字符,能被瀏覽器解析的標記 --> <!-- 為什么使用標簽: 標簽具有作用域(名稱空間,控制范圍), 可以賦予功能 --> <!-- 一個頁面文件就是一個html,有且只有一個html根標簽,只有一兒一女(head | body) --> <!-- 規定文檔類型: html代表改文件采用的是h5語法標準 --> <!-- 文檔類型與注釋屬于 指令 --> <!doctype html> <html> <head> <!-- 頁面文件頭 | 樣式表 | 腳本 | 頁面表述... | (后勤) --> <!-- 設置文件編碼格式 --> <meta charset="utf-8" /> <!-- 網頁標簽的標題 --> <title>first page</title> </head> <body> <!-- 頁面顯示內容都屬于body標簽 --> <!-- 也可以出現樣式 | 腳本 --> 旭旭寶寶斗魚第一老屌 <楊虎虎> <<<Zero> </body> </html>
基本標簽
常用標簽
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題. <p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線 <div> <span>
塊級標簽：<p> <h1> <table> <ol> <ul> <form> <div>
內聯標簽：<a> <input> <img> <sub> <sup> <textarea> <span>
特殊字符
< > " © ®
< > " ? ?
實現簡單的換行符
<br>可插入一個簡單的換行符。 <br />
<br>標簽是空標簽（意味著它沒有結束符，因此下面的這個是錯誤的：<br></br>）
HTML中塊級標簽和內聯標簽的區別
| 塊級元素 | 行內元素 |
| 獨占一行,默認情況下，其寬度自動填滿其父元素寬度 | 相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化 |
| 可以設置width，height屬性 | 行內元素設置width，height屬性無效 |
| 可以設置margin和padding屬性 | 行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。 |
| 對應于display:block | 對應于display:inline； |
head標簽
我們首先來介紹一下head標簽的主要內容和作用，文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、編碼方式及URL等信息,這些信息大部分是用于提供索引,辯認或其他方面的應用（移動端）等
title標簽
在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標簽頁的標題欄中。可以把它看成是一個網頁的標題。主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題
meta標簽
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能
name屬性
<!-- SEO --> <!-- <meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語"> --> <!-- <meta name="description" content="80字以內的一段話，與網站內容相關"> --> <!-- 移動適配 --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值
<!--重定向 2秒后跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
name屬性
主要用于頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="水擊三千里">
body標簽
想要在網頁上展示出來的內容一定要放在body標簽中。 把我們之前海燕那一段HTML代碼貼過來，保存到一個HTML格式的文件中
<!DOCTYPE HTML>
<html>
<head>
<title>花自飄零，幾處相思，幾處閑愁</title>
</head>
<body>
<h1>成功</h1>
<p>自信人生兩百年</p>
<p>會當擊水三千里</p>
</body>
</html>
標題標簽
<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。 由于 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標簽層級來構建文檔的結構。因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用css來定義來達到漂亮的顯示效果。 標題標簽通常用來制作文章或網站的標題
h1~h6標簽的默認樣式
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懷念</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
文本樣式標簽主要用來對HTML頁面中的文本進行修飾，比如加粗，斜體，線條樣式等等
<b></b>：加粗 <strong></strong>加粗強調 <i></i>：斜體 <em></em>斜體強調 <u></u>：下劃線 <s></s>：刪除線 <sup></sup>：上標 <sub></sub>：下標
在瀏覽器中<em>默認會用斜體表示，<strong>會用粗體來表示。兩個標簽相比，我們通常會推薦大家使用<strong>表示強調
段落標簽
<p>,paragraph的簡寫。定義段落
<body>
<p>我們大多數都是想法太多實踐太少，或者簡單點說就是想不勞而獲</p>
<p>為了改變自己，我決定好好學習，多做事情，少說話</p>
</body>
link標簽
<link> 標簽定義文檔與外部資源的關系。
<link> 標簽最常見的用途是鏈接樣式表。
利用link做一個小圖標
<link rel="icon" type="image/x-icon" >
超鏈接標簽
<a target="_self">baidu</a> <a target="_blank">baidu</a> href:要連接的資源路徑 格式如下: " target="_blank": 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容. " target="_self"：在本地窗口打開連接內容 baidu 就相當于定義一個頁面的書簽
超級鏈接<a>標記代表一個鏈接點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文本或圖片連接到其他的頁面、文本或圖像
錨點使用實例
<body>
<!-- 1.設置錨點: 錨點名page_top -->
<a href="" name="page_top"></a>
<img class="img" src="./img/timg.jpg" alt="">
<a href="00_復習預習.html">前往00頁面</a>
<!-- 前往本頁面中個某個位置: Top => 錨點 -->
<!-- 1.設置錨點 2.設置前往錨點的a轉跳 -->
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
br*50
<!-- 通配標簽頁可以設置錨點 -->
<!-- <a href="" name="t_123"></a> -->
<div id="t_123">123</div>
<br>
br*80
<!-- 2.設置前往錨點的a轉跳: #錨點名 -->
<a href="#page_top">Top</a>
<a href="#t_123">123</a>
<a href="00_復習預習.html#md">前往錨點</a>
</body>
鏈接其他表現形式
目標文檔為下載資源 例如：href屬性值，指定的文件名稱，就是下載操作(rar、zip等) 電子郵件鏈接 前提：計算機中必須安裝郵件客戶端，并且配置好了郵件相關信息。 例如：<ahref="mailto:zhaoxu@tedu.cn">聯系我們</a> 返回頁面頂部的空鏈接或具體id值的標簽 例如：<a href="#">內容</a>或<a href="#id值">內容</a> javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a> javascript:;表示什么都不執行，這樣點擊<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</a
列表標簽
<ul>: 無序列表
<ol>: 有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
網站頁面上一些列表相關的內容比如說物品列表、人名列表等等都可以使用列表標簽來展示。通常后面跟<li>標簽一起用，每條li表示列表的內容
<ul>:unordered lists的縮寫 無序列表
<ol>:ordered listsde的縮寫 有序列表
<!-- 無序列表 type可以定義無序列表的樣式-->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定義有序列表的樣式 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ol標簽的屬性
type：列表標識的類型
1：數字
a：小寫字母
A：大寫字母
i：小寫羅馬字符
I：大寫羅馬字符
列表標識的起始編號
默認為1
ul標簽的屬性
type：列表標識的類型
disc：實心圓(默認值)
circle：空心圓
square：實心矩形
none：不顯示標識
盒子標簽
<div>可定義文檔的分區 division的縮寫 譯：區<div>標簽可以把文檔分割為獨立的、不同的部分,請看下面代碼我們將他們進行分區
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="utf-8" >
<title>常用標簽一</title>
</head>
<body>
<divid="wrap">
<divclass="para">
<pstyle="height: 1000px" id="p1">段落</p>
</div>
<divclass="anchor">
我是普通的文本
<h1>
<a target="_blank" title="百度">百度</a>
<ahref="a.zip">下載包</a>
<ahref="mailto:zhaoxu@tedu.cn">聯系我們</a>
<ahref="#">跳轉到頂部</a>
<ahref="#p1">跳轉到p1</a>
<ahref="javascript:alert(1)">內容</a>
<ahref="javascript:;">內容</a>
</h1>
</div>
<!-- <h2>******</h2>
<h3>**********</h3>
<h4>**************</h4>
<h5>******************</h4>
<h6>***************************</h6> -->
<divclass="para">
<!-- 定義段落 通常指文章一段內容 -->
<p>好好學習，天天向上</p>
<p>有時候把，我覺得有些人真的厲害，為什么那么厲害呢</p>
<p>有時候把，又覺得自己超級笨，為什么自己那么笨呢</p>
</div>
<divclass="lists">
<!-- 無序列表 -->
<ultype="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<oltype="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代碼可以下面的層次結構
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
我們將文檔放在一個父級的區（div）中，它里面包含四塊區（div）域，瀏覽器查看效果,你會發現每小塊區域都是獨占一行的，所以div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你可以看成給這個區域起個名字。id是唯一的，一個頁面中不能有兩個重復的id，跟身份證號碼一樣，class可以設置同樣的屬性值，并且可以設置多個，例如class=’para n1‘
圖片標簽
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
一個網頁除了有文字，還會有圖片。我們使用<img/>標簽在網頁中插入圖片。
語法
<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
注意：
src設置的圖片地址可以是本地的地址也可以是一個網絡地址。 圖片的格式可以是png、jpg和gif。 alt屬性的值會在圖片加載失敗時顯示在網頁上。 還可以為圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度
使用
<div>
<span>與行內元素展示的標簽<span>
<span>與行內元素展示的標簽<span>
<img src="./machine-right.png" alt="金融量化分析">
</div>
與行內元素在一行內顯示
可以設置寬度和高度
span標簽可以單獨摘出某塊內容，結合css設置相應的樣式
表格標簽
表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等
border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. 像素 百分比.（最好通過css來設置長寬）
重要屬性
colspan = "value" 合并列(橫著合并) rowspan = "value" 合并行(豎著合并) align = "left/center/right" 水平對齊方式 valign = "top/bottom/middle/baseline" 垂直對齊方式 cellpadding = "value" 單元邊沿與其內容之間的空白(table標簽專屬?) cellspacing = "value" 單元格之間的空白(table標簽專屬?) border = "value" 表格外邊框線寬度(設置為0時表格內分割線也沒了)(table標簽專屬?) 屬性,直接寫在標簽內:<table cellpading = "1">
表格樣式
caption-sider:top/bottom/left/right | 設置表格標題放置的位置 border-spacing:"npx" | 單元格間距(使用cellspacing屬性也能辦到)(寫在table標簽內?) border-collapse:separate(邊框分開)/collapse(邊框合并) | pass empty-cells:show/hide | 無內容的單元格是否顯示 table-layout:auto/fixed | 自動表格布局(較慢)/固定表格布局(不靈活) CSS樣式 - tip : caption-sider屬性的值中,left和right只有火狐能識別,top,bottomIE7以上版本支持.
表格使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
.table1 {
500px;
height: 500px;
display: none;
}
th, td {
padding: 20px;
}
.table2 td {
/*border: 10px solid black;*/
}
</style>
</head>
<body>
<!-- table的display: table -->
<!-- table顯示規則注意點: 當設置的盒子高度不足夠顯示內容時, 盒子高度由內容撐開, 當設置的高度大于顯示內容所需高度,采用設置的高度 -->
<!-- border: 設置邊框寬度 -->
<!-- cellspacing: 單元格間的間距 -->
<!-- cellpadding: 單元格的內邊距 == th, td設置padding -->
<table class="table1" border="1" cellspacing="0">
<!-- tr>th{標題}*3 -->
<tr>
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
<!-- (tr>td{單元格}*3)*3 -->
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
<!-- 邊框的保留格式 => rules: rows | cols | groups | all -->
<table class="table2" border="10" rules="all">
<caption>表格標題</caption>
<thead>
<tr>
<th>標題</th>
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">單元格</td>
<td rowspan="2" colspan="2">單元格</td>
<!-- <td>單元格</td> -->
<td>單元格</td>
</tr>
<tr>
<!-- <td>單元格</td> -->
<!-- <td>單元格</td> -->
<!-- <td>單元格</td> -->
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>單元格</td>
<td colspan="2">單元格</td>
<!-- <td>單元格</td> -->
<td>單元格</td>
</tr>
</tfoot>
</table>
<!-- >>> display: table-cell => 可以嵌入任意類型標簽, 可以快速實現多行文本垂直居中 -->
</body>
</html>
多行文本垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style>
p {
margin: 0;
}
.box, .b1 {
150px;
height: 150px;
margin: 10px auto;
background-color: pink;
text-align: center;
}
.b3 {
line-height: 150px;
}
.b2 {
line-height: 150px;
/*不起作用*/
/*vertical-align: middle;*/
}
.b1 {
/*實現多行文本垂直居中 =>
針對父級設置, 父級中的多個塊級文本類子級標簽垂直居中*/
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="b1">
<p>好的</p>
<p>真好</p>
<div>好的</div>
<div>真好</div>
</div>
</div>
<div class="box b2">
<p>好的</p>
<p>真好</p>
</div>
<div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>
表單標簽
表單form是一個包含表單元素的區域
表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、輸入框(input)、單選框（）
表單的作用
表單用于顯示、手機信息，并將信息提交給服務器
語法
<form>允許出現表單控件</form>
表單標簽<form>
表單用于向服務器傳輸數據。
表單能夠包含input元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和label元素
表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.
action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式
post/get 默認取值 就是 get（信封）
get 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post 1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
表單元素
<input> 標簽的屬性和對應值
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
戶端編程，而在css和javascript中使用的
value: 表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：
checked: radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
上傳文件注意兩點
1 請求方式必須是post
2 enctype="multipart/form-data"
<select> 下拉選標簽屬性
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：
value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>為每一項加上分組
<textarea> 文本域
name: 表單提交項的鍵.
cols: 文本域默認有多少列
rows: 文本域默認有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
常用表單運用實例
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用戶名稱：
<input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
</p>
<p>
用戶密碼：
<input type="password" name="txtUsepwd">
</p>
<p>
確認密碼：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--單選框-->
<p>
用戶性別：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--復選框-->
<p>
用戶愛好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 樂
<input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<!-- 按鈕 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按鈕">
</p>
<!--文件選擇框-->
<p>
請上傳文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介紹：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--選擇框-->
<!--滾動列表 multiple設置以后實現多選效果，ctrl+鼠標左鍵進行多選-->
<p>籍貫：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
</form>
系統標簽
<!-- 系統標簽 | 自定義標簽: 系統沒有的滿足標簽語法的所有標簽 --> <zero title="XXX">zero</zero>
其他標簽
原生標簽pre
<pre> 呵 < asd> & ; 呵 </pre>
換行標簽br
<br>標簽用來將內容換行，其在HTML網頁上的效果相當于我們平時使用word編輯文檔時使用回車換行。
分割線hr
<hr>標簽用來在HTML頁面中創建水平分隔線，通常用來分隔內容
文檔中的區段section
<section> <h1>PRC</h1> 在下面的段落標簽解釋標題h1中的文字 <p>The People's Republic of China was born in 1949...</p> </section>
空格
瀏覽器在顯示的時候會移除源代碼中多余的空格和空行。 所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML代碼中的所有連續的空行（換行）也被顯示為一個空格
所以HTML代碼對縮進的要求并不嚴格，我們通常使用縮進來讓我們的代碼結構更清晰，僅此而已
特殊字符
在上一個實例中，我們演示了HTML中輸入空格、回車都是沒有作用的。要想輸入空格，需要用特殊符號 -- 。
HTML特殊符號對照表
| 特殊符號 | 命名實體 | 十進制編碼 | 特殊符號 | 命名實體 | 十進制編碼 | 特殊符號 | 命名實體 | 十進制編碼 |
| Α | Α | Α | Β | Β | Β | Γ | Γ | Γ |
| Δ | Δ | Δ | Ε | Ε | Ε | Ζ | Ζ | Ζ |
| Η | Η | Η | Θ | Θ | Θ | Ι | Ι | Ι |
| Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο |
| Π | Π | Π | Ρ | Ρ | Ρ | Σ | Σ | Σ |
| Τ | Τ | Τ | Υ | Υ | Υ | Φ | Φ | Φ |
| Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
| α | α | α | β | β | β | γ | γ | γ |
| δ | δ | δ | ε | ε | ε | ζ | ζ | ζ |
| η | η | η | θ | θ | θ | ι | ι | ι |
| κ | κ | κ | λ | λ | λ | μ | μ | μ |
| ν | ν | ν | ξ | ξ | ξ | ο | ο | ο |
| π | π | π | ρ | ρ | ρ | ? | ς | ς |
| σ | σ | σ | τ | τ | τ | υ | υ | υ |
| φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
| ω | ω | ω | ? | ϑ | ϑ | ? | ϒ | ϒ |
| ? | ϖ | ϖ | ? | • | • | … | … | … |
| ′ | ′ | ′ | ″ | ″ | ″ | ￣ | ‾ | ‾ |
| ? | ⁄ | ⁄ | ? | ℘ | ℘ | ? | ℑ | ℑ |
| ? | ℜ | ℜ | ™ | ™ | ™ | ? | ℵ | ℵ |
| ← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
| ↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ? | ↵ | ↵ |
| ? | ⇐ | ⇐ | ? | ⇑ | ⇑ | ? | ⇒ | ⇒ |
| ? | ⇓ | ⇓ | ? | ⇔ | ⇔ | ? | ∀ | ∀ |
| ? | ∂ | ∂ | ? | ∃ | ∃ | ? | ∅ | ∅ |
| ? | ∇ | ∇ | ∈ | ∈ | ∈ | ? | ∉ | ∉ |
| ? | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
| ? | − | − | ? | ∗ | ∗ | √ | √ | √ |
| ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
| ∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
| ∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
| ～ | ∼ | ∼ | ? | ≅ | ≅ | ≈ | ≈ | ≅ |
| ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
| ≥ | ≥ | ≥ | ? | ⊂ | ⊂ | ? | ⊃ | ⊃ |
| ? | ⊄ | ⊄ | ? | ⊆ | ⊆ | ? | ⊇ | ⊇ |
| ⊕ | ⊕ | ⊕ | ? | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
| ? | ⋅ | ⋅ | ? | ⌈ | ⌈ | ? | ⌉ | ⌉ |
| ? | ⌊ | ⌊ | ? | ⌋ | ⌋ | ? | ◊ | ◊ |
| ♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ | | ? | ¡ | ¡ | ||
| ￠ | ¢ | ¢ | ￡ | £ | £ | ¤ | ¤ | ¤ |
| ￥ | ¥ | ¥ | | | ¦ | ¦ | § | § | § |
| ¨ | ¨ | ¨ | ? | © | © | a | ª | ª |
| ? | « | « | ? | ¬ | ¬ | ­ | | |
| ? | ® | ® | ˉ | ¯ | ¯ | ° | ° | ° |
| ± | ± | ± | 2 | ² | ² | 3 | ³ | ³ |
| ′ | ´ | ´ | μ | µ | µ | " | " | " |
| < | < | < | > | > | > | ' | ' |
總結
- 上一篇： HTML5应用 + Cordova =
- 下一篇： 移动端HTML5 文件下载