整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁，又叫Web，其實(shí)就是一個(gè)后綴名為.html的文本文件。HTML文件采用超級(jí)文本標(biāo)記語言(HyperText Markup Language)書寫而成，最終由客戶端瀏覽器解釋并呈現(xiàn)給用戶。
Web由HTML內(nèi)容、CSS樣式、JavaScript前端行為三要素組成。開發(fā)一個(gè)網(wǎng)頁，就好比設(shè)計(jì)一出舞臺(tái)劇，首先要決定舞臺(tái)上有哪些演員(HTML網(wǎng)頁內(nèi)容)、演員的扮相(CSS網(wǎng)頁樣式)、演員的動(dòng)作及劇情(JavaScript網(wǎng)頁前端行為)。
HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，標(biāo)記標(biāo)簽是HTML語言中最基本的單位，是HTML中最重要的組成部分。
標(biāo)記是HTML文檔中一些有特定意義的符號(hào)，這些符號(hào)指明網(wǎng)頁內(nèi)容的含義或結(jié)構(gòu)。
標(biāo)記即標(biāo)簽，不同的標(biāo)記能實(shí)現(xiàn)不同的功能。HTML標(biāo)記按功能可大致分為六大類。分別是語義標(biāo)記、元標(biāo)記、文本標(biāo)記、容器標(biāo)記、嵌入式標(biāo)記，以及表單和表單元素標(biāo)記六大類。
(1) 語義標(biāo)記。又稱結(jié)構(gòu)標(biāo)記，是指盡量使用有相對(duì)應(yīng)結(jié)構(gòu)含義的HTML標(biāo)記。語義標(biāo)記的逐漸增加便于開發(fā)者閱讀并寫出優(yōu)雅美麗的代碼，同時(shí)讓瀏覽器的“爬蟲”和機(jī)器更好地解析檢索。在沒有CSS的情況下，語義標(biāo)記讓頁面也能呈現(xiàn)出很好的內(nèi)容、代碼結(jié)構(gòu)。簡(jiǎn)而言之，語義標(biāo)記的使用，即是為了網(wǎng)頁“裸奔時(shí)也好看”。
(2) 元標(biāo)記。是指位于HTML文件頭部的一些特殊代碼，是解釋說明的標(biāo)記。其主要功能就是對(duì)文檔進(jìn)行說明，描述HTML文檔的整體信息。元標(biāo)記向?yàn)g覽者提供某一頁面的附加信息，告訴我們它是誰。當(dāng)客戶機(jī)找服務(wù)器要東西時(shí)，它幫助一些搜索引擎進(jìn)行頁面分析，使導(dǎo)出的某一頁面檢索信息能正確地放入合適的目錄中。
HTML元標(biāo)記出現(xiàn)于網(wǎng)頁頭標(biāo)簽處，主要包括標(biāo)題標(biāo)記、關(guān)鍵詞標(biāo)記、描述標(biāo)記等，合理運(yùn)用元標(biāo)記會(huì)使網(wǎng)頁在搜索引擎中表現(xiàn)更為突出。
(3) 文本標(biāo)記。這是最重要、最基本的標(biāo)記，一般只能嵌套文本、超鏈接的標(biāo)簽。為了讓網(wǎng)頁中的文本看上去編排有序、整齊美觀、錯(cuò)落有致，就要設(shè)置文本的標(biāo)題、字號(hào)大小、字體顏色、字體類型以及換行、換段等。而為實(shí)現(xiàn)這一目的所使用的特定的HTML語言，就叫作文本標(biāo)記。
(4) 容器標(biāo)記。又稱作內(nèi)容組織標(biāo)記，可以簡(jiǎn)單地理解為它是能嵌套其他所有標(biāo)簽的標(biāo)簽，是用來裝東西的容器。容器與容器之間也可以相互嵌套，表現(xiàn)為父級(jí)容器和子級(jí)容器。
如div標(biāo)簽中可以鑲嵌span標(biāo)簽，div可以看作是一個(gè)可以裝入其他標(biāo)簽的大容器，span是一個(gè)只能裝文本的小容器，大容器當(dāng)然可以放得下小容器。
(5) 嵌入式標(biāo)記。常用于嵌入圖像、音頻、視頻、flash動(dòng)畫、插件等多媒體元素，使網(wǎng)頁呈現(xiàn)方式更加多樣化，還可以嵌套某些標(biāo)簽來指定視頻文件的路徑或者網(wǎng)址路徑，決定多媒體元素的屬性和播放方式等。
(6) 表單和表單元素標(biāo)記。多用于制作網(wǎng)頁和用戶交互的界面、控件，是客戶端與服務(wù)器端進(jìn)行信息交流的途徑。用戶可以使用諸如文本域、列表框、復(fù)選框及單選按鈕之類的表單元素輸入信息，然后單擊某個(gè)按鈕提交這些信息。
如果說HTML語言規(guī)定了網(wǎng)頁的具體內(nèi)容，那么CSS(cascading style sheets)就是為了給這些內(nèi)容進(jìn)行規(guī)整和裝飾而存在的。CSS最初的誕生，就是因?yàn)镠TML為了滿足頁面設(shè)計(jì)者的顯示要求而變得臃腫復(fù)雜，因而需要一種樣式表語言達(dá)到控制頁面呈現(xiàn)內(nèi)容的效果。CSS讓整個(gè)頁面可視化程度更強(qiáng)，可以說是網(wǎng)頁的門面。如果將網(wǎng)頁比作一個(gè)舞臺(tái)，HTML是舞臺(tái)上的演員，那么CSS就是演員的扮相，更完美地將節(jié)目(即頁面內(nèi)容)呈現(xiàn)在觀眾面前。
CSS即層疊樣式表。作為一種用來表現(xiàn)HTML或者XML的計(jì)算機(jī)語言,CSS可以對(duì)網(wǎng)頁元素位置的排版進(jìn)行像素級(jí)別的精確控制,可以靜態(tài)地修飾網(wǎng)頁,也可以配合腳本語言(如后文會(huì)提到的JavaScript)動(dòng)態(tài)地格式化網(wǎng)頁元素。
所謂層疊，是即樣式可以層層疊加。
每個(gè)HTML元素都有一組樣式屬性,它們可以通過CSS來設(shè)定。這些屬性涉及背景(background)、字體(fonts)、顏色(color)、鏈接(link)、邊框(border)、列表樣式(url)等。CSS就是一種先選擇HTML元素,然后設(shè)定選中元素屬性的機(jī)制。
CSS選擇器和要應(yīng)用的樣式構(gòu)成了一條CSS規(guī)則。
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器及一條或多條聲明。選擇器(selector)就是想要改變樣式的HTML元素;每條聲明(declaration)由一個(gè)屬性(property)和一個(gè)值(value)構(gòu)成。屬性是想要設(shè)置的樣式屬性(style attribute),每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)(:)分開,CSS聲明總是以分號(hào)(;)結(jié)束,聲明組以大括號(hào)({ })括起來。
JavaScript最早是由Netscape Communication(網(wǎng)景)公司開發(fā)出來的一種客戶端腳本語言,將JavaScript代碼直接嵌入在HTML頁面中，能對(duì)HTML頁面中的HTML、CSS和JavaScript本身進(jìn)行增加、刪除、修改、查詢等操作，使得客戶端靜態(tài)頁面變成支持用戶交互并響應(yīng)相應(yīng)事件的動(dòng)態(tài)頁面(DHTML=HTML+CSS+JavaScript)。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，使得開發(fā)客戶端Web應(yīng)用程序成為可能。
HTML Web運(yùn)行在瀏覽器中，這就是說瀏覽器是Web的實(shí)際運(yùn)行環(huán)境。如果將運(yùn)行環(huán)境視為一個(gè)京劇表演的舞臺(tái)，則在這個(gè)舞臺(tái)上有網(wǎng)頁內(nèi)容HTML(演員)、網(wǎng)頁樣式CSS(演員的扮相)、網(wǎng)頁行為JavaScript(演員的動(dòng)作)。JavaScript只能在自己的舞臺(tái)上表演，能對(duì)舞臺(tái)上的既有存在(HTML、CSS、JavaScript)進(jìn)行操作(增、刪、改、查)，而不能跨越到舞臺(tái)外面表演(功能受限，JavaScript程序不能操作瀏覽器之外的事物)。
更進(jìn)一步思考與觀察，會(huì)發(fā)現(xiàn)兩個(gè)有趣的現(xiàn)象:
① 當(dāng)網(wǎng)站被服務(wù)器軟件架設(shè)起來時(shí)(如同京劇正式開演)，由于遵守網(wǎng)絡(luò)安全協(xié)議，JavaScript這個(gè)演員的功能受限于表演的舞臺(tái)(也就是瀏覽器客戶區(qū))。也就是說，此時(shí)JavaScript是存在功能受限的，能對(duì)HTML、CSS、JavaScript進(jìn)行增刪改查，而不能對(duì)瀏覽器客戶區(qū)之外做任何事情，如不能操作硬盤等本地資源等。為了在互聯(lián)網(wǎng)上搭建網(wǎng)站，讓所有人都能看到的，還需要租用域名、空間。
② 當(dāng)直接雙擊運(yùn)行本地Web文件時(shí)(如同京劇在做排練)，JavaScript的功能相對(duì)不受限制。此時(shí)JavaScript可以訪問本地資源，如讀取本機(jī)IP、操縱本地文件系統(tǒng)等。但這樣架設(shè)的Web不能被他人通過網(wǎng)絡(luò)訪問，也不能被百度檢索。事實(shí)上，我們可以在本地放置無數(shù)個(gè)網(wǎng)頁，只要我們的硬盤容量足夠大。
JavaScript包含了三個(gè)部分的內(nèi)容：JavaScript腳本語言規(guī)范EMCAScript(語言核心)、文檔對(duì)象模型DOM(以面向?qū)ο蟮姆绞讲倏v文檔內(nèi)容)、瀏覽器對(duì)象模型BOM(以面向?qū)ο蟮姆绞讲倏v瀏覽器窗口元素)。
3.1 語言核心EMCA Script
EMCA 是歐洲計(jì)算機(jī)制造商協(xié)會(huì)(EuropeanComputer Manufacturers Association)的縮寫，EMCAScript就是這個(gè)協(xié)會(huì)制定的標(biāo)準(zhǔn)化腳本語言。我們知道，JavaScript是一門編程語言，而每一種語言都有它自己的基本語法如數(shù)據(jù)類型等，這些概念必須遵循一定的規(guī)范，瀏覽器開發(fā)者要嚴(yán)格依據(jù)這個(gè)規(guī)范來開發(fā)編譯器，JavaScript程序員要嚴(yán)格依據(jù)這個(gè)規(guī)范來調(diào)用API。也就是說，EMCAScript是JavaScript的語法規(guī)范，規(guī)定了JavaScript腳本的核心內(nèi)容。打個(gè)比方，新華字典(也算是一種語言規(guī)范)規(guī)定了“血”這個(gè)字，而無論在“血液”中的讀“xuè”，還是在“血暈”中的讀“xiě”。新華字典規(guī)范了漢字，EMCAScript規(guī)范了JavaScript。
3.2 文檔對(duì)象模型DOM
文檔對(duì)象模型(document object model)是針對(duì)HTML和XML文檔的應(yīng)用程序編程接口。DOM 把整個(gè)頁面規(guī)劃成由多個(gè)節(jié)點(diǎn)構(gòu)成的文檔，我們可以用DOM API將頁面內(nèi)容繪制成一個(gè)樹狀圖。在這種模型下，頁面中的每個(gè)部分都是可用程序操縱的節(jié)點(diǎn)，我們可以通過DOM 來方便地控制頁面的結(jié)構(gòu)和內(nèi)容(增加、刪除、修改、查詢等)，如我們就可以用document.getElementById()通過id號(hào)來查詢文檔中的元素。DOM 使得用戶頁面可以動(dòng)態(tài)地變化，用戶可以和Web文檔內(nèi)容進(jìn)行交互。
3.3 瀏覽器對(duì)象模型
瀏覽器對(duì)象模型BOM(browser object model)是針對(duì)瀏覽器的應(yīng)用程序編程接口。我們可以通過BOM 對(duì)瀏覽器窗口進(jìn)行訪問和操作，例如彈出新的瀏覽器窗口，移動(dòng)、關(guān)閉和更改瀏覽器窗口，提供詳細(xì)的網(wǎng)絡(luò)瀏覽器信息(navigator object)、詳細(xì)的頁面信息(location object)、詳細(xì)的用戶屏幕分辨率的信息(screen object)等。BOM 方便我們從瀏覽器上獲得信息，更好地和瀏覽器進(jìn)行交互。例如，我們可以用window.alert()彈出消息框，用window.prompt()彈出提示框，使得用戶可以和瀏覽器窗口進(jìn)行交互。
點(diǎn)擊沒同選項(xiàng)卡，實(shí)現(xiàn)如下切換效果：
代碼：
<html>
<head>
<title>tab control</title></head>
<style type="text/css">
#tab{
position:relative;/* 定義選項(xiàng)卡的為相對(duì)定位，使其子級(jí)元素有定位參考對(duì)象 */
width:45%;
height:400px;
}
#tab h4{
display:inline;
background-color:#ccc;
color:black;
}
#tab div{
border:1px #666 solid;
position:absolute; /*tab下的div疊在一起*/
top:28px;
left:0px;
width:100%;
height:370px;
display:none;
}
#tab .block{
display:block;
}
#tab .up{
color:#999999;
background-color:black;
}
</style>
<script>
function tabSwitch(tab,ao) {
var h = document.getElementById(tab).getElementsByTagName("h4");
var d = document.getElementById(tab).getElementsByTagName("div");
var n = document.getElementById(tab).getElementsByTagName("div").length;
for (var i = 0; i < n; i++) {
if (ao - 1 == i) {
h[i].className += " up";
d[i].className += " block";
} else {
h[i].className = " ";
d[i].className = " ";
}
}
}
</script>
<body>
<div id="tab">
<h4 onclick="tabSwitch('tab',1)" class="up">道德經(jīng)</h4>
<h4 onclick="tabSwitch('tab',2)" >岳陽樓記</h4>
<h4 onclick="tabSwitch('tab',3)" >中庸</h4>
<div class="block">
<p>上善若水。</p>
<p>水善利萬物而不爭(zhēng)，處眾人之所惡，故幾於道。</p>
<p>居善地，心善淵，與善仁，言善信，正善治，事善能，動(dòng)善時(shí)。</p>
<p>夫唯不爭(zhēng)，故無尤。</p>
</div>
<div>
<p>不以物喜，不以己悲</p>
<p>惟江上之清風(fēng)，與山間之明月</p>
<p>耳得之而為聲，目遇之而成色</p>
</div>
<div>
<p>博學(xué)，審問，慎思，明辨，篤行。</p>
<p>學(xué)之要能，問之要知，思之要得，辨之要明，行之要篤。</p>
<p>雖愚必明，雖柔必強(qiáng)。</p>
</div>
</div>
</body>
</html>ref：
王小峰《大話Web開發(fā)：基于知識(shí)管理角度》
－End－
本文主要記錄常用的html標(biāo)簽使用說明，用起來的時(shí)候偶爾查查。
標(biāo)簽 | 英文全拼 | 作用 | 特點(diǎn) |
?<html></html>?? | html | 網(wǎng)頁的根標(biāo)簽 | 所有的標(biāo)簽都要寫在這一對(duì)根標(biāo)簽里面 |
??<head></head>?? | head | 網(wǎng)頁的頭標(biāo)簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網(wǎng)頁的主題 | 包含文檔的所有內(nèi)容 |
??<div></div>?? | division | 定義一個(gè)區(qū)域 | 瀏覽器通常會(huì)在??<div>??前后放置一個(gè)換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標(biāo)簽 |
??<br>或<br/>?? | break | 換行 | 單標(biāo)簽，不會(huì)在其前后創(chuàng)建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標(biāo)簽 |
??<img src="">?? | image | 添加圖片 | 單標(biāo)簽 |
??<embed src="">?? | embed | 嵌入外部應(yīng)用 | 單標(biāo)簽 |
??<meta>?? | meta | 提供有關(guān)頁面的元信息 | 單標(biāo)簽，??<meta>???標(biāo)簽通常位于??<head>??區(qū)域內(nèi) |
??<link>?? | link | 定義文檔與外部資源的關(guān)系 | 單標(biāo)簽，??<link>???標(biāo)簽只能存在于??<head>??區(qū)域內(nèi)，不過它可出現(xiàn)任何次數(shù)。 |
??<p></p>?? | paragraph | 定義段落 | 自動(dòng)在其前后創(chuàng)建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標(biāo)題 | h1在一個(gè)頁面里只能出現(xiàn)一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標(biāo)記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標(biāo)記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內(nèi)容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標(biāo)簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標(biāo)簽一起使用 |
??<li></li>?? | list item | 創(chuàng)建列表項(xiàng) | 可與各種列表定義標(biāo)簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項(xiàng)目 |
??<dd></dd>?? | definition description | 定義描述 | 對(duì)描述列表中的項(xiàng)目進(jìn)行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個(gè)??<tr>???標(biāo)簽包含一個(gè)或多個(gè)??<th>???或??<td>??標(biāo)簽 |
??<th></th>?? | table headline | 定義表格每一列的標(biāo)題 | 該標(biāo)簽的文本通常呈現(xiàn)為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數(shù)據(jù) | 該標(biāo)簽的文本呈現(xiàn)為普通且左對(duì)齊 |
??<caption>表格標(biāo)題</caption>?? | caption | 定義整個(gè)表格的標(biāo)題 | ??<caption>???標(biāo)簽必須直接放在??<table>??標(biāo)簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標(biāo)簽定義了列表中的可用選項(xiàng) |
??<option></option>?? | option | 定義下拉列表中的可用項(xiàng) | ??<option>??標(biāo)簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項(xiàng)組 | ??<optgroup>??標(biāo)簽用于把相關(guān)的選項(xiàng)組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認(rèn)字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個(gè)元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標(biāo)題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標(biāo)題 | ??<legend>??通過css設(shè)定樣式 |
??<progress></progress>?? | progress | 定義運(yùn)行中的任務(wù)進(jìn)度 | ??<progress>???是HTML5中的新標(biāo)簽，??<progress>??標(biāo)簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標(biāo)簽，??<meter>??標(biāo)簽不適合用來表示進(jìn)度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標(biāo)簽是HTML5的新標(biāo)簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標(biāo)簽是HTML5的新標(biāo)簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標(biāo)簽是HTML5中的新標(biāo)簽 |
普通用法
錨點(diǎn)鏈接
錨點(diǎn)鏈接通過點(diǎn)擊超鏈接，自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置，類似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性，最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁面元素，其他頁面跳轉(zhuǎn)自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動(dòng)生成隨機(jī)文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復(fù)lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設(shè)置
在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網(wǎng)頁自動(dòng)跳轉(zhuǎn)
無序列表
無序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡(jiǎn)單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數(shù)字進(jìn)行標(biāo)記，我們可以通過整數(shù)值start指定列表編號(hào)的起始值。簡(jiǎn)單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡(jiǎn)單示例如下。
<dl>
<dt>A</dt> <!-- 小標(biāo)題 -->
<dd>A1</dd> <!-- 解釋標(biāo)題 -->
<dd>A2</dd> <!-- 解釋標(biāo)題 -->
<dt>B</dt> <!-- 小標(biāo)題 -->
<dd>B1</dd> <!-- 解釋標(biāo)題 -->
<dd>B2</dd> <!-- 解釋標(biāo)題 -->
</dl>基礎(chǔ)表格
簡(jiǎn)單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標(biāo)題</caption> <!-- 定義表格標(biāo)題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標(biāo)題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡(jiǎn)單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對(duì)于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡(jiǎn)單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡(jiǎn)單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個(gè)單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個(gè)單選框只能有一個(gè)被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認(rèn)選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡(jiǎn)單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡(jiǎn)單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡(jiǎn)單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網(wǎng)址控件
<input type="date">日期控件
<input type="time">時(shí)間控件
<!--email提供了郵箱的完整驗(yàn)證，必須包含@和后綴，如果不滿足驗(yàn)證，會(huì)阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數(shù)字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??
??<progress>??
簡(jiǎn)單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡(jiǎn)單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡(jiǎn)單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡(jiǎn)單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡(jiǎn)單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對(duì)照表??
Html是Hyper Text Mark-up Language 的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另一個(gè)網(wǎng)頁。
Html中標(biāo)簽分為 ：成對(duì)標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】
成對(duì)出現(xiàn)，有開始標(biāo)簽必須有結(jié)束標(biāo)簽，內(nèi)容包裹在兩個(gè)標(biāo)簽中，而且開始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開頭
語法：
<font>內(nèi)容</font>
只有一個(gè)標(biāo)簽，用斜杠結(jié)束，斜杠也可以省略
語法：
<br/>
注意事項(xiàng)：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
!DOCTYPE html是文檔聲明，定義文檔類型為html，并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進(jìn)行解析html語言，如果不寫的話，會(huì)產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會(huì)用自己的方式進(jìn)行解析，不同的瀏覽器有各自的解析方式，從而會(huì)出現(xiàn)無效果、不兼容等問題。
注意，html中有兩種聲明類型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級(jí)版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>
html是html文檔的整體，也就是表示一個(gè)網(wǎng)頁。
html中的lang="en"是定義該文件語言是英文
head是html的第一層子元素【子標(biāo)簽】，負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄中。即title標(biāo)簽。
meta是html語言head標(biāo)簽中的一個(gè)輔助性標(biāo)簽，該標(biāo)簽不包含任何內(nèi)容，但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱，比如：編碼
<meta charset="utf-8"></meta>
body也是html的第一層子元素，我們頁面中顯示的所有內(nèi)容全部都是編寫在該標(biāo)簽體中。
html制定了文檔的編寫規(guī)范，必須遵守。
所有的標(biāo)簽必須小寫
所有的屬性必須用雙引號(hào)括起來
html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說明和解釋，注釋的內(nèi)容不會(huì)顯示在頁面上。
注釋的語法：
<!-- 注釋的內(nèi)容 -->
注：屬性是標(biāo)簽的輔助作用。
屬性 描述 bgcolor 設(shè)置網(wǎng)頁的背景顏色 background 設(shè)置網(wǎng)頁的背景圖片
設(shè)置網(wǎng)頁的背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的屬性</title>
</head>
<body bacolor="pink">
</body>
</html>
我們?cè)陂_發(fā)網(wǎng)頁時(shí)，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個(gè)位置就是所謂的路徑
路徑分為：
設(shè)置網(wǎng)頁的背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的屬性</title>
</head>
<body background="../images/10.jpg">
</body>
</html>
注意事項(xiàng)：
bgcolor和background不能同時(shí)使用
background不能指定絕對(duì)路徑
網(wǎng)頁的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。
標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n：取值范圍 1~6】 center 居中對(duì)齊 hr 水平線 屬性（width：寬度 color：顏色 size：粗細(xì)） br 換行 p 段落
標(biāo)簽 描述 font 設(shè)置字體，需要借助屬性設(shè)置
屬性 描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認(rèn)值：3】 face 設(shè)置字體風(fēng)格
<font size="2" color="red" face="黑體"></font>
標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號(hào)字 strong 定義加重語氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html文本格式化標(biāo)簽</title>
</head>
<body>
<b>粗體文本</b>
<i>傾斜文本</i>
<em>著重文本</em>
<small>小號(hào)字</small>
<strong>加重語氣</strong>
<sub>上標(biāo)</sub>
<sup>下標(biāo)</sup>
<ins>插入字</ins>
<del>刪除字</del>
</body>
</html>
在Html中，圖像由
標(biāo)簽定義。
是空標(biāo)簽，意思是說，它只包含屬性。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。
標(biāo)簽 描述 img 圖片標(biāo)簽
屬性 描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本
注意事項(xiàng)：不建議設(shè)置圖片大小，容易失真
在Html中，聲音由標(biāo)簽定義。
標(biāo)簽 描述 audio 聲音標(biāo)簽
屬性 描述 src 指定聲音地址
<audio src="nice.mp3">對(duì)不起，您的瀏覽器不支持</audio>
在Html中，視頻由video標(biāo)簽定義
標(biāo)簽 描述 video 視頻標(biāo)簽
屬性 描述 src 指定視頻地址
<video src="美女.mp4">對(duì)不起，您的瀏覽器不支持</video>
a標(biāo)簽定義超鏈接，用于從一個(gè)頁面鏈接到另一個(gè)頁面。
a標(biāo)簽最重要的屬性是href，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀如下：
未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動(dòng)鏈接帶有下劃線而且是紅色的
語法：
<a href="鏈接目標(biāo)">點(diǎn)擊內(nèi)容</a>
屬性 描述 href 指定鏈接目標(biāo) name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式 屬性值 描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認(rèn)，在當(dāng)前窗口打開【了解】 _top 在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體【了解】 framename 到 iframe 在講【常用】
超鏈接分類：
列表的使用與word等軟件的列表概念相似，只不過是應(yīng)用在網(wǎng)頁展示中。
有序列表是指有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。
<!-- 有序列表 -->
<ol type="a">
<li>新聞一</li>
<li>新聞二</li>
<li>新聞三</li>
</ol>
屬性 描述 type 設(shè)置符號(hào)類型 值：1 a A I i 默認(rèn)數(shù)字 start 從第幾個(gè)開始【用于ol標(biāo)簽中】 value 從第幾個(gè)開始【用于li標(biāo)簽中】
<!-- 有序列表 -->
<ol type="a" start="4">
<li>新聞一</li>
<li type="1" value="1">新聞二</li>
<li>新聞三</li>
</ol>
無序列表是指沒有數(shù)字編號(hào)或字母的列表項(xiàng)，可以使用css定義更多樣式。
<!-- 無序列表 -->
<ul>
<li>童裝</li>
<li>男裝</li>
<li>女裝</li>
</ul>
屬性 描述 type 用于設(shè)置符號(hào)類型，默認(rèn)：實(shí)心圓 值：空心圓、正方形 【用于ul、li】
<!-- 無序列表 -->
<ul type="square">
<li>童裝</li>
<li type="circle">男裝</li>
<li>女裝</li>
</ul>
描述列表指每個(gè)列表項(xiàng)有單獨(dú)的標(biāo)題。
<!-- 描述列表 -->
<dl>
<dt>開源產(chǎn)品</dt>
<dd>Java封裝庫(kù)</dd>
<dd>Web組件庫(kù)</dd>
<dt>網(wǎng)站導(dǎo)航</dt>
<dd>mrliujava.com</dd>
<dd>mrliuweb.com</dd>
</dl>
表格在網(wǎng)頁開發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時(shí)候。
標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部
屬性 描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對(duì)齊方式
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>員工薪資統(tǒng)計(jì)表</caption>
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>職位</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程師</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程師</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>測(cè)試工程師</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>當(dāng)前頁：1 頁</td>
<td>上一頁</td>
<td>下一頁</td>
<td>尾頁</td>
<td>共 3 頁</td>
</tr>
</tfoot>
</table>
屬性 說明 rowspan 行合并 colspan 列合并
下面是行合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>員工薪資統(tǒng)計(jì)表</caption>
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>職位</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td rowspan="2">JavaEe工程師</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>測(cè)試工程師</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>當(dāng)前頁：1 頁</td>
<td>上一頁</td>
<td>下一頁</td>
<td>尾頁</td>
<td>共 3 頁</td>
</tr>
</tfoot>
</table>
下面是列合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>員工薪資統(tǒng)計(jì)表</caption>
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>職位</th>
<th>薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程師</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程師</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">傻蛋</td>
<td>測(cè)試工程師</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>當(dāng)前頁：1 頁</td>
<td>上一頁</td>
<td>下一頁</td>
<td>尾頁</td>
<td>共 3 頁</td>
</tr>
</tfoot>
</table>
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。
表單需要使用表單標(biāo)簽來設(shè)置：
<!-- 表單 -->
<form>
input元素
</form>
屬性 說明 action 后臺(tái)地址 method 提交方式GET或POST
GET和POST區(qū)別：
1.GET
2.POST
<form action="后端接口" method="POST">
<input type="text">
<input type="password">
</form>
使用label用于描述表單標(biāo)題，當(dāng)點(diǎn)擊標(biāo)題后文本框會(huì)獲得焦點(diǎn)，需要保證使用的ID在頁面中是唯一的。
<form action="后端接口" method="POST">
<label for="username">用戶名</label>
<input type="text" id="username">
<label for="password">密碼</label>
<input type="password" id="password">
</form>
也可以將文本框放在label標(biāo)簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。
文本框用于輸入單行文本使用，下面是常用屬性與示例。
屬性 說明 type 表單類型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長(zhǎng)度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類型 比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機(jī)上傳文件,支持的值有microphone , video , camera
<form action="后端接口" method="POST">
<label for="username">用戶名</label>
<input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名" maxlength="5" size="50" required>
</form>
當(dāng)input類型為file時(shí)手機(jī)會(huì)讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.
<form action="后端接口" method="POST">
<label for="file">上傳文件</label>
<input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>
通過設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.
類型 說明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項(xiàng) tel 電話號(hào),移動(dòng)端會(huì)調(diào)出數(shù)字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕
隱藏表單用于提交后臺(tái)數(shù)據(jù),但在前臺(tái)內(nèi)容不顯示所以在其上做用樣式定義也沒有意義.
<input type="hidden" name="id" value="1">
創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺(tái),有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.
a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會(huì)提交到后臺(tái),如果有多個(gè)表單項(xiàng)可以通過這些進(jìn)行判斷是哪個(gè)表單提交的.
<input type="submit" name="submit" value="提交表單">
b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.
<button type="submit">提交表單</button>
通過為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端
<input type="text" value="數(shù)據(jù)" readonly>
表單可以通過設(shè)置pattern屬性指定正則驗(yàn)證.
屬性 說明 pattern 正則表達(dá)式驗(yàn)證規(guī)則 oninvalid 輸入錯(cuò)誤時(shí)觸發(fā)的事件
<form action="">
<label for="username">用戶名</label>
<input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請(qǐng)輸入5~20位字母的用戶名')">
<button>提交表單</button>
</form>
<script>
function validate(message){
alert(message);
}
</script>
文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.
屬性 說明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)
<textarea cols="30" rows="3">請(qǐng)踩踩我......</textarea>
下拉列表項(xiàng)可用于多個(gè)值中的選擇.
屬性 說明 multiple 支持多選 size 列表框高度 optgroup 選項(xiàng)組 selected 選中狀態(tài) option 選項(xiàng)值
<form action="">
<select multiple size="10">
<option value="">選擇課程</option>
<optgroup label="后端">
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">LINUX</option>
</optgroup>
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JAVASCRIPT</option>
</optgroup>
</select>
</form>
單選框指只能選擇一個(gè)選項(xiàng)的表單,如性別的選擇:男 , 女 , 保密 只能選擇一個(gè).
屬性 說明 checked 選中狀態(tài)
<form action="">
<input type="radio" name="" id="boy" checked>
<label for="boy">男</label>
<input type="radio" name="" id="girl">
<label for="girl">女</label>
</form>
復(fù)選框指允許選擇多個(gè)值的表單
屬性 說明 checked 選中狀態(tài)
<form action="">
<input type="checkbox" name="JAVA" id="java">
<label for="java">JAVA</label>
<input type="checkbox" name="WEB" id="web">
<label for="web">WEB</label>
</form>
文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.
屬性 說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif
<form action="" enctype="multipart/form-data">
<input type="file">
<input type="submit" value="上傳">
</form>
屬性 說明 min 最小時(shí)間 max 最大時(shí)間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月
a.日期選擇
<h1>日期選擇</h1>
<form action="">
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
</form>
b.周選擇
<h1>周選擇</h1>
<input type="week" name="" id="">
c.月份選擇
<h1>月選擇</h1>
<input type="month" name="" id="">
d.日期與時(shí)間
<h1>日期與時(shí)間</h1>
<input type="datetime-local" name="" id="">
input表單的輸入值選項(xiàng)列表
<form action="">
<label for="username">用戶名</label>
<input type="text" name="" id="usernmae" list="less">
<datalist id="less">
<option value="JAVA">后臺(tái)管理語言</option>
<option value="CSS">美化網(wǎng)站頁面</option>
<option value="MYSQL">掌握數(shù)據(jù)庫(kù)使用</option>
</datalist>
</form>
frameset元素可定義一個(gè)框架集。它被用來組織多個(gè)窗口（框架），每個(gè)框架存有獨(dú)立的文檔，在其最簡(jiǎn)單的應(yīng)用中，frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。
注意事項(xiàng)：由于是分割原網(wǎng)頁，所以我們不能在body中進(jìn)行編寫，在head中進(jìn)行分割。
標(biāo)簽 說明 frameset 框架集 frame 框架
屬性 說明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動(dòng)條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset cols="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html>
12.2 水平框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html水平框架</title>
<frameset rows="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html混合框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html美女</title>
</head>
<body>
<img src="../images/10.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html野獸</title>
</head>
<body>
<img src="../images/timg.gif" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html動(dòng)物</title>
</head>
<body>
<img src="../images/4.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html鏈接</title>
</head>
<body>
<a href="Html美女.html" target="view">美女圖片</a>
<a href="Html野獸.html" target="view">野獸圖片</a>
<a href="Html動(dòng)物.html" target="view">動(dòng)物圖片</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架。
屬性 說明 align 對(duì)齊方式，后期采用css的方式進(jìn)行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動(dòng)條 frameborder 設(shè)置iframe的邊框
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
