2.HTML進階
2.1 塊元素和行內(nèi)元素
- 塊元素
- 無論內(nèi)容多少，該元素獨占一行
- (p段落標簽、h1-h6標題標簽…)
- 行內(nèi)元素
- 內(nèi)容撐開寬度，左右都是行內(nèi)元素的可以排在一行
- (a鏈接標簽 . strong粗體 . em斜體 …)
2.2 列表標簽
列表就是信息資源的一種展示形式。它可以使信息結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應(yīng)的信息
- 列表的分類
- 無序列表
- 有序列表
- 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表標簽</title>
</head>
<body>
<!--有序列表
應(yīng)用：試卷，問答
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>運維</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<!--無序列表
應(yīng)用：導航，側(cè)邊欄-->
<ul>
<li>Java</li>
<li>Python</li>
<li>運維</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<hr/>
<!--自定義列表
dl:標簽
dt:列表名稱
dd:列表內(nèi)容
-->
<dl>
<dt>課程</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>運維</dd>
<dd>前端</dd>
<dd>C/C++</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>北京</dd>
<dd>陽泉</dd>
</dl>
</body>
</html>
運行結(jié)果：
2.3 表格標簽
基本結(jié)構(gòu)：
- 單元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="4">1-1</td>
<td>1-5</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
運行結(jié)果：
2.4 媒體元素
- 視頻元素
- video
- 音頻元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<video src="../resources/video/snow.mp4" controls></video>
<br/>
<audio src="../resources/audio/陳一發(fā)兒%20-%20童話鎮(zhèn).mp3" controls></audio>
</body>
</html>
運行結(jié)果：文章來源：http://www.zghlxwxcb.cn/news/detail-803955.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-803955.html
到了這里，關(guān)于【HTML】-- 02 HTML進階的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
