-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 技術(shù) > 專題列表 > 正文
HTML5（WEB前端）技術(shù)由HTML（結(jié)構(gòu)）、CSS（樣式）、JavaScript（行為）組成。
簡單來說，HTML5（WEB前端）是“將設(shè)計圖轉(zhuǎn)換為用戶查看的網(wǎng)頁”所需要的技術(shù)。
結(jié)構(gòu)實現(xiàn)的是網(wǎng)頁中的標(biāo)題、列表、圖片等標(biāo)簽。
樣式處理的是標(biāo)題文字的字體大小、顏色，圖片尺寸，某個標(biāo)簽的背景等。
行為可以實現(xiàn)網(wǎng)頁中的時間，電商網(wǎng)站當(dāng)中的倒計時效果，在注冊表單時用戶名是否重復(fù)的檢測，網(wǎng)站當(dāng)中頂部圖片的切換特效等等。
HTML5基本結(jié)構(gòu)（html5基本結(jié)構(gòu)標(biāo)簽）_1
發(fā)布時間：2023-04-08 07:26:31
稿源：
創(chuàng)意嶺 閱讀：
52
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于HTML5基本結(jié)構(gòu)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等
只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端
官網(wǎng)：https://ai.de1919.com。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008
本文目錄:
構(gòu)（html5基本結(jié)構(gòu)標(biāo)簽）.jpg)
一、介紹幾個常用的HTML5標(biāo)簽
一、Html的基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
網(wǎng)頁的文本、圖片等信息；
</body>
</html>
二、Head部分：用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息
其常用標(biāo)簽及屬性有：
1、title標(biāo)簽：瀏覽器標(biāo)簽頁顯示的標(biāo)題
2、meta標(biāo)簽：其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：<meta charset="UTF-8">
常見的字符集編碼格式：
a.GB-2312:國標(biāo)碼，簡體中文
b.GBK：擴(kuò)展的國標(biāo)碼
c.UTF-8：萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型) refresh(網(wǎng)頁定時刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）
③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值：author（作者） keywords（網(wǎng)頁關(guān)鍵字） description（網(wǎng)頁描述） 這兩個屬性設(shè)置，網(wǎng)頁必不可少。
3、link標(biāo)簽：鏈接網(wǎng)頁圖標(biāo)（title前的小logo），其常用屬性有：
①rel屬性：聲明鏈接文件的類型，此處選icon
②type屬性：可以省略
③href屬性：表示圖片的路徑地址
三、body部分：網(wǎng)頁的文本、圖片等信息
標(biāo)簽的分類：
塊級標(biāo)簽：顯示為塊，前后隔一行（自動換行）
行級標(biāo)簽：按行從左往右逐一顯示。
1、 常見的塊級標(biāo)簽：
①<h1></h1>......<h6><h6>：標(biāo)題標(biāo)簽，自動加粗，h1最大，h6最小。
②<hr/>：水平線標(biāo)簽，添加一條水平線。
③<p></p>:段落標(biāo)簽，
④<br/>:換行標(biāo)簽，
⑤<blockquote/></blockquote>:引用標(biāo)簽，cite屬性，表明引用的來源，一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥<pre></pre>:預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示：
2、 基于布局的塊級標(biāo)簽
列表：無序列表、有序列表、定義列表
①有序列表：<ol></ol> 列表項：<li></li>
②無序列表：<ul></ul> 列表項：<li></li>
③定義列表（實現(xiàn)圖文混排）:<dl></dl>
列表標(biāo)題：<dt>一般只有一項</dt>
列表描述項：<dd>可以有很多項</dd>
3、組合標(biāo)簽：<figure></figure>用于顯示圖片及圖片標(biāo)題
他有兩個子標(biāo)簽：<img />圖片
<figcaption></figcaption>圖片的標(biāo)題
例如：<figure>
<img src="img/EZ.jpg" height="20%" width="20%" alt="探險家"/>
<figcaption>探險家 伊澤瑞爾</figcaption>
</figure>
4、分區(qū)標(biāo)簽：<div></div>
5、常見的行級標(biāo)簽
<1>span（文本）:無實際意義，用于包裹某部分文字，修改特定樣式，例如：
這是<span style="color: red;font-size: 36px;">span</span>中的文字
img（圖片）：其常用屬性：①src:表示引用圖片的地址。
路徑地址的寫法：相對路徑：以當(dāng)前文件為最準(zhǔn)，去尋找圖片地址
a、與文件處于同一層的圖片，直接寫圖片名
b、圖片在當(dāng)前文件下一層：文件名/圖片名
c、圖片在當(dāng)前文件上一層：../圖片名
絕對路徑:file:///盤符：/文件夾/圖片名，但 是嚴(yán)禁使用
圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用
②height和width：圖片的高度和寬度。可以用CSS樣式代替
③title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無法顯示的時候，顯示的文字
<2>em（傾斜強(qiáng)調(diào)）
<3>strong（加粗強(qiáng)調(diào)）
<4>b（加粗）
<5>i（傾斜）
Strong、em、b、i的區(qū)別
1、Strong、em都表示強(qiáng)調(diào)，Strong為粗體，em為斜體，而Strong的強(qiáng)調(diào) 程度逗比em高
2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強(qiáng)調(diào)的語義 。H5要求標(biāo)簽盡可能實現(xiàn)語義化。
<6>q（短引用）
<7>small/big（縮小/放大字體）：small和big分別是縮小和擴(kuò)大字體，都可以多層嵌套直至上限或下限
<8>a（超鏈接）
1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。
2、target:跳轉(zhuǎn)頁面打開的位置。_self自身頁面，_blank新頁面。
3、title:鼠標(biāo)指在超鏈接上顯示的名稱。
4、Rel（被鏈接是當(dāng)前的前/后一篇）:指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會利用該屬性 獲取更多的有關(guān)鏈接的信息：
rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔，
rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)
rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表
5、Rev（當(dāng)前是被鏈接的前/后一篇）
錨鏈接：
①本頁面錨鏈接:a、設(shè)置錨點：<a name="top"></a>
b、跳轉(zhuǎn)錨點：#name名
①頁面間錨鏈接:a、在即將跳轉(zhuǎn)頁面的指定位置設(shè)置錨點
b、跳轉(zhuǎn)錨點：頁面地址.html#name名
<a href="02_常見的塊級標(biāo)簽.html#Hbuilder">頁面間錨鏈接</a><br/>
功能性鏈接： mailto用于給指定郵箱發(fā)送郵件
file：///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
<9>s標(biāo)簽，有誤文本：刪除線
<s>這是S標(biāo)簽中的文字</s><br />
<10>cite標(biāo)簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用
<cite>這是cite中的文本</cite><br />
<11>code:計算機(jī)代碼，不保留代碼格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用戶用鍵盤輸入的內(nèi)容，瀏覽器顯示為等寬字體
請輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />
<13>sup:上標(biāo)文本，sub:下標(biāo)文本
x<sub>6</sub><br />
© © 空格
© © 空格 <br />
<14>u:下劃線
<u>這是下劃線</u><br />
mark:高亮或標(biāo)記文本，瀏覽器顯示為黃色背景
<mark>mark</mark><br />
二、HTML5是什么
HTML5（WEB前端）的技術(shù)組成
如何理解結(jié)構(gòu)、樣式與行為
簡單的理解結(jié)構(gòu)樣式和行為：將網(wǎng)頁看做一個裝修好的功能完備的房子，那么結(jié)構(gòu)實現(xiàn)的是房間以及家具的位置布局，樣式則是針對房間進(jìn)行裝飾，行為是為房間添加“開門”等功能。
三、什么是 HTML5?
TML5是什么？
HTML5是指第5代HTML（超文本標(biāo)記語言），也指用HTML5語言制作的一切數(shù)字產(chǎn)品。
網(wǎng)上的網(wǎng)頁，多數(shù)都是由HTML寫成的。
“超文本”是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。
瀏覽器通過解碼HTML，就可以把網(wǎng)頁內(nèi)容顯示出來。
下圖中就很清晰的指出了H5的涵蓋范圍：
HTML5之所以能引發(fā)如此廣泛的效應(yīng)，根本在于它不再只是一種標(biāo)記語言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺，包括提供免插件的音視頻、圖像動畫、本體存儲以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化，從而使互聯(lián)網(wǎng)也能夠輕松實現(xiàn)類似桌面的應(yīng)用體驗。
四、2，html5的結(jié)構(gòu)和html2.0的區(qū)別
html是超文本標(biāo)記語言本身沒有任何編程的意義，類似XML結(jié)構(gòu)，是節(jié)點-》子節(jié)點然后一層一層遞進(jìn)的。
html主要是靠瀏覽器解析html標(biāo)簽和樣式展示給用戶，所以在本質(zhì)上，所有版本的html都其實是一樣的。
唯一的區(qū)別是瀏覽器是否支持新的html標(biāo)簽（有些標(biāo)簽也由于過時而廢除）。
所以html5和html2除了對支持的標(biāo)簽的不同外，于瀏覽器和用戶說，是沒有區(qū)別的。
以上就是關(guān)于HTML5基本結(jié)構(gòu)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
HTML基本結(jié)構(gòu)標(biāo)簽（html的基本結(jié)構(gòu)標(biāo)簽）
免費(fèi)html網(wǎng)頁模板源代碼（免費(fèi)html網(wǎng)頁模板源代碼怎么用）
贛公網(wǎng)安備 50019002502384號
