1-html基本知識

TML基礎知識

學習目標

能夠知道html的作用
能夠寫出html的基本結構
能夠知道單標簽和雙標簽的區別
知道相對路徑和絕對路徑的區別
掌握標簽的種類
了解表格的邊線合并
了解表單中常用的表單元素標簽
了解表單的提交方式
了解表單中action屬性的作用

一、HTML的介紹

1. 網頁效果圖 -- 百度

2. html的定義

HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。

標記：就是標簽, <標簽名稱> </標簽名稱>, 比如: <html></html>、<h1></h1>等，標簽大多數都是成對出現的。

所謂超文本，有兩層含義:

因為網頁中還可以圖片、視頻、音頻等內容(超越文本限制)
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接(超鏈接文本)

3. html的作用

html是用來開發網頁的，它是開發網頁的語言。

二、html 的基本結構

1. 結構代碼

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔。
<html>...</html>標簽是開發人員在告訴瀏覽器，整個網頁是從<html>這里開始的，到</html>結束,也就是html文檔的開始和結束標簽。
<head>...</head>標簽用于定義文檔的頭部,是負責對網頁進行設置標題、編碼格式以及引入css和js文件的。
<body>...</body>標簽是編寫網頁上顯示的內容。

2. 瀏覽網頁文件

網頁文件的后綴是.html或者.htm, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。

3. 小結

三、初始常用的 html 標簽

1. 常用的 html 標簽

<!-- 1、成對出現的標簽：-->

<h1>h1標題</h1>
<div>這是一個div標簽</div>
<p>這個一個段落標簽</p>


<!-- 2、單個出現的標簽： -->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

<!-- 3、帶屬性的標簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網</a>

<!-- 4、標簽的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖片">
    <a href="http://www.baidu.com">百度網</a>
</div>

提示:

標簽不區分大小寫，但是推薦使用小寫。
根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

2.標簽列表

標簽	描述
<!--...-->	定義注釋
<!DOCTYPE>	定義文檔類型
<a>	定義超文本鏈接
<abbr>	定義縮寫
<acronym>	定義只取首字母的縮寫，不支持HTML5
<address>	定義文檔作者或擁有者的聯系信息
<applet>	HTML5中不贊成使用。定義嵌入的 applet。
<area>	定義圖像映射內部的區域
<article>	定義一個文章區域
<aside>	定義頁面的側邊欄內容
<audio>	定義音頻內容
<b>	定義文本粗體
<base>	定義頁面中所有鏈接的默認地址或默認目標。
<basefont>	HTML5不支持，不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<bdo>	定義文字方向
<big>	定義大號文本，HTML5不支持
<blockquote>	定義長的引用
<body>	定義文檔的主體
<br>	定義換行
<button>	定義一個點擊按鈕
<canvas>	定義圖形，比如圖表和其他圖像,標簽只是圖形容器，您必須使用腳本來繪制圖形
<caption>	定義表格標題
<center>	HTML5不支持，不贊成使用。定義居中文本。
<cite>	定義引用(citation)
<code>	定義計算機代碼文本
<col>	定義表格中一個或多個列的屬性值
<colgroup>	定義表格中供格式化的列組
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<datalist>	定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<dd>	定義定義列表中項目的描述
<del>	定義被刪除文本
<details>	用于描述文檔或文檔某個部分的細節
<dfn>	定義定義項目
<dialog>	定義對話框，比如提示框
<dir>	HTML5不支持，不贊成使用。定義目錄列表。
<div>	定義文檔中的節
<dl>	定義列表詳情
<dt>	定義列表中的項目
<em>	定義強調文本
<embed>	定義嵌入的內容，比如插件。
<fieldset>	定義圍繞表單中元素的邊框
<figcaption>	定義<figure> 元素的標題
<figure>	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<font>	HTML5不支持，不贊成使用。定義文字的字體、尺寸和顏色。
<footer>	定義 section 或 document 的頁腳。
<form>	定義了HTML文檔的表單
<frame>	定義框架集的窗口或框架
<frameset>	定義框架集
<h1> to <h6>	定義 HTML 標題
<head>	定義關于文檔的信息
<header>	定義了文檔的頭部區域
<hr>	定義水平線
<html>	定義 HTML 文檔
<i>	定義斜體字
<iframe>	定義內聯框架
<img>	定義圖像
<input>	定義輸入控件
<ins>	定義被插入文本
<kbd>	定義鍵盤文本
<keygen>	規定用于表單的密鑰對生成器字段。
<label>	定義 input 元素的標注
<legend>	定義 fieldset 元素的標題。
<li>	定義列表的項目
<link>	定義文檔與外部資源的關系
<main>	定義文檔的主體部分。
<map>	定義圖像映射
<mark>	定義帶有記號的文本。請在需要突出顯示文本時使用 <em> 標簽。
<menu>	不贊成使用。定義菜單列表。
<meta>	定義關于 HTML 文檔的元信息。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導航鏈接的部分
<noframes>	定義針對不支持框架的用戶的替代內容。HTML5不支持
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<object>	定義內嵌對象
<ol>	定義有序列表。
<optgroup>	定義選擇列表中相關選項的組合。
<option>	定義選擇列表中的選項。
<output>	定義不同類型的輸出，比如腳本的輸出。
<p>	定義段落。
<param>	定義對象的參數。
<pre>	定義預格式文本。
<progress>	定義運行中的進度（進程）。
<q>	定義短的引用。
<rp>	<rp> 標簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。
<rt>	<rt> 標簽定義字符（中文注音或字符）的解釋或發音。
<ruby>	<ruby> 標簽定義 ruby 注釋（中文注音或字符）。
<s>	不贊成使用。定義加刪除線的文本。
<samp>	定義計算機代碼樣本。
<script>	定義客戶端腳本。
<section>	<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<select>	定義選擇列表（下拉列表）。
<small>	定義小號文本。
<source>	<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<span>	定義文檔中的節。
<strike>	HTML5不支持，不贊成使用。定義加刪除線文本。
<strong>	定義強調文本。
<style>	定義文檔的樣式信息。
<sub>	定義下標文本。
<summary>	<summary> 標簽包含 details 元素的標題，"details" 元素用于描述有關文檔或文檔片段的詳細信息。
<sup>	定義上標文本。
<table>	定義表格。
<tbody>	定義表格中的主體內容。
<td>	定義表格中的單元。
<textarea>	定義多行的文本輸入控件。
<tfoot>	定義表格中的表注內容（腳注）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內容。
<time>	定義日期或時間，或者兩者。
<template>	定義在頁面加載時隱藏的一些內容。
<title>	定義文檔的標題。
<tr>	定義表格中的行。
<track>	<track> 標簽為諸如 video 元素之類的媒介規定外部文本軌道。
<tt>	定義打字機文本。
<u>	不贊成使用。定義下劃線文本。
<ul>	定義無序列表。
<var>	定義文本的變量部分。
<video>	<video> 標簽定義視頻，比如電影片段或其他視頻流。
<wbr>	規定在文本中的何處適合添加換行符。

3.HTML 屬性

屬性	描述
accesskey	設置訪問元素的鍵盤快捷鍵。
class	規定元素的類名（classname）
contenteditable	規定是否可編輯元素的內容。
contextmenu	指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單
data-*	用于存儲頁面的自定義數據
dir	設置元素中內容的文本方向。
draggable	指定某個元素是否可以拖動
dropzone	指定是否將數據復制，移動，或鏈接，或刪除
hidden	hidden 屬性規定對元素進行隱藏。
id	規定元素的唯一 id
lang	設置元素中內容的語言代碼。
spellcheck	檢測元素是否拼寫錯誤
style	規定元素的行內樣式（inline style）
tabindex	設置元素的 Tab 鍵控制次序。
title	規定元素的額外信息（可在工具提示中顯示）
translate	指定是否一個元素的值在頁面載入時是否需要翻譯

4.小結

學習 html 語言就是學習標簽的用法，常用的標簽有20多個。
編寫 html 標簽建議使用小寫
根據書寫形式，html 標簽分為雙標簽和單標簽
單標簽沒有標簽內容，雙標簽可以嵌套其它標簽和承載文本內容

四、資源路徑

當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:

<img src="images/logo.png">

這里的src屬性就是設置圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。

1. 相對路徑

從當前操作 html 的文檔所在目錄算起的路徑叫做相對路徑

示例代碼:

<!-- 相對路徑方式1 -->
<img src="./images/logo.png">
<!-- 相對路徑方式2 -->
<img src="images/logo.png">

2. 絕對路徑

從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/

示例代碼:

<!-- 絕對路徑 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現資源文件找不到的問題

五、列表標簽

1. 列表標簽的種類

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

2. 無序列表

<!-- ul標簽定義無序列表 -->
<ul>
    <!-- li標簽定義列表項目 -->
    <li>列表標題一</li>
    <li>列表標題二</li>
    <li>列表標題三</li>
</ul>

3. 有序列表

<!-- ol標簽定義有序列表 -->
<ol>
    <!-- li標簽定義列表項目 -->
    <li><a href="#">列表標題一</a></li>
    <li><a href="#">列表標題二</a></li>
    <li><a href="#">列表標題三</a></li>
</ol>

六、表格標簽

1. 表格的結構

表格是由行和列組成，好比一個excel文件

2. 表格標簽

<table>標簽：表示一個表格

<tr>標簽：表示表格中的一行

<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

示例代碼:

<table border="1" cellspacing="3">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>18</td> 
    </tr>
</table>

表格邊線合并:

border-collapse 設置表格的邊線合并，如：border-collapse:collapse;

七、表單標簽

1. 表單的介紹

表單用于搜集不同類型的用戶輸入(用戶輸入的數據)，然后可以把用戶數據提交到web服務器。

2. 表單相關標簽的使用

<form>標簽表示表單標簽，定義整體的表單區域
<label>標簽表示表單元素的文字標注標簽，定義文字標注
<input>標簽表示表單元素的用戶輸入標簽，定義不同類型的用戶輸入數據方式
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義復選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個普通按鈕
<textarea>標簽表示表單元素的多行文本輸入框標簽定義多行文本輸入框
<select>標簽表示表單元素的下拉列表標簽定義下拉列表
<option>標簽與<select>標簽配合，定義下拉列表中的選項

示例代碼:

<form>
    <p>
        <label>姓名：</label><input type="text">
    </p>
    <p>
        <label>密碼：</label><input type="password">
    </p>
    <p>
        <label>性別：</label>
        <input type="radio"> 男
        <input type="radio"> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox"> 唱歌
        <input type="checkbox"> 跑步
        <input type="checkbox"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>廣州</option>
            <option>深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

3. 小結

表單標簽是<form>標簽
常用的表單元素標簽有: <label>、<input>、<textarea> 、 <select>等標簽

八、表單提交

1. 表單屬性設置

<form>標簽表示表單標簽，定義整體的表單區域

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

2. 表單元素屬性設置

name屬性設置表單元素的名稱，該名稱是提交數據時的參數名
value屬性設置表單元素的值，該值是提交數據時參數名所對應的值

3. 示例代碼

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11" />
    </p>
    <p>
        <label>密碼：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性別：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>愛好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>個人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍貫：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

4.小結

表單標簽的作用就是可以把用戶輸入數據一起提交到web服務器。
表單屬性設置

action: 是設置表單數據提交地址
method: 是表單提交方式，提交方式有GET和POST

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

TML5是HTML的最新版本，HTML又稱為超文本語言。如今幾乎所有的智能手機和平板電腦都能支持HTML5。HTML5培訓認為它的主要目的是用來開發更優秀、更高效的Web應用，它是在開放Web標準下開發的API和規范的。對于iOS和Android設備，都能很好的支持HTML5，因為它們運行的瀏覽器Safari、Chrome都基于WebKit，WebKit對HTML5有相當出色的支持。

Web應用

Web應用是指與桌面應用相似的web應用（Word、IE、Web瀏覽器），簡而言之，Web應用就是不直接在計算機上打開，而是通過Web瀏覽器來運行。使用HTML5為iOS和Android設計Web頁面的好處是在未來的設備上可以繼續使用。

HTML5中的新標簽

<article>-文檔或站點的一個獨立部分

<aside>-頁面或站點主題之外的內容

<figcaption>-figure元素的標題

<figure>-獨立于文本流之外的一段流內容（圖形、圖表）

<footer>-文檔或章節的頁腳

<header>-文檔或標題的頁眉

<hgroup>-標題組

<nav>-導航

<section>-章節部分

以下是一小段代碼：

在許多Web設計中，<div id = "header">，在HTML5中將寫成<header>，還有一些其他不同變化。

HTML5新的多媒體標簽

<audio>-內嵌音頻文件

<canvas>-內嵌動態圖形

<source>-內嵌音頻及視頻的源文件

<track>-內嵌音頻及視頻的輔助多媒體軌道

<video>-內嵌視頻文件

HTML5 的新屬性

onabort-操作終止時觸發

onbeforeonload、onbeforeonunload、onunload-在某一元素記載或卸載之前或同時觸發

oncontextmenu-打開菜單時觸發

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-發生拖拽時觸發

onerror及onmessage-錯誤或彈出信息時觸發

onscroll-用戶滾動瀏覽器滾動條時觸發

onresize-調整元素大小時觸發

HTML5擁有與視頻、音頻、Web應用程序、編輯頁面內容、拖拽以及展示瀏覽器歷史等功能相關的API，另外H5開放Web還提供于地理定位、Web存儲及離線Web應用程序的API，這些都非常適合在移動設備上使用。

用CSS3設計移動頁面樣式

CSS（層疊樣式表），是移動Web開發中的一個重要組成部分，CSS用于定義HTML文檔的外觀，Web頁面顯示或特定移動設備來定制HTML樣式。創建CSS樣式表，CSS由附加了樣式屬性的一個或者多個選擇器組成。例如在更改段落的文本顏色時，可以寫為：

p {

color：red；

}

p為選擇器，樣式屬性為color：red。如果要加入第二個選擇器，需要逗號隔開

p， .redText }

color: red

}

樣式表附加到Web頁面的方法：

1、內聯在標簽中

2、內嵌于HTML開頭

3、放在一個獨立文檔作為樣式表

內聯：

將單一段落的文本顏色定位為紅色

內聯的缺點是只能定義所在標簽的樣式，如果要講所有段落都定義為紅色時，需要就愛那個樣式屬性添加在每個段落。

內嵌：

內嵌樣式表位于文檔的<head>標簽中，使用<style>標簽，下面是講所有段落文本設置為紅色

效果如下：

內嵌樣式與內聯樣式一樣，只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面，需要將它們分別粘貼到每個頁面，這個時候獨立的樣式表的好處就體現出來了。

外聯樣式表

創建外聯樣式表的步驟：

1.打開一個新文檔

2.編寫樣式表，但是要去掉<style>標簽

3. 講該文件保存為擴展名為.css的樣式表文件,例如：style.css

下面的代碼是將段落定義為紅色并包含其他樣式的樣式表

ps：完成樣式表，要記得講它附加到Web頁面中，在文檔開頭加一個指向樣式表的<link>標簽。代碼如下：

ps:外聯樣式表可以提高網站加載速度，如果將所有樣式放在同一個文檔中的外聯樣式表

學習無止境，鄭州HTML5培訓哪里好，快來藍鷗HTML5培訓看看吧，督促自己不斷前進！

JavaScript、CSS 相比，HTML 經過三十多年的發展，似乎逐漸走進無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。

作者 | Yaser Adel Mehraban

譯者 | 譚開朗，責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

有多少次，身為開發者的你編寫了一個HTML塊而沒有意識到可能編碼得并不理想?

為什么

HTML一直處于無人問津的角落，因為JavaScript和CSS總是吸引人們的注意力。

請在腦海里先保留這種印象，因為我要用一些簡單的技巧來發揮作用，讓HTML再次回到人們視野的中心。

以下是創建一目了然、可維護和可擴展的代碼的一些方法，其很好的應用了HTML5的語義標記元素，并將在支持的瀏覽器中正確呈現。

其緣由就不贅述了，讓我們來看看具體是什么吧。

文檔類型

在index.html的頂部位置，請確保聲明了DOCTYPE。這將在所有瀏覽器中激活標準模式，并告知瀏覽器該如何編譯文檔。請記住DOCTYPE不是HTML元素。

HTML5是這樣的：

<!DOCTYPE html>

注意:如果應用了框架，這已預先寫好。如果沒有，我強烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。

想了解更多關于其他文檔類型的信息嗎?點擊這里查看參考文件：https://html.com/tags/doctype/。

可選標簽

有些標簽在HTML5中是可選的，主要是因為元素是隱式呈現的。信不信由你，你可以省略<html>標簽，而頁面呈現得也很好。

<!DOCTYPE HTML>

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是一個有效的HTML，但在某些情況下就不能這樣做了。例如標簽后面跟著注釋：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->

<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>

上面是無效的，因為注釋位于<thml>標簽之外，解析樹發生了更改。

結束標簽

應始終記得結束標簽，否則某些瀏覽器在呈現頁面時會出現問題。出于可讀性和其他原因，建議保留這些內容，稍后我會詳細介紹。

<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>

以上都是有效的標簽，但也有一些特例，如下。

自閉合標簽是有效的，但不是必需的。這些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永遠不能有自閉合標簽。

<title />

上面顯然是無效的。

字符集

預先定義字符集。最好是將它放在頂部元素中。

<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>

上面是無效的，標題無法正確呈現。正確寫法是將字符集移到頂部位置。

<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>

語言

不忽略可選標簽的另一個原因是在使用屬性時。在這種情況下，我們應該定義web頁面的語言，這對于可訪問性和搜索非常重要。

<html lang="fr-CA">
...
</html>

標題

永遠不要忽略標題標簽，否則可訪問性太差了。我個人就永遠不會使用這樣的網站,因為我剛打開它即刻在20多個頁面后就找不到了(瀏覽器選項卡不會有任何顯示)。

base標簽

這是一個非常有用的標簽，應該謹慎使用。它將設置應用程序的基本URL。一旦設置好，所有鏈接都將相對于這個基本URL，這可能會導致一些不必要的行為:

<base href="http://www.example.com/" />

通過以上設置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者href="example.org"將被編譯為href="http://www.example.com/example.org"。

描述

這個meta標簽非常有用，盡管嚴格來說它不是最佳寫法。但在搜索引擎時，這是超級有用的。

<meta name="description" content="HTML best practices">

這有一個帖子“搜索引擎優化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

語義標簽

雖然可以使用div創建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內容顯示。像p、section、h{1-6}、main、nav等標簽都是語義標簽。如果使用p標簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。

語義HTML超出了本文的范圍。但是我們應該進行檢查，就好比寫作所用的筆，而我們有鼠標。

hr不應該用于格式化

<hr>不是格式化元素，所以不要用它來格式化內容。在HTML5中，這個標簽代表了內容的主題分離。正確的用法是這樣的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>

使用title屬性時要小心

title屬性是一個功能強大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。

HTML 5 規范道:

目前不鼓勵依賴title屬性，因為很多用戶代理不按照規范的訪問方式來暴露該屬性（例如，使用鼠標等設備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現代手機或平板電腦）。

請閱讀有關如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

單引號或雙引號

我見過的許多代碼庫，他們的標記中混合了這兩種形式。這并不好，特別是當你使用一個依賴于單引號的框架時，比如php，當你在一個句子中使用單引號時，就像我現在做的一樣。另一個原因是保持一致，這總是好的。不要這樣寫:

<img alt="super funny meme" src='/img/meme.jpg'>

而寫為：

<img alt="super funny meme" src="/img/meme.jpg">

省略布爾值

當涉及到屬性的布爾值時，建議省略，因為它們不添加任何值，還會增加標記的權重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略類型屬性

不需要向scriptand樣式標簽添加type屬性。某些服務(如W3C的標記驗證工具)還會出現驗證錯誤。

驗證標記

可以使用W3C的標記驗證等服務以確保有效的標記。

拒絕內聯樣式

HTML中寫的是內容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內聯樣式，這將有利于開發人員和瀏覽器理解你的標記。

總結

這些只是編寫標簽時要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強烈建議你重復閱讀。

《GitHub HTML最佳實踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜歡本文，并能寫出優雅的標簽。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文為 CSDN 翻譯，轉載請注明來源出處。

【END】

在線咨詢

上一篇：云安全日報200902：谷歌Android系統發現重要漏洞可竊取敏感數據需要盡快升級
下一篇：七小時帶你入門HTML+CSS網頁設計，知識準備與開發工具（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

1-html基本知識

TML基礎知識

一、HTML的介紹

1. 網頁效果圖 -- 百度

2. html的定義

3. html的作用

二、html 的基本結構

1. 結構代碼

2. 瀏覽網頁文件

3. 小結

三、初始常用的 html 標簽

1. 常用的 html 標簽

2.標簽列表

3.HTML 屬性

4.小結

四、資源路徑

1. 相對路徑

2. 絕對路徑

五、列表標簽

1. 列表標簽的種類

2. 無序列表

3. 有序列表

六、表格標簽

1. 表格的結構

2. 表格標簽

七、表單標簽

1. 表單的介紹

2. 表單相關標簽的使用

3. 小結

八、表單提交

1. 表單屬性設置

2. 表單元素屬性設置

3. 示例代碼

4.小結

您的項目需求