【HTML学习】——HTML常见标签属性和方法介绍
目錄
1、HTML分塊--------< div>
2、HTML段落--------< p>
3、HTML標(biāo)題--------< h1>…< h6>
4、HTML鏈接--------< a>
1)< a href=“http://www.baidu.com”>百度< /a>（點(diǎn)擊百度，直接跳轉(zhuǎn)到網(wǎng)頁(yè)）
2)HTML鏈接中的target屬性(默認(rèn)是在本頁(yè)面中跳轉(zhuǎn)_self)
3)HTML鏈接中的id屬性
5、HTML圖像-------< img>
6、HTML換行--------< br>
7、HTML水平線--------< hr>
8、HTML折行（讓連續(xù)兩行緊挨在一起）
9、HTML文本格式化
1）< b>加粗文體< /b>
2）< i>斜體< /i>
3）< sub>510下標(biāo)< /sub>
4）< sup>510上標(biāo)< /sup>10、HTML預(yù)格式文本
11、HTML定義縮寫--------< abbr>
12、HTML指定文本方向--------< bdo>
13、HTML新插入文本和刪除文本--------< ins>和< del>
14、HTML中的< base>(必須寫在< head>中)
15、HTML表單
1）< form>標(biāo)簽，創(chuàng)建一個(gè)供用戶輸入的表單。
2）< input>標(biāo)簽
（1）最重要的type屬性（只列了常用的幾個(gè)）。
（2）name屬性 ------規(guī)定< input>元素的名稱
（3）checked屬性------規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的< input>元素。
（4）alt屬性------定義圖像輸入的替代文本（只針對(duì)type=“image”）
（5）src屬性------規(guī)定顯示為提交按鈕的圖像的URL
（6）height和width屬性------規(guī)定< input>元素的高度和寬度（只針對(duì)type=“image”）
（7）value屬性------指定< input>元素value的值
（1）type屬性------規(guī)定按鈕的類型
5）< label>標(biāo)簽------為input元素定義標(biāo)注（標(biāo)記）
（1）for屬性------規(guī)定label與那個(gè)表單元素綁定。
15、HTML Audio/Video
1）< source>標(biāo)簽
（1）src屬性------規(guī)定媒體文件的URL。
（2）type屬性------規(guī)定媒體資源的MIME類型。
2）< audio>標(biāo)簽
（1）controls屬性
（2）autoplay屬性
（3）src屬性------規(guī)定媒體文件的URL。
3）< video>標(biāo)簽
（1）controls屬性
（2）autoplay屬性
（3）src屬性------規(guī)定媒體文件的URL。
（4）height和width屬性------設(shè)置視頻播放器的高度和寬度。
16、HTML列表
1）< ul>標(biāo)簽------創(chuàng)建一個(gè)無序列表（通常與li一起使用）
2）< ol>標(biāo)簽------創(chuàng)建一個(gè)有序列表（通常與li一起使用）
3）< li>標(biāo)簽------定義一個(gè)列表項(xiàng)
4)< dl>標(biāo)簽------定義一個(gè)定義列表
5）< dt>標(biāo)簽------定義一個(gè)定義定義列表中的項(xiàng)目。
6）< dd>標(biāo)簽------頂一頂一列表中項(xiàng)目的描述。
轉(zhuǎn)載自：HTML常用標(biāo)簽及其用法總結(jié)_sun9979的博客-CSDN博客_html標(biāo)簽大全及用法1、&amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;gt;說起HTML的標(biāo)簽，不得不提起的就是&amp;amp;amp;amp;amp;amp;amp;amp;lt; div&amp;amp;amp;amp;amp;amp;amp;amp;gt;，https://blog.csdn.net/sun9979/article/details/85217699?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164043745016780271528333%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164043745016780271528333&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-85217699.pc_search_insert_es_download&utm_term=html%E6%A0%87%E7%AD%BE%E5%A4%A7%E5%85%A8%E5%8F%8A%E7%94%A8%E6%B3%95&spm=1018.2226.3001.4187
1、HTML分塊--------< div>
說起HTML的標(biāo)簽，不得不提起的就是< div>，在制作一個(gè)網(wǎng)頁(yè)的時(shí)候，應(yīng)該先將他們劃分為許多個(gè)塊，再在這些塊中進(jìn)行操作。
整個(gè)電腦能夠顯示是因?yàn)轱@示屏上一個(gè)一個(gè)的小顆粒，如下寬度：1920px，高度1080px。
所以在定義< div>中width和height的像素值的時(shí)候可以以電腦的分辨率來大致估算。
?
2、HTML段落--------< p>
< p>標(biāo)簽代表的是段落，連續(xù)的兩個(gè)< p>標(biāo)簽中間是有間距的，不是緊挨在一起的。
?
3、HTML標(biāo)題--------< h1>…< h6>
默認(rèn)加粗，從< h1>到< h6>，字體大小越來越小。
<h1>這是1號(hào)標(biāo)題</h1>
<font size="6">這是6號(hào)字體文本</font>
<h2>這是2號(hào)標(biāo)題</h2>
<font size="5">這是5號(hào)字體文本</font>
<h3>這是3號(hào)標(biāo)題</h3>
<font size="4">這是4號(hào)字體文本</font>
<h4>這是4號(hào)標(biāo)題</h4>
<font size="3">這是3號(hào)字體文本</font>
<h5>這是5號(hào)標(biāo)題</h5>
<font size="2">這是2號(hào)字體文本</font>
<h6>這是6號(hào)標(biāo)題</h6>
<font size="1">這是1號(hào)字體文本</font>
4、HTML鏈接--------< a>
1)< a href=“http://www.baidu.com”>百度< /a>（點(diǎn)擊百度，直接跳轉(zhuǎn)到網(wǎng)頁(yè)）
這里的百度也可以是自己放的一張圖片，點(diǎn)擊圖片，跳轉(zhuǎn)頁(yè)面。
2)HTML鏈接中的target屬性(默認(rèn)是在本頁(yè)面中跳轉(zhuǎn)_self)
/*當(dāng)涉及到在新窗口打開時(shí)，令target=_blank*/
< a href="http://www.baidu.com" target="_blank">百度< /a>
3)HTML鏈接中的id屬性
直接跳轉(zhuǎn)到id所在位置，（id前面要加#）這個(gè)例子本質(zhì)就是一個(gè)書簽。
5、HTML圖像-------< img>
< img>有兩個(gè)必要的屬性：src和alt
< img src=“11.jpg” width=“100px”
height=“200px” />（放在一個(gè)目錄下，可以直接寫圖片名字和格式）
圖片的名稱和尺寸是通過屬性的形式提供的。
提示：（1）從技術(shù)上來講，圖像并不會(huì)插入HTML頁(yè)面中，而是鏈接到HTML頁(yè)面上。 < img>標(biāo)簽的作用是為被引用的圖像創(chuàng)建占位符。
（2）通過在< a>標(biāo)簽中嵌套< img>標(biāo)簽，為圖像添加到另一個(gè)文檔的鏈接。
6、HTML換行--------< br>
直接空一行。（是一個(gè)沒有關(guān)閉標(biāo)簽的空標(biāo)簽）
7、HTML水平線--------< hr>
創(chuàng)建水平線，用于分割內(nèi)容。
8、HTML折行（讓連續(xù)兩行緊挨在一起）
< p>< br>< br>< /p>
9、HTML文本格式化
1）< b>加粗文體< /b>
通常標(biāo)簽 < strong> 替換加粗標(biāo)簽 < b> 來使用
2）< i>斜體< /i>
通常標(biāo)簽 < em> 替換加粗標(biāo)簽 < i> 來使用
3）< sub>510下標(biāo)< /sub>
4）< sup>510上標(biāo)< /sup>10、HTML預(yù)格式文本
< pre>< /pre>對(duì)空行和空格進(jìn)行控制。（這個(gè)寫的就很隨意）<pre style="background-color:red;color:blue"> Nice!Good!Prefect! </pre>?
11、HTML定義縮寫--------< abbr>
< abbr title=“World Wide Web”>www< /abbr>
當(dāng)鼠標(biāo)移動(dòng)到縮略詞語(yǔ)上時(shí)，title可用于顯示完整版本。
12、HTML指定文本方向--------< bdo>
< p>< bdo dir=“rtl”>該段落文字從右到左顯示。< /bdo>< /p>
rtl--------right to left;
ltr--------left to right;
13、HTML新插入文本和刪除文本--------< ins>和< del>
瀏覽器一般會(huì)在已刪除的文本上添加一條下劃線,而在新添加的文本下添加一條下劃線。
<p>my favorite color is <del>blue</del> <ins>red</ins>!</p>
14、HTML中的< base>(必須寫在< head>中)
< base>為頁(yè)面上的所有相對(duì)鏈接規(guī)定默認(rèn)的URL（每一個(gè)文件都有默認(rèn)的url,它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它）
就可以寫一個(gè)圖片庫(kù)，在調(diào)用的時(shí)候直接寫它的名稱就行。
15、HTML表單
1）< form>標(biāo)簽，創(chuàng)建一個(gè)供用戶輸入的表單。
form標(biāo)簽里一般需要添加兩個(gè)屬性，一個(gè)是action,一個(gè)是method。
action的值是一個(gè)URL，它用來規(guī)定提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。
method的值有兩個(gè),get和post。它規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法。
?
2）< input>標(biāo)簽
該標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。
< input>元素在< form> 元素中使用，用來聲明允許用戶輸入數(shù)據(jù)的input控件。
（1）最重要的type屬性（只列了常用的幾個(gè)）。
button ： 普通按鈕
text：普通的輸入框
checkbox ： 復(fù)選框
radio：單選框
password ： 密碼輸入框（看不見輸入的內(nèi)容）
submit ：提交按鈕
reset：重置按鈕
email：郵箱輸入框
url：資源地址（輸入網(wǎng)址）
number：數(shù)值輸入的空間（可以通過旁邊的箭頭上下浮動(dòng)1）
date：就是日期選擇控件（包含年月日）
datetime-local：本地日期時(shí)間選擇控件（包含年月日幾時(shí)幾分）
tel：電話號(hào)碼
color：顏色選擇控件
（2）name屬性 ------規(guī)定< input>元素的名稱
它的值自己輸入（text）
（3）checked屬性------規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的< input>元素。
（只針對(duì)type="checkbox"或者type=“radio”）
（4）alt屬性------定義圖像輸入的替代文本（只針對(duì)type=“image”）
它的值自己輸入（text）
（5）src屬性------規(guī)定顯示為提交按鈕的圖像的URL
它的值為一個(gè)URL。
（6）height和width屬性------規(guī)定< input>元素的高度和寬度（只針對(duì)type=“image”）
（7）value屬性------指定< input>元素value的值
它的值是一個(gè)text類型。
3）< button>標(biāo)簽
該標(biāo)簽就是定義一個(gè)按鈕。
在< button>元素內(nèi)部，可以放置內(nèi)容，比如文本和圖像。這一點(diǎn)也是該元素與< input>元素創(chuàng)建的按鈕之間的不同之處。
（必須為該元素規(guī)定type屬性，因?yàn)椴煌瑸g覽器，它的默認(rèn)值不一樣）
（1）type屬性------規(guī)定按鈕的類型
它的值包括button,reset,submit三種類型。4）< select>標(biāo)簽
?
value屬性-----送往服務(wù)器的選項(xiàng)值。
5）< label>標(biāo)簽------為input元素定義標(biāo)注（標(biāo)記）
label元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，他為鼠標(biāo)用戶改進(jìn)了可用性。如果在label元素內(nèi)帶年紀(jì)文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
（1）for屬性------規(guī)定label與那個(gè)表單元素綁定。
<form>
<label for="Male">Male</label>
<input type="radio" name="sex" id="Male" value="male"><br>
<label for="Female">Female</label>
<input type="radio" name="sex" id="Female" value="female"><br>
</form>
< label>標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同
15、HTML Audio/Video
1）< source>標(biāo)簽
該標(biāo)簽為媒體元素（比如< video>和< audio>）定義媒體資源。
該標(biāo)簽允許規(guī)定兩個(gè)視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。
（1）src屬性------規(guī)定媒體文件的URL。
它的值就是URL
（2）type屬性------規(guī)定媒體資源的MIME類型。
它的值為MIME_type類型。
2）< audio>標(biāo)簽
用來定義聲音，比如音樂或者其他音頻流。
目前只支持三種格式：mp3,wav,ogg。
?
（1）controls屬性
向用戶顯示音頻控件（比如播放/暫停按鈕）。
（2）autoplay屬性
音頻就緒后馬上播放。
（3）src屬性------規(guī)定媒體文件的URL。
它的值就是URL
3）< video>標(biāo)簽
定義視頻，比如電影片段或者視頻流。
目前只支持三種視頻格式：mp4,webm,ogg。
（1）controls屬性
向用戶顯示音頻控件（比如播放/暫停按鈕）。
（2）autoplay屬性
音頻就緒后馬上播放。
（3）src屬性------規(guī)定媒體文件的URL。
它的值就是URL
（4）height和width屬性------設(shè)置視頻播放器的高度和寬度。
<video width="230px" height="200px" controls> <source src="1.mp4" type="video/mp4"> <source src="2.ogg" type="video/ogg"> </video>16、HTML列表
1）< ul>標(biāo)簽------創(chuàng)建一個(gè)無序列表（通常與li一起使用）
2）< ol>標(biāo)簽------創(chuàng)建一個(gè)有序列表（通常與li一起使用）
3）< li>標(biāo)簽------定義一個(gè)列表項(xiàng)
<p>有序列表:</p> <ol><li>Nice</li><li>Good</li><li>Perfect</li> </ol><p>無序列表:</p> <ul><li>Nice</li><li>Good</li><li>Perfect</li> </ul>4)< dl>標(biāo)簽------定義一個(gè)定義列表
（與 < dt> （定義項(xiàng)目/名字）和 < dd> （描述每一個(gè)項(xiàng)目/名字）一起使用。）
5）< dt>標(biāo)簽------定義一個(gè)定義定義列表中的項(xiàng)目。
6）< dd>標(biāo)簽------頂一頂一列表中項(xiàng)目的描述。
<dl><dt>Boy:</dt><dd>Handsome and Strong</dd><dt>Girl:</dt><dd>Beautiful and Slim</dd> </dl>
?
總結(jié)
以上是生活随笔為你收集整理的【HTML学习】——HTML常见标签属性和方法介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android studio 重启adb
- 下一篇： HTML第七章总结