html5文本标签
標題文本 h1、h2、h3、h4、h5、h6
其中 h1、h2、h3是比較常用的。h3、h4、h5、h6相對來說用的會少一點,除非結構層次比較深才會使用。
段落文本 p
<p>這是一個段落<p/>
強調文本 strong 和 em
盡量避免使用b代替strong,使用i代替em。它們表示的含義不一樣
<strong>strong表示文本的重要性,瀏覽器會對strong標簽內容加粗</strong>
<em>em表示內容的著重點,瀏覽器一般不會對em內容傾斜 </em>
標記細則 small big
small標簽和big標簽分別表示小號字體和大號字體。small通常是行內文本的一小塊,通常用于免責聲明、注意事項、版權信息、法律限制等。big通常是大號字體展示。一啊不能用的少。
加粗字體b,斜體i
b標簽用于加粗字體,i標簽用于使字體傾斜。
上標sup、下標sub
sup標簽和sub標簽使標記的文本比普通文本高一點或者第一點。常用于表示數學公式。具體的代碼和運行結果如下:
<p>這是一段<sup>上標文本</sup></p>
<p>這是一段<sub>下表文本</sub></p>
sup和sub可以使行高增加,可以使用css修復。
定義術語 dfn標簽
dfn標簽默認斜體顯示文本,
<p><dfn>Internet</dfn>是一個全球互聯網系統,用戶量巨大</p>
標記代碼 code
code標簽用于展示一段程序代碼,該標簽包裹的內容一般是一段程序代碼,有特殊的樣式顯示。由于代碼中經常包含<和>等特殊字符,在code中需要轉義。如果顯示單獨的一塊代碼,可以在外圍使用 pre標簽包裹
其他與計算機相關的有kbd、samp、var等標簽,不過基本上不使用。
<code>int a=1;</code>
預定義格式 pre
pre標簽主要用于報紙計算機示例代碼的完整格式。因為普通html元素會忽略空格、換行等元素。pre則要求完全保持元素內的所有格式,包括所有的空格換行等。
縮寫詞 abbr [了解]
下劃線和刪除線 ins del
ins和del的效果也可以通過css實現。
<ins>這是一個ins下劃線標簽</ins> <del>這是一個del刪除線標簽</del>
運行效果如下:
指明引用或者參考 cite,一般用于標記歌曲名、電影名、照片、雕塑 圖書名、作品等名稱
<p>她正在看 <cite>紅樓夢</cite> </p>
運行效果如下:
引述文本 blockquote q
blockquote標簽表示單獨存在的引用,一般很長,顯示在新的一行
q標簽表示簡單的引用
<blockquote>表示單獨存在的引用,一般很長,顯示在新的一行</blockquote>
<q>q標簽表示簡短的一個引用</q>
換行元素 br
<br/>
行內文本 span
<span>這是一段行內文本</span>
文本高亮顯示 mark
<mark>文本高亮顯示</mark>
mark標簽會給文本加一個前景色,運行效果如下:
進度條 progress
progress用于顯示一個進度條,max和value屬性表示最大值和當前比例值。代碼示例和運行效果如下:
<progress max="100" value="35">35%</progress>
刻度信息 meter [了解]
meter和process類型,它可以通過low、hign和value三個屬性一起來表示進度。low默認0,hign默認1。運行效果如下:
<meter low="0.25" high="0.75" value="0.5">50%</meter>
示例代碼中0.5正好在0.25和0.75的中間。目前瀏覽器對meter的支持還在變化,謹慎使用即可
標記時間信息 time [了解]
time標簽有datetime屬性,該屬性是對用戶不可見,是給瀏覽器使用的。time包裹的文本對用戶可見。
<time datetime="2020-02-14">情人節</time>
聯系信息 address
address用于標記一個通訊地址,可以是郵箱、實際地址、電話等 address默認斜體顯示
<address>北京市 北京市 朝陽區 xxx小區19號樓3單元101</address>
文本顯示順序 bdo
bdo可以使文本從左到右或者從右到左顯示,示例代碼和運行效果如下:
<bdo dir="ltr">從左到右顯示</bdo>
<bdo dir="rtl">從右到左顯示</bdo>
另外還有一個bid標簽用于方向未知的情況,目前只有火狐和google瀏覽器支持,不要使用。
換行斷點 wbr [了解]
wbr和br類似,代表一個可換行處。br是強制換行。wbr表示在必要的時候可以換行。具體在哪里換行,由瀏覽器決定。 該元素瀏覽器支持不好,盡量不要使用
標記展開/收縮信息 details summary
可以對標記的內容進行展開和收縮。示例代碼和運行效果如下:
點擊查看代碼
<details>
<summary>華為手機</summary>
<p>品牌:華為</p>
<p>內存:4G</p>
</details>
對話框 dialog
dialog表示一個對話框,open屬性表示顯示和隱藏。注意他不是彈框0 ,只是在頁面上顯示或者隱藏。一般也不會使用該標簽
<dialog open="true"><p>這是一個對話框</p></dialog>
圖片 img標簽
img基礎用法
<img src="a.jpg" alt="圖片加載失敗的替換文本" width="500" height="500"/>
src屬性表示圖片鏈接,alt表示圖片加載時的替換文本,width表示圖片寬度,height表示圖片高度。srcset屬性表示一組圖像
插入網站logo、圖標
<link rel="icon" href="favicon.svg"/>
<link rel="shortcut icon" href="favicon.svg"/>
多媒體 embed
embed標簽可以播放多媒體 width height src分別表示多媒體的寬度、高度和多媒體url
<embed width="500" height="500" src="a.mp4"/>
多媒體 object
object標簽可以定義一個嵌入對象,主要用于在網頁中插入多媒體信息,如:圖像、音頻、視頻、pdf、flash、Active X、Java applets等。不過各個瀏覽器對這個標簽的支持都不太一樣,所以也需要謹慎使用。
<object width="100%" height="500" data="a.mp4"></object>
多媒體 audio、video
audio可以播放主流的音頻,支持mp3、wav等格式 src屬性表示音頻url,autoplay屬性表示網頁加載的時候是否自動播放,loop表示是否循環播放,type屬性表示多媒體類型,示例代碼的運行效果如下:
<audio src="a.mp3" autoplay loop controls></audio>
video支持主流的視頻流,如mp4等。muted表示 是否靜音,poster表示視頻未播放時候的加載圖像,示例代碼如下:
<video src="a.mp4" controls width="500" height="500" muted loop autoplay poster="a.jpg">您的瀏覽器不支持video標簽</video>
列表 ul ol li
無序列表 ul-li
有序列表 ol-li
描述列表 dl dt dd
超鏈接 a
普通鏈接
download屬性表示要下載的目標,當用戶點擊按鈕的時候,會下載這個鏈接的內容。
<a href="a.html" download="c.jpg" target="_blank">普通鏈接</a>
塊鏈接
html5放開了a鏈接的限制,可以在a鏈接中包含其他元素。也稱為塊鏈接,注意不要過度使用快鏈接,盡量避免在a中包含大量信息
點擊查看代碼
<a href="a.html">
<h1>段落文本</h1>
<p>更多信息</p>
</a>
錨鏈接 鏈接可以指向任何被定義了ID的鏈接。
<a id="p4">測試</a>
<a href="#p4">錨點鏈接,指向id=p4</a>
圖像熱點 map area
為圖像的局部區域定義鏈接,點擊熱點區域的時候,會激活鏈接,并跳轉到指定目標
框架鏈接 iframe html5已經不支持iframset,但是還是支持iframe框架。
<iframe src="a.html"></iframe>
表格 table tr th td
table定義表格 tr定義一行 th定義標題 td定義一個單元格 thead、tbody、tfoot對表格進行分組,表頭,表體,表尾三個組,示例代碼如下:
點擊查看代碼
<table>
<caption>學生列表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</th>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>28</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
表單
form標簽定義一個表單,每個表單都是form開頭的
fieldset和legend對表單控件進行組織,使表單更容易理解
常用表單控件如下:
點擊查看代碼
<p>文本框 <input type="text"/></p>
<p>標簽 <label>用戶名</label> 主要用于描述表單字段的用途 label的for屬性與一個表單字段的id綁定,當點擊label,可以使表單字段獲得焦點</p>
<p>密碼框 <input type="password"/></p>
<p>單選框 <input type="radio"/></p>
<p>復選框 <input type="checkbox"/></p>
<p>文本區域 <textarea>這里是一段文本</textarea></p>
<p>選擇框 <select><option>男士</option></select></p>
<p>上傳文件 <input type="file"/></p>
<p>隱藏字段 <input type="hidden"/></p>
<p>提交按鈕 <input type="submit"></p>
運行效果如下:
html5新型輸入框
點擊查看代碼
<p>郵件 <input type="email"/>提交表單時,瀏覽器會驗證email格式</p>
<p>URL框 <input type="url"/>提交表單時,瀏覽器會驗證url格式</p>
<p>數字框 <input type="number" min="0" max="100" step="10" value="50"/></p>
<p>范圍值 <input type="range" min="10" max="100" value="20" step="1"/>在網頁中顯示為滾動條</p>
<p>日期選擇器 <input type="week"/>type有date、month、week、time、datetime、datetime-local選項</p>
<p>搜索框 <input type="search"/> 搜索框右邊會有一個清空圖標</p>
<p>電話號碼 <input type="tel"/></p>
<p>拾色器 <input type="color"/></p>
運行效果如下:
數據列表
點擊查看代碼
<input type="text" list="url_lsit">
<datalist id="url_lsit">
<option label="百度" value="https://www.baidu.com"></option>
<option label="新浪" value="https://xinlang.com"></option>
</datalist>
當用戶點擊文本框的時候,會彈出數據列表選項。
輸出結果 output,用于表示表單的輸出結果
<p><output>輸出結果</output></p>
表單屬性
autofocus表示自動獲取焦點
pattern 定義驗證input的正則表達式
placeholder 定義默認的替換文本
required 定義必填
總結
- 上一篇: 大数据之路Week08_day03 (H
- 下一篇: 深入理解springMVC