一、HTML簡(jiǎn)介
?1、HTML是什么?
Hyper?Text?Markup?Language
超文本(功能豐富)標(biāo)記(標(biāo)簽)語言,用于搭建網(wǎng)頁(yè)結(jié)構(gòu)。
2、HTML標(biāo)記標(biāo)簽
由尖括號(hào)包圍,成對(duì)出現(xiàn)(開始標(biāo)簽/開放標(biāo)簽、結(jié)束標(biāo)簽/閉合標(biāo)簽)
<html>元素內(nèi)容</html>
3、HTML文檔
用于描述網(wǎng)頁(yè),包含 HTML 標(biāo)簽和純文本,也被稱為網(wǎng)頁(yè)
Web 瀏覽器的作用是讀取 HTML 文檔,并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽,而是使用標(biāo)簽來解釋頁(yè)面的內(nèi)容
二、HTML元素
HTML文檔由HTML元素定義。
1、HTML元素
HTML 元素指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼。
<a href="www.baidu.com"?> 搜索</a>
2、HTML元素語法
<開始標(biāo)簽>元素內(nèi)容<結(jié)束標(biāo)簽>
某些 HTML 元素具有空內(nèi)容,空元素在開始標(biāo)簽中進(jìn)行關(guān)閉(以開始標(biāo)簽的結(jié)束而結(jié)束),關(guān)閉空元素在開始標(biāo)簽中添加斜杠,比如 <br />。
大多數(shù) HTML 元素可擁有屬性
3、HTML常用標(biāo)簽
名稱? ? ? ? ?作用
html? ? ? ? ? 包裹所有其他標(biāo)簽,是HTML最外層元素
body? ? ? ? ?所有網(wǎng)頁(yè)內(nèi)容
head? ? ? ? ?HTML文檔頭部
title? ? ? ? ? ?網(wǎng)頁(yè)標(biāo)題
div? ? ? ? ? ? 表示一個(gè)容器(盒子)
span? ? ? ? ?表示一個(gè)容器,用來裝一小段文字,多個(gè)span標(biāo)簽內(nèi)文字顯示在一行
h1~h6? ? ? ?表示多級(jí)標(biāo)題
p? ? ? ? ? ? ? ?段落標(biāo)簽,裝整段文字
hr? ? ? ? ? ? ? 表示一條水平分割線
ul.li? ? ? ? ? ? ul表示無序列表,li中為無序列表的每個(gè)項(xiàng)目?jī)?nèi)容
i/em? ? ? ? ? 表示斜體
strong? ? ? ?加粗
br? ? ? ? ? ? ? 換行,插入單個(gè)折行
img? ? ? ? ? ?單標(biāo)簽,圖像標(biāo)簽,用于引入圖像,<img src="w3school.jpg" width="104" height="142" />
a? ? ? ? ? ? ? 超鏈接,鏈接一切資源,包括網(wǎng)址、文字和視頻等,<a >This is a link</a>
<!--注釋內(nèi)容-->? ? ? ? ? 定義注釋
4、HTML元素關(guān)系(嵌套)
4-1 分類
①塊級(jí)元素
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul、li
特點(diǎn):總是在新行上開始,高度、行高以及上下邊距都可控制,寬度默認(rèn)是容器的100%,除非設(shè)定寬度,支持所有css命令。
功能:主要是用來搭建網(wǎng)站架構(gòu)、網(wǎng)頁(yè)布局、承載內(nèi)容。
<div> 元素常見的用途是文檔布局。取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
? ? ? ? 1.無默認(rèn)樣式:
? ? ? ? <div ><nav><section><header><footer>
? ? ? ? 2.有默認(rèn)樣式?
? ? ? ? <h></h>標(biāo)題? ? ?margin、字體加粗、字體大小
? ? ? ? <p></p> 段落? ? margin
? ? ? ? <dl></dl>列表? ? maigin
? ? ? ? <dd></dd>列表項(xiàng)? ? maigin
? ? ? ? <ul></ul> 無序? ? maigin、padding
? ? ? ? <ol></ol>有序? ? maigin、padding
? ? ? ? <li></li>列項(xiàng)表項(xiàng)? ? ?list-style:none
②行內(nèi)元素(內(nèi)聯(lián)、內(nèi)嵌)
span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var
特點(diǎn):和其他元素都在一行上,高、行高、以及上下邊距不可變,寬度就是它的文字和圖片的寬度,不可改變,代碼換行被解析。
HTML <span> 元素是行內(nèi)元素,能夠用作文本的容器。設(shè)置 <span> 元素的類,能夠?yàn)橄嗤?<span> 元素設(shè)置相同的樣式。
? ? ? ? 1.無默認(rèn)樣式:
? ? ? ? <span></span>
? ? ? ? 2.有默認(rèn)樣式:
? ? ? ? ? a標(biāo)簽? 默認(rèn)有顏色、下劃線
? ? ? ? ? strong 默認(rèn)有字體加粗,強(qiáng)調(diào)的意思
? ? ? ? ? em,i 默認(rèn)有字體傾斜
? ? ? ? ? mark 默認(rèn)有背景顏色、字體顏色
? ? ? ? ? table 默認(rèn)有表格邊框顏色,邊框間隙
? ? ? ? ? big? 默認(rèn)有字體加大
? ? ? ? ? b? 默認(rèn)有字體加粗
? ? ? ? ? table表格邊框顏色、邊框間隙。
? ? ? ? ? big字體加大
③內(nèi)聯(lián)塊
1、塊轉(zhuǎn)內(nèi)聯(lián):? display: inline;
2、內(nèi)聯(lián)轉(zhuǎn)塊:? display:block;
3、內(nèi)聯(lián)塊:? display: inline-block;
注意:IE67需要加.inlineB{*display: inline;*zoom: 1;},IE67用*前綴;IE6用_前綴。
inline-block特性:塊在一行顯示,行內(nèi)屬性支持寬高,沒有寬高時(shí)內(nèi)容撐開寬高。
? 問題:內(nèi)容換行被解析,ie6,7不支持。
④為何有的行內(nèi)元素如input和img可設(shè)置寬高?
替換元素? ? 根據(jù)標(biāo)簽和屬性決定顯示內(nèi)容,如input、select等,一般有內(nèi)在尺寸,如img默認(rèn)以src屬性引用圖片的寬高。
不可替換元素? ? 內(nèi)容直接展示
4-2 嵌套規(guī)則:
1、塊級(jí)元素與塊級(jí)元素平級(jí)、內(nèi)嵌元素與內(nèi)嵌元素平級(jí)
2、塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊元素,但是內(nèi)聯(lián)元素不能包含塊元素,它只能包含其他的內(nèi)聯(lián)元素。
3、有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素,不能再包含塊級(jí)元素h1~h6、p、dt
4、塊級(jí)元素不能放在標(biāo)簽p里面
5、li標(biāo)簽可以包含標(biāo)簽,因?yàn)閘i和div標(biāo)簽都是裝載內(nèi)容的容器
6、a標(biāo)簽想要用hover必須把它的路徑寫全
三、HTML屬性
屬性為HTML元素提供附加信息。推薦使用小寫。
屬性總是以名稱/值對(duì)的形式出現(xiàn),比如:name="value"。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的,不過使用單引號(hào)也沒有問題。在某些個(gè)別的情況下,比如屬性值本身就含有雙引號(hào),則必須使用單引號(hào),例如:name='Bill "HelloWorld" Gates'
1、常用屬性
屬性? ? ? ? ? ? ? 值? ? ? ? ? ? ? ? ? ? ? 描述
class? ? ? ?classname? ? ? ? ? ?規(guī)定元素的類名(classname)
id? ? ? ? ? ? ?id? ? ? ? ? ? ? ? ? ? ? ? ?規(guī)定元素的唯一 id
style? ? ? ? style_definition? ? ?規(guī)定元素的行內(nèi)樣式(inline style)
title? ? ? ? ? text? ? ? ? ? ? ? ? ? ? ? ?規(guī)定元素的額外信息(可在工具提示中顯示)
2、img相關(guān)屬性
<img src="圖片地址" width="104" height="142" />
1、圖片地址
絕對(duì)地址? ? 當(dāng)前圖片在硬盤上的位置
相對(duì)地址? ? 參照物——當(dāng)前所寫文件位置
①與參照物同級(jí)? ? 圖片地址=“圖片名字”或“./圖片名字”
②在參照物下級(jí)? ? 圖片地址從同級(jí)開始尋找=“./文件夾/文件夾……/圖片名稱”
③在參照物上級(jí)? ? 圖片地址=“../文件夾……/圖片名稱”
2、屬性
屬性名稱? ? ? ? 描述
src? ? ? ? ? ? ? ? ? 展示圖片
alt? ? ? ? ? ? ? ? ? ?當(dāng)圖片無法展示時(shí)用來提示用戶的文字
title? ? ? ? ? ? ? ? ?當(dāng)鼠標(biāo)移動(dòng)到圖片時(shí)用來提示用戶的文字
3、a相關(guān)屬性
href? ? ? ? ? ? ? ? ?超鏈接地址
target? ? ? ? ? ? ? -blank 新建一個(gè)瀏覽器標(biāo)簽頁(yè)來顯示超鏈接內(nèi)容,不覆蓋原來的網(wǎng)頁(yè)
四、HTML標(biāo)題
標(biāo)題(Heading)是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題,<h6> 定義最小的標(biāo)題。只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號(hào)的文本而使用標(biāo)題。
用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu),搜索引擎使用標(biāo)題為網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引,用戶可以通過標(biāo)題來快速瀏覽網(wǎng)頁(yè)。
注釋:瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。默認(rèn)情況下,HTML 會(huì)自動(dòng)地在塊級(jí)元素前后添加一個(gè)額外的空行,比如段落、標(biāo)題元素前后。
五、HTML段落
1、段落是通過 <p> 標(biāo)簽定義的。
注釋:使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它!但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。
2、HTML 折行——在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行(新行),使用 <br /> 標(biāo)簽。
3、HTML 輸出
無法確定 HTML 被顯示的確切效果,屏幕的大小,以及對(duì)窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。當(dāng)顯示頁(yè)面時(shí),瀏覽器會(huì)移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會(huì)被算作(顯示為)一個(gè)空格。
六、HTML樣式
1、style 屬性用于改變 HTML 元素的樣式。通過 HTML 樣式,能夠通過使用 style 屬性直接將樣式添加到 HTML 元素,或者間接地在獨(dú)立的樣式表中(CSS 文件)進(jìn)行定義。<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
2、
3、文本對(duì)齊
<h1 style="text-align:center">This is a heading</h1>
七、HTML格式化
1、以HTML的標(biāo)準(zhǔn)來格式編輯某個(gè)HTML的文件,HTML 可定義很多供格式化輸出的元素,比如粗體和斜體字。
pre 標(biāo)簽可控制空行和空格,很適合顯示計(jì)算機(jī)代碼
2、改變文本的外觀和含義
改變文本的外觀并為文本關(guān)聯(lián)其隱藏的含義的這些標(biāo)簽可以分成兩類:基于內(nèi)容的樣式(content-based style)和物理樣式(physical style)。
https://www.w3school.com.cn/html/html_style.asp
八、HTML引用
標(biāo)簽名稱? ? ? ? ? 描述
q? ? ? ? ? ? ? ? ? ? ? 定義短的引用,瀏覽器通常會(huì)為<q>元素包圍引號(hào)
blockquote? ? ? ?定義被引用的節(jié),瀏覽器通常會(huì)對(duì)該元素進(jìn)行縮進(jìn)處理
abbr? ? ? ? ? ? ? ? ?定義縮寫或首字母縮略語,對(duì)縮寫標(biāo)記能為瀏覽器、翻譯系統(tǒng)以及搜索引擎提供有用的信息
dfn? ? ? ? ? ? ? ? ? ?如果設(shè)置了該元素的title屬性,則定義項(xiàng)目。如果包含具有標(biāo)題的 <abbr> 元素,則title 定義項(xiàng)目。? ? ? ? ? ? ? ? ? ? ? ? ? 否則,<dfn> 文本內(nèi)容即是項(xiàng)目,并且父元素包含定義
address? ? ? ? ? ?定義文檔或文章的聯(lián)系信息(作者),通常以斜體顯示。大多數(shù)瀏覽器會(huì)在此元素前后添加折行
cite? ? ? ? ? ? ? ? ? 定義著作的標(biāo)題,瀏覽器通常會(huì)以斜體顯示 <cite> 元素
bdo? ? ? ? ? ? ? ? ??定義雙流向覆蓋,覆蓋當(dāng)前文本方向<bdo dir="rtl">This text will be written from right to left</bdo>
acronym? ? ? ? ? 標(biāo)記首字母縮寫,HTML5 中不支持 標(biāo)簽,使用?<abbr>?標(biāo)簽代替
九、計(jì)算機(jī)代碼
1、計(jì)算機(jī)代碼格式
通常,HTML 使用可變的字母尺寸和字母間距。在顯示計(jì)算機(jī)代碼示例時(shí),并不需要如此。
<kbd>,?<samp>, 以及?<code>?元素全都支持固定的字母尺寸和間距。
2、鍵盤格式? ? ? ?<kbd>?元素定義鍵盤輸入文本
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
3、樣本格式? ? ???<samp>?元素定義計(jì)算機(jī)輸出代碼示例
4、代碼格式? ? ? ??<code>?元素定義編程代碼示例文本,不保留多余的空格和折行,如需解決該問題,須在 <pre> 元素中包圍代碼
5、變量格式化? ? ??<var>?元素定義數(shù)學(xué)變量
十、HTML CSS
1、使用添加到 <head> 部分的樣式信息對(duì) HTML 進(jìn)行格式化。
2、使用樣式屬性做一個(gè)沒有下劃線的鏈接? ? ?<a href="/example/html/lastpage.html" style="text-decoration:none">鏈接</a>
3、使用<link> 標(biāo)簽鏈接到一個(gè)外部樣式表? ??<head><link rel="stylesheet" type="text/css" href="/html/csstest1.css" ></head>
4、當(dāng)瀏覽器讀到一個(gè)樣式表,它就會(huì)按照這個(gè)樣式表來對(duì)文檔進(jìn)行格式化。插入樣式表有以下三種方式
①外部樣式表? ??適用于樣式需要被應(yīng)用到很多頁(yè)面時(shí)
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
②內(nèi)部樣式表? ? 適用于單個(gè)文件需要特別樣式時(shí)
在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
③內(nèi)聯(lián)樣式? ? 適用于特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)
在相關(guān)的標(biāo)簽中使用樣式屬性,樣式屬性可以包含任何 CSS 屬性。
<p style="color:red>this is a statement</p>
相關(guān)標(biāo)簽? ? ? ? 描述
style? ? ? ? ? ? ? ?定義樣式定義
link? ? ? ? ? ? ? ? ?定義資源引用,link 元素是空元素,僅包含屬性。只能存在于 head 部分,不過它可出現(xiàn)任何次數(shù)。
span? ? ? ? ? ? ? ?定義文檔中的行內(nèi)的小塊或區(qū)域,組合文檔中的行內(nèi)元素
十一、HTML鏈接
1、超鏈接
超鏈接可以是一個(gè)字、詞、組詞,也可以是一幅圖像,點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí),箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接,有兩種使用 <a> 標(biāo)簽的方式:
①通過使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接
②通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
2、鏈接語法
<a href="url">link text</a>? ??
href 屬性規(guī)定鏈接的目標(biāo),開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字(可以是圖片或其他HTML元素)被作為超級(jí)鏈接來顯示。
3、鏈接屬性
①target屬性? ??定義被鏈接的文檔在何處顯示。
target="_blank"? ??在新窗口打開文檔
target其他值:_parent? ? _self? ? _top
②name 屬性? ? 規(guī)定錨的名稱,創(chuàng)建 HTML 頁(yè)面中的書簽(對(duì)讀者不可見)
當(dāng)使用命名錨(named anchors)時(shí),我們可以創(chuàng)建直接跳至該命名錨(比如頁(yè)面中某個(gè)小節(jié))的鏈接,這樣使用者就無需不停地滾動(dòng)頁(yè)面來尋找他們需要的信息了。可使用id屬性替代name屬性
命名錨的語法
<a name="tips">注意事項(xiàng)(顯示在頁(yè)面上的文本)</a> ——?jiǎng)?chuàng)建一個(gè)書簽
<a href="#tips">注意事項(xiàng)</a>——在同一文檔中創(chuàng)建指向該錨的鏈接
<a >注意事項(xiàng)</a>——在其他頁(yè)面中創(chuàng)建指向該錨的鏈接(將 # 符號(hào)和錨名稱添加到 URL 的末端)
4、注意事項(xiàng)
始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址,然后創(chuàng)建一個(gè)新的請(qǐng)求,就像這樣:。
命名錨經(jīng)常用于在大型文檔開始位置上創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨,然后把鏈接到這些錨的鏈接放到文檔的上部。
假如瀏覽器找不到已定義的命名錨,那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。
十二、圖像
1、定義圖像的語法是:<img src="url"/>
在 HTML 中,圖像由 <img> 標(biāo)簽定義。<img> 是空標(biāo)簽,只包含屬性,并且沒有閉合標(biāo)簽。在頁(yè)面上顯示圖像,需要使用源屬性(src)。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果將圖像標(biāo)簽置于兩個(gè)段落之間,那么瀏覽器會(huì)首先顯示第一個(gè)段落,然后顯示圖片,最后顯示第二段。
2、img相關(guān)屬性
源屬性src? ? ? "source"。源屬性的值是圖像的 URL 地址(存儲(chǔ)圖像的位置)。
替換文本屬性alt? ??為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。在瀏覽器無法載入圖像時(shí),替換文本屬性告訴讀者他們失去的信息,瀏覽器將顯示這個(gè)替代性的文本而不是圖像。
區(qū)域?qū)傩詀rea? ??定義圖像映射中的區(qū)域(注:圖像映射指得是帶有可點(diǎn)擊區(qū)域的圖像)。area 元素總是嵌套在 <map> 標(biāo)簽(<img>標(biāo)簽中的 usemap 屬性與map元素 name 屬性相關(guān)聯(lián),創(chuàng)建圖像與映射之間的聯(lián)系。)
align屬性? ? ?屬性值為:bottom(默認(rèn))? middle? ? top? 定義圖像在文字中的對(duì)其方式。屬性值為:right、left? 定義圖片浮動(dòng)至段落的左或右。
3、注意事項(xiàng)
假如某個(gè) HTML 文件包含十個(gè)圖像,那么為了正確顯示這個(gè)頁(yè)面,需要加載 11 個(gè)文件。加載圖片是需要時(shí)間的,所以慎用圖片。
gif 和 jpg 文件均可用作 HTML 背景。如果圖像小于頁(yè)面,圖像會(huì)進(jìn)行重復(fù)。
制作圖像鏈接:img標(biāo)簽被A標(biāo)簽包圍
創(chuàng)建圖像映射:帶有可供點(diǎn)擊區(qū)域的圖像地圖,其中的每個(gè)區(qū)域都是一個(gè)超級(jí)鏈接,img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據(jù)瀏覽器),所以我們同時(shí)向 map 元素添加了 "id" 和 "name" 屬性。
十三、HTML表格
1、表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義),每行被分割為若干單元格(由 <td> 標(biāo)簽定義)。字母 td 指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
2、表格標(biāo)簽
table? ? ? ? ? ?定義表格
caption? ? ? ?定義表格標(biāo)題
th? ? ? ? ? ? ? ? 定義表格的表頭,多數(shù)瀏覽器將表頭顯示為粗體居中的文本
tr? ? ? ? ? ? ? ? ?定義表格的行
td? ? ? ? ? ? ? ? 定義表格單元格
thead? ? ? ? ? 定義表格的頁(yè)眉
tbody? ? ? ? ? 定義表格的主體
tfoot? ? ? ? ? ? 定義表格的頁(yè)腳
col? ? ? ? ? ? ? ?定義表格的列的屬性
colgroup? ? ? 定義表格列的組
3、表格邊框和屬性
①<table border="0" cellspacing="" cellpadding="">……</table>如果
不定義邊框?qū)傩裕砀駥⒉伙@示邊框。
②table屬性
屬性? ? ? ? ? ? ? ? ? 值? ? ? ? ? ? ? ? ? ? ? ? ? ? 描述
width? ? ? ? ? ? ? ?px/%? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定表格寬度(包含border)
border? ? ? ? ? ? ?px? ? ? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定表格邊框?qū)挾?/p>
Bgcolor? ? ? ? ? 三種顏色表示法? ? ? ? 規(guī)定表格背景顏色
align? ? ? ? ? ? left、center、right? ? ? ?表格相對(duì)于周圍元素的對(duì)齊方式
cellpadding? ? ? ?px/%? ? ? ? ? ? ? ? ? ? ? 規(guī)定單元格邊緣與單元格內(nèi)容間的空白
cellspacing? ? ? ? px/%? ? ? ? ? ? ? ? ? ? ? 規(guī)定單元格與單元格間的空白
frame? ? ? ? ? ? ? ? void/hsides/vsides/lhs/rhs/above? ? ?外側(cè)邊框顯示樣式,frame 屬性無法在 Internet Explorer 中正確地顯示。
rules? ? ? ? ? ? ? ?none/groups/rows/cols/all? ? ?內(nèi)側(cè)邊框線條樣式
③tr標(biāo)簽屬性
align? ? ? ? ? ? ? left/right/center/justify? ? ? ? ? 規(guī)定行內(nèi)容水平對(duì)齊方式
valign? ? ? ? ? ? ?top/middle/baseline? ? ? ? ? ? 規(guī)定行內(nèi)容垂直對(duì)齊方式
Bgcolor? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?規(guī)定行的背景顏色
4、空單元格
在一些瀏覽器中,如果某個(gè)單元格是空的(沒有內(nèi)容),瀏覽器可能無法顯示出這個(gè)單元格的邊框。為了避免這種情況,在空單元格中添加一個(gè)空格占位符,就可以將邊框顯示出來。 <td> </td>
5、表格合并
在第一個(gè)要合并的單元格上加合并屬性,數(shù)值為目標(biāo)合并單元格數(shù)量+1。
①水平合并(跨列)<td colspan="3">...</td>? ?水平合并2列
②垂直合并(跨行)<td rowspan="3">...</td>
注意:合并后多出單元格,需要將合并后不存在的單元格刪除。
6、表格嵌套
完整表格結(jié)構(gòu),放入td標(biāo)簽內(nèi)。注意表格行列的完整性。
十四、HTML列表
1、無序列表
<ul><li>apple</li></ul>
無序列表是一個(gè)項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記,始于 <ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<ul type="disc"/"circle"/"square">...</ul>? ? ? ? ? ? 項(xiàng)目標(biāo)記符號(hào)為粗圓點(diǎn)/空心圓圈/實(shí)心正方形
2、有序列表
<ol><li>apple</li></ol>
有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記,始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<ol type="A"/"a">...</ol>? ? ? ? ? ? ? 項(xiàng)目列表序號(hào)默認(rèn)為數(shù)字,可設(shè)置為大小寫字母和大小寫羅馬字母
3、定義列表
<dl><dt>apple</dt></dl>
自定義列表不僅僅是一列項(xiàng)目,而是項(xiàng)目及其注釋的組合,以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始(有縮進(jìn)效果)。定義列表的列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
4、列表嵌套
完整的列表格式插入列表項(xiàng)中。
十五、HTML布局
1、使用 <div> 元素的 HTML 布局,<div>元素常用作布局工具,因?yàn)槟軌蜉p松地通過 CSS 對(duì)其進(jìn)行定位。
2、使用 HTML5 的網(wǎng)站布局,HTML5 提供的新語義元素定義了網(wǎng)頁(yè)的不同部分:
3、使用表格的 HTML 布局(元素不是作為布局工具而設(shè)計(jì)的,<table> 元素的作用是顯示表格化的數(shù)據(jù))使用 <table> 元素能夠取得布局效果,因?yàn)槟軌蛲ㄟ^ CSS 設(shè)置表格元素的樣式
十六、HTML響應(yīng)式web設(shè)計(jì)
1、RWD 指的是響應(yīng)式 Web 設(shè)計(jì)(Responsive Web Design),能夠以可變尺寸傳遞網(wǎng)頁(yè),對(duì)于平板和移動(dòng)設(shè)備是必需的。
2、創(chuàng)建自己的響應(yīng)式設(shè)計(jì)
①自己創(chuàng)建
②使用 Bootstrap——現(xiàn)成的 CSS 框架。Bootstrap 是最流行的開發(fā)響應(yīng)式 web 的 HTML, CSS, 和 JS 框架。
十七、HTML框架
1、通過使用框架,可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。每份HTML文檔稱為一個(gè)框架,并且每個(gè)框架都獨(dú)立于其他的框架。
使用框架的壞處:開發(fā)人員必須同時(shí)跟蹤更多的HTML文檔,很難打印整張頁(yè)面。
2、框架結(jié)構(gòu)標(biāo)簽<frameset>
<frameset>定義如何將窗口分割為框架,每個(gè) frameset 定義了一系列行或列,rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積。
3、框架標(biāo)簽<frame>
Frame 標(biāo)簽定義了放置在每個(gè)框架中的 HTML 文檔。
假如一個(gè)框架有可見邊框,用戶可以拖動(dòng)邊框來改變它的大小。為了避免這種情況發(fā)生,可以在 <frame> 標(biāo)簽中加入:noresize="noresize"。為不支持框架的瀏覽器添加 <noframes> 標(biāo)簽。
重要提示:不能將<body> 標(biāo)簽與<frameset>標(biāo)簽同時(shí)使用!不過,假如你添加包含一段文本的?<noframes> 標(biāo)簽,就必須將這段文字嵌套于 <body>標(biāo)簽內(nèi)。
4、行列混合框架
5、導(dǎo)航欄
分兩列,第一列固定寬度,導(dǎo)航欄為鏈接形式,第二列放默認(rèn)顯示頁(yè)面
內(nèi)聯(lián)框架<iframe src="……"></iframe>由iframe標(biāo)簽實(shí)現(xiàn)
6、使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)
左側(cè)的導(dǎo)航框架包含了一個(gè)鏈接列表,這些鏈接將第二個(gè)框架作為目標(biāo)。第二個(gè)框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。
十八、內(nèi)聯(lián)框架iframe
iframe 用于在網(wǎng)頁(yè)內(nèi)顯示網(wǎng)頁(yè)。定義內(nèi)聯(lián)的子窗口(框架)
1、添加iframe的語法
<iframe src="URL"></iframe>?URL?指向隔離頁(yè)面的位置。
2、iframe屬性
height 和 width 屬性用于規(guī)定 iframe 的高度和寬度。屬性值的默認(rèn)單位是像素,但也可以用百分比來設(shè)定(比如 "80%")。
frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框。設(shè)置屬性值為 "0" 就可以移除邊框。
3、iframe 可用作鏈接的目標(biāo)(target)。鏈接的 target 屬性必須引用 iframe 的 name 屬性。
十九、HTML背景
<body> 擁有兩個(gè)配置背景的標(biāo)簽。背景可以是顏色或者圖像。
背景顏色(Bgcolor)屬性將背景設(shè)置為某種顏色。屬性值可以是十六進(jìn)制數(shù)、RGB 值或顏色名。
背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口,那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。(應(yīng)考慮背景圖像是否增加了頁(yè)面的加載時(shí)間。建議圖像文件不應(yīng)超過 10k。)
注意:應(yīng)該使用層疊樣式表(CSS)來定義 HTML 元素的布局和顯示屬性。
二十、HTML腳本
JavaScript 使 HTML 頁(yè)面具有更強(qiáng)的動(dòng)態(tài)和交互性。
1、HTML script 元素
<script> 標(biāo)簽用于定義客戶端腳本,比如 JavaScript。既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。必需的 type 屬性規(guī)定腳本的 MIME 類型。JavaScript 最常用于圖片操作、表單驗(yàn)證以及內(nèi)容動(dòng)態(tài)更新。
2、<noscript> 標(biāo)簽
<noscript> 標(biāo)簽提供無法使用腳本時(shí)的替代內(nèi)容,比如在瀏覽器禁用腳本時(shí),或?yàn)g覽器不支持客戶端腳本時(shí)。可包含普通 HTML 頁(yè)面的 body 元素中能夠找到的所有元素。只有在瀏覽器不支持腳本或者禁用腳本時(shí),才會(huì)顯示 noscript 元素中的內(nèi)容。
二十一、HTML文件路徑
文件路徑描述了網(wǎng)站文件夾結(jié)構(gòu)中某個(gè)文件的位置,會(huì)在鏈接外部文件時(shí)被用到:網(wǎng)頁(yè)、圖像、樣式表和JavaScript。
絕對(duì)文件路徑是指向一個(gè)因特網(wǎng)文件的完整 URL:https://www.w3school.com.cn/images/picture.jpg
相對(duì)路徑指向了相對(duì)于當(dāng)前頁(yè)面的文件。如果使用了相對(duì)路徑,網(wǎng)頁(yè)就不會(huì)與當(dāng)前的基準(zhǔn) URL 進(jìn)行綁定。所有鏈接在電腦上 (localhost) 或未來的公共域中均可正常工作。
二十二、HTML 頭部
1、<head> 元素? ? ? ? ?是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本,指示瀏覽器在何處可以找到樣式表,提供元信息等。以下標(biāo)簽都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
2、<title> 標(biāo)簽? ? ? ? ? ? 定義文檔的標(biāo)題,在所有 HTML/XHTML 文檔中都是必需的。title 元素能夠:定義瀏覽器工具欄中的標(biāo)題、提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題、顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。
3、<base /> 標(biāo)簽? ? ? ? ?為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)(target)。
4、<link /> 標(biāo)簽? ? ? ? ? ? 定義文檔與外部資源之間的關(guān)系,最常用于連接樣式表。
5、<style> 標(biāo)簽? ? ? ? ? ? 為 HTML 文檔定義樣式信息,可在標(biāo)簽內(nèi)規(guī)定 HTML 元素在瀏覽器中呈現(xiàn)的樣式。
6、<meta> 元素? ? ? ? ? ??提供關(guān)于 HTML 文檔的元數(shù)據(jù)(關(guān)于數(shù)據(jù)的信息,不會(huì)顯示在頁(yè)面上,但是對(duì)于機(jī)器是可讀的)。典型的情況是,meta 元素被用于規(guī)定頁(yè)面的描述(<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />)、關(guān)鍵詞(<meta name="keywords" content="HTML, CSS, XML" />)、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。始終位于 head 元素中。
元數(shù)據(jù)可用于瀏覽器(如何顯示內(nèi)容或重新加載頁(yè)面),搜索引擎(關(guān)鍵詞),或其他 web 服務(wù)。
一些搜索引擎會(huì)利用 meta 元素的 name 和 content 屬性來索引您的頁(yè)面(name 和 content 屬性的作用是描述頁(yè)面的內(nèi)容)。
7、<script> 標(biāo)簽用于定義客戶端腳本,比如 JavaScript。
二十三、HTML 字符實(shí)體
1、HTML 中的預(yù)留字符必須被替換為字符實(shí)體。在 HTML 中,某些字符是預(yù)留的,如不能使用小于號(hào)(< 或 <)和大于號(hào)(>),這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。如果希望正確地顯示預(yù)留字符,必須在 HTML 源代碼中使用字符實(shí)體。
2、不間斷空格。HTML 中的常用字符實(shí)體是不間斷空格( )。瀏覽器將HTML 頁(yè)面中的N個(gè)空格顯示為1個(gè)。
二十四、HTML 統(tǒng)一資源定位器URL
URL (Uniform Resource Locator)也被稱為網(wǎng)址。可以由單詞組成,比如 “w3school.com.cn”,或者是因特網(wǎng)協(xié)議(IP)地址:192.168.1.253。大多數(shù)人在網(wǎng)上沖浪時(shí),會(huì)鍵入網(wǎng)址的域名,因?yàn)槊Q比數(shù)字容易記憶。
1、當(dāng)點(diǎn)擊 HTML 頁(yè)面中的某個(gè)鏈接時(shí),對(duì)應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個(gè)地址。統(tǒng)一資源定位器(URL)用于定位萬維網(wǎng)上的文檔(或其他數(shù)據(jù))。
網(wǎng)址遵守以下的語法規(guī)則:scheme://host.domain:port/path/filename
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www)
domain - 定義因特網(wǎng)域名,比如 w3school.com.cn
:port - 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80)
path - 定義服務(wù)器上的路徑(如果省略,則文檔必須位于網(wǎng)站的根目錄中)。
filename - 定義文檔/資源的名稱
2、流行的URL Schemes
3、HTML URL 字符編碼? ? ? ? ?URL 編碼會(huì)將字符轉(zhuǎn)換為可通過因特網(wǎng)傳輸?shù)母袷健?/p>
URL 只能使用?ASCII 字符集來通過因特網(wǎng)進(jìn)行發(fā)送。由于 URL 常常會(huì)包含 ASCII 集合之外的字符,URL 必須轉(zhuǎn)換為有效的 ASCII 格式。URL 編碼使用 "%" 其后跟隨兩位的十六進(jìn)制數(shù)來替換非 ASCII 字符。URL 不能包含空格。URL 編碼通常使用 + 來替換空格。
二十五、HTML Web Server
如果希望向世界發(fā)布自己的網(wǎng)站,那么必須把它存放在 web 服務(wù)器上。()
托管自己的網(wǎng)站:
1、在自己的服務(wù)器上托管網(wǎng)站
需考慮:硬件支出——如果要運(yùn)行“真正”的網(wǎng)站,需要購(gòu)買強(qiáng)大的服務(wù)器硬件和穩(wěn)定的(一天 24 小時(shí))高速連接。
軟件支出——服務(wù)器授權(quán)通常比客戶端授權(quán)更昂貴,也許有用戶數(shù)量限制。
人工費(fèi)——須安裝自己的硬件和軟件,同時(shí)要處理漏洞和病毒以確保服務(wù)器時(shí)刻正常地運(yùn)行于一個(gè)“任何事都可能發(fā)生”的環(huán)境中。
2、使用因特網(wǎng)服務(wù)提供商(ISP)(從 ISP 租用服務(wù)器)
需注意:24 小時(shí)支持,每日備份,ISP 的流量限制,帶寬和內(nèi)容限制,支持需要的 e-mail 功能,支持?jǐn)?shù)據(jù)庫(kù)訪問。
二十六、HTML顏色
1、顏色值
顏色由一個(gè)十六進(jìn)制符號(hào)來定義,這個(gè)符號(hào)由紅色、綠色和藍(lán)色的值組成(RGB)。每種顏色的最小值是0(十六進(jìn)制:#00)。最大值是255(十六進(jìn)制:#FF)。
2、顏色名
僅有 16 種顏色名被 W3C 的 HTML 4.0 標(biāo)準(zhǔn)支持,它們是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它顏色的話,就應(yīng)該使用十六進(jìn)制的顏色值。
二十七、HTML文檔類型? ? ? ? ??
1、<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網(wǎng)頁(yè)。
只有了解文檔的類型,瀏覽器才能正確地顯示文檔。HTML 也有多個(gè)不同的版本,只有完全明白頁(yè)面中使用的確切 HTML 版本,瀏覽器才能完全正確地顯示出 HTML 頁(yè)面。這就是 <!DOCTYPE> 的用處。
2、定義和用法
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 不是 HTML 標(biāo)簽。它為瀏覽器提供一項(xiàng)信息(聲明),即 HTML 是用什么版本編寫的。
<!DOCTYPE> 聲明沒有結(jié)束標(biāo)簽,聲明對(duì)大小寫不敏感。
3、常用聲明
HTML5? ? ? ? ? ? ? ?<!DOCTYPE html>
HTML 4.01? ? ? ? ??<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0? ? ? ? ??<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
更多參考:https://www.w3school.com.cn/tags/tag_doctype.asp
十五、表單
1、表單簡(jiǎn)介
表單用于收集用戶輸入數(shù)據(jù),將其發(fā)送給后臺(tái),是一個(gè)包含“表單元素(表單元素指的是不同類型的 input 元素、復(fù)選框、單選按鈕、提交按鈕等等。)”的區(qū)域。處理信息的過程:點(diǎn)擊表單中的提交按鈕,用戶輸入信息上傳到服務(wù)器中,服務(wù)器有關(guān)程序?qū)⑿畔⑻幚砗筮M(jìn)行儲(chǔ)存或返回客戶端瀏覽器。因此需要明確的內(nèi)容是:提交的內(nèi)容是什么?提交給誰?提交方式?提交后的反應(yīng)是什么?這些都將有form標(biāo)簽的屬性完成。
<form> 元素(標(biāo)簽)定義 HTML 表單
2、form標(biāo)簽屬性
屬性名稱? ? ? ? ? ? ? ? 描述
name? ? ? ? ? ? ? ? ? ? ? 定義表單名稱,通過命名控制表單和后臺(tái)程序的關(guān)系(對(duì)于 DOM 使用:document.forms.name),如果要正確地被提交,每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性。
method? ? ? ? ? ? ? ? ? ?告訴瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器,定義發(fā)送數(shù)據(jù)的?HTTP 方法(GET?或?POST)
action? ? ? ? ? ? ? ? ? ? ? 定義表單處理程序的位置,即提交到哪里
enctype? ? ? ? ? ? ? ? ? ?設(shè)置表單提交信息的編碼方式
target? ? ? ? ? ? ? ? ? ? ? ?設(shè)置表單返回窗口,規(guī)定在何處打開action中設(shè)定的url(默認(rèn):_self)
①action屬性值應(yīng)該為一個(gè)url,如果省略 action 屬性,則 action 會(huì)被設(shè)置為當(dāng)前頁(yè)面。
②method屬性(默認(rèn):GET)
get:本質(zhì)為一個(gè)url的拼接,將input中獲取的參數(shù)信息拼接到一起形成新的url。請(qǐng)求可被緩存,可保留在瀏覽器歷史記錄中,可被收藏為書簽,不適用于敏感數(shù)據(jù)。有長(zhǎng)度限制,用于取回?cái)?shù)據(jù),如向后臺(tái)查詢數(shù)據(jù)。
post:url不發(fā)生改變,參數(shù)信息 被更安全地傳輸給后臺(tái)。不可緩存,無記錄,不可收藏。無長(zhǎng)度限制,用于向后臺(tái)上傳數(shù)據(jù),如上傳文章。
③enctype值?(默認(rèn):url-encoded)
application/x-www-form-urlencoded? ? ? ?默認(rèn),于發(fā)送前編碼所有字符
multipart/form-data? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不對(duì)字符編碼,用于包含文件上傳控件的表單
text/plain? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 空格轉(zhuǎn)換為+,不對(duì)特殊字符編碼
autocomplete? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 值為on和off,規(guī)定是否啟用表單自動(dòng)完成功能(默認(rèn):開啟)
novalidate? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使用此屬性,提交表單時(shí)不進(jìn)行HTML5自帶的驗(yàn)證
3、表單標(biāo)簽控件及其屬性
控件是收集信息的工具。form表單提交信息的格式是:keyword:value,因此每個(gè)控件均有name和value兩個(gè)屬性,其中name由開發(fā)人員命名,value由用戶輸入。
①<input>標(biāo)簽? ? ? ? ? ? ? ?元素有很多形態(tài),根據(jù)不同的?type?屬性。
屬性名稱? ? ? ? ? ? ? ? ? ? 描述
type? ? ? ? ? ? ? ? ? ? ? ? ? ? 定義控件類型
name? ? ? ? ? ? ? ? ? ? ? ? ? 定義表單域的名稱
value? ? ? ? ? ? ? ? ? ? ? ? ? ?規(guī)定輸入字段的初始值,其他屬性根據(jù)type不同而變化
maxlength? ? ? ? ? ? ? ? ? ? 控制最多輸入的字符數(shù),該屬性不會(huì)提供任何反饋,須編寫 JavaScript 代碼提醒用戶
size? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 控制框的寬度(輸入字段的尺寸)(以字符計(jì))
readonly? ? ? ? ? ? ? ? ? ? ? ?規(guī)定輸入字段為只讀(不能修改),屬性不需要值
disabled? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定輸入字段是禁用的,被禁用的元素是不可用和不可點(diǎn)擊且不會(huì)被提交,屬性不需要值
HTML5 為 <input> 增加了如下屬性:
1)autocomplete 屬性規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)完成。當(dāng)自動(dòng)完成開啟,瀏覽器會(huì)基于用戶之前的輸入值自動(dòng)填寫值。把表單的 autocomplete 設(shè)置為 on,同時(shí)把特定的輸入字段設(shè)置為 off,反之亦然。適用于 <form> 以及如下 <input> 類型:text、search、url、tel、email、password、datepickers、range 以及 color。
2)novalidate 屬性屬于 <form> 屬性。如果設(shè)置,則 novalidate 規(guī)定在提交表單時(shí)不對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。
3)autofocus 屬性是布爾屬性。如果設(shè)置,則規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。
4)form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。提示:如需引用一個(gè)以上的表單,請(qǐng)使用空格分隔的表單 id 列表。
5)formaction 屬性規(guī)定當(dāng)提交表單時(shí)處理該輸入控件的文件的 URL。覆蓋 <form> 元素的 action 屬性,適用于 type="submit" 以及 type="image"。
6)formenctype 屬性規(guī)定當(dāng)把表單數(shù)據(jù)(form-data)提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼(僅針對(duì) method="post" 的表單)。覆蓋 <form> 元素的 enctype 屬性,適用于 type="submit" 以及 type="image"。
7)formmethod 屬性定義用以向 action URL 發(fā)送表單數(shù)據(jù)(form-data)的 HTTP 方法。覆蓋 <form> 元素的 method 屬性,適用于 type="submit" 以及 type="image"。
8)formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性,可用于 type="submit"。
9)formtarget 屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)。覆蓋 <form> 元素的 target 屬性,可與 type="submit" 和 type="image" 使用。
10)height 和 width 屬性規(guī)定 <input> 元素的高度和寬度,僅用于 <input type="image">。注釋:請(qǐng)始終規(guī)定圖像的尺寸。如果瀏覽器不清楚圖像尺寸,則頁(yè)面會(huì)在圖像加載時(shí)閃爍。
11)list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預(yù)定義選項(xiàng)。
12)min 和 max 屬性規(guī)定 <input> 元素的最小值和最大值。適用于如需輸入類型:number、range、date、datetime、datetime-local、month、time 以及 week。
13)multiple 屬性是布爾屬性。如果設(shè)置,則規(guī)定允許用戶在 <input> 元素中輸入一個(gè)以上的值,適用于以下輸入類型:email 和 file。
14)pattern 屬性規(guī)定用于檢查 <input> 元素值的正則表達(dá)式。適用于以下輸入類型:text、search、url、tel、email、and password。提示:請(qǐng)使用全局的 title 屬性對(duì)模式進(jìn)行描述以幫助用戶。
15)placeholder 屬性規(guī)定用以描述輸入字段預(yù)期值的提示(樣本值或有關(guān)格式的簡(jiǎn)短描述)。該提示會(huì)在用戶輸入值之前顯示在輸入字段中,適用于以下輸入類型:text、search、url、tel、email 以及 password。
16)required 屬性是布爾屬性。如果設(shè)置,則規(guī)定在提交表單之前必須填寫輸入字段,適用于以下輸入類型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
17)step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。示例:如果 step="3",則合法數(shù)字應(yīng)該是 -3、0、3、6、等等。提示:step 屬性可與 max 以及 min 屬性一同使用,來創(chuàng)建合法值的范圍。適用于以下輸入類型:number、range、date、datetime、datetime-local、month、time 以及 week。
<input type="控件類型">?
1)<input type="text">?定義用于文本輸入的單行輸入字段? ? ??表單本身并不可見。還要注意文本字段的默認(rèn)寬度是 20 個(gè)字符。
2)<input type="submit">?定義用于向表單處理程序(包含用來處理輸入數(shù)據(jù)的腳本的服務(wù)器頁(yè)面,在表單的?action?屬性中指定)提交的按鈕。每個(gè)字段需要有name屬性才可以被正確提交
3)<input type="reset" value="重置按鈕" />
4)<input type="radio"? checked />? ? ? ? ?單選按鈕,checked默認(rèn)選中
5)<input type="tpassword" value="密碼輸入框" />
6)<input type="img" value="圖片" />
7)<input type="hidden" value="隱藏域" />
8)<input type="file" value="文件提交" />
9)<input type="CheckBox" disabled />復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。? ? ? ? ? disabled 表示禁用
10)<input type="button"? />普通按鈕
HTML5新增輸入控件
1)<input type="number" name="quantity" min="1" max="5">/?包含數(shù)字值的輸入字段,可對(duì)數(shù)字做出限制,根據(jù)瀏覽器支持,限制可應(yīng)用到輸入字段。
2)<input type="date" min="2000-01-02? max="1979-12-31"/>?用于應(yīng)該包含日期的輸入字段。根據(jù)瀏覽器支持,日期選擇器會(huì)出現(xiàn)輸入字段中。
3)<input type="color">?用于應(yīng)該包含顏色的輸入字段。根據(jù)瀏覽器支持,顏色選擇器會(huì)出現(xiàn)輸入字段中。
4)<input type="range" min="0" max="10"/>?用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段。根據(jù)瀏覽器支持,輸入字段能夠顯示為滑塊控件。
5)<input type="month">?允許用戶選擇月份和年份。根據(jù)瀏覽器支持,日期選擇器會(huì)出現(xiàn)輸入字段中。
6)<input type="week">?允許用戶選擇周和年。根據(jù)瀏覽器支持,日期選擇器會(huì)出現(xiàn)輸入字段中。
7)<input type="time">?允許用戶選擇時(shí)間(無時(shí)區(qū))。根據(jù)瀏覽器支持,時(shí)間選擇器會(huì)出現(xiàn)輸入字段中。
8)<input type="datetime">?允許用戶選擇日期和時(shí)間(有時(shí)區(qū))。根據(jù)瀏覽器支持,日期選擇器會(huì)出現(xiàn)輸入字段中。
9)<input type="datetime-local">?允許用戶選擇日期和時(shí)間(無時(shí)區(qū))。根據(jù)瀏覽器支持,日期選擇器會(huì)出現(xiàn)輸入字段中。
10)<input type="email">?用于應(yīng)該包含電子郵件地址的輸入字段。根據(jù)瀏覽器支持,能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證。
11)<input type="search">?用于搜索字段(搜索字段的表現(xiàn)類似常規(guī)文本字段)。
12)<input type="tel">?用于應(yīng)該包含電話號(hào)碼的輸入字段。目前只有 Safari 8 支持 tel 類型。
13)<input type="url">?用于應(yīng)該包含 URL 地址的輸入字段。根據(jù)瀏覽器支持,在提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段。IE9 及其更早版本不支持 type="url"。
②<select>標(biāo)簽 下拉列表
<option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。通過添加 selected 屬性來定義預(yù)定義選項(xiàng)。
③<textarea>標(biāo)簽? 定義多行輸入字段(文本域)
<textarea name="郵件" rows="10" cols="30">The cat was playing in the garden.</textarea>
阻止瀏覽器對(duì)窗口的拖動(dòng):CSS屬性設(shè)置{resize:none}
3、表單標(biāo)簽補(bǔ)充
①<fieldset>標(biāo)簽和<legend>?標(biāo)簽
<fieldset>標(biāo)簽組合表單中的相關(guān)數(shù)據(jù),<legend>?元素為<fieldset>標(biāo)簽定義標(biāo)題。相當(dāng)于一個(gè)方框,字段集中可包含文本和其他元素,用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)別標(biāo)出文本。可嵌套。
②label 標(biāo)簽
<label for="綁定控件的id名">...</label>? ? 用于定義標(biāo)簽,為頁(yè)面上其他元素提供指示信息。
③HTML5新增表單元素
<datalist>?元素為<input>元素規(guī)定預(yù)定義選項(xiàng)列表。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表。<input>元素的?list?屬性必須引用<datalist>?元素的id屬性。 元素的?id?屬性