本章內(nèi)容：
簡介
HTML 是什么？
htyper text markup language 即超文本標記語言。
超文本: 就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構(gòu)成的語言。
什么是標簽:
標簽的屬性:
HTML5基本結(jié)構(gòu):
將HTML4中的DTD定義為如下結(jié)構(gòu)即可，其他不變。
<!DOCTYPE HTML
HTML5支持的兩種指定頁面使用的字符集的方式:
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/
<meta charset="UTF-8"
<head 標簽
<title
<titleTitle</title
<base/
標簽為頁面上的所有鏈接規(guī)定默認地址或默認目標。
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<titleTitle</title
<base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/
<base target="_blank" /
</head
<body
<img src="o_s.png" alt="圖片加載失敗。。。"/
<a href="http://cnblogs.com/suoning/"nick blogs</a
</body
</html
# 上面這段代碼中，<img標簽的src屬性是一個相對路徑，因為<head中通過base標簽設置了鏈接的默認地址，
所以img的src實際的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
同樣的，<a中只是指定了href，并未指定target屬性，所以也會使用base中設置的target屬性的值。
<link/
引用外部文檔，常見于引用外部樣式。重要屬性有三個：rel、href、type。
rel 規(guī)定文檔與被鏈接文檔之間的關系。
href 資源的路徑（相對路徑/絕對路徑）。
type 規(guī)定被連接文檔的MIME類型，用于明確文件的打開方式。例如：.ico文件 image/x-icon。
<meta/
定義關于HTML文檔的元數(shù)據(jù)。 重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯(lián)到http頭部。
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/
<meta http-equiv="Refresh" content="2"
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com"
<meta http-equiv="expires" content="6 Jun 2016"/
name 把content屬性關聯(lián)到一個名稱。
<meta name="keywords" content="搜索關鍵字"
<meta name="description" content="簡要描述"
<meta name="author" content="http://cnblogs.com/suoning"
<meta name="generator" content="用以說明生成工具"
content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。
<body 標簽
1、塊級標簽和內(nèi)聯(lián)標簽
塊級標簽：<p<h1<table<ol<ul<form<div
內(nèi)聯(lián)標簽：<a<input<img<sub<sup<textarea<span
block（塊）元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內(nèi)邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
inline（內(nèi)聯(lián)）元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內(nèi)邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素，需要注意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
2、基本標簽
<h1~<h6 標題標簽.
<p: 段落標簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
style="text-indent: 2em"可以設置樣式為首行縮進兩個字符。
<blockquote</blockquote可以用來設置整個段落的縮進。
<b <strong: 加粗標簽.
<strike: 為文字加上一條中線.
<u: 文字下方加下劃線.
<em <i: 文字變成斜體.
<sup和<sub: 上角標 和 下角標.
<br:換行.
<hr:水平線.
<div
塊級標簽。塊級標簽常用于布局，行級標簽常用語顯示內(nèi)容。
div的顯示通常使用id或class來標識。id為唯一的標簽標識，class為標簽的類標識。
div的大小是由內(nèi)容來決定的，默認情況下，高度由內(nèi)容的高度決定，寬度適應屏幕。
可以容納其他元素，是一個容器。
<span
3、特殊符號
< <
空格
" 引號
© 版權(quán)符號
特殊符號 符號碼
" " ;
& & ;
< < ;
> ;
© © ;
® ® ;
± ± ;
× × ;
§ § ;
¢ ¢ ;
¥ ¥ ;
· · ;
&euro ;
£ £ ;
™ &trade ;
4、<a 超鏈接標簽(錨標簽)
重要屬性有三個：href、target、name
href 超鏈接地址：可以是Web上任意資源，包括圖片，網(wǎng)頁，樣式，腳本文件等。href="#"時，表示被鏈接頁面就是當前頁面。
target 文檔打開時要顯示的目標位置，屬性值一般有：_blank（新窗口中打開）、_self（默認，在超鏈接所在的容器中打開）、_parent（在超鏈接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。
name 錨記名稱。作用：跳轉(zhuǎn)到文檔的某個地方。返回首頁。
# 跳轉(zhuǎn)網(wǎng)頁
<a href="http://cnblogs.com/suoning" target="_blank"Nick Blogs</a
# 跳轉(zhuǎn)錨記書簽名稱
<a name="top"<h3Top！</h3</a
<div style="height: 800px"</div
<a href="#top"top</a
1.標簽最簡式
<a href="mailto:xxx@xx.com"郵件聯(lián)系</a
2.標簽幫你填抄送地址
<a href="mailto:xxx@xx.com?cc=xxxx@xx.com"郵件聯(lián)系</a
3.標簽幫你填暗送地址
<a href="mailto:xxx@xx.com?bcc=xxxx@xx.com"郵件聯(lián)系</a
4.暗,抄
<a href="xxxxx@xx.com"郵件聯(lián)系</a
5.標簽幫你填主題
<a href="mailto:xxx@xx.com?subject=這是主題"郵件聯(lián)系</a
6.填郵件內(nèi)容
<a href="mailto:xxx@xx.com?body=這是內(nèi)容"郵件聯(lián)系</a
7.多址發(fā)送
<a href="mailto:xxx@xx.com,xxxx@xx.com"郵件聯(lián)系</a
#http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"<img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這里給我發(fā)消息" title="點擊這里給我發(fā)消息"/</a
<a href="tencent://message/?uin=630571017" target="_blank"<img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13</a
# 更多圖片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13
5、<img 圖形標簽
行級標簽，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 鼠標懸浮在圖片上的文字。
alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網(wǎng)資源，則不會顯示要替換的文字。如果使用的是本網(wǎng)站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，并保留圖片設置的寬高結(jié)構(gòu)。
align 圖片周圍文字的垂直對齊情況。常用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/
6、列表標簽
<ul :無序列表標簽
<li:列表中的每一項.
<ol :有序列表標簽
<li:列表中的每一項.
<li主要的屬性有：type、value兩個:
<dl 定義列表
<dt 列表標題
<dd 列表項
<ur
<li type="circle"A</li
<li type="1"B</li
<li type="1"C</li
</ur
<ol
<li value="3"3</li
<li4</li
</ol
<dl
<dt<i標題</i</dt
<dd第一項</dd
<dd第二項</dd
<dd第三項</dd
</dl
7、<table 表格標簽
<table border="1"
<thead
<tr
<th序號</th
<th姓名</th
</tr
</thead
<tbody
<tr
<th1.</th
<tdnick</td
</tr
<tr
<th2.</th
<tdjenny</td
</tr
</tbody
</table
<table 表格標簽
<caption 表格的標題
<tr 表格的數(shù)據(jù)行，table row
<th 表格的表頭名稱，與<td不同在于文字采用加粗居中的形式顯示，table head cell
<td 單元格，用來顯示表格內(nèi)容，table data cell
<thead 表格頭部，使結(jié)構(gòu)更加分明
<tbody 表格主體部分，使結(jié)構(gòu)更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合并單元格），作用在th或者td上
<table
<captionxxxxxxxxxx</caption
<thead
<tr
<th序號</th
<th姓名</th
<th年齡</th
<th女神</th
</tr
</thead
<tbody
<tr
<th1.</th
<tdnick</td
<td18</td
<td可可西</td
</tr
<tr
<th2.</th
<tdjenny</td
<td21</td
<tdnick!!!</td
</tr
</tbody
</table
8、<form表單標簽
表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務器的交互。表單標簽, 要提交的所有內(nèi)容都應該在該標簽中。
屬性：action、method、enctype
action 表單要提交的地址，用于處理表單的內(nèi)容（一般是提交字典到后臺的一個接口，這個接口是java寫成的，提交到這個接口后后臺就知道如何處理這些數(shù)據(jù)了）。
method 提交的方法，默認是get方式提交。
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內(nèi)容的長度有限制.
post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內(nèi)容的長度理論上無限制.
enctype 對表單數(shù)據(jù)進行編碼，默認都是要編碼的。格式為：application/x-www-form-urlencoded（表單默認的編碼格式，表單發(fā)送前對所有字符進行編碼。編碼規(guī)則：空格轉(zhuǎn)換為“+”號，特殊符號轉(zhuǎn)換為ASC HEX值）。提交普通的文本內(nèi)容到服務器就可以采用這種默認的編碼方式。當你需要提交的是一個文件時，編碼就需要采用另一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉(zhuǎn)換為“+”號，但是不對特殊字符進行編碼）。
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<titleTitle</title
</head
<body
<form action="http://www.baidu.com/s"
<input type="text" name="wd"
<input type="submit" value="百度一下"
</form
</body
</html
<!DOCTYPE html
<html lang="en"
<head
<meta charset="UTF-8"
<titleTitle</title
</head
<body
<form action="http://www.sogou.com/web"
<input type="text" name="query"
<input type="submit" value="搜狗搜索"
</form
</body
</html
表單元素
<input type 屬性：
text 文本框輸入（默認text文本框類型）。
autocomplete（自動完成輸入的內(nèi)容，要求表單元素要有name屬性才有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）
disabled（設置或者獲取控件的狀態(tài)，默認是false即可用，等于true時不可用，不能輸入內(nèi)容）
password 密碼框。（以下屬性text和password共有）
size（指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字符為單位，對于其他元素，寬度以像素為單位）
maxlength（type為text或password時，表示輸入的最大字符數(shù)），有利于防止sql的注入攻擊
readonly 只讀.
placeholder 框內(nèi)預置內(nèi)容(灰色)，寫上內(nèi)容時才消失
radio 單選按鈕。屬性：
name（將name的值設置為相同值，才表示一組數(shù)據(jù)，才能實現(xiàn)單選功能）
value（必須要寫，提交到服務器的key值，實際開發(fā)過程中value一般是編號）
checked（是否被選中的狀態(tài)）
checkbox 復選框。
name（名字一定要一樣一樣的，才表示是一組數(shù)據(jù)，添加到同一value值列表提交到服務器）
value（必須要寫，提交到服務器的key值，實際開發(fā)過程中value一般是編號）
checked（是否被選中的狀態(tài)）
file 文件域，上傳文件（不同的瀏覽器表現(xiàn)形式不同）
submit 提交按鈕。用于提交表單。
reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態(tài)。
button 普通按鈕。一般結(jié)合javascript使用。
image 圖片按鈕，用來提交表單，與submit是一樣的效果。
src（圖片路徑）
hidden 隱藏字段。
value（隱藏的內(nèi)容）
color 顏色標簽。value指定顏色值（采用#十六進制數(shù)表示）。
date 日期。value值指定默認的日期，格式為****-**-**（年月日）。
datetime-local 顯示本地時間，value值指定默認的時間，格式為2016-05-20T11:10:10（年月日T時分秒）。
number 數(shù)字向上或者向下滑動。可以填數(shù)字然后向上或者向下選擇不同的值。
range 滑動標簽。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。
week 每年的周數(shù)。value指定哪一年第幾周，格式為2016-W25（2016年第25周）。
<textarea 文本域標簽。默認表現(xiàn)形式是可以輸入很多行文本的文本框。
name （表單提交項的key）
cols（設置文本域?qū)挾龋?/p>
rows（設置文本域高度，即行數(shù)）
<select 下拉框標簽。使用時要結(jié)合<option子標簽一起使用。
name:表單提交項的key
size：選項個數(shù)
multiple：多選
<option 下拉選中的每一項
<optgroup為每一項加上分組
<label 把元素與文本結(jié)合起來
友好設計：不只是選中復選框才能選中并打鉤，要求點擊對應的文字也能選中該復選框。
這種情況下要用到<label標簽的for屬性（設置或獲取給定標簽對象指定到的對象，值=另一個元素的id號即可）
<label for="name"姓名</label
<input id="name" type="text"
<fieldset 對表單中的相關元素進行分組
<fieldset
<legend溫馨提示</legend
<div align="middle"不要忘記點贊哦 ==</div
</fieldset
value: 表單提交項的值
對于不同的輸入類型，value 屬性的用法也不同：
框架
<frameset 框架
用來劃分窗體，不能放在<body中，否則沒有效果。
cols （縱向分割頁面。其數(shù)值表示方法有三種：“30%、30（或者30px）、*”；數(shù)值的個數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開。“30%”表示該框架區(qū)域占全部瀏覽器頁面區(qū)域的30%；“30”表示該區(qū)域橫向?qū)挾葹?0像素；“*”表示該區(qū)域占用余下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三部分，左面部分占頁面30%，中間橫向?qū)挾葹?00像素，頁面余下的作為右面部分。）
rows（橫向分割頁面。屬性和cols一樣）
frameborder（設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
border（框架之間的距離，一般設置為0）
bordercolor（邊框的顏色）
framespacing（設置框架與框架間的保留的空白距離）
<frameset cols="40%,*,*" 第一個框架占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
<frameset cols="*,*,*,*" 瀏覽器窗口等分為四部分。
<iframe 框架
元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
name （設置框架名稱。此為必須設置的屬性）
src （設置此框架要顯示的網(wǎng)頁名稱或路徑。此為必須設置的屬性）
scrolling （設置是否要顯示滾動條。設定值為auto, yes, no）
bordercolor （設置框架的邊框顏色）
frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
noresize （設置框架大小是否能手動調(diào)節(jié)）
marginwidth （設置框架邊界和其中內(nèi)容之間的寬度）
marginhight （設置框架邊界和其中內(nèi)容之間的高度）
width（設置框架寬度）
height （設置框架高度）
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
