整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML <abbr> 標簽

          被標記的縮寫詞如下:

          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程序員雷雪松的博客

          1、最基本的HTML結構

          <!--<!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>

          2、最常用的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>標簽上標

          &nbsp;表示一個空格

          &copy;表示版權符

          &lt;表示<

          &gt;表示>

          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">&amp;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,表示選中

          3、其他HTML事項

          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 是最常見也是比較重要的標簽,網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局

          <div>
            div 就是一個分類的存儲箱子
          </div>


          p標簽

          p標簽表示段落, 在網頁文字中應用的比較多

          <!--段落和段落間會換行-->
          <p>第一段</p>
          <p>第二段</p>


          H-標題標簽

          h標簽分為六個

          標簽

          語義

          h1

          一級標題

          h2

          二級標題

          h3

          三級標題

          h4

          四級標題

          h5

          五級標題

          h6

          六級標題

          引用標題標簽后,字體會加粗、字號一會變大


          ul 無序標簽

          無序標簽是沒有顯示順序的列表,無序列表前面通常會有一個“小點”, 這個小點可以用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>


          ol 有序標簽

          • ol 前面的標簽是有序的,可以是數字、字母、羅馬數字等。同樣控制這些樣式使用的是type屬性。

          type屬性值

          意義

          a

          小寫英文字母編號

          A

          大寫英文字母編號

          i

          小寫羅馬數字編號

          I

          大寫羅馬數字編號

          1

          數字編號(默認)

          • 設置start屬性,表示從哪個編號開始
          • 加 reversed 表示倒敘排列


          有序列表, 從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 自定義列表

          dl標簽表示自定義列表

          dt表示數據項,dd表示數據定義, dd是dt標簽的解釋


          <dl>
              <dt>西紅柿</dt>
              <dd>紅、酸</dd>
              <dt>黃瓜</dt>
              <dd>綠、澀</dd>
            </dl>


          img標簽

          img 用來插入圖片,包括但不限于以下圖片格式

          圖片格式

          備注

          .jpg、.jpeg

          通常用于照片,是一種有損壓縮格式

          .png

          通常用于logo、背景,支持透明和半透明。便攜式網絡圖像

          .svg

          矢量圖片


          <!-- src(source)屬性, 圖片地址,可以為相對路徑,也可以為絕對路徑-->
          <!-- alt 如果遇到圖片無法加載的情況,網頁上會展示 alt的 值 -->
          <!-- width 和 height 表示 寬和高, 如果只設置一個, 那么另外一個就會跟著成比例縮放-->
          <img src="./images/images.jpg" alt="星期一" width="120" height="20">


          a 標簽

          用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標簽

          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標簽

          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>

          頁腳


          其他的語義標簽

          • span 標記文本標記區域,沒有特殊效果,結合CSS使用
          • b 標簽 加粗文章(可以使用CSS實現同樣效果)
          • u 加下換線文字
          • br 換行
          • i 傾斜文字(可以使用CSS實現同樣效果)
          • strong 代表特別重要的文字
          • em 需要強調的文字,有一定的傾斜,也可以用其配置CSS做表情文字
          • mark 高亮文字
          • figure 和 figcaption 。figure - 一段獨立的內容 figcaption- figure 內部元素的說明性內容


          表單

          表單用來收集信息并且可以完成和后端的數據傳輸

          表單中大致可以分為三種標簽

          • form標簽,標識表單區域, 內部的元素都可能被表單提取信息
          • input 標簽, 標識輸入、點擊等需要和用戶交互的場景
          • datalist 下拉框,支持搜索,通常和input一塊使用

          一些表單的示例

          <!--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 標簽表示表格
          • tr 表示行
          • td 表示單元格
          • caption 表格的標題,通常放在表格的第一行
          • th 表示列標題


          <!--表格示例-->
          <table border="1">
            <caption>我是標題</caption>
            <tr>
                <th>第一列標題</th>
                <th>第二列標題</th>
            </tr>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
            </tr>
          </table>


          • 單元格的合并, clospan 用來設置td 或者th的列跨度 , rowspan屬性用來設置td或者th的行跨度
          <!--跨列示例-->
          <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>


          • 表格的其他標簽 , thead 定義表頭, tbody 定義表格的主題內容, tfoot 標簽定義表格底部,通常用來匯總等

          主站蜘蛛池模板: 亚洲一区二区三区电影| 91在线一区二区三区| 2018高清国产一区二区三区| 一区二区三区在线观看中文字幕| 一区二区在线电影| 国产伦一区二区三区高清 | 91福利国产在线观一区二区| 欧洲精品码一区二区三区免费看 | 国产无线乱码一区二三区| 国产av夜夜欢一区二区三区| 日本一区频道在线视频| 人妻AV一区二区三区精品| 亚洲熟女少妇一区二区| 国产午夜精品一区二区| 免费一区二区无码视频在线播放| 无码人妻aⅴ一区二区三区有奶水| 无码少妇精品一区二区免费动态| 成人一区二区免费视频| 国产99精品一区二区三区免费| 国产丝袜一区二区三区在线观看 | 国产精品无码亚洲一区二区三区| 91精品一区二区综合在线| 无码国产精品一区二区免费模式| 高清一区二区三区免费视频| 一区二区三区国产| 亚洲国产一区在线| 制服丝袜一区在线| 无码人妻精品一区二区三区久久久| 偷拍激情视频一区二区三区| 日本一区二三区好的精华液| 欧美日本精品一区二区三区 | 成人丝袜激情一区二区| 夜夜精品视频一区二区| 国产精品一区二区综合| 人妻无码一区二区视频| 国产一区二区三区不卡观| 久久无码AV一区二区三区| 丝袜美腿一区二区三区| 无码人妻精品一区二区三区99不卡| 日本韩国黄色一区二区三区| 国产综合无码一区二区辣椒|