HTML入門筆記[3]:HTML經常使用標籤①

時間  2020-01-30
標籤 html 入門 筆記 經常 使用 標籤 欄目 HTML 简体版
原文   原文鏈接

1. HTML語法

HTML語法相對靈活，並不區分大小寫，基本的語法注意事項以下：css

  • HTML元素以開始標籤起始，開始標籤通常爲<a>``<p>形式。
  • HTML元素以結束標籤終止，結束標籤通常爲</a>``</p>。
  • 通常元素的內容是開始標籤與結束標籤之間的內容，但也有一些標籤不存在結束標籤，好比<meta>元素。
  • 一些元素具備空內容(空元素)，如<br>換行標籤(插入一個換行符)，但空元素也須要對應的結束標籤關閉
  • 大多數HTML元素擁有屬性

2. HTML標籤分類

HTML 5規定的標籤有110多個，可是經常使用的標籤沒有那麼多
因此新增的標籤能夠作什麼呢，就不能div和span一把梭麼
咱們能夠將經常使用的標籤分爲如下幾類：html

  • 頭標籤
    • <head>元素所包含的標籤，通常包括<meta>、<style>、<title>、<base>和<link>
  • 章節標籤
    • 對HTML文檔的內容進行結構劃分
    • 常見的標籤有<section>、<nav>、<artical>、<aside>、<h1>-<h6>、<header>、<footer>、<address>、<main>
  • 內容層次標籤
    • 體現HTML內容的層次，加強內容可讀性
    • 常見的標籤有<p>、<hr>、<pre>、<blockqoute>、<ol>+<li>、<ul>+<li>、<dl>+<dt>+<dd>、<figure>+<figcaption>
  • 文字標籤
    • 修飾文本內容，加強內容可讀性
    • 常見的標籤有<a>、<em>、<strong>、<q>、<time>、<code>、<kdb>、<sub>/<sup>、<mark>、<br>/<wbr>、<ins>/<del>
  • 嵌入內容標籤
    • 將圖片、視頻或者音頻內容嵌入HTML文檔
    • 常見的標籤有<img>、<iframe>、<video>、<audio>、<canvas>、<svg>
  • 表格標籤
    • 在HTML文檔中建立表格
    • 常見的標籤有<table>、<tbody>、<thead>、<tfoot>、<tr>、<td>、<th>
  • 表單標籤
    • 在HTML文檔中建立表單
    • 常見的標籤有<form>、<label>、<input>、<button>、<select>、<option>、<textare>、<progress>
  • 可交互元素標籤
    • 實現網頁與用戶的交互功能
    • 常見的標籤有<summary>+<details>、<menu>+<menuitem>

3.章節標籤

章節標籤將HTML文檔的內容結構化，對於文檔內容進行梳理。下面的代碼包括了所有經常使用標籤：canvas

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>章節標籤示例</title>
        <style> h1 {color:darkred;} h2 {color:lightblue;} h3 {color:lightgreen;} p {color:green;} div{border: thin dotted #FF0000;} nav{border: solid #000000;} main{background-color:pink;} article{border: solid white;} aside{background-color:blue;color:white;} section{border: solid yellow;} header{background-color:lightblue;} footer{background-color:lightgreen;} </style>
    </head>
    <body>
        <header>我是一個頁眉</header>
        <div>
        <nav>
            <a href="/html/">HTML</a>
            <a href="/css/">CSS</a>
        </nav>
        <main>
        <article>
            <h1>這是一個一級標題h1</h1>
            <p>此標籤裏顯示的是article整個文章的主要內容，下面的section元素裏是對該文章的評論</p>
            <section>
			<h2>評論(這是一個二級標題h2)</h2>
            <h3>發表者：maizi(這是一個三級標題h3)</h3>
            <p>這篇文章很不錯啊，頂一下！</p>
            </section>
        </article>
        <aside>我是一個側邊欄</aside>
        </main>
        </div>
        <footer>我是一個頁腳</footer>
    </body>
</html>
複製代碼

↓↓↓代碼效果以下↓↓↓瀏覽器

章節標籤示例
我是一個頁眉

這是一個一級標題h1

  

此標籤裏顯示的是article整個文章的主要內容，下面的section元素裏是對該文章的評論服務器

  

評論(這是一個二級標題h2)

    

發表者：maizi(這是一個三級標題h3)

    

這篇文章很不錯啊，頂一下！ide

我是一個頁腳

3.1 <div>標籤

<div>標籤訂義HTML文檔中的一個分隔區塊或者一個區域部分。svg

雖然我很短，但我是一個塊元素
默認狀況下，瀏覽器一般會在div元素先後放置一個換行符。

衆所周知<div>只是一個標籤，無具體語義和靈魂，可用在任何場景，讓人摸不着頭腦。ui

<div>標籤經常使用於組合塊級元素，以便經過 CSS 來對這些元素進行格式化。spa

注意：默認狀況下，瀏覽器一般會在<div> 元素先後放置一個換行符。插件

3.2 <main>標籤

<main>表明了文檔中body的主要，與文檔直接相關。<main>也能夠是文檔的中心主題的擴展。
<main>在一個文檔中有且只能有一個，不能出現一個以上的<main>。
<main>不能是如下元素的後代<article>、<aside>、<footer>、<header>或<nav>。

↓↓↓ HTML 5標準中的示例↓↓↓

<main>
 
  <h1>Skateboards</h1>
  The skateboard is the way cool kids get around
  <article>
  <h2>Longboards</h2>
  Longboards are a type of skateboard with a longer 
  wheelbase and larger, softer wheels.
  ... 
  </article>

  <article>
  <h2>Electric Skateboards</h2>
  These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board, 
  fed by an electric battery.
  </article>
 
</main>
 
  <!-- other content -->
複製代碼

3.3 <header>標籤和<footer>標籤

我是一個頁眉
雖然我只有一行，但我是一個塊元素
我是一個頁腳
  • <header>標籤訂義文檔或者文檔的一部分區域的頁眉，能夠做爲頁面的內容介紹或者導航欄的容器。
  • <footer>標籤訂義文檔或者文檔的一部分區域的頁腳，通常頁腳會包含文檔創做者的姓名、文檔的版權信息、使用條款的連接、聯繫信息等等。
  • 能夠在一個文檔中定義多個<header>和<footer>，但 <header> 標籤不能被放在<footer>、<address>或者另外一個<header> 元素內部。

3.4 <section>標籤和<artical>標籤

這是一個一級標題h1

此標籤裏顯示的是article整個文章的主要內容，下面的section元素裏是對該文章的評論

這篇文章很不錯啊，頂一下!

<section>標籤和<article>標籤都是HTML 5新增長的標籤

  • <section>標籤對頁面上的內容進行分塊，定義了文檔的某個區域，好比章節、頭部、底部或者文檔的其餘區域，一般由內容及其標題組成。

    • 典型應用場景有文章的章節、標籤對話框中的標籤頁、或者論文中有編號的部分。

  • <article>表明文檔、頁面或應用程序中獨立的、完整的、能夠獨自被外部引用的內容。能夠是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或其餘任何獨立的內容。

    • 一般<article>元素有它本身的標題（通常放在一個header元素裏面），有時還有本身的腳註。

<section>？<artical>？<div>？

<div>、<section>、<artical>，三個元素的語義從無到有，逐漸加強的。<div>無任何語義，僅僅用做樣式化或者腳本化的標籤，對於一段主題性的內容，則就適用<section>，而假如這段內容能夠脫離上下文，做爲完整的獨立存在的一段內容，則就適用<artical>。
原則上來講，能使用<artical>的時候，也是可使用<section>的，可是實際上，假如使用<article>更合適，那麼就不要使用<section>。

關於<section>的使用禁忌

  1. 不要將用<section>做爲設置樣式的頁面容器，那是<div>的工做。
  2. 若是<article>、<aside>或<nav>更符合應用場景，就不要使用<section>。
  3. 不要爲沒有標題的內容塊使用<section>。

3.5 <aside>標籤

<aside>定義了<article>之外的內容，通常有兩種應用場景。

  1. 展現<article>的附屬信息，內容能夠是與當前文章有關的相關資料、名次解釋，等等。
<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>
複製代碼
  1. 在<article>以外使用，做爲頁面或站點全局的附屬信息部分。最典型的示例爲側邊欄，其中的內容可使友情連接，博客中的其它文章列表、廣告單元等。
<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>
複製代碼

3.6 <nav>標籤

<nav>標註該區域爲導航連接的區域，只起語義的做用，沒有實際的顯示效果，其內容一般是一個列表。<nav>沒有默認顯示效果，只表示該區域是導航連接部分。

<nav>
<a href="#">首頁</a><a href="#">服務器端</a><a href="#">關於</a>
</nav>
複製代碼

<nav>也能夠配合列表使用

<nav> 
<ul> 
<li><a href="#">首頁</a></li> 
<li><a href="#">服務器端</a></li> 
<li><a href="#">聯繫咱們</a></li> 
</ul> 
</nav> 
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程