HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST
?
?URL地址
就是我們所說的網址：www.jd.com
?瀏覽器內核，渲染引擎
Ie內核：triteent
谷歌/歐鵬：blink
火狐：gecko
蘋果：webkit
渲染引擎是出現兼容性的根本問題
?
?
-html概念:hyper ?Text ???Markup ?Language ?(超文本標記語言)
?
Html結構標準
后綴名不能決定文件的格式，只能決定文檔打開的方式
?Html標簽分類
超文本：超鏈接（實現頁面跳轉）
結構規則：HTML（Hyper?Text Markup Language）
樣式規則：CSS（Cascading?Style?Sheets）
行為規則：JS（JavaScript）
Html標簽分類： 1 ?雙標簽 ??2 ?單標簽
Html標簽之間的關系: ????1 ?嵌套關系 2 ?并列關系
?
Html單標記：
橫線標記 <hr/> ????換行標記<br/> ??
注釋標記<!– 注釋文本--> ???????????ctrl /
?
Html雙標記
-標題標記 <hn></hn> ???n 取值1-6
-段落標記<p></p>
?
?
?
| 標簽名字 | 標簽作用 | 標簽屬性 | Display |
| <!DOCTYPE > | 定義文檔類型 | ? | ? |
| <p></p> | 段落標簽，文本內容（上下自動產生一個空白行，<br/>不會） | ? | ? |
| <h1-h6> | 標題標簽：一個頁面只能出現一次h1 因為H1搜索權重高 影響SEO搜索優化 | 塊級元素 | ? |
| <font> | 文本標簽 | ? | ? |
| <a> | 定義一個超鏈接 | Href=“鏈接的網址” title=“提示的文字” target=“鏈接在何處打開” | Line |
| <abbr> | 定義縮寫 | Title=“縮寫前的全稱” | Line |
| <area> | 定義熱點，總是嵌套在<map>中實用 | Alt：定義替換的文字 Cords：熱點坐標值 圓形（circle）：（x，y，r） X,y定義了遠點坐標，R半徑 方形（rect）：（x1,y1,x2,y2,） X1,y1:定義了左上角頂點 2x,y2:定義了右下角頂點 (網頁圖片左上角坐標是：0，0) Href：目標的鏈接 Target：何地打開鏈接 圖片的usemap屬性要和map的那么屬性一樣，并且圖片的usemap屬性值要加井號# | ? |
| Base | 為頁面內所有鏈接規定默認地址或者默認目標 位于head內部 | Href=“鏈接地址URL” Target=“在何地打開鏈接” ? | ? |
| Bdo | 定義文字方向 | Dir=“ltr（左）/rtl（右）” | ? |
| Body | 定義文檔的主題 | ? | ? |
| Button | 定義按鈕 | Disabled=“disabled”禁用此按鈕 Name：按鈕名稱 Type=“sibmit/reset/button” 提交/重置/普通按鈕 Value=“按鈕的初始值” | Line |
| Caption | 定義表格標題，必須緊跟table標簽，只能對每個標簽定義一個標題，通常居中與表格之上 | ? | ? |
| Code | 定義計算機代碼文本 | ? | ? |
| Col | 為一個或多個列設置屬性 | Span：規定行橫跨的列數 Align水平對其方式 Valign：垂直對其方式 ? | ? |
| Div | 定義文檔中的分區 | ? | ? |
| Dl，dt，dd | 自定義列表 | ? | ? |
| Form | 表單標簽 | ? | ? |
| Frame | 定義一個框架 | ? | ? |
| Frameset | 定義一個框架集 | Col：定義框架的列數 Rew：定義框架水平行 | ? |
| Img | 定義圖像 | Src=“圖像路徑” Alt=“替換文本” Title=“提示文字” Width、height ? | ? |
| Input | 定義輸入控件 | Type=“text/button/password/checkbox/radio/submit/reset” 文本/按鈕/密碼/復選框/單選框/提交按鈕/重置按鈕 Value=“元素的默認值” | ? |
| Lable | 為input元素定義標注， Lable屬性的for應與被綁定的元素的id元素相同 | ? | ? |
| Link | 定義文檔與外部資源的聯系，最常見的用途是鏈接樣式表 | Charset=“鏈接文檔的字符編碼方式” Href=“被鏈接文檔的路徑” Rel=“當前文本與被鏈接的文本的關系” Rev=“定義被鏈接的文本與當前文本的關系” ? | ? |
| Map | 定義熱點鏈接 | Id/name | ? |
| Meta | 定義文檔的元數據 | Content=“內容” http-equiv=“把content屬性關聯到http頭部” Name=“description/keywords/” | ? |
| Object | 定義內嵌對象 | ? | ? |
| Ol、ul、 | 定義有序/無序列表 | ? | ? |
| Select>Option | 定義下拉列表 | Selected=“selected”定義默認被選中項 Value=“定義被發往服務器的值” Disabled=”disabled”被禁用的項 | ? |
| Span | 定義文檔中的行內元素 | ? | Line |
| Style | 定義內嵌式樣式表 | Type=“text/css” | ? |
| Sub/sup | 定義下標/上標文本 | ? | ? |
| Table/tr/td | 定義表格 | Border=“邊框” ? | ? |
| Th | 定義表頭單元格 | <tr><th></th></tr> | ? |
| Textarea | 定義多行文本輸入框 | Cols=“文本可見寬度” Rows=“文本可見高度” Readonly=“readonly”規定只讀 ? | ? |
| Tfoot | 定義表格頁腳 | ? | ? |
?
<font></font> ? ?控制網頁文字顏色，大小，字體。
<strong></strong> ?與 ?<b></b> 文字加粗
<em></em> ?與 ?<i></i> ?文字斜體
<ins></ins> ?與 <u></u> 文字下劃線
<del></del> 與 <s></s> 文字刪除線
?
超鏈接
href：鏈接到的地址（必寫屬性）
target：新鏈接在哪打開?_blank 在新窗口打開
title：提示文本
<base target=”_blank”>寫在head之中，作用是讓所以的超鏈接都在新窗口打開
Base?作用是使頁面內所有超鏈接指向同一目標或者同一個鏈接
?路徑
●相對路徑：相對于自己出發找其他文件
跳出文件夾就要使用 （?.?.?/?）
★往下一級目錄用（?/ ）?往上一級目錄用（ . . / ）
?
●絕對路徑：文件完整的路徑
?
<Img src=”圖像URL” alt=”圖像不能顯示時的替換文本”?title=”鼠標懸浮時顯示的內容”?width/height=”XX”??/ >
?
<img src=”路徑” alt=“替換圖片文本，對SEO優化有好處” ?title=“提示文本（鼠標放到圖片上顯示的文字）”
單獨更改img的寬或者高?圖片等比縮放 不會變形
同時設置img的寬高會導致圖片變形
沒有定義寬高的時候按照圖片尺寸的100%的尺寸顯示
<a hrf=”跳轉目標”?target = “目標窗口彈出方式_self / _blank”> 文本或圖像 </a>
<a href=”#”>此處為空鏈</a> ??
錨點：
定義<a ??id=“md”></a> ?
<a href = “#id”>鏈接文本</a>
注意需要英文的 ?; 結尾才生效
?
?
| 特殊字符 | 描述 | 字符的代碼 |
| ? | 空格符 | ? ； |
| <? | 小于號 | <； |
| >? | 大于號 | >； |
| & | 和號 | &； |
| ￥ | 人民幣 | &； |
| ? | 版權 | ©； |
| ? | 注冊商標 | ®； |
| ° | 攝氏度 | °； |
| ± | 正負號 | ± ； |
| × | 乘號 | ×； |
| ÷ | 除號 | ÷ ； |
| 2 | 平方2（上標2） | ²； |
| 3 | 立方3（上標3） | ³； |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?音樂標簽
?
Embed
?
Hidden=“true” ?隱藏播放器
?
?
列表（list）分為 ：
無序列表UL
有序列表ol
自定義列表 dl
?
無序列表ul：
<UL>
????<li> 列表項目1</li>
</ul>
list-style:none；取消列表樣式 disc/square/circle/
下圖
?
有序列表ol
< ol type = 1/ a / A / i / I / ??start=”?2 / b / B / ii / ?II / ”>
< li > ??</li>
</ol>
?
自定義列表dl
?<dl>
? <dt>123</dt>
? <dt>weqwe</dt>
? <dt>qweq</dt>
?</dl>
?
?滾動marquee
?
?HTML頭部標簽
?
?
| <head> | 定義關于文檔的信息 |
| <title> | 定義文檔標題 |
| <base> | 定義頁面上所有鏈接的默認地址或默認目標 |
| <link> | 定義文檔與外部資源的關系 |
| <meta> | 定義HTML文檔的元數據 |
| <script> | 定義客戶端腳本 |
| <style> | 定義文檔的樣式信息 |
- ?
?
?
?
?
?
?
?
?
?
?
Base元素
Base標簽為頁面所有鏈接都指向默認地址或者默認目標
?
?Link元素
?
?
?
?
Link：標簽定義文檔與外部資源之間的關系
?
a)?Rel：屬性定義該標簽關聯的樣式表標簽
?
b)?Href：定義該便簽所鏈接的外部資源的URL地址，可相對地址，可以是絕對地址
?
c)?Type：定義文檔類型
?
d)?Media：設置屬性調用的資源主要針對什么設備而使用
?
?
?
?
Meta元數據
?
?
元數據metadata是關于數據的信息，元數據不會顯示在頁面上，對與機器是可讀的。
?
Meta元素被用來規定頁面的描述、關鍵詞、文檔的作者、最后的修改時間以及其他元數據。
?
Meta標簽始終位于head元素中。
?
元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或者其他web服務。
?
?
?
◆?一些搜索引擎會利用meta元素的name和conteng屬性來索引你的頁面
?
?
?
?
?
Meta 標簽介紹
Meta屬性有兩種：name和http-equiv 。
<meta name = “generator”??content = ““”> 用以說明生成工具
<meta name = “keywords”??content = “??”> ?向搜索引擎說明自身網頁關鍵詞
<meta name = “description”?content =”??“> ?告訴搜索引擎本站點主要內容
<meta name = “Author”?content = “你的名字”> 告訴其制作者的名字
<meta name = “Robots”?content = “all/none/index/noindex/follow/nofollow”>
? 設定為all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定為index：文件將被檢索；
設定為follow：頁面上的鏈接可以被查詢；
設定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
http-equiv屬性
<meta http-equiv=”content-Type”?content = “text/html”; charset=gb_2312”>
描述網頁屬性 編碼
<meta http-equiv=”refresh”?content=”5 ; URL=http://www.123.com”/>
網頁跳轉
?
URL編碼
?
URL只能使用ASCII字符集通過因特網進行發送
?
由于 URL 常常會包含 ASCII 集合之外的字符，URL 必須轉換為有效的 ASCII 格式。
?
URL 編碼使用 "%" 其后跟隨兩位的十六進制數來替換非 ASCII 字符。
?
URL 不能包含空格。URL 編碼通常使用 來替換空格。
?
?
?
字符集 charset
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312
gb2312 簡單中文
GBK包含全部中文字符 ?繁體
BIG5 ??繁體中文
UTF-8則包含全世界所有國家需要用到的字符
?
?
表格 table ???????
??最簡單的表格 <table>
<caption>表格的名字</caption>
< tr >
<th>加粗居中</th>
<td> ?普通 ?</td>
</tr>
</table>
?
< table border = “0”??> 邊框
< table cellspacing = “0”??> ?單元格與單元格之間的距離
< table cellpadding = “0”??> ?文字與單元格之間的距離
< table ?width= “0”??> 寬度
< table ?height= “0”??> ?高度
< table ?align= “?lift / right / center ”??> 對齊方式
< table ?bgcolor= “?white/ red/...”??> ?背景色
?
?
?
表格的結構
在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳，具體 如下所示：
<thead></thead>：用于定義表格的頭部，必須位于<table></table>標記中，一般包含網頁的 logo和導航等頭部信息。
<tfoot></ tfoot >：用于定義表格的頁腳，位于<table></table>標記中<thead></thead>標記之 后，一般包含網頁底部的企業信息等。
<tbody></tbody>：用于定義表格的主體，位于<table></table>標記中<tfoot></ tfoot >標記之 后，一般包含網頁中除頭部和底部之外的其他內容。
Colspan 合并同一行 ?rowspan 合并同一列
?
表單 form
表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、 重置按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表 單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單 ?域，表單中的數據就無法傳送到后臺服務器。
<from name = “from_name”?action = “url”?method = “get/post”> ...</form>
Name ?：定義表單的名稱
Method ： 傳送方式 默認get
?Get：通過地址欄提交信息，安全性差
?
?Post：通過文件提交信息，安全性高
?
Action ?： 指定表單處理程序的位置（服務器端腳本處理程序）
Fieldset ： 把表單分組
Legend ：分組名稱
?
?
?
?http方法
?
在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。
?
?
?get：從指定的資源請求數據
?
有關 GET 請求的其他一些注釋：
?
- GET 請求可被緩存
- GET 請求保留在瀏覽器歷史記錄中
- GET 請求可被收藏為書簽
- GET 請求不應在處理敏感數據時使用
- GET 請求有長度限制
- GET 請求只應當用于取回數據
?
?Post：向指定的資源提交要被處理的數據
?
有關 POST 請求的其他一些注釋：
?
- POST 請求不會被緩存
- POST 請求不會保留在瀏覽器歷史記錄中
- POST 不能被收藏為書簽
- POST 請求對數據長度沒有要求
?
?比較 GET 與 POST
?
?
| ? | GET | POST |
| 后退按鈕/刷新 | 無害 | 數據會被重新提交 |
| 書簽 | 可收藏為書簽 | 不可收藏為書簽 |
| 緩存 | 能被緩存 | 不能緩存 |
| 編碼類型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。為二進制數據使用多重編碼。 |
| 歷史 | 參數保留在瀏覽器歷史中 | 參數不會保存在瀏覽器歷史中。 |
| 對數據長度的要求 | 是的。當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。 | 無限制 |
| 對數據類型的限制 | 只允許 ASCII 字符。 | 沒有限制。也允許二進制數據。 |
| 安全性 | 與 POST 相比，GET 的安全性較差，因為所發送的數據是 URL 的一部分。 | POST 比 GET 更安全，因為參數不會被保存在瀏覽器歷史或 web 服務器日志中 |
| 可見性 | 數據在 URL 中對所有人都是可見的。 | 數據不會顯示在 URL 中。 |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
Input控件
< Input type = “控件類型”>
| ??????????????????控件語法 | ??????????????????含義 |
| <input??type=”text”?????name=“”> | 文本輸入框 |
| <input??type=“password”> | 密碼輸入框 |
| <input??type=“radio”????name=“gender”> | 單選框 |
| <input??type=“checkbox”> | 復選框（多選框） |
| <input???type=“file”> | 文件上傳控件 |
| <input??type=“button”> | 普通按鈕???value?設置顯示文字 |
?
?
l?HTML5表單標簽
<Input type=“url”>：網址提交；
<Input type=“date”>：顯示日期控件
<Input type=“time”>：時間控件
<input type=”emial”>：郵件控件
<input type=”number” step=“5”(默認1，值是幾每次跳幾)>：數字控件
<input type=”range” step=“5”>：滑塊控件
Step：默認1，值是幾每次跳幾
?
Textarea 控件
textarea控件可以輕松地創建多行文本輸入框
?<textera cols = “每行顯示的字符數”?rows = “?顯示的行數”?> 文本提示</textera>
?
Select 控件
用來制作下拉菜單
?
?
<select ??size = “?指定下拉菜單的可見選項 ”??multiple = “multiple”>
<option ?> 選項1</option>
<option ?selected = “selected”> 選項2</option>
</select>
?
?Select>option：下拉列表
Selectked：selectked：默認選項
Multiple：multiple 可多選
Size：定義列表顯示的項
Optgroup：對option進行分組
?
?
<fieldset>
<!-- 表格名字 -->
<legend>賬戶信息</legend>
<!-- 表格的內容 -->
<font color="red" size="2">*</font>用戶名:<input type="text"><br><br>
<font color="red" size="2">*</font>密?碼：<input type="password">
<br><input type="radio" checked="checked">男 <br>
<input type="radio">女
? </fieldset>
? <fieldset>
?
HTML腳本
JavaScript是HTML文檔具有更強的動態性和交互性
JavaScript最常用于圖片操作、表單驗證、動態內容更新
<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 noscript 元素中的內容：
HTML統一資源定位器URL
URL（Unifrom?Resource Locator）也被稱為網址
URL可由單詞組成，比如www.taobao.com，或者因特網協議（IP）地址：192.168.12.122。大多數人上網的時候會輸入網站的域名。
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
?
統一資源定位器（URL）用于定位萬維網上的文檔（或其他數據）。
網址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的語法規則：
scheme://host.domain:port/path/filename
?
?
◆解釋：
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 w3school.com.cn
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
filename - 定義文檔/資源的名稱
| Scheme（服務類型） | 訪問 | 用于… |
| http | 超文本傳輸協議 | 以http://開頭的普通網頁，不加密 |
| https | 安全超文本傳輸協議 | 安全網頁，加密所有信息交換 |
| ftp | 文件傳輸協議 | 用于將文件上傳或者下載 |
| File | ? | 您計算機上的文件 |
?
?
?
?
?
?
?
?
?
?HTML WEB Server
ISP：因特網服務提供商
大多數小公司會把網站存放到由 ISP 提供的服務器上
HTML多媒體
Web 上的多媒體指的是音效、音樂、視頻和動畫。
HTML5多媒體標簽
<embed src=“路徑” width=“” height=“”></embed>
?
XHTML
?什么是XHTML？
- XHTML 指的是可擴展超文本標記語言
- XHTML 與 HTML 4.01 幾乎是相同的
- XHTML 是更嚴格更純凈的 HTML 版本
- XHTML 是以 XML 應用的方式定義的 HTML
- XHTML 是 2001 年 1 月發布的 W3C 推薦標準
- XHTML 得到所有主流瀏覽器的支持
為什么使用 XHTML？
因特網上的很多頁面包含了“糟糕”的 HTML。
XHTML 是一種必須正確標記且格式良好的標記語言
與 HTML 相比最重要的區別
文檔結構
- XHTML DOCTYPE 是強制性的?
- <html> 中的 XML namespace 屬性是強制性的?
- <html>、<head>、<title> 以及 <body> 也是強制性的?
- XHTML 元素必須正確嵌套?
- XHTML 元素必須始終關閉?
- XHTML 元素必須小寫?
- XHTML 文檔必須有一個根元素?
- XHTML 屬性必須使用小寫?
- XHTML 屬性值必須用引號包圍?
- XHTML 屬性最小化也是禁止的
元素語法
?
- XHTML 元素必須正確嵌套?
- XHTML 元素必須始終關閉?
- XHTML 元素必須小寫?
- XHTML 文檔必須有一個根元素?
?
屬性語法
?
- XHTML 屬性必須使用小寫?
- XHTML 屬性值必須用引號包圍?
- XHTML 屬性最小化也是禁止的
?
XHTML 文檔必須進行 XHTML 文檔類型聲明
（XHTML DOCTYPE declaration）。
如何從 HTML 轉換到 XHTML
?
總結
以上是生活随笔為你收集整理的HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html实现 页面禁止右键 禁止复制 禁
- 下一篇： 前端总结·基础篇·CSS（二）视觉