筆記篇-如何靈活地使用HTML標(biāo)簽？

TML是超文本標(biāo)記語言。

web標(biāo)準(zhǔn)是由W3C和其它標(biāo)準(zhǔn)化組織制成集合。

web標(biāo)準(zhǔn)的構(gòu)成

結(jié)構(gòu)（對網(wǎng)頁元素進(jìn)行整理和分類-HTML）

表現(xiàn)（設(shè)置網(wǎng)頁元素的版式，顏色，大小等外觀樣式-CSS）

行為（模型的定義及交互的表現(xiàn)-JS）

HTML常用標(biāo)簽

加粗:<strong>和<b>

傾斜：<em>和<i>

刪除線：<del>和<s>

下劃線：<ins>和<u>

<div>分割分區(qū)<span>跨度跨距

圖片標(biāo)簽<img/>

屬性: src圖片路徑

alt替換文本，圖片無法正常顯示

title提示文本，鼠標(biāo)放到圖像顯示

width寬度，height高度（只需要修改其中一個）

border邊框（無需單位直接寫數(shù)值）

注意：

①圖像標(biāo)簽可以擁有多個屬性，必須寫在標(biāo)簽名后面

②屬性之前不分先后順序，標(biāo)簽名與屬性，屬性與屬性之間需要空格分開

③屬性采取鍵值對的格式

相對路徑：以引用文件所在位置為參考基礎(chǔ)

（同一級路徑，下一級路徑/，上一級路徑../）

絕對路徑：從盤符開始的路徑（\）

常用屬性

img ——vspace垂直邊距，hspace水平邊距 align對齊

details,summary，鼠標(biāo)點(diǎn)擊時顯示或隱藏

mark 文本中高亮顯示，和strong相似

cite 用于引用標(biāo)記，斜體顯示

draggable true選中后可以拖動操作

font定義 font-style font-weight font-size/line-height font-family 順序不能改變

word-wrap break-word長單詞或url地址自動換行

letter-spacing字間距

word-spacing單詞間距

line-height行間距

text-decorantion文本裝飾unline下劃線，overline上劃線，line-through刪除線

text-indent 2em 首行縮進(jìn)兩個字符

white-space空白符處理 pre

box-sizing:content-box當(dāng)widthh和height的時候不包括margin和panding

更換圖層位置，z軸偏移z-index:-10

align-items:center居中對齊

align-self:center

超鏈接標(biāo)簽<a>

href鏈接目標(biāo)地址

target鏈接頁面打開的方式（_self當(dāng)前窗口打開,_blank新窗口中打開方式）

外部鏈接，內(nèi)部鏈接，空鏈接，下載鏈接，網(wǎng)頁元素鏈接，錨點(diǎn)鏈接（快速定位到頁面的某個位置- 添加id屬性）

去除超鏈接樣式:text-decoration:none

特殊字符

空格符  

小于號< 大于號>

表格標(biāo)簽

align對齊方式

bolder表格邊框

cellpadding單元格與內(nèi)容之間空白

cellspacing單元格與單元格之前空白

合并單元格：rowspan colspan

列表標(biāo)簽

無序列表：ul li

有序列表：ol li

自定義列表：dl dt dd

表單標(biāo)簽

完整表單：表單域<form>，表單控件，提示信息

<form>

——action（指定接受并處理表單數(shù)據(jù)的服務(wù)器程序的url地址）

——method（get/post設(shè)置表單數(shù)據(jù)的提交方式）

——name（指定表單名稱）

<input>輸入元素

type屬性：button（點(diǎn)擊按鈕）checkbox（復(fù)選框）file（輸入字段和“瀏覽”按鈕）hidden（隱藏輸入字段）image（圖片形式提交按鈕）password（密碼字段）radio（單選按鈕）reset（重置按鈕）sumbit（提交按鈕）text（單行輸入字段，默認(rèn)20個字符）

name屬性：（相同的名字——單選框和復(fù)選框）區(qū)別不同表單元素

value屬性：定義input元素值

checked屬性：頁面首次加載是否選中

maxlength屬性：輸入字段的最大值

<lable>標(biāo)簽

用于綁定一個表單元素，當(dāng)點(diǎn)擊<lable>標(biāo)簽內(nèi)的文本時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到或者選擇對應(yīng)的表單元素上，用來增加用戶體驗(yàn)。

<lable>標(biāo)簽的for屬性與相關(guān)元素的id屬性相同

<select>下拉列表元素

-<option>

-selected="selected"默認(rèn)選中

<textarea>文本域

-cols rows （每行每列字?jǐn)?shù)）

TML常用標(biāo)簽有：a標(biāo)簽、table標(biāo)簽、img標(biāo)簽、form標(biāo)簽和input標(biāo)簽。

a標(biāo)簽

作用

跳轉(zhuǎn)到外部網(wǎng)頁
跳轉(zhuǎn)到內(nèi)部錨點(diǎn)
跳轉(zhuǎn)到郵箱或電話等

屬性

（一）href

href是hyper reference的縮寫，超鏈接的意思。

用于指定鏈接目標(biāo)的ur地址，(必須屬性)當(dāng)為標(biāo)簽應(yīng)用href屬性時，它就具有了超鏈接的功能；
href=“#”表示這是一個空鏈接；
如果href里面地址是—個文件或者壓縮包,會下載這個文件。

<a href="https://google.com">超鏈接到google網(wǎng)站的主頁</a>
 <a href="https://google.com">超鏈接到google的主頁</a>
 <a href="//google.com">超鏈接到google的主頁</a>

展現(xiàn)形式：

點(diǎn)擊此鏈接，即可到達(dá)google的主頁

a標(biāo)簽href的取值：

1、上述代碼中的網(wǎng)址的取值(推薦使用第三行的代碼)

<a href="//google.com">超鏈接到google的主頁</a>

由于此方式能夠自動補(bǔ)齊相關(guān)的網(wǎng)絡(luò)地址，前面兩種寫錯就會報錯，所以推薦使用。

2、路徑

/a/b/c 或者是a/b/c

當(dāng)前路徑下的a里面的b，b里面的c

index.html 以及./index.html

在當(dāng)前目錄下尋找index.html文件

3、偽協(xié)議

javascript：代碼；（冒號與分號一定要寫）

<a href="javascript：;">點(diǎn)擊后無任何點(diǎn)擊或刷新等動作的反應(yīng)</a>

錨點(diǎn)鏈接

<a href="#要跳轉(zhuǎn)的元素的id"></a>

點(diǎn)擊鏈接的時候，會跳轉(zhuǎn)到指定元素所在的位置。

mailto：郵箱

<a href="mailto:abcdefg@163.com ">發(fā)郵件給我</a>

tel：手機(jī)號

<a href="tel:12345678901">打電話給我</a>

（二）targe

用于指定鏈接頁面的打開方式

a的target取值

1、內(nèi)置名字

_blank 在空白頁打開

_self 在當(dāng)前頁面打開

_parent 在父級窗口打開

_top 在最頂級的窗口打開

<a href="//google.com" target="_blank">超鏈接到google網(wǎng)站的主頁在空白頁打開</a>

2、程序員的命名

window：name（在xxx頁面打開）

iframe的name（iframe現(xiàn)在已經(jīng)很少使用了，是指內(nèi)嵌窗口）

（三）download

下載頁面，但目前很少用，有的瀏覽器不支持，尤其是手機(jī)瀏覽器可能不支持。

table標(biāo)簽

1、table標(biāo)簽的語法：

thead:表頭

tbody:表的內(nèi)容，用于定義

tfoot:表的腳部

tr:table row,表格里的行

th:表格的表頭部分，其中的文本內(nèi)容字體加粗居中顯示

td:table data,表格數(shù)據(jù)，用于定義表格中的單元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小紅</th>
          <th>小黃</th>
          <th>小藍(lán)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>數(shù)學(xué)</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>語文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英語</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>總分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

第一行的th標(biāo)簽為空

2、table的樣式

table-layout：auto；自動計算每一行的寬高

table-layout：fixed；通過列表的寬度來決定平均寬度

border-collapse：collapse；合并邊框(默認(rèn)邊框與邊框之間不合并)

border-spacing：0；邊框?yàn)?.(邊框與邊框之間的距離)。

img標(biāo)簽（圖片）

作用：發(fā)出get請求，展示一張圖片。

<img src="1.JPG" alt="頭像" width="400" />

當(dāng)前路徑下的1.jpg，確定寬度為400，只寫寬度高度會自適應(yīng)

屬性

alt：alternate的縮寫，替換的意思。替換文本，圖像不能顯示的文字。

路徑錯誤顯示alt內(nèi)容

title：提示文本。鼠標(biāo)放到圖像上，顯示的文字。

響應(yīng)

max-width：100% 所有的圖片在手機(jī)上都自適應(yīng)寬度，寬度最大為100%。

事件

onload/onerror 監(jiān)聽圖片是否加載成功，加載成功時用onload，不成功是用onerror事件。確保在onerror事件能夠補(bǔ)救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("圖片加載成功");
 };
xxx.onerror = function () {
console.log("圖片加載失敗");
xxx.src = "/404.jpg";
 };
</script>
</body>

監(jiān)聽成功時，打印出成功

監(jiān)聽失敗時，先打印出監(jiān)聽失敗并且開始執(zhí)行加載失敗是的挽救圖片。404.jpg文件執(zhí)行

感想：

a標(biāo)簽的默認(rèn)樣式可以設(shè)置清除，href屬性可以有好多種取值，a標(biāo)簽的意義也不僅僅是跳轉(zhuǎn)到一個網(wǎng)址，還可以發(fā)郵件打電話。
給img標(biāo)簽設(shè)置寬度和高度時，不能讓圖片變形
table標(biāo)簽必須按照thead,tbody,tfoot的結(jié)構(gòu)去寫，先劃分好結(jié)構(gòu)，再往里填充內(nèi)容，即使tfoot寫在前面，也會顯示在頁面的尾部

本文為作者本人的原創(chuàng)文章，著作權(quán)歸作者本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來源。

TMl 的標(biāo)簽可以分為單個標(biāo)簽和成對標(biāo)簽。

單個標(biāo)簽：html4 規(guī)定單個標(biāo)簽要有一個 / 表示結(jié)尾， html5 則不用

<!--單個標(biāo)簽-->
<meta>
<!--成對標(biāo)簽 -->
<div></div>

以下是HTMl中常用的一些標(biāo)簽

div 標(biāo)簽

div 標(biāo)簽主要用來將相關(guān)的內(nèi)容組合到一塊，就像菜市場把各個蔬菜分成不同種類區(qū)分?jǐn)[放是一個道理。

div 是最常見也是比較重要的標(biāo)簽，網(wǎng)頁布局中經(jīng)常使用的一類標(biāo)簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個分類的存儲箱子
</div>

p標(biāo)簽

p標(biāo)簽表示段落，在網(wǎng)頁文字中應(yīng)用的比較多

<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>

H-標(biāo)題標(biāo)簽

h標(biāo)簽分為六個

標(biāo)簽	語義
h1	一級標(biāo)題
h2	二級標(biāo)題
h3	三級標(biāo)題
h4	四級標(biāo)題
h5	五級標(biāo)題
h6	六級標(biāo)題

引用標(biāo)題標(biāo)簽后，字體會加粗、字號一會變大

ul 無序標(biāo)簽

無序標(biāo)簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點(diǎn)”，這個小點(diǎn)可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀，已經(jīng)被CSS的效果代替），如下：

值（type屬性）	描述
disc	默認(rèn)值，實(shí)心圓
circle	空心圓
square	實(shí)心方框

舉例:

<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<ul type=">
    <li>無序列表元素1</li> <!--列表項(xiàng)-->
    <li>無序列表元素2</li>
</ul>




實(shí)心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實(shí)心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標(biāo)簽

ol 前面的標(biāo)簽是有序的，可以是數(shù)字、字母、羅馬數(shù)字等。同樣控制這些樣式使用的是type屬性。

type屬性值	意義
a	小寫英文字母編號
A	大寫英文字母編號
i	小寫羅馬數(shù)字編號
I	大寫羅馬數(shù)字編號
1	數(shù)字編號（默認(rèn)）

設(shè)置start屬性，表示從哪個編號開始
加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標(biāo)簽表示自定義列表

dt表示數(shù)據(jù)項(xiàng)，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標(biāo)簽

img 用來插入圖片，包括但不限于以下圖片格式

圖片格式	備注
.jpg、.jpeg	通常用于照片，是一種有損壓縮格式
.png	通常用于logo、背景，支持透明和半透明。便攜式網(wǎng)絡(luò)圖像
.svg	矢量圖片

<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網(wǎng)頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標(biāo)簽

用a標(biāo)簽來制作超級鏈接

<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>






<!--也可以用a標(biāo)簽作為錨點(diǎn) 錨點(diǎn)可以是本頁面的錨點(diǎn)，也可以是其他頁面的錨點(diǎn)-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標(biāo)簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動打開email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>

audio標(biāo)簽

audio標(biāo)簽用來插入音頻標(biāo)簽

<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標(biāo)簽，請升級
</audio>

video標(biāo)簽

video 標(biāo)簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標(biāo)簽，請升級
</video>

其它區(qū)塊標(biāo)簽

以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語義更加明確的區(qū)塊標(biāo)簽

<section>	文檔的區(qū)域，比div語義上還要大一點(diǎn)
<header>	頁頭
<main>	網(wǎng)頁核心部分
<footer>	頁腳

其他的語義標(biāo)簽

span 標(biāo)記文本標(biāo)記區(qū)域，沒有特殊效果，結(jié)合CSS使用

b 標(biāo)簽加粗文章（可以使用CSS實(shí)現(xiàn)同樣效果）

u 加下?lián)Q線文字

br 換行

i 傾斜文字（可以使用CSS實(shí)現(xiàn)同樣效果）

strong 代表特別重要的文字

em 需要強(qiáng)調(diào)的文字，有一定的傾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段獨(dú)立的內(nèi)容 figcaption- figure 內(nèi)部元素的說明性內(nèi)容

表單

表單用來收集信息并且可以完成和后端的數(shù)據(jù)傳輸

表單中大致可以分為三種標(biāo)簽

form標(biāo)簽，標(biāo)識表單區(qū)域，內(nèi)部的元素都可能被表單提取信息
input 標(biāo)簽，標(biāo)識輸入、點(diǎn)擊等需要和用戶交互的場景
datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標(biāo)簽 通過for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點(diǎn)擊提交按鈕，不符合格式，會有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時間空間: <input type="time">  <br/>
    日期時間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數(shù)字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網(wǎng)址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項(xiàng)示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標(biāo)簽表示表格

tr 表示行
td 表示單元格
caption 表格的標(biāo)題，通常放在表格的第一行
th 表示列標(biāo)題

<!--表格示例-->
<table border="1">
  <caption>我是標(biāo)題</caption>
  <tr>
      <th>第一列標(biāo)題</th>
      <th>第二列標(biāo)題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

單元格的合并, clospan 用來設(shè)置td 或者th的列跨度， rowspan屬性用來設(shè)置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標(biāo)題</caption>
    <tr>
        <th>第一列標(biāo)題</th>
        <th>第二列標(biāo)題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標(biāo)題</caption>
        <tr>
            <th>第一列標(biāo)題</th>
            <th>第二列標(biāo)題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他標(biāo)簽， thead 定義表頭， tbody 定義表格的主題內(nèi)容， tfoot 標(biāo)簽定義表格底部，通常用來匯總等

在線咨詢

上一篇：JavaScript代碼嵌入HTML的方法、及兩者的在執(zhí)行流程上的細(xì)微區(qū)別
下一篇：「CSS」常用單位，box-sizing，字體圖標(biāo)，定位原理

您的項(xiàng)目需求

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

整合營銷服務(wù)商

筆記篇-如何靈活地使用HTML標(biāo)簽？