一 html
html結構
- !DOCTYPE html> 告訴浏覽器使用什麼樣的html或者xhtml來解析html文檔
- <html></html>是文檔的開始标記和結束标記。此元素告訴浏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
- <head></head>元素出現在文檔的開頭部分。<head>與</head>之間的内容不會在浏覽器的文檔視窗顯示，但是其間的元素有特殊重要的意義。
- <title></title>定義網頁标題，在浏覽器标題欄顯示。
- <body></body>之間的文本是可見的網頁主體内容
html标簽格式
标簽的文法：
<标簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>内容部分</标簽名>
<标簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
<!DOCTYPE>标簽
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 标簽之前。此标簽可告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免浏覽器的怪異模式。
document.compatMode：
- BackCompat：怪異模式，浏覽器使用自己的怪異模式解析渲染頁面。
- CSS1Compat：标準模式，浏覽器使用W3C的标準解析渲染頁面。
這個屬性會被浏覽器識别并使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat
<head>内常用标簽
<meta>标簽
meta介紹
<meta>元素可提供有關頁面的元資訊（meta-information），針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta>标簽位于文檔的頭部，不包含任何内容。
<meta>提供的資訊是使用者不可見的
meta标簽的組成：meta标簽共有兩個屬性，它們分别是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實作了不同的網頁功能。
(1)name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。
<meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖檔,新聞,評測,社群,俱樂部">
<meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖檔，汽車價格大全，最精彩的汽車新聞、行情、評測、導購内容，是提供資訊最快最全的中國汽車網站。"> 複制
name裡面的值不能改變，有其特殊意義
keywords後面的content裡的内容是可供搜尋的關鍵字，以便查詢
description後面的content裡的内容是對該網站的簡單描述，搜尋後可見，如：
(2)http-equiv屬性：相當于http的檔案頭作用，它可以向浏覽器傳回一些有用的資訊，以幫助正确地顯示網頁内容，與之對應的屬性值為content，content中的内容其實就是各個參數的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意後面的引号，分别在秒數的前面和網址的後面)
<meta http-equiv="content-Type" charset=UTF8"> #指定網頁編解碼的格式 可簡寫為 <meta charset="UTF8"> 複制
refresh後面内容是指網頁2秒後自動重新整理跳轉到百度頁面
非meta标簽
<title>網頁标題名稱</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script> 複制
title裡面是網頁打開後浏覽器上顯示的名稱，
link rel='icon' 時，後面的href是圖檔位址，作用是給網站在浏覽器上顯示的圖示
link rel='stylesheet' 時，後面的href是CSS檔案的位址，作用是給網站引用CSS樣式
<body>内常用标簽
基本标簽（塊級标簽和内聯标簽）
'''
<hn> n的取值範圍是1~6; 從大到小. 用來表示标題.
<p> 段落标簽. 包裹的内容被換行.并且也上下内容之間有一行空白.
<b> 或<strong>: 加粗标簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角标 和 下角表.
<br>:換行. （自閉合标簽，不需要</br>）
<hr>:一行水準線
特殊字元：
< >；"；©® (空格)
''' 複制
<div>和<span>
<div></div> ： <div>是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了内聯行(行内元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行内元素的差別
所謂塊元素，是以另起一行開始渲染的元素，行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面産生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
圖形标簽: <img>
src: 要顯示圖檔的路徑.
alt: 圖檔沒有加載成功時的提示.
title: 滑鼠懸浮時的提示資訊.
width: 圖檔的寬
height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.) 複制
opacity:透明度
超連結标簽(錨标簽): <a> </a>
什麼是超級連結？
所謂的超連結是指從一個網頁指向一個目标的連接配接關系，這個目标可以是另一個網頁，也可以是相同網頁上
的不同位置，還可以是一個圖檔，一個電子郵件位址，一個檔案，甚至是一個應用程式 複制
什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁位址，是網際網路上标準的資源的位址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL位址由4部分組成
第1部分：為協定：http://、ftp://等
第2部分：為站點位址：可以是域名或IP位址
第3部分：為頁面在站點中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符号隔開。 複制
'''
<a href="" target="_blank" >click</a>
href屬性指定目标網頁位址。該位址可以有幾種類型：
target='_blank'，指點選時，在新頁面中打開目标網頁位址，沒有此屬性時，預設在目前視窗打開目标網頁位址
絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）
相對 URL - 指目前站點中确切的路徑（href="index.htm"）
錨 URL - 指向頁面中的錨（href="#top"） （錨即設定的id值）
''' 複制
清單标簽
'''
<ul>: 無序清單 [type屬性：disc(實心圓點)(預設)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序清單
<li>:清單中的每一項.
<dl> 定義清單
<dt> 清單标題
<dd> 清單項
''' 複制
結構
<!--unorder list-->
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<!--order list-->
<ol>
<li>222</li>
<li>222</li>
<li>222</li>
</ol>
<!--define list-->
<dl>
<!--define title-->
<dt>河北省</dt>
<!--define data-->
<dd>石家莊</dd>
<dd>天津</dd>
<dd>熊安</dd>
</dl> 複制
效果
表格标簽: <table>
表格概念
表格是一個二維資料空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裡可以包含文字、清單、圖案、表單、數字元号、預置文本和其它的表格等内容。
表格最重要的目的是顯示表格類資料。表格類資料是指最适合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
<table>
<tr>
<th>标題</th>
<th>标題</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table> 複制
上面是一個三行兩列的表格，th裡的内容會加粗，此時是表格沒有框線，需要添加屬性
屬性：
'''
<th>: table head cell 添加一行，且行内字型加粗
<tr>: table row 添加一行
<td>: table data cell 添加一列
屬性:
border: 表格邊框.
cellpadding: 内邊距 （即内容距邊框的距離）
cellspacing: 外邊距. （即邊框與邊框的距離）
width: 像素 百分比.（最好通過css來設定長寬）
rowspan: 單元格豎跨多少行（即縱向合并單元格）
colspan: 單元格橫跨多少列（即橫向合并單元格）
''' 複制
表單标簽: <form>
功能：表單用于向伺服器傳輸資料，進而實作使用者與Web伺服器的互動
表單能夠包含input系列标簽，比如文本字段（textarea）、複選框（checkbox）、單選框（radio）、送出按鈕（submit）等等。
表單還可以包含textarea、select、fieldset和 label标簽。
input等隻有在form裡面，資訊送出才能生效
表單屬性
action: 表單送出到哪.一般指向伺服器端一個程式,程式接收到表單送出過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的送出方式 post/get預設取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為複雜的部分，表單往往和腳本、動态頁面、資料處理等功能相結合，是以它是制作動态網站很重要的内容。
表單一般用來收集使用者的輸入資訊
表單工作原理：
通路者在浏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕送出。這些資訊通過Internet傳送到伺服器上。
伺服器上專門的程式對這些資料進行處理，如果有錯誤會傳回錯誤資訊，并要求糾正錯誤。當資料完整無誤後，伺服器回報一個輸入完成的資訊
<input>系列标簽
'''
<1> 表單類型
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 送出按鈕
button 按鈕(需要配合js使用.) button和submit的差別？
reset 重置按鈕
file 送出檔案：form表單需要加上屬性enctype="multipart/form-data"
上傳檔案注意兩點：
1 請求方式必須是post
2 enctype="multipart/form-data"
<2> 表單屬性
name: 表單送出項的鍵.
注意和id屬性的差別：name屬性是和伺服器通信時使用的名稱；
而id屬性是浏覽器端使用的名稱，該屬性主要是為了友善用戶端程式設計，而在css和javascript中使用的
value: 表單送出項的值.對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 預設被選中
readonly: 隻讀. text 和 password
disabled: 對所用input都好使.
''' 複制
select标簽
複制代碼
'''
<select> 下拉選标簽屬性
name:表單送出項的鍵.
size：選項個數
multiple：multiple
<optgroup>為每一項加上分組
<option> 下拉選中的每一項 屬性：
value:表單送出項的值.
selected: selected下拉選預設被選中
''' 複制
<textarea> 多行文本框
'''
<form id="form1" name="form1" method="post" action="">
<textarea cols=“寬度” rows=“高度” name=“名稱”>
預設内容
</textarea>
</form>
''' 複制
可以用作個人簡介等輸入框
<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>
''' 複制
上面的input加了label後，點選‘使用者名’，也可進入輸入狀态
<fieldset>标簽
'''
<fieldset>
<legend>登入吧</legend>
<input type="text">
</fieldset>
''' 複制