国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

首先我們來回顧下標(biāo)簽的作用是什么？HTML 標(biāo)簽的核心作用是定義網(wǎng)頁內(nèi)容的語義和結(jié)構(gòu)，就像建筑藍(lán)圖中的框架標(biāo)記，告訴瀏覽器“某塊內(nèi)容是什么”。

???一. 標(biāo)題標(biāo)簽 (Heading Tags)

Heading標(biāo)簽，一共分為6個(gè)層級(jí)；其中<h1>等級(jí)是最高的，用于網(wǎng)頁的主題。<h2>到<h6>則為網(wǎng)頁的子標(biāo)題。

<h1>一級(jí)標(biāo)題</h1>   <!-- 每個(gè)頁面只用1個(gè)，如網(wǎng)站名稱 --><h2>二級(jí)標(biāo)題</h2>   <!-- 大章節(jié)標(biāo)題 --><h3>三級(jí)標(biāo)題</h3>   <!-- 小節(jié)標(biāo)題 --><h4>四級(jí)標(biāo)題</h4>   <!-- 更小分區(qū) -->

?? 關(guān)鍵提示：

1. 數(shù)字越小字體越大 (h1最大)

2. 默認(rèn)加粗+增加上下間距

3. 屏幕閱讀器靠它們理解頁面結(jié)構(gòu)

同樣，為了更直觀地了解<h1>與<h2>之間不同的效果，在vscode中ctrl+s將文件儲(chǔ)存后，在瀏覽器點(diǎn)擊刷新網(wǎng)頁就可看到你所寫代碼的最新效果。

??二.<p>標(biāo)簽  段落標(biāo)簽 (Paragraph Tag)

一個(gè)網(wǎng)頁有了標(biāo)題，要有內(nèi)容填充才能算作一個(gè)合格的網(wǎng)頁。這時(shí)，你可以用<p>標(biāo)簽來包裹文本內(nèi)容，形成邏輯完整的段落塊。

<p>這是一整段連續(xù)文本，瀏覽器會(huì)自動(dòng)在段落間添加間距</p><p>這是另一個(gè)獨(dú)立段落</p>

每一對(duì)<p></p>,都代表一個(gè)獨(dú)立的段落。

到這里，不知道你有沒有發(fā)現(xiàn)：不管是<heading>標(biāo)簽或是<p>標(biāo)簽，不管它們的字?jǐn)?shù)有多少，都會(huì)占據(jù)一整行。

類似于這類的標(biāo)簽，有個(gè)專有名詞，讀作：“區(qū)塊元素”。定義：獨(dú)占父容器的一整行，就像集裝箱一樣垂直堆疊。

區(qū)塊元素 (Block-level Elements)常見標(biāo)簽有

<div>, <p>, <h1>-<h6>, <section>, <article><header>, <footer>, <ul>, <ol>, <li>, <table>  

三.行內(nèi)元素

除了區(qū)塊元素，有沒有一種元素，有多少內(nèi)容就占多少空間，而不會(huì)獨(dú)占一整行的元素呢？有的，這就是“行內(nèi)元素 (Inline Elements)”，

定義：像文本一樣流動(dòng)，水平排列直到放不下才換行，類似句子中的單詞。

“行內(nèi)元素”常見的標(biāo)簽有<strong>和<em>標(biāo)簽，這兩者分別對(duì)應(yīng)我們word文檔中經(jīng)常用到的“粗體”和“斜體”

掌握了這些標(biāo)簽以后，我們可以使用不同標(biāo)簽，層層疊加在同一個(gè)網(wǎng)頁，利用這些技巧，你就可以在HTML中設(shè)計(jì)出復(fù)雜的頁面布局和結(jié)構(gòu)。

??四.<a>標(biāo)簽  超鏈接標(biāo)簽 (Anchor Tag)

網(wǎng)頁網(wǎng)頁，顧名思義是需要聯(lián)網(wǎng)的。<a>標(biāo)簽是網(wǎng)頁互聯(lián)的基石，用于創(chuàng)建超鏈接（Hyperlink），實(shí)現(xiàn)資源跳轉(zhuǎn)和文檔連接。使用<a>標(biāo)簽時(shí)，要加上href的屬性指定目前網(wǎng)址。

<!-- 基本用法 --><a href="https://example.com">點(diǎn)擊訪問</a>
<!-- 頁面內(nèi)跳轉(zhuǎn) --><a href="#contact">跳到聯(lián)系方式</a><section id="contact">...</section>
<!-- 郵箱鏈接 --><a href="mailto:contact@example.com">發(fā)送郵件</a>

或是當(dāng)前目錄中的某個(gè)網(wǎng)頁，由于當(dāng)前這是你手寫的第一個(gè)網(wǎng)頁，還沒有建立其它的頁面，所以這里暫時(shí) href="#" 就ok了

<p><a href="#">了解更多</a></p> //示例代碼

注：以上示例欄的文字為注釋，實(shí)際寫網(wǎng)頁的過程，不必帶上。

?? 五、清單標(biāo)簽 (List Tags)

在網(wǎng)頁開發(fā)中，清單是實(shí)現(xiàn)結(jié)構(gòu)化內(nèi)容展示的核心組件，其作用遠(yuǎn)超簡單的視覺排列。

1. 有序列表（帶數(shù)字編號(hào)）<ol>（ordered list）標(biāo)簽

<ol>                           // 清單開頭使用<ol>標(biāo)簽  <li>第一步：準(zhǔn)備材料</li>      //清單內(nèi)容使用<li>標(biāo)簽  <li>第二步：攪拌混合</li>  <li>第三步：烤箱烘焙</li></ol>

2. 無序列表（帶項(xiàng)目符號(hào)）<ul>（unordered ）標(biāo)簽

<ul>  <li>面粉 200g</li>  <li>雞蛋 3個(gè)</li>  <li>白糖 50g</li></ul>

清單最常見的用途，是拿來作網(wǎng)站的導(dǎo)航欄。

由于導(dǎo)航欄的前方不需要任何數(shù)字編號(hào)，這時(shí)選擇用<ul>標(biāo)簽更為妥當(dāng)。<ul>標(biāo)簽的用法和<ol>相同，唯一差異就是前方?jīng)]有數(shù)字編號(hào)，而是一個(gè)小黑點(diǎn)。

導(dǎo)航欄的每個(gè)項(xiàng)目都會(huì)鏈接不同的網(wǎng)頁/內(nèi)容，所以這里需要加上<a>標(biāo)簽

<ul>      <li><a href="#">最新消息</a></li>      <li><a href="#">關(guān)于我們</a></li>      <li><a href="#">門市據(jù)點(diǎn)</a></li>      <li><a href="#">會(huì)員專區(qū)</a></li>  </ul>       

效果參考：

?? 六、引用標(biāo)簽 (Blockquote Tag)

做網(wǎng)頁我們不免會(huì)引用新聞媒體或者用戶評(píng)論展示，這時(shí)<blockquote>標(biāo)簽就派上用場了。<blockquote>本身有個(gè)site屬性，可以用來標(biāo)識(shí)引用內(nèi)容的來源（網(wǎng)址）。

<blockquote cite="https://example.com/source">  這是被引用的文字內(nèi)容...</blockquote>

<blockquote cite="https://example.com/source">  "真正的面包匠人，用雙手感受面團(tuán)的呼吸"</blockquote>

使用場景如下圖：有時(shí)為了排版的美觀，你可能會(huì)想要一個(gè)長句，分行展示。

這時(shí)你就可以插入一個(gè)<br>標(biāo)簽，精確控制內(nèi)部換行:

<blackquote>嚴(yán)選天然食材，精湛匠心烘焙，<br>讓幸福在每口面包中的香氣中蔓延</blackquote>

七.總結(jié)（零基礎(chǔ)必存）

今天的HTML常用標(biāo)簽講解到這里就結(jié)束啦！下篇文章我們將走進(jìn)插入圖片的語法、如何用CSS修改樣式。

閱讀原文：原文鏈接