HTML &lt;abbr&gt; 標(biāo)簽

例

被標(biāo)記的縮寫詞如下：

The<abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.

瀏覽器支持

所有主流瀏覽器都支持 <abbr> 標(biāo)簽。

注釋：IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標(biāo)簽。

標(biāo)簽定義及使用說明

<abbr> 標(biāo)簽用來表示一個縮寫詞或者首字母縮略詞，如"WWW"或者"NATO"。

通過對縮寫詞語進(jìn)行標(biāo)記，您就能夠為瀏覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器提供有用的信息。

提示和注釋

提示：在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至帶有 <abbr> 標(biāo)簽的縮寫詞/首字母縮略詞上時，<abbr> 標(biāo)簽的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。

HTML 4.01 與 HTML5之間的差異

無。

全局屬性

<abbr> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<abbr> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

/一、html

//a、HTML語法規(guī)范

//a.1基本語法概述

1、HTML標(biāo)簽是由尖括號包圍的關(guān)鍵字，例如,

2、HTML標(biāo)簽通常是成對出現(xiàn)的，例如和,我們成為雙標(biāo)簽，標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽。

3、有些特殊的標(biāo)簽是單個標(biāo)簽（極少情況），例如

，我們稱為單標(biāo)簽

//a.2標(biāo)簽關(guān)系

雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系。

//b、HTML基本結(jié)構(gòu)標(biāo)簽

//b.1第一個HTML網(wǎng)頁

每個網(wǎng)頁都會有一個基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上寫的。

HTML頁面也稱為HTML文檔

標(biāo)簽名	定義	說明
<html></html>	HTML標(biāo)簽	頁面中最大的標(biāo)簽，我們稱為根標(biāo)簽
<head></head>	文檔的頭部	注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
<title></title>	文檔的標(biāo)題	讓頁面擁有一個屬于自己的網(wǎng)頁標(biāo)題
<body></body>	文檔的主體	元素包含文檔的所有內(nèi)容，頁面內(nèi)容，基本都是放到body里面的

必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。

此時，用瀏覽器打開這個網(wǎng)頁，我們就可以預(yù)覽我們寫的第一個HTML文件了。

//c、開發(fā)工具vscode

1、<!DOCTYPE>標(biāo)簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁

<!DOCTYPE html>這句代碼的意思是：當(dāng)前頁面采用的是HTML5來顯示頁面。

2、lang語言

用來定義當(dāng)前文檔顯示的語言：

a、en定義語言為英語

b、zh-CN定義語言為中文

簡單來說定義為en就是英文網(wǎng)頁，定義為zh-CN就是中文網(wǎng)頁

其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文

這個屬性對于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的

3、charset字符集

字符集是多個字符的集合，以便計算機能夠識別和存儲各種文字

在標(biāo)簽內(nèi)，通過標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。

charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼，基本包含了全世界所有國家需要用到的字符。

注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統(tǒng)一使用"UTF-8"編碼，盡量統(tǒng)一寫成標(biāo)準(zhǔn)的"UTF-8",不要寫成"utf-8"或"UTF8"。

//d、HTML常用標(biāo)簽

//d.1標(biāo)簽語義

學(xué)習(xí)標(biāo)簽是有技巧的，重點是記住每個標(biāo)簽的語義，簡單理解就是指標(biāo)簽的含義，即這個標(biāo)簽是用來干嘛的

根據(jù)標(biāo)簽的語義，在合適的地方給一個最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。

//d.2標(biāo)題標(biāo)簽

(重要)

為了使網(wǎng)頁更具有語義，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個等級的網(wǎng)頁標(biāo)題集

特點：

1、加了標(biāo)題的文字會變得更加粗，字號也會依次變大。

2、一個標(biāo)題獨占一行。

//d.3段落和換行標(biāo)簽（重要）

在網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標(biāo)簽中，

標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若干段落。

<p>我是一個段落標(biāo)簽</p>標(biāo)簽語義：可以把HTML文檔分割為若干段落。

特點：
1、文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。

在HTML中，一個段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標(biāo)簽

<br />

單詞break的縮寫，意為打斷，換行。

特點：

1、單標(biāo)簽

2、

標(biāo)簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

//d.4文本格式標(biāo)簽

在網(wǎng)頁中，有時需要為文字設(shè)置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式標(biāo)簽，使文字以特殊的方式顯示

標(biāo)簽語義：突出重要性，比普通文字更重要。

語義	標(biāo)簽	說明
加粗	<strong></strong>或者<b></b>	更推薦使用<strong></strong>標(biāo)簽加粗，語義更強烈
傾斜	<em><em> 或者<i><i>	更加推薦使用<em><em>標(biāo)簽，語義更加強烈
刪除線	<del><del>或者<s><s>	更加推薦使用<del><del>標(biāo)簽，語義更加強烈
下劃線	<ins><ins>或者<u><u>	更加推薦<ins><ins>標(biāo)簽，語義更加強烈

//d.5<div>和<span>標(biāo)簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內(nèi)容。

<div>這是頭部</div>
<span>今日價格</span>

div是division的縮寫，表示分割，分區(qū)，span意為跨度，跨距。

特點：

1、<div>標(biāo)簽用來布局，但是現(xiàn)在一行只能放一個<div>，大盒子。

2、<span>標(biāo)簽用來布局，一行上可以有多個<span>,小盒子

//d.6圖像標(biāo)簽和路徑（重點）

1、圖像標(biāo)簽

在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁面中的圖像。

<img src="圖像url"/>

單詞image的縮寫，意為圖像

src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。

所謂屬性：簡單理解就是屬于這個圖像標(biāo)簽的特性。

圖像標(biāo)簽的其他屬性：

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖像不能顯示的文字
title	文本	提示文本，鼠標(biāo)放到圖像上，顯示文字
width	像素	設(shè)置圖像的寬度
height	像素	設(shè)置圖像的高度
border	像素	設(shè)置圖像的邊框粗細(xì)

TML

本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結(jié)果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網(wǎng)頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器

HTML起源

剛開始設(shè)計HTML語言是為了將文字圖像關(guān)聯(lián)在一起，用另一臺發(fā)送或接收

HTML(HyperTextMark-up Language)超文本標(biāo)記語言

HTML 不是一種編程語言，而是一中標(biāo)記語言(mark-up language),標(biāo)記語言是一套標(biāo)記標(biāo)簽(mark-up tag)

HTML標(biāo)簽

標(biāo)簽是由尖括號 < > 把關(guān)鍵詞括起來，標(biāo)簽通常是成對出現(xiàn)的

Web瀏覽器

讀取 HTML 文檔，使用標(biāo)簽來解析頁面的內(nèi)容，以網(wǎng)頁的形式現(xiàn)實，瀏覽器不會現(xiàn)實HTML標(biāo)簽

現(xiàn)在市場上主流五大瀏覽器

每種瀏覽器都有自己的內(nèi)核(引擎)（解析網(wǎng)頁的一個程序，io以什么方式去渲染它都要通過引擎去執(zhí)行）

目前主流的瀏覽器分為五種

Chrome谷歌瀏覽器（Webkit內(nèi)核，V8 js引擎）
Firefox火狐瀏覽器（Gecko內(nèi)核）
Internet Explorer IE瀏覽器（ Trident內(nèi)核）
Opera 歐朋瀏覽器（Presto內(nèi)核）主要市場：移動端
Safari 蘋果瀏覽器（Webkit內(nèi)核，但JS引擎為Nitro）
不需要去記，簡單了解下

標(biāo)簽使用規(guī)范

標(biāo)簽必須閉合
所有標(biāo)簽名一律小寫
代碼縮進(jìn)，使閱讀代碼更加易懂
特殊符號規(guī)范使用
命名規(guī)范，見名之意

PS: 所有的標(biāo)記符號都是半角英文

編輯器

眾說紛紜編輯器太多，最終只是一個工具，希望同學(xué)們能從萬千世界中找到適合自己的編輯器伙伴

編輯器	描述
EditPlus	手寫模式，適合初學(xué)手寫，無代碼提示(有IE調(diào)試視圖)
Sublime	插件特別多，占用內(nèi)存小，啟動速度快，打開大項目較慢，管理文件方式有些缺陷
webstorm	集成插件特別多，啟動較慢，占用內(nèi)存大，開發(fā)和管理視圖都很方便
Dreamweaver	適合初學(xué)，主要代碼提示和代碼插入功能強大，主要偏向于設(shè)計(有設(shè)計視圖)

Sublime插件列表

插件名	描述	詳情請戳
emmet	前端自動補全，提供快捷補全方式
ColorPicker	調(diào)色板，顏色選擇器
SublimeTmpl	sublime模板，可以快速創(chuàng)建一個HTML模板
view in browser	用快捷方式打開瀏覽器進(jìn)行調(diào)試HTML(需要配置參考后面網(wǎng)頁)
LiveReload	實時刷新HTML(編輯器里按下保存ctrl+s的時候，已經(jīng)打開的HTMl會自動刷新)	谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載
Color Highlighter	CSS顏色代碼高亮及顏色預(yù)覽提示
CSS3	CSS3的代碼高亮提示	還針對了CSS3的選擇器及錨類選擇器`:hover :first-child :first-child ...`的高亮
JavaScript Completions	原生js 代碼提示
Sublime-Better-Completion	可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ...	倉庫地址此插件只能通過Github克隆下載安裝安裝方法

注：Github 網(wǎng)頁中下面是有詳細(xì)的使用方法 packagecontrol.io官網(wǎng) 里面search 可以進(jìn)行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現(xiàn)編碼錯誤以及安裝不上的可以拍打我~

模板的配置

配置	描述
!DOCTYPE html	不是標(biāo)簽，主要用于文檔類型的聲明
charset="utf-8"	聲明字符編碼集
http-equiv="Content-Type"	把Content屬性關(guān)聯(lián)到HTTP頭部(協(xié)議頭)

HTML模板

簡單了解，并不需要熟練掌握

HTML樹狀結(jié)構(gòu)

Dom節(jié)點樹

HTML網(wǎng)頁擴展名

.html .htm這兩種是比較常見的
在早期系統(tǒng)中文件名是有8+3組成三個擴展名所以不支持四個字母的擴展采用.htm
現(xiàn)在通常使用.html作為擴展名

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

接下來所有的標(biāo)簽元素學(xué)習(xí)都在body標(biāo)簽里面去敲打?qū)崿F(xiàn)、

H標(biāo)簽

為了突出標(biāo)題，字體大小和加粗發(fā)生相應(yīng)的改變

<h1>我是大主題</h1>
<h2>我是大主題</h2>
<h3>我是大主題</h3>
<h4>我是大主題</h4>
<h5>我是大主題</h5>
<h6>我是大主題</h6>

<!doctype html><!-- 讓瀏覽器使用html5的標(biāo)準(zhǔn)解析 -->
<html>
 <head>
 <!-- 設(shè)置字符編碼集讓瀏覽器使用utf8解析當(dāng)前網(wǎng)頁 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎，關(guān)鍵詞，多個請用逗號分開" />
 <meta name="description" content="網(wǎng)頁描述，八十字內(nèi)" />
 <title>瀏覽器標(biāo)簽頁上的網(wǎng)頁標(biāo)題</title>
 </head>
 <body> <!-- 所有的標(biāo)簽學(xué)習(xí)都在這body里面去敲，上面head元素里面的內(nèi)容做個了解就可以了 -->
 
 <h1>我是大標(biāo)題</h1>
 <h2>我是主題2</h2>
 <h3>我是主題3</h3>
 <h4>我是主題4</h4>
 <h5>我是主題5</h5>
 <h6>我是主題6</h6>
 
 </body>
</html>

可以發(fā)現(xiàn)h標(biāo)簽從h1到h6會隨著數(shù)值越小字越小，并且都是會加粗和各占一行的狀態(tài)（前后的元素都會被換行）

h1標(biāo)簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)

p段落標(biāo)簽

<p>
 冬著一身素衣，緩緩而來，季節(jié)沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。
</p>

特殊符號

剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標(biāo)記那要怎么做呢？這時候就需要特殊符號的表示來顯示

符號	描述
空格
小于	<
大于	>
引號	"
版權(quán)	©
×叉	×
&	&

加粗標(biāo)簽

符號	描述
B標(biāo)簽	物理加粗，頁面呈現(xiàn)加粗狀態(tài).
Strong標(biāo)簽	不僅能加粗，還利于搜索引擎優(yōu)化

<b>物理加粗，頁面呈現(xiàn)加粗狀態(tài).</b>

<strong>不僅能加粗，還利于搜索引擎優(yōu)化，就是類似于百度、谷歌這種搜索引擎爬取你的網(wǎng)頁的時候會查找這個標(biāo)簽里面的內(nèi)容來優(yōu)化顯示網(wǎng)頁的排名</strong>

可以根據(jù)word文檔上面發(fā)現(xiàn) b是加粗 u是下劃線 i是傾斜同樣適用于標(biāo)簽
<i>我是傾斜</i> <u>我加了下劃線</u>

A標(biāo)簽

鏈接一個頁面,點擊則會跳轉(zhuǎn)這個鏈接頁面
使用錨點滾動到設(shè)定的位置

<a href=""></a> a標(biāo)簽中的href控制點擊的時候跳轉(zhuǎn)到哪里如果沒寫表示刷新當(dāng)前頁面


<a href="#"></a> 跳轉(zhuǎn)到當(dāng)前頁面(回歸到頁面頂部)


<a href="javascript： void(0);"></a> 死鏈接，不會跳轉(zhuǎn)，一般用于js特效


<a href="#name">錨點到一個標(biāo)簽上所對應(yīng)的ID名字，點擊則跳到那個標(biāo)簽位置</a>


<a >跳轉(zhuǎn)到百度</a> 跳轉(zhuǎn)到百度 需要注意的是 http 協(xié)議不能少

點擊#flag的a標(biāo)簽的時候會跳到到上面h2標(biāo)簽

只有擁有name屬性的
a標(biāo)簽
才能錨點,還有一種方式是通過ID標(biāo)識唯一元素，也可以跳轉(zhuǎn)(不僅僅是a標(biāo)簽)

補充標(biāo)簽

描述	標(biāo)簽
滾動標(biāo)簽	marquee
字體標(biāo)簽	font
定義水平線	hr

滾動標(biāo)簽

marquee

屬性	描述
direction	滾動方向
behivior	行為

behivior

值	描述
alternate	交替滾動
scroll	滾動
slide	滑落

Font標(biāo)簽

屬性	描述
color	顏色
size	0-7
face	字體

hr水平線

與font相似，擁有color和size屬性

hr標(biāo)簽沒有結(jié)束標(biāo)簽按照早期的習(xí)慣也H5也遵循XHTML的解析所以統(tǒng)一會加一個反斜杠表示結(jié)束這個標(biāo)簽，不加也能夠正確顯示，但是養(yǎng)成一個良好的習(xí)慣確實重要，比如微信小程序就是沒有結(jié)束標(biāo)簽必須要使用一個反斜杠結(jié)尾否則直接報錯、

練習(xí)一、

結(jié)合今天所學(xué)，寫一個簡單的網(wǎng)頁

內(nèi)容如下：

寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網(wǎng)上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字

練習(xí)二、

在習(xí)題一的文章底部，使用滾動標(biāo)簽進(jìn)行滾動方向為45°

可以在頭部找到我，如有勘誤、錯別字、盡情見諒很用心的檢查了碼了這么久

在線咨詢

上一篇：HTML的入門及結(jié)構(gòu)組成
下一篇：手機訪問pc網(wǎng)站時使用js自動跳轉(zhuǎn)到移動網(wǎng)站域名對應(yīng)的鏈接

您的項目需求

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

整合營銷服務(wù)商

HTML &amp;lt;abbr&amp;gt; 標(biāo)簽

TML