《Web前端技術(shù)H5+CSS3》第二章 HTML基礎(chǔ)

《Web前端技術(shù)H5+CSS3》第二章 HTML基礎(chǔ)「云圖智聯(lián)」

.1列表

1.1.1列表及其應(yīng)用

1. 什么是列表
簡單來說，列表就是信息資源的一種展示形式。它可以使信息結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來。

2. 列表的分類及其應(yīng)用

無序列表，語法：

<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>

有序列表，語法：

<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

定義列表，語法：

<dl>
    <dt>標題</dt>
    <dd>第一項</dd>
    <dd>第二項</dd>
    <dt>標題二</dt>
    <dd>第一項</dd>
    <dd>第二項</dd>
</dl>

無序列表| 無序列表由ul標簽和li標簽組成，使用ul標簽作為無序列表的聲明，使用li標簽作為每個列表項的起始。無序列表中的每項都是平級的，沒有級別之分，并且列表中的內(nèi)容一般都是相對簡單的標題性質(zhì)的網(wǎng)頁內(nèi)容

有序列表| 有序列表由ol標簽和li標簽組成，使用ol標簽作為有序列表的聲明，使用li標簽作為每個列表項的起始，有序列表嵌套同無序列表一樣，只能ol標簽里面嵌套li標簽。有序列表ol-li一般用于顯示帶有順序編號的特定場合

定義列表|定義列表是一種很特殊的列表形式，它是標題及列表項的結(jié)合。定義列表的語法相對于無序和有序列表不太一樣，它使用dl標簽作為列表的開始，使用dt標簽作為每個列表項的起始，而對每個列表項的定義則使用dd標簽來完成。定義列表一般適用于帶有標題和標題解釋性內(nèi)容的場合

列表的注意事項：
1.無序列表中的每項都是平級的，沒有級別之分，并且列表中的內(nèi)容一般都是相對簡單的標題性質(zhì)的頁面內(nèi)容。有序列表會依據(jù)列表項的順序進行顯示。
2.在實際的網(wǎng)頁應(yīng)用中，無序列表比有序列表應(yīng)用更加廣泛，有序列表ol-li一般用于顯示帶有順序編號的特定場合。
3.定義列表一般適用于帶標題和標題解釋性內(nèi)容的場合。

1.1.2列表練習

示例：有序列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>有序列表的應(yīng)用</h2>
<p>注意：有序列表列表項標記默認是1,有序的數(shù)字，可以使用type屬性進行更改列表項標記</p>
<p>可選擇的列表項標記有：a，A，i，I，1</p>
<ol type="a">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>
<ol type="i">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>
<ol type="1">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>
</body>
</html>

示例：無序列表：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>無序列表的應(yīng)用</h2>
<p>注意：無序列表列表項標記默認是黑色圓點，可以使用type屬性進行更改</p>
<p>可選擇的列表項標記有：小黑點:disc（默認值）；方塊:square；空心圓:circle。</p>
<ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>
<ul type="square">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>
<ul type="circle">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>
</body>
</html>

示例：定義列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>定義列表的應(yīng)用</h2>
<p>一般應(yīng)用于帶有標題和內(nèi)容，標簽dt聲明標題，dd聲明內(nèi)容</p>
<dl>
    <dt>水果</dt>
    <dd>蘋果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
</dl>
</body>
</html>

2.1表格

2.1.1為什么使用表格

1.簡單通用
由于表格行列結(jié)構(gòu)簡單，以及在生活中使用廣泛，因此對它的理解和編寫都很方便。
2.結(jié)構(gòu)穩(wěn)定
表格通常每行的列數(shù)一致，同行單元格高度一致且水平對齊，同列單元格寬度一致且垂直對齊這種嚴格的約束形成了一個不易變形的合資結(jié)構(gòu)，堆疊排列起來結(jié)構(gòu)很穩(wěn)定。

2.1.2 表格的基本語法

表格的基本結(jié)構(gòu)：

單元格 | 單元格是表格的最小單位，一個或多個單元格縱橫排列組成了表格

行 | 一個或多個單元格堆疊成了行

列 | 由于表格單元格的寬度必須一致，因此單元格縱向列表形成了列

表格的語法結(jié)構(gòu)：

<table>
    <tr>
        <!--th表示表頭-->
        <th>星期</th>
        <th>科目</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>語文</td>
    </tr>
    <tr>
        <td>周二</td>
        <td>數(shù)學</td>
    </tr>
    </table>

創(chuàng)建表格的步驟：
1.創(chuàng)建表格標簽table
2.在表格標簽table創(chuàng)建行標簽tr可以有多行
3.在第一行標簽tr里創(chuàng)建單元格標簽th可以創(chuàng)建表格標題
4.在行標簽tr里創(chuàng)建單元格標簽td可以有多個單元格
為了顯示表格的輪廓，一般還需要設(shè)置table標簽的border邊框?qū)傩裕付ㄟ吙虻膶挾?如下：

<table border="1" cellpadding="0" cellspacing="0">
<!--border：表格邊框；cellpadding：指定表格各單元格之間的空隙；cellspacing：代表單元格邊框到內(nèi)容之間的距離-->

2.1.3 表格的跨行和跨列

-> 跨列：跨列是指單元格的橫向合并

<table>
    <!--col為column的縮寫，span為跨度，所以colspan的意思是跨列-->
    <tr>
        <td colspan="所垮的列數(shù)">單元格的內(nèi)容</td>
    </tr>
</table>

-> 跨行：跨列是指單元格的縱向合并

<table>
    <!--row為行的意思，rowspan即跨行-->
    <tr>
        <td rowspan="所挎的行數(shù)">單元格內(nèi)容</td>
    </tr>
</table>

示例：表格跨行和跨列的應(yīng)用：課表制作

<table border=1 align="center">
<!--align='center':設(shè)置表格內(nèi)容居中顯示-->
<caption align="center"><strong>成績表</strong></caption>
<tr>
    <th></th>
    <th colspan=5 align="center">課程</th>
    <th colspan=2 align="center">周末</th>
</tr>
<tr>
    <th>星期</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期天</th>
</tr>
<tr>
    <td rowspan="3">上午</td>
    <td>語文</td>
    <td>數(shù)學</td>
    <td>英語</td>
    <td>英語</td>
    <td>物理</td>
    <td rowspan=6 align="center" colspan="2">休息</td>
</tr>
<tr>
    <td>數(shù)學</td>
    <td>數(shù)學</td>
    <td>地理</td>
    <td>歷史</td>
    <td>化學</td>
</tr>
<tr>
    <td>化學</td>
    <td>語文</td>
    <td>體育</td>
    <td>計算機</td>
    <td>英語</td>
</tr>
<tr>
    <td rowspan=2>下午</td>
    <td>語文</td>
    <td>數(shù)學</td>
    <td>英語</td>
    <td>英語</td>
    <td>物理</td>
</tr>
<tr>
    <td>化學</td>
    <td>語文</td>
    <td>體育</td>
    <td>計算機</td>
    <td>英語</td>
</tr>

</table>

3.1 HTML的媒體元素

3.1.1媒體元素概述

網(wǎng)絡(luò)發(fā)展日新月異，用計算機，平板，手機打開網(wǎng)頁就可以瀏覽視頻，聽音樂。
在HTML5問世前，要在網(wǎng)頁上展示視頻、音頻、動畫等，除了使用第三方自主開發(fā)的播放器外，使用最多的工具應(yīng)該算是Flash了，但是它需要在瀏覽器上安裝各種插件才能使用，有時候速度也會非常慢。HTML5的出現(xiàn)改變了這一狀況，在頁面中使用HTML5來播放音頻、視頻再也不需要安裝插件，只需要一個支持HTML5的瀏覽器就可以了。

視頻元素

HTML5中的video元素是用來播放視頻文件的，支持Ogg、MPEG4、WebM等視頻格式。

格式 | IE | Firefox | Opera | chrome | Safari --- |---|---|---|---|--- Ogg | No |3.5+ | 10.5+ |5.0+|NO MPEG 4 | 9.0+ |No | No |5.0+|3.0+ WebM | No |4.0+ | 10.6+ |6.0+ |NO

Ogg ：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 ：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM ：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

應(yīng)用：

<video src="視頻路徑" controls="controls"></video>

其中src屬性用于指定要播放的視頻文件的路徑，controls屬性用于提供播放，暫停和音量控件，此外，還可以使用width和height設(shè)置視頻的寬度和高度，如果瀏覽器不支持video元素，可以在video元素中間插入一段文字用于提示，這樣，舊的瀏覽器就可以顯示這段文字給用戶看。具體操作如下：

<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240" controls="controls">
您的瀏覽器不支持！
</video>
</body>
</html>

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">   
    您的瀏覽器不支持！
</video>
</body>
</html>

video標簽的屬性

屬性 | 值 | 描述

autoplay | autoplay|如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。

controls|controls|如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

height| pixels|設(shè)置視頻播放器的高度。

loop| loop| 如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。

preload| preload|如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。

src| url|要播放的視頻的 URL。

width| pixels|設(shè)置視頻播放器的寬度。

音頻元素

直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上播放音頻的標準。
今天，大多數(shù)音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 audio 元素來包含音頻的標準方法。
audio 元素能夠播放聲音文件或者音頻流。

當前，audio 元素支持三種音頻格式：

格式 | IE 9|Firefox 3.5 | Opera 10.5|Chrome 3.0|Safari 3.0 ---|---|---|---|---|--- Ogg Vorbis| |√|√|√| MP3| √|||√|√ Wav| |√|√||√

應(yīng)用：

<audio src="音頻路徑" controls="controls"></video>

其中src屬性用于指定要播放的音頻文件的路徑，controls屬性用于提供播放、暫停和音量控制，此外，還可以用width和height設(shè)置音頻的寬度和高度。如果瀏覽器不支持audio元素，那么可以在audio元素中間插入一段文字用于提示，這樣，舊的瀏覽器就可以顯示這段文字給用戶

<audio src="音頻路徑" controls="controls">你的瀏覽器不支持audio標簽</audio>

audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
你的瀏覽器不支持audio標簽
</audio>

audio標簽的屬性

屬性 | 值 | 描述

---|---|---

autoplay | autoplay|如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。

controls|controls|如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

loop| loop| 如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。

preload| preload|如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。

src| url|要播放的音頻的 URL。

4.1 HTML5的結(jié)構(gòu)元素

4.1.1 頁面布局分析

當要制作一個頁面時，如何入手來進行頁面布局呢？
大家容易產(chǎn)生的錯誤做法如下：自上而下用相應(yīng) 的標簽把內(nèi)容添加進去。
這樣做為什么不對呢？
正確的做法如下：先不用像上面一樣直接用標簽去寫內(nèi)容，而是先分析頁面的大體結(jié)構(gòu)。不難發(fā)現(xiàn)，大部分網(wǎng)站都是分成上中下結(jié)構(gòu)，三部分。即頁面頭部，頁面主體，頁面底部。分好結(jié)構(gòu)后再向這三塊里加入對應(yīng)的內(nèi)容。
可能到這里有人就會疑惑了，為什么要在它外面套層殼再寫內(nèi)容？直接寫不是更省事？給大家舉例子：“一個人到超市買了很多東西，他就開始一樣一樣地往家里搬，搬了好久才搬完。另外一個人也買了很多東西，這個人就買了個購物袋，把這些東西放到購物袋中一次性就提回家了”。其實網(wǎng)頁布局之所以要先劃分結(jié)構(gòu)，就是為了后面更容易地將一大塊的內(nèi)容移動到想要放的位置，而不是每個元素都要分別移動，這樣能提高開發(fā)效率，降低開發(fā)難度。

4.1.2 HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)

標簽 | 描述

---|---

header|定義了文檔的頭部區(qū)域

nav|定義導(dǎo)航鏈接的部分。

article| 定義頁面獨立的內(nèi)容區(qū)域。

aside| 定義頁面的側(cè)邊欄內(nèi)容。

section | 定義文檔中的節(jié)（section、區(qū)段）。

footer| 定義 section 或 document 的頁腳。

bdi | 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。

command| 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕

details| 用于描述文檔或文檔某個部分的細節(jié)

dialog| 定義對話框，比如提示框 summary| 標簽包含 details 元素的標題

figure| 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

figcaption| 定義 figure 元素的標題 mark| 定義帶有記號的文本。

meter| 定義度量衡。僅用于已知最大和最小值的度量。

progress| 定義任何類型的任務(wù)的進度。

ruby |定義 ruby 注釋（中文注音或字符）。

rt |定義字符（中文注音或字符）的解釋或發(fā)音。

rp| 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

time|定義日期或時間。 wbr|規(guī)定在文本中的何處適合添加換行符。

4.1.3 iframe框架

frame 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。提示：您可以把需要的文本放置在 iframe 標簽之間，這樣就可以應(yīng)對無法理解 iframe 的瀏覽器。

<iframe width=500 height=250 frameborder=0 scrolling=auto src="URL"></iframe>

iframe屬性的使用： iframe內(nèi)聯(lián)框架的常用屬性包括name、width、height。其中name屬性可以和前面學過的錨鏈接結(jié)合起來實現(xiàn)頁面間的相互跳轉(zhuǎn)。具體步驟如下:

1.在被打開的框架上name屬性，關(guān)鍵代碼如下：

 <iframe name="mainFram" src="subframe/the_second.html"/>

2.在超鏈接上設(shè)置target目標窗口屬性為希望顯示框架窗口名，關(guān)鍵代碼如下：

<a href="subframe/the_second.html"target="mainFram">下邊顯示第二頁</a>

4.1.4 iframe應(yīng)用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>iframe的使用</title>
</head>
<body>  
<h1>使用iframe嵌套網(wǎng)頁</h1>
<p><a href="http://www.baidu.com" target="mainFrame">點擊打開百度</a><br /><br />
<a href="https://www.yuntuzhilian.com/" target="mainFrame">點擊打開云圖智聯(lián)</a><br /><br />
<a href="subframe/the_first.html" target="mainFrame">點擊打開另一個HTML頁面</a><br />
</p>
<iframe name="mainFrame" width="1000px" height="700px"  src="subframe/the_first.html" />
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>page1</title>
</head>
<body>
我是另外一個HTML頁面
</body>
</html>

5.1 總結(jié)

1、無序列表由ul和li標簽組成，使用無序列表的內(nèi)容沒有順序之分，每個列表項獨占一行，列表前默認有實心小黑圓點；

2、有序列表由ol和li標簽組成，使用有序列表排列的內(nèi)容通過顯示順序編寫，每個列表項獨占一行；

3、定義里標由dl、dt、dd標簽組成，通常用于帶有標題和標題解釋性內(nèi)容的場合，dt表示標題，dd表示標題主實行內(nèi)容；

4、掌握表格的基本使用方法：
1.使用table、tr、td創(chuàng)建表格
2.制作跨列、跨行的表格
1.跨列：colspan="橫向跨的單元格數(shù)"
2.跨行：rowspan="縱向跨的單元格數(shù)"

5、網(wǎng)頁中的媒體元素包括video視頻元素和audio音頻元素；

6、媒體元素共有的屬性：src（鏈接地址）、controls（控件播放控件）；

7、可以讓媒體元素在不同瀏覽器下都支持播放的元素（source）；

8、語義化結(jié)構(gòu)元素（header、section、article、nav、aside、footer）的使用；

9、常用的框架技術(shù)iframe內(nèi)聯(lián)框架；

10、配合使用a標簽和target屬性及iframe標簽的name屬性，可以實現(xiàn)窗口間的關(guān)聯(lián)。

(想要了解更多的職場,職業(yè)規(guī)劃方面的經(jīng)驗,文章第一時間發(fā)布于云圖智聯(lián)官網(wǎng))

結(jié)構(gòu)性元素

用于布局和結(jié)構(gòu).

div : 單純的容器
header : 頁眉
footer : 頁腳
section : 一塊獨立區(qū)域
article : 相對獨立的文章
nav : 頁面導(dǎo)航

內(nèi)聯(lián)框架iframe

iframe標簽可以在頁面上任意位置嵌入另一個頁面.

常見屬性:

src : 另一個頁面的地址
width
height
frameborder : 是否顯示邊框
scrolling : 是否顯示滾動條

內(nèi)聯(lián)框架使用案例：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)聯(lián)框架</title>
</head>
<body>

<a href="http://www.baidu.com" target="iframeContent">百度</a> |
<a href="http://www.qq.com" target="iframeContent">QQ</a>
<hr />
<iframe name="iframeContent" src="" width="100%" height="600"></iframe>
</body>
</html>

們先來看個例子：

在這個網(wǎng)頁中，同時在一個頁面中展示了三個網(wǎng)站：千鋒教育官網(wǎng)、千鋒教育HTML5大前端官網(wǎng)、千鋒教育HTML5大前端好程序員官網(wǎng)。這是如何做到的呢？

其實也不難，使用 iframe 就可以實現(xiàn)了。 iframe的作用是，用來在一個網(wǎng)頁中顯示另一個網(wǎng)頁。

iframe 是個雙標簽，基本語法為：尖角號iframe，尖角號 /iframe。

iframe 標簽有五個基本屬性：

src 屬性，資源的意思，用以引入其他網(wǎng)站的頁面，值是一個頁面路徑。

width 屬性，寬度的意思，用以控制引入頁面的寬度，值是一個數(shù)字。

height 屬性，高度的意思，用以控制引入頁面的高度，值是一個數(shù)字。

frameborder 屬性，框架邊框的意思，默認引入的框架帶有邊框，通常情況下將該屬性值設(shè)置為0，來取消框架的邊框。

scrolling[?skr??l??] 屬性，滾動的意思，用來控制是否顯示框架的滾動條，值有三個：

auto，在需要的情況下出現(xiàn)滾動條，也是默認值。

yes，始終顯示滾動條。

no，從不顯示滾動條。

我們來做個例子。

打開編輯器，新建一個 iframe-demo.html 文件，補全基礎(chǔ)代碼，在 body 里添加 iframe 標簽，首先定義 src 屬性，值為 http://www.qfedu.com，frameborder 屬性的值設(shè)置為1，顯示邊框。保存頁面。

在瀏覽器中打開頁面。千鋒教育的官網(wǎng)在 iframe 的默認大小的窗口里顯示了。

返回編輯器，給 iframe 定義屬性 width 等 800，height 等于 600，保存。

回到瀏覽器，刷新，iframe 的窗口變大了。可以通過滾動條查看網(wǎng)站內(nèi)容。

返回編輯器，如果給iframe 定義一個scrolling 屬性，值為 no 的話，滾動條就不見了。

回到瀏覽器，刷新。此時就不能查看窗口隱藏的內(nèi)容了。

iframe 也可以作為一個鏈接的目標框架。鏈接的 target 屬性必須設(shè)置為 iframe 的 name 屬性。

比如給 iframe 定義 name 屬性的值為 iframe_a，鏈接 a 的 target 屬性值也設(shè)置為 iframe_a。這樣，當點擊鏈接時，千鋒教育的官網(wǎng)就在這個 iframe 窗口里打開了。

我們再來看個例子，當點擊三個鏈接，iframe 里顯示了相應(yīng)鏈接的網(wǎng)站。

我們來實現(xiàn)這個例子。

回到編輯器，創(chuàng)建一個 iframe-example.html 文件，補全基本代碼，在 body 里添加一個 div 容器，在容器里添加一個 iframe，定義屬性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在瀏覽器中打開頁面，一個 iframe 框架做好了。

回到編輯器，在 body 里的第一行再添加一個 div 容器，在容器里書寫 emmet 命令：a 中括號 href 空格 target 等于 iframe_a 大于號 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 鍵自動補全代碼。很明顯，這不是我們要的代碼。

這怎么辦呢？聰明的你一定想到了，在小學數(shù)學里，通過添加小括號來設(shè)置運算優(yōu)先級的法則。

我們在 a 的前面，b 的后面填上一對括號， (a[href target=iframe_a]>b)*3 我們把這個 emmet 放到注釋里保存一下。

將光標移至 emmet 語句的結(jié)尾，按下 tab。期望的代碼生成了。

如果你是完美主義者，這個代碼你也不滿意，能不能換行顯示三個 a 標簽?zāi)兀看蠹腋乙黄鹱觯?/span>

點擊 VSCode 左下角的齒輪圖標，再點擊設(shè)置，打開設(shè)置窗口。

點擊擴展菜單，再點擊 emmet，找到 Syntax(森太課思) Profiles，在 settings（賽ten 思）.json 中編輯。

在這里輸入 html 冒號大括號，在大括號里寫入 inline_break 冒號 2，表示標簽數(shù)大于兩組，就折行顯示。

"html": {

"inline_break": 2

關(guān)閉設(shè)置。

把剛才保存的 emmet 命令再拷貝過來，按下 tab 鍵，完美的代碼生成了！

給三個a 標簽填好鏈接地址和文本內(nèi)容。

這里需要注意，a 鏈接的地址可以是互聯(lián)網(wǎng)的網(wǎng)站地址，也可以是你自己制作的本地頁面地址，這些頁面都可以在 iframe 中顯示。

我們發(fā)現(xiàn)三個鏈接的target屬性都指向了同一個iframe。保存一下頁面。

回到瀏覽器，刷新。分別點擊三個鏈接，iframe 里分別顯示了三個網(wǎng)站的頁面。

文章配套視頻鏈接「鏈接」

在線咨詢

上一篇：京東后臺：訂單履約系統(tǒng)設(shè)計（下）
下一篇：JavaScript中 eval函數(shù)

您的項目需求

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

整合營銷服務(wù)商