1-html基本知識(shí)

TML基礎(chǔ)知識(shí)

學(xué)習(xí)目標(biāo)

能夠知道html的作用
能夠?qū)懗鰄tml的基本結(jié)構(gòu)
能夠知道單標(biāo)簽和雙標(biāo)簽的區(qū)別
知道相對(duì)路徑和絕對(duì)路徑的區(qū)別
掌握標(biāo)簽的種類
了解表格的邊線合并
了解表單中常用的表單元素標(biāo)簽
了解表單的提交方式
了解表單中action屬性的作用

一、HTML的介紹

1. 網(wǎng)頁效果圖 -- 百度

2. html的定義

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

標(biāo)記：就是標(biāo)簽, <標(biāo)簽名稱> </標(biāo)簽名稱>, 比如: <html></html>、<h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

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

因?yàn)榫W(wǎng)頁中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，與世界各地主機(jī)的網(wǎng)頁鏈接(超鏈接文本)

3. html的作用

html是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言。

二、html 的基本結(jié)構(gòu)

1. 結(jié)構(gòu)代碼

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
          網(wǎng)頁顯示內(nèi)容
    </body>
</html>

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

2. 瀏覽網(wǎng)頁文件

網(wǎng)頁文件的后綴是.html或者.htm, 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁。

3. 小結(jié)

三、初始常用的 html 標(biāo)簽

1. 常用的 html 標(biāo)簽

<!-- 1、成對(duì)出現(xiàn)的標(biāo)簽：-->

<h1>h1標(biāo)題</h1>
<div>這是一個(gè)div標(biāo)簽</div>
<p>這個(gè)一個(gè)段落標(biāo)簽</p>


<!-- 2、單個(gè)出現(xiàn)的標(biāo)簽： -->
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>

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

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

提示:

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

2.標(biāo)簽列表

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

3.HTML 屬性

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

4.小結(jié)

學(xué)習(xí) html 語言就是學(xué)習(xí)標(biāo)簽的用法，常用的標(biāo)簽有20多個(gè)。
編寫 html 標(biāo)簽建議使用小寫
根據(jù)書寫形式，html 標(biāo)簽分為雙標(biāo)簽和單標(biāo)簽
單標(biāo)簽沒有標(biāo)簽內(nèi)容，雙標(biāo)簽可以嵌套其它標(biāo)簽和承載文本內(nèi)容

四、資源路徑

當(dāng)我們使用img標(biāo)簽顯示圖片的時(shí)候，需要指定圖片的資源路徑，比如:

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

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

1. 相對(duì)路徑

從當(dāng)前操作 html 的文檔所在目錄算起的路徑叫做相對(duì)路徑

示例代碼:

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

2. 絕對(duì)路徑

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

示例代碼:

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

提示:

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

五、列表標(biāo)簽

1. 列表標(biāo)簽的種類

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

2. 無序列表

<!-- ul標(biāo)簽定義無序列表 -->
<ul>
    <!-- li標(biāo)簽定義列表項(xiàng)目 -->
    <li>列表標(biāo)題一</li>
    <li>列表標(biāo)題二</li>
    <li>列表標(biāo)題三</li>
</ul>

3. 有序列表

<!-- ol標(biāo)簽定義有序列表 -->
<ol>
    <!-- li標(biāo)簽定義列表項(xiàng)目 -->
    <li><a href="#">列表標(biāo)題一</a></li>
    <li><a href="#">列表標(biāo)題二</a></li>
    <li><a href="#">列表標(biāo)題三</a></li>
</ol>

六、表格標(biāo)簽

1. 表格的結(jié)構(gòu)

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

2. 表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格

<tr>標(biāo)簽：表示表格中的一行

<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

示例代碼:

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

表格邊線合并:

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

七、表單標(biāo)簽

1. 表單的介紹

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

2. 表單相關(guān)標(biāo)簽的使用

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

示例代碼:

<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>個(gè)人描述：</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. 小結(jié)

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

八、表單提交

1. 表單屬性設(shè)置

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

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

2. 表單元素屬性設(shè)置

name屬性設(shè)置表單元素的名稱，該名稱是提交數(shù)據(jù)時(shí)的參數(shù)名
value屬性設(shè)置表單元素的值，該值是提交數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

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>個(gè)人描述：</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.小結(jié)

表單標(biāo)簽的作用就是可以把用戶輸入數(shù)據(jù)一起提交到web服務(wù)器。
表單屬性設(shè)置

action: 是設(shè)置表單數(shù)據(jù)提交地址
method: 是表單提交方式，提交方式有GET和POST

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

TML5是HTML的最新版本，HTML又稱為超文本語言。如今幾乎所有的智能手機(jī)和平板電腦都能支持HTML5。HTML5培訓(xùn)認(rèn)為它的主要目的是用來開發(fā)更優(yōu)秀、更高效的Web應(yīng)用，它是在開放Web標(biāo)準(zhǔn)下開發(fā)的API和規(guī)范的。對(duì)于iOS和Android設(shè)備，都能很好的支持HTML5，因?yàn)樗鼈冞\(yùn)行的瀏覽器Safari、Chrome都基于WebKit，WebKit對(duì)HTML5有相當(dāng)出色的支持。

Web應(yīng)用

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

HTML5中的新標(biāo)簽

<article>-文檔或站點(diǎn)的一個(gè)獨(dú)立部分

<aside>-頁面或站點(diǎn)主題之外的內(nèi)容

<figcaption>-figure元素的標(biāo)題

<figure>-獨(dú)立于文本流之外的一段流內(nèi)容（圖形、圖表）

<footer>-文檔或章節(jié)的頁腳

<header>-文檔或標(biāo)題的頁眉

<hgroup>-標(biāo)題組

<nav>-導(dǎo)航

<section>-章節(jié)部分

以下是一小段代碼：

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

HTML5新的多媒體標(biāo)簽

<audio>-內(nèi)嵌音頻文件

<canvas>-內(nèi)嵌動(dòng)態(tài)圖形

<source>-內(nèi)嵌音頻及視頻的源文件

<track>-內(nèi)嵌音頻及視頻的輔助多媒體軌道

<video>-內(nèi)嵌視頻文件

HTML5 的新屬性

onabort-操作終止時(shí)觸發(fā)

onbeforeonload、onbeforeonunload、onunload-在某一元素記載或卸載之前或同時(shí)觸發(fā)

oncontextmenu-打開菜單時(shí)觸發(fā)

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-發(fā)生拖拽時(shí)觸發(fā)

onerror及onmessage-錯(cuò)誤或彈出信息時(shí)觸發(fā)

onscroll-用戶滾動(dòng)瀏覽器滾動(dòng)條時(shí)觸發(fā)

onresize-調(diào)整元素大小時(shí)觸發(fā)

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

用CSS3設(shè)計(jì)移動(dòng)頁面樣式

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

p {

color：red；

}

p為選擇器，樣式屬性為color：red。如果要加入第二個(gè)選擇器，需要逗號(hào)隔開

p， .redText }

color: red

}

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

1、內(nèi)聯(lián)在標(biāo)簽中

2、內(nèi)嵌于HTML開頭

3、放在一個(gè)獨(dú)立文檔作為樣式表

內(nèi)聯(lián)：

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

內(nèi)聯(lián)的缺點(diǎn)是只能定義所在標(biāo)簽的樣式，如果要講所有段落都定義為紅色時(shí)，需要就愛那個(gè)樣式屬性添加在每個(gè)段落。

內(nèi)嵌：

內(nèi)嵌樣式表位于文檔的<head>標(biāo)簽中，使用<style>標(biāo)簽，下面是講所有段落文本設(shè)置為紅色

效果如下：

內(nèi)嵌樣式與內(nèi)聯(lián)樣式一樣，只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面，需要將它們分別粘貼到每個(gè)頁面，這個(gè)時(shí)候獨(dú)立的樣式表的好處就體現(xiàn)出來了。

外聯(lián)樣式表

創(chuàng)建外聯(lián)樣式表的步驟：

1.打開一個(gè)新文檔

2.編寫樣式表，但是要去掉<style>標(biāo)簽

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

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

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

ps:外聯(lián)樣式表可以提高網(wǎng)站加載速度，如果將所有樣式放在同一個(gè)文檔中的外聯(lián)樣式表

學(xué)習(xí)無止境，鄭州HTML5培訓(xùn)哪里好，快來藍(lán)鷗HTML5培訓(xùn)看看吧，督促自己不斷前進(jìn)！

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

作者 | Yaser Adel Mehraban

譯者 | 譚開朗，責(zé)編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

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

為什么

HTML一直處于無人問津的角落，因?yàn)镴avaScript和CSS總是吸引人們的注意力。

請(qǐng)?jiān)谀X海里先保留這種印象，因?yàn)槲乙靡恍┖唵蔚募记蓙戆l(fā)揮作用，讓HTML再次回到人們視野的中心。

以下是創(chuàng)建一目了然、可維護(hù)和可擴(kuò)展的代碼的一些方法，其很好的應(yīng)用了HTML5的語義標(biāo)記元素，并將在支持的瀏覽器中正確呈現(xiàn)。

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

文檔類型

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

HTML5是這樣的：

<!DOCTYPE html>

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

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

可選標(biāo)簽

有些標(biāo)簽在HTML5中是可選的，主要是因?yàn)樵厥请[式呈現(xiàn)的。信不信由你，你可以省略<html>標(biāo)簽，而頁面呈現(xiàn)得也很好。

<!DOCTYPE HTML>

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

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

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

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

上面是無效的，因?yàn)樽⑨屛挥?lt;thml>標(biāo)簽之外，解析樹發(fā)生了更改。

結(jié)束標(biāo)簽

應(yīng)始終記得結(jié)束標(biāo)簽，否則某些瀏覽器在呈現(xiàn)頁面時(shí)會(huì)出現(xiàn)問題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會(huì)詳細(xì)介紹。

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

以上都是有效的標(biāo)簽，但也有一些特例，如下。

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

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

注意:普通元素永遠(yuǎn)不能有自閉合標(biāo)簽。

<title />

上面顯然是無效的。

字符集

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

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

上面是無效的，標(biāo)題無法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。

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

語言

不忽略可選標(biāo)簽的另一個(gè)原因是在使用屬性時(shí)。在這種情況下，我們應(yīng)該定義web頁面的語言，這對(duì)于可訪問性和搜索非常重要。

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

標(biāo)題

永遠(yuǎn)不要忽略標(biāo)題標(biāo)簽，否則可訪問性太差了。我個(gè)人就永遠(yuǎn)不會(huì)使用這樣的網(wǎng)站,因?yàn)槲覄偞蜷_它即刻在20多個(gè)頁面后就找不到了(瀏覽器選項(xiàng)卡不會(huì)有任何顯示)。

base標(biāo)簽

這是一個(gè)非常有用的標(biāo)簽，應(yīng)該謹(jǐn)慎使用。它將設(shè)置應(yīng)用程序的基本URL。一旦設(shè)置好，所有鏈接都將相對(duì)于這個(gè)基本URL，這可能會(huì)導(dǎo)致一些不必要的行為:

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

通過以上設(shè)置，href="#internal"將被編譯為href=http://www.example.com/#internal。或者h(yuǎn)ref="example.org"將被編譯為href="http://www.example.com/example.org"。

描述

這個(gè)meta標(biāo)簽非常有用，盡管嚴(yán)格來說它不是最佳寫法。但在搜索引擎時(shí)，這是超級(jí)有用的。

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

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

語義標(biāo)簽

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

語義HTML超出了本文的范圍。但是我們應(yīng)該進(jìn)行檢查，就好比寫作所用的筆，而我們有鼠標(biāo)。

hr不應(yīng)該用于格式化

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

<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屬性時(shí)要小心

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

HTML 5 規(guī)范道:

目前不鼓勵(lì)依賴title屬性，因?yàn)楹芏嘤脩舸聿话凑找?guī)范的訪問方式來暴露該屬性（例如，使用鼠標(biāo)等設(shè)備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機(jī)或平板電腦）。

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

單引號(hào)或雙引號(hào)

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

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

而寫為：

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

省略布爾值

當(dāng)涉及到屬性的布爾值時(shí)，建議省略，因?yàn)樗鼈儾惶砑尤魏沃担€會(huì)增加標(biāo)記的權(quán)重。

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

<!-- instead  -->

<audio autoplay src="podcast.mp3">

省略類型屬性

不需要向scriptand樣式標(biāo)簽添加type屬性。某些服務(wù)(如W3C的標(biāo)記驗(yàn)證工具)還會(huì)出現(xiàn)驗(yàn)證錯(cuò)誤。

驗(yàn)證標(biāo)記

可以使用W3C的標(biāo)記驗(yàn)證等服務(wù)以確保有效的標(biāo)記。

拒絕內(nèi)聯(lián)樣式

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

總結(jié)

這些只是編寫標(biāo)簽時(shí)要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強(qiáng)烈建議你重復(fù)閱讀。

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

希望你喜歡本文，并能寫出優(yōu)雅的標(biāo)簽。

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

本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來源出處。

【END】

在線咨詢

上一篇：云安全日?qǐng)?bào)200902：谷歌Android系統(tǒng)發(fā)現(xiàn)重要漏洞可竊取敏感數(shù)據(jù) 需要盡快升級(jí)
下一篇：七小時(shí)帶你入門HTML+CSS網(wǎng)頁設(shè)計(jì)，知識(shí)準(zhǔn)備與開發(fā)工具（一）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

1-html基本知識(shí)

TML基礎(chǔ)知識(shí)

一、HTML的介紹

1. 網(wǎng)頁效果圖 -- 百度

2. html的定義

3. html的作用

二、html 的基本結(jié)構(gòu)

1. 結(jié)構(gòu)代碼

2. 瀏覽網(wǎng)頁文件

3. 小結(jié)

三、初始常用的 html 標(biāo)簽

1. 常用的 html 標(biāo)簽

2.標(biāo)簽列表

3.HTML 屬性

4.小結(jié)

四、資源路徑

1. 相對(duì)路徑

2. 絕對(duì)路徑

五、列表標(biāo)簽

1. 列表標(biāo)簽的種類

2. 無序列表

3. 有序列表

六、表格標(biāo)簽

1. 表格的結(jié)構(gòu)

2. 表格標(biāo)簽

七、表單標(biāo)簽

1. 表單的介紹

2. 表單相關(guān)標(biāo)簽的使用

3. 小結(jié)

八、表單提交

1. 表單屬性設(shè)置

2. 表單元素屬性設(shè)置

3. 示例代碼

4.小結(jié)

您的項(xiàng)目需求