HTML常用標簽 · laravvel+vue+uniapp構建cms

# **HTML常用標簽** ### **1.HTML文檔標簽** ``` <!DOCTYPE>: 定義文檔類型. <html>: 定義HTML文檔. <head>: 定義文檔的頭部.(頭部內包含) <meta>: 定義元素可提供有關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞. <base>:定義頁面上的所有鏈接規定默認地址或默認目標. <title>: 定義文檔的標題. <link>: 定義文檔與外部資源的關系. <style>:定義 HTML 文檔樣式信息. <body>: 定義文檔的主體.(腳本在非必須情況時在主體內容最后) <script>: 定義客戶端腳本，比如 JavaScript. ``` ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title>hello world</title> <link rel="stylesheet" href="css/base.css">  </head> <body>  <div class="bg"></div> </body> </html> ``` ### **2.常見的HTML5語義化標簽** ![](https://img.kancloud.cn/19/74/19743d3fe2e0c63bb23a4b6510e47913_457x338.png) ``` <div>:定義塊級元素. <span>:定義行內元素. <header>定義區段或頁面的頁眉.(頭部) <footer>:定義區段或頁面的頁腳.(足部) <section>:定義文檔中的區段. <article>:定義文章. <aside>:定義頁面內容之外的內容. <nav>:定義導航. ``` ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style type="text/css"> body{ background-color: #000000; margin: 0px; font-size: 38px; font-weight: bold; } .header,.nav,.footer,.aside,.section1{ background-color: #666666; text-align: center; margin: 2%; border-radius: 10px; } .header,.footer{ height: 100px; line-height: 100px; } .nav,.section1,.aside{ float: left; } .nav,.aside{ width: 20%; height: 280px; line-height: 280px; } .section1{ width: 48%; height: 280px; } .header1,.article1,.footer1{ height: 80px; margin: 10px; background-color: #cccccc; line-height: 80px; border-radius: 10px; } .clear{ clear:both} </style> </head> <body> <header class="header">header</header> <section class="section"> <nav class="nav">nav</nav> <section class="section1"> <header class="header1">header1</header> <article class="article1">article1</article> <footer class="footer1">footer1</footer> </section> <aside class="aside">aside</aside> <div class="clear"></div> </section> <footer class="footer">footer</footer> </body> </html> ``` ### **3.表格標簽** ``` <table>:定義表格 <thead>:定義頁眉 <tbody>:定義主體 <tfoot>:定義頁腳 <caption>:定義標題 <th>:定義表頭 <tr>:定義一行 <td>:定義單元格 table合并單元格 colspan（跨列）和rowspan（跨行） ``` ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [align](https://www.w3school.com.cn/tags/att_table_align.asp "HTML 標簽的 align 屬性") | * left* center* right| 不贊成使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。| | [bgcolor](https://www.w3school.com.cn/tags/att_table_bgcolor.asp "HTML 標簽的 bgcolor 屬性") | * *rgb(x,x,x)** *#xxxxxx** *colorname* | 不贊成使用。請使用樣式代替。規定表格的背景顏色。| | [border](https://www.w3school.com.cn/tags/att_table_border.asp "HTML 標簽的 border 屬性") | *pixels* | 規定表格邊框的寬度。 | | [cellpadding](https://www.w3school.com.cn/tags/att_table_cellpadding.asp "HTML 標簽的 cellpadding 屬性") | * *pixels** *%* | 規定單元邊沿與其內容之間的空白。 | | [cellspacing](https://www.w3school.com.cn/tags/att_table_cellspacing.asp "HTML 標簽的 cellspacing 屬性") | * *pixels** *%* | 規定單元格之間的空白。 | | [frame](https://www.w3school.com.cn/tags/att_table_frame.asp "HTML 標簽的 frame 屬性") | * void* above* below* hsides* lhs* rhs* vsides* box* border | 規定外側邊框的哪個部分是可見的。 | | [rules](https://www.w3school.com.cn/tags/att_table_rules.asp "HTML 標簽的 rules 屬性") | * none* groups* rows* cols* all | 規定內側邊框的哪個部分是可見的。 | | [summary](https://www.w3school.com.cn/tags/att_table_summary.asp "HTML 標簽的 summary 屬性") | *text* | 規定表格的摘要。 | | [width](https://www.w3school.com.cn/tags/att_table_width.asp "HTML 標簽的 width 屬性") | * *%** *pixels* | 規定表格的寬度。 | ### **4.表單標簽** ``` <form>:定義表單.(表單包含在form標簽中) <input>:定義輸入域 <textarea>:定義文本域.(多行) <label>:定義一個控制的標簽.(input 元素的標注) <fieldset>:定義域 <legend>:定義域的標題 <select>:定義一個選擇列表 <optgroup>:定義選擇組 <option>:定義下拉列表的選項 <button>:定義按鈕.(定義圍繞表單中元素的邊框.) <fieldset>:定義圍繞表單中元素的邊框. <legend>:定義 fieldset 元素的標題. <fieldset>:定義選項列表.與input 元素配合使用該元素，來定義 input 可能的值 <keygen>:定義表單的密鑰對生成器字段 <output>:定義不同類型的輸出，比如腳本的輸出 ``` ### **5.列表標簽** ``` <ul>:定義無序列表 <ol>:定義有序列表 <li>:定義列表項 <dl>:定義自定義列表 <dt>:定義自定義列表項 <dd>:定義自定義的描述 ``` ### **6.圖像&鏈接標簽** ``` <img>:定義圖像.注意加上alt屬性 <a>:定義超鏈接 <map>:定義圖像映射 <area>:定義圖像地圖內部的區域 <figure>:定義媒介內容的分組 <figcaption>:定義 <figure> 元素的標題 ``` ### **7.音頻/視頻** ``` <audio>:定義聲音內容 <source>:定義媒介源 <track>:定義用在媒體播放器中的文本軌道 <video>:定義視頻 ``` ### **8.框架標簽** ``` <iframe>:內聯框架 ``` ### **9.格式標簽** #### **文章標簽** ``` <h1>-<h6>:定義 HTML 標題 <p>:定義段落 <br>:定義換行 <hr>:定義水平線 <bdo>:定義文字方向 <pre>:定義預格式文本 <abbr>:定義縮寫 <address>:定義文檔作者或擁有者的聯系信息 <ins>:定義被插入文本 <del>:定義被刪除文本 <time>:定義日期/時間 ``` #### **短語元素標簽** ``` <em>:定義強調文本 <strong>:定義語氣更為強烈的強調文本 <dfn>:定義定義項目 <code>:定義計算機代碼文本 <samp>:定義計算機代碼樣本 <kbd>:定義鍵盤文本 <var>:定義文本的變量部分 <sup>:定義上標文本 <sub>:定義下標文本 <cite>:定義引用 <blockguote>:定義長的引用 <q>:定義短的引用 ``` #### **字體樣式標簽** ``` <i>:顯示斜體文本效果 <b>:呈現粗體文本效果 <big>:呈現大號字體效果 <small>:呈現小號字體效果 <mark>:定義有記號的文本 ``` ### **10.其它** ``` <canvas>:定義圖形容器，必須使用腳本來繪制圖形 <meter>:定義預定義范圍內的度量 <progress>:定義任何類型的任務的進度 ```