整合營銷服務商

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

          免費咨詢熱線:

          趕緊收藏,頭條超詳細Web前端入門到精通必學的標簽及屬性大全

          eb前端入門到精通必會的標簽及屬性,這是老師花時間總結了圖片上的內容,做成了網頁版,以便查詢使用 ,如果對你學習有幫助,記得收藏點贊評論關注支持一下哦!

          文檔聲明,文檔結構標簽,功能標簽

          文檔聲明:<!DOCTYPE>

          文檔結構標簽:html,head,head,body

          功能標簽:mete

          單詞表

          分類

          單詞

          描述

          文檔聲明

          <!DOCTYPE>

          用于文檔的聲明

          <!DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標簽之前。用于告訴瀏覽器此文檔的類型是什么。目前開發中常用的聲明是 <!DOCTYPE html>,表示聲明一個HTML5文檔。

          注意它不屬于HTML標簽,而是一條指令

          文檔結構標簽

          html

          每創建一個HTML文件,都需要創建html標簽對。除了聲明文檔類型的代碼,其他的所有內容都存放在html標簽對中

          head

          定義文檔的頭部,用來包含網頁的配置(例如網頁的標題title,網頁的基礎配置meta都放在head中)

          title

          定義網頁的標題,標題內容會顯示在瀏覽器的標簽欄上

          body

          定義網頁的主體,例如:網頁中的圖片、文字等

          功能標簽

          meta

          元標簽,用來表示網頁的基礎配置(如設置頁面關鍵字和描述,字符編碼的聲明)


          塊級元素:

          塊級元素可以獨占一行,可以設置寬高。有關塊級元素以及后面的內聯元素,在學習了后面的css相關課程之后會有所了解

          包含標簽:h1~h6,p,div,ul li,ol li,dl dt dd,figure,figcaption,form

          單詞表

          單詞

          描述

          h1

          一級標題

          h2

          二級標題

          h3

          三級標題

          h4

          四級標題

          h5

          五級標題

          h6

          六級標題

          p

          段落標簽,用來描述網頁中的段落內容

          例如:一篇文章,每一個段落都可以使用一個p標簽;或者一段比較長的文本,也可以使用p標簽

          div

          用于頁面區域的劃分。它就像一個容器,用來放某一個區域的內容

          例如:整個網頁分成頭部、主體和尾部,那么頭部、主體、尾部的內容,要分別放在一個單獨的div中

          ul

          定義無序列表

          ol

          定義有序列表

          li

          定義列表項,與ul或者ol配合使用。示例:

          <ul>

          <li>列表項一</li>

          <li>列表項二</li>

          </ul>

          dl

          定義列表標簽,配合dt和dd一起使用。示例:

          <dl>

          <dt></dt>

          <dd></dd>

          </dl>

          dt

          定義列表中的項目

          dd

          描述列表中的項目

          figure

          定義一段獨立的內容(不常用,了解即可)

          figcaption

          定義figure元素的標題(不常用,了解即可)

          form

          表單標簽,里面包含很多搜集信息的表單元素,如輸入框,復選框等


          內聯元素:

          內聯元素不會自占一行,與其他內聯元素在同一行顯示,且寬高由內容撐起。

          包含標簽:a,span,b,u,i,strong,em,mark,label,datalist

          單詞表

          單詞

          描述

          a

          超鏈接標簽,用于從一張頁面鏈接到另一張頁面

          span

          用來組合文檔中的行內元素,一般用來包裹文字

          b

          字體加粗標簽(不常用,了解即可)

          u

          下劃線文本標簽(不常用,了解即可)

          i

          斜體文本標簽(不常用,了解即可)

          strong

          用于強調文本的標簽,字體會加粗(不常用,了解即可)

          em

          用于強調文本的標簽,字體變成斜體(不常用,了解即可)

          mark

          突出顯示文本的標簽,字體會有背景顏色,默認的是黃色(不常用,了解即可)

          label

          為 input 元素定義標注(標記)。label可設置for屬性,用于把 label 綁定到另外一個元素。即讓label的for屬性值與input的id屬性值相同時(id屬性在后面會學到,暫時了解)。當點擊label 元素時,瀏覽器就會自動將焦點轉到和標簽相關的input元素上。示例:

          <label for="male">Male</label>

          <input type="text" id="male" />

          (上面的例子建議練習并在瀏覽器中測試,能更直觀的查看效果)

          datalist

          標簽/控件,需要結合option標簽使用(不常用,了解即可)


          特殊的內聯元素:

          可以設置寬高,但不獨占一行

          包含標簽:img,audio,video,input,select,option,textarea

          單詞表

          分類

          單詞

          描述

          特殊的內聯元素

          (可以設置寬高,但不獨占一行)

          img

          圖片標簽,用于在網頁中嵌入圖片

          audio

          音頻標簽,用于在頁面中引入音頻

          video

          視頻標簽,用于在頁面中引入視頻

          input

          定義用戶可輸入數據的輸入字段。例如登錄頁面的用戶名和密碼框,都是使用input標簽

          select

          定義下拉列表

          option

          (塊元素,寫在這里是因為它需要跟select標簽一起使用)

          定義下拉列表項,需要與select配合使用。option標簽中,可以設置value值。示例:

          <select>

          <option value ="html">html</option>

          <option value ="css">css</option>

          <option value="JavaScript">JavaScript</option>

          </select>

          textarea

          定義多行文本框,常用于留言框、備注框等

          標簽中的屬性

          lang

          html標簽的屬性,用來標記網頁的語言;常見屬性值有:"en"和"zh";en代表英語, zh代表中文

          charset

          meta標簽的屬性,聲明頁面文檔使用的字符編碼類型

          常用的屬性值有:UTF-8和GB2312

          type

          修改無序列表與有序列表默認的前導樣式(已被廢棄,了解即可)

          1、type屬性寫在無序列表中,屬性值有:

          (1)disc:默認值,實心圓樣式

          (2)circle: 空心圓樣式

          (3)square:實心方塊樣式

          2、type屬性寫在無序列表中,屬性值有:

          (1)1:默認值,數字編號

          (2)A:大寫英文編號

          (3)i:小寫羅馬數字編號

          (4)I:大寫羅馬數字編號

          (5)a:小寫英文編號

          start

          有序列表的屬性,指定列表編號的起始值,能修改有序列表標簽默認的前導樣式(不常用,了解即可)

          reversed

          有序列表的屬性,指定列表中的條目是否倒序排列的(不常用,了解即可)

          src

          (1)img標簽的屬性,指定圖片的路徑

          (2)audio標簽和video標簽也可以設置src屬性,指定音頻、視頻的路徑

          alt

          img標簽的屬性,用來對引入的圖片進行文本描述

          width

          規定元素的寬度。此屬性不常用,了解即可。后續學習css課程,會使用css樣式設置元素寬度

          height

          規定元素的高度。此屬性不常用,了解即可。后續學習css課程,會使用css樣式設置元素高度。注意,height或者width如果省略其中一個屬性,則按照圖片原始比例縮放圖片

          href

          a標簽屬性,規定該鏈接要跳轉到目標頁面的地址

          title

          a標簽屬性,設置鼠標懸停的文本

          target

          a標簽屬性,規定在何處打開鏈接文檔;如果屬性值為blank或_blank,會打開新的標簽頁

          controls

          audio/video的屬性,用于顯示播放控件

          autoplay

          audio/video的屬性,設置音頻/視頻自動播放

          loop

          audio/video的屬性,設置音頻/視頻可以循環播放

          class

          所有標簽都可以使用這個屬性,用來定義元素的類名(后續學習css課程,會有詳細的講解)

          action

          form標簽的屬性,用來設置form表單的數據要提交到哪個地址。提交到哪個地址,后端開發會告訴我們(不常用,了解一下。提交數據常用ajax,后面會學習到的)

          method

          form標簽的屬性,用來設置表單的提交方式,常用的方式有get或post(不常用,了解即可)

          rows

          textarea標簽屬性,設置多行文本框有多少列

          cols

          textarea標簽屬性,設置多行文本框有多少行

          list

          datalist控件的屬性,二者結合,可以與輸入框綁定,為輸入框設置備選項(不常用,了解即可)

          border

          邊框屬性,可為table添加邊框

          border-collapse

          css樣式,通常給表格設置border-collapse:collapse;讓表格邊框合并,成為單線表格;

          table{

          border-collapse: collapse;

          }

          colspan

          表格標簽的屬性,實現跨列合并的效果,用來設置td或th跨列合并

          rowspan

          表格標簽的屬性,實現跨列合并的效果,用來設置td或th跨行合并

          cellspacing

          設置表格單元格內容與邊框之間的間隙(不常用,了解即可)

          cellpadding

          設置兩個單元格之間的間隙(不常用,了解即可)

          轉義字符:


          由于單詞被編譯,補充內容

          單詞表

          分類

          單詞

          描述

          轉義字符

          表示空格符號

          `<`

          表示小于號“<”

          `>`

          表示大于號“>”

          `?`

          表示版權符號“?”

          區塊標簽:

          html5新增的語義化標簽

          包含標簽:header,nav,main,aside,article,section,footer

          單詞表

          分類

          單詞

          描述

          區塊標簽

          (html5新增的語義化標簽)

          header

          定義頁頭

          nav

          定義導航

          main

          定義頁面的主體區域

          aside

          可用作文章的側欄

          article

          可用作文章的內容

          section

          可用作文檔的區域塊,類似于div

          footer

          定義頁腳

          input元素中的屬性:

          包含標簽:type,value,name,checked,placeholder,disabled,max,min,require

          單詞表

          分類

          單詞

          描述

          input元素中的屬性

          type

          用來定義表單元素的類型。屬性值如下:

          (1)text:單行文本輸入框

          (2)radio:單選按鈕

          (3)checkbox:復選框

          (4)password:密碼框

          (5)button:普通按鈕,也可以直接寫成button按鈕,例如:

          (6)submit:提交按鈕

          (7)reset:重置按鈕

          (8)color:顏色控件(不常用,了解即可)

          (9)date:日期控件

          (10)time:時間控件

          (11)email:電子郵件輸入控件

          (12)file:文件選擇控件,需要上傳本地文件時,可以使用它

          (13)number:表示數字輸入控件

          (14)range:表示拖拽條(不常用,了解即可)

          (15)search:t表示搜索框(不常用,了解即可)

          (16)url:表示網址輸入控件

          value

          用于為input 元素設定值,value值一般是給后端發送數據時使用,后續學習了相關課程就會了解

          name

          規定 input 元素的名稱

          checked

          用來設置單選按鈕、多選按鈕的默認選中項

          placeholder

          表示提示文本,用來設置輸入框的提示信息,告訴用戶該輸入框需要輸入什么內容

          disabled

          用于禁用input元素,表示只讀

          max

          max表示最大值,表示數字輸入控件(即type="number"的input元素)允許輸入的最大值

          min

          min表示最小值,最小值,表示數字輸入控件(即type="number"的input元素)允許輸入的最小值

          require

          表示必填字段,約束某項內容是必填項,比如規定”用戶名“項,是必填項

          表格標簽:

          包含標簽:table,tr,td,th,thead,tbody,tfoot,caption

          單詞表

          分類

          單詞

          描述

          表格標簽

          table

          表格標簽

          tr

          表格行

          td

          表格列

          th

          標簽,可替代td標簽,用來設置表格的標題

          thead

          定義表格頭部

          tbody

          定義表格主體內容

          tfoot

          定義表格尾部

          caption

          設置表格的標題

          內聯文本語義標簽

          單詞表

          分類

          單詞

          描述

          聯文本語義標簽

          abbr

          HTML Abbreviation 元素 (<abbr>) 表示,title屬性為縮寫提供擴展或描述。
          用法:<abbr title="世界衛生組織"> WHO </abbr>成立于1948年。

          mark

          HTML 標記文本元素 (<mark>) 表示由于標記的段落在封閉上下文中的相關性或重要性而被標記或突出顯示以供引用或注釋的文本。
          用法: <p>arry老師是<mark>最帥</mark>的 ^_^</p>

          cite

          HTML Citation 元素 (<cite>) 用于描述對所引用創意作品的引用,并且必須包含該作品的標題
          用法:<p><cite>Mona Lisa</cite> Painting by Leonardo da Vinci</p>

          small

          獨立于其風格表示,HTML <small> 元素代表旁注和小字,例如版權和法律材料。默認情況下,它會將其中的文本呈現小一種字體大小,例如從小到 x-small。
          用法:<p><small>A very small piece of text.</small></p>

          time

          HTML <time> 元素表示特定的時間段
          用法:<p>The library can be visited from <time>9:00</time> to <time>19:00</time> from monday to friday.</p>

          接下來我會和大家分享更多前端的學習總結知識體系,希望大家喜歡!記得點贊收藏哦!

          權符號在網站上面經常可以看到,這個符號可以說是非常使用的一種特殊符號了,我們今天就來看看版權符號是怎么打的?.

          1:如果我們不經常的這個符號,我們可以直接復制這個符號,這也是比較快速打這個符號的方法?

          2:在電腦上面,如果是搜狗輸入法可以通過全拼的方法打出這個符號,我們輸入:banquan,即可以得到這個符號,效果如下

          3:小編用手機試了下,打這個符號也是非常方便的,我們通過輸入全拼的符號也是可以快速打出來的了,現在的手機輸入法都是比較智能化了,效果如下

          總結:關于版權符號,我們想要打這個符號是比較簡單的事情,上面的幾種方法可以讓我們非常快速打出這個符號,希望能幫助到大家!

          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)


          主站蜘蛛池模板: tom影院亚洲国产一区二区| 国产精品亚洲专区一区| 欲色影视天天一区二区三区色香欲| 国模精品一区二区三区| 一区二区亚洲精品精华液| 久久亚洲中文字幕精品一区四| 亚洲Av永久无码精品一区二区 | 中文字幕日本精品一区二区三区| 亚洲av色香蕉一区二区三区蜜桃 | 久久精品国产一区| 无码人妻精品一区二| 国产日韩精品一区二区在线观看| 亚洲一区欧洲一区| 亚洲日本久久一区二区va| 亚洲一区二区三区日本久久九| 国产在线精品一区免费香蕉| 亚洲日本一区二区一本一道| 无码日韩人妻AV一区二区三区| 麻豆精品一区二区综合av| 国产一区在线电影| 精品91一区二区三区| 激情综合丝袜美女一区二区| 国产一区二区视频免费| 无码人妻久久一区二区三区蜜桃| 国产中文字幕一区| www一区二区三区| 一区二区三区四区精品| 韩日午夜在线资源一区二区| 国产一区二区精品尤物| 制服丝袜一区二区三区| 无码人妻久久久一区二区三区| 美女啪啪一区二区三区| 中文字幕精品一区二区日本| 精品深夜AV无码一区二区老年| 国产精品亚洲一区二区麻豆| 美日韩一区二区三区| 日韩精品一区二区三区在线观看| 精品国产一区二区三区2021| 国产在线视频一区二区三区98 | 国精产品一区二区三区糖心| 亚洲av日韩综合一区在线观看 |