例
被標記的縮寫詞如下:
The<abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.
瀏覽器支持
所有主流瀏覽器都支持 <abbr> 標簽。
注釋:IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標簽。
標簽定義及使用說明
<abbr> 標簽用來表示一個縮寫詞或者首字母縮略詞,如"WWW"或者"NATO"。
通過對縮寫詞語進行標記,您就能夠為瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
提示和注釋
提示:在某些瀏覽器中,當您把鼠標移至帶有 <abbr> 標簽的縮寫詞/首字母縮略詞上時,<abbr> 標簽的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。
HTML 4.01 與 HTML5之間的差異
無。
全局屬性
<abbr> 標簽支持 HTML 的全局屬性。
事件屬性
<abbr> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況,整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集,如果字符集不對,可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽,title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習,PHP開發與編程,Web前端開發,MySQL學習和教程,NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分,所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節(division/section),可以把文檔分割為獨立的、不同的部分,主要用于布局。
aside標簽的內容可用作文章的側欄,<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等,<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容,比如:標題、內容、評論,<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本,斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本,保持原有格式的一種標簽。
sub標簽下標,
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接,指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點,可以在當前頁面打開,新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設置,否則圖像會變形。
<img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽,可以使用type屬性規定有序列表符號的類型。1 按數字有序排列,為默認值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表(definition list),dl標簽用于結合 dt(定義列表中的項目)和 dd(描述列表中的項目)。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽,th標簽和td標簽,合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼,需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼,輸入的字符會被掩碼(顯示為星號或原點)
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單,上傳文件時,form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注,如果您點擊label元素文本,就會觸發此input控件。
textarea標簽,設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框,shift加鼠標單擊,可以連續選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected,表示選中
a、HTML標簽和屬性是不區分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始,以結束標簽終止。大部分HTML標簽都是成對出現的,稱為雙標簽,比如:p標簽、div標簽,也有的HTML標簽在開始標簽中結束的標簽,稱為單標簽,比如:hr標簽、br標簽。大多數 HTML 元素可擁有屬性,文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽,p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器。
來源:PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽(http://www.leixuesong.cn/2045)
TMl 的標簽可以分為單個標簽和成對標簽。
單個標簽:html4 規定單個標簽要有一個 / 表示結尾, html5 則不用
<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>
以下是HTMl中常用的一些標簽
div 標簽 主要用來將相關的內容組合到一塊,就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。
div 是最常見也是比較重要的標簽,網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局
<div>
div 就是一個分類的存儲箱子
</div>
p標簽表示段落, 在網頁文字中應用的比較多
<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>
h標簽分為六個
標簽 | 語義 |
h1 | 一級標題 |
h2 | 二級標題 |
h3 | 三級標題 |
h4 | 四級標題 |
h5 | 五級標題 |
h6 | 六級標題 |
引用標題標簽后,字體會加粗、字號一會變大
無序標簽是沒有顯示順序的列表,無序列表前面通常會有一個“小點”, 這個小點可以用type屬性控制。其中有三個展示方式(不過這種方式比較固定,不夠靈活和美觀, 已經被CSS的效果代替),如下:
值(type屬性) | 描述 |
disc | 默認值,實心圓 |
circle | 空心圓 |
square | 實心方框 |
舉例:
<!--ul標簽內部只能放置li標簽-->
<!--li標簽內部可以放其他的標簽-->
<ul type=">
<li>無序列表元素1</li> <!--列表項-->
<li>無序列表元素2</li>
</ul>
實心圓
<ul type="disc">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
實心方框
<ul type="square">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
type屬性值 | 意義 |
a | 小寫英文字母編號 |
A | 大寫英文字母編號 |
i | 小寫羅馬數字編號 |
I | 大寫羅馬數字編號 |
1 | 數字編號(默認) |
有序列表, 從2開始
<ol start="2">
<li>元素1</li>
<li>元素2</li>
</ol>
小寫字母表示
<ol type="a">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
倒敘
<ol reversed>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
dl標簽表示自定義列表
dt表示數據項,dd表示數據定義, dd是dt標簽的解釋
<dl>
<dt>西紅柿</dt>
<dd>紅、酸</dd>
<dt>黃瓜</dt>
<dd>綠、澀</dd>
</dl>
img 用來插入圖片,包括但不限于以下圖片格式
圖片格式 | 備注 |
.jpg、.jpeg | 通常用于照片,是一種有損壓縮格式 |
.png | 通常用于logo、背景,支持透明和半透明。便攜式網絡圖像 |
.svg | 矢量圖片 |
<!-- src(source)屬性, 圖片地址,可以為相對路徑,也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況,網頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高, 如果只設置一個, 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">
用a標簽來制作超級鏈接
<!-- href 屬性 表示 其他頁面的鏈接,支持相對路徑和絕對路徑,還可以鏈接到其它網站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標題, 當鼠標移動到鏈接上,會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>
<!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點,也可以是其他頁面的錨點-->
<h1 id="title">頭部標題</h1>
... 此處省略一些代碼
<a href="#title">返回標題</a>
<!--下載鏈接,指向 doc, zip, zip等文件格式時,a標簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接,系統將自動打開email相關軟件-->
<a href="mailto:halouworld@126.com">發郵件</a>
<!-- tel: 前綴鏈接是電話鏈接,系統將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>
audio標簽用來插入音頻標簽
<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環播放-->
<audio controls src="./video/demo.mp3">
您的瀏覽器不支持 audio標簽,請升級
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的瀏覽器不支持 audio標簽,請升級
</audio>
video 標簽用于插入一段視頻
<!--有的視頻不能播放 ,詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件 -->
<!-- autoplay 自動播放 -->
<!-- loop 循環播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的瀏覽器不支持 video標簽,請升級
</video>
以前的區塊標簽只有div,現在為了更好的方便搜索引擎抓取網站,因此有了以下語義更加明確的區塊標簽
<section> | 文檔的區域,比div語義上還要大一點 |
<header> | 頁頭 |
<main> | 網頁核心部分 |
<footer> | 頁腳 |
表單用來收集信息并且可以完成和后端的數據傳輸
表單中大致可以分為三種標簽
一些表單的示例
<!--action 表示要提交到后端的網址-->
<!--method 表示表單提交的方式,通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字,在沒任何輸入值的情況下,作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---單選按鈕,name相等,表示選擇了一個,另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio" name="radio_group">
<label>
<input type="radio" name="sex"> 男
</label>
<label>
<input type="radio" name="sex"> 女
</label>
<!--html4 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--復選框 type="checkbox" 同一組的的復選框,name值應該相同 ,復選框也有value值, 用于向服務器提交數據-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球
<!--密碼框-->
<input type="password" placeholder="請輸入密碼">
<!-- 下拉菜單 -->
<select>
<option value="alipay">支付寶</option>
<option value="wxpay">微信支付</option>
</select>
<!--多文本框 rows 和 clos 分別用于設置 行數 和 列數-->
<textarea rows="3" cols="5"></textarea>
<!--三種按鈕 submit 提交按鈕 button 普通按鈕 可以簡寫為 <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交表單">
<!--像 email 和 url 等格式,如果點擊提交按鈕,不符合格式,會有提示-->
<form>
日期空間: <input type="date"> <br/>
時間空間: <input type="time"> <br/>
日期時間空間 <input type="datetime-local"> <br/>
文件:<input type="file"> <br/> <br/>
數字控件: <input type="number"> <br/>
拖拽條: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
網址控件: <input type="url"> <br/>
郵箱控件: <input type="email" >
<input type="submit" value="提交">
</form>
<!-- datalist 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
<option value="陜西"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="山東"></option>
</datalist>
可以用html渲染表格
<!--表格示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨列示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td colspan="2">跨兩行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是標題</caption>
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。