2.2.1標記與元素
1.,,等都是標記
起始標記記為<…>,結束標記記為</…>
2.標記分為普通標記和空標記
（1）普通標記：成對出現，包含起始標記和結束標記
基本語法：控制的文字內容
起始標記告訴瀏覽器開始開始執行此標記的功能，結束標記告訴瀏覽器結束執行此標記，
注意：
標記可以成對嵌套但是不能交叉嵌套，
比如對于,,
可以成對嵌套,這是正確的，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<hr/>
</body>
</html>
2.2.2HTML屬性
屬性：與標記相關的特性描述稱為屬性，此外還要為屬性賦值，
1.超鏈接標記：…，href是它的屬性，要為href賦值，賦的值是鏈接，
<a href = "https://mail.qq.com/">QQ郵箱</a>
2.空標記也可以加一些屬性，就是一個空標記，src,width,height是它的屬性，
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
所以總結以下它的基本語法：
對于普通標記：<標記名 屬性1 = “” 屬性2 = “” …>控制的文字內容</標記名>
對于空標記：<標記名 屬性1 = “” 屬性2 = “” … />
注意：屬性放在起始標記的尖括號中(中)，控制的文字內容放在起始標記和結束標記之間，
屬性之間沒有先后順序，
2.3HTML5檔案的結構
2.3.1HTML5檔案的基本結構
1.HTML5檔案的基本結構如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
...
</body>
</html>
2.（1）HTML檔案分為檔案頭和檔案體，
（2）和之間存放頭部資訊，用來說明網頁的基本情況，
（3）和之間存主體資訊，用來描述網頁的正文部分，
2.3.2網頁標題
<title>中國傳統文化</title>
2.3.3定義元資料meta
1.meta元資料是什么：元資料定義在檔案的head部分,用來描述HTML檔案的資訊，這些資訊通常包括對網頁的描述，網頁中的關鍵詞等，
meta定義的資料不會顯示在網頁上，只在源程式中顯示，
2.一些經常使用的元資料
（1）定義網頁的字符集
<meta charset="UTF-8">
（2）定義搜索引擎關鍵字
<meta name = "keywords" content = "孫燕姿"/>
（3）對網頁的描述
<meta name = "description" content = "我遇見誰，會有怎樣的對白，"/>
(4)頁面的最新版本，將屬性值設定為revised，屬性值寫版本資訊
<meta name = "revised" content = "九歲阿,2020/10/01"/>
(5)將屬性http-equiv屬性的值修改為refresh，content設定秒數，就可以是頁面在幾秒內重繪一次
<meta http-equiv = "refresh" content = "5"/>
3.元資料的綜合應用
設定字符集是UTF-8，頁面描述是“張旭簡介”，頁面關鍵詞是“張旭，草圣，古詩”，10秒重繪一次，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "張旭簡介">
<meta name = "keywords" content="張旭，草圣，古詩"/>
<meta http-equiv="refresh" content = "10"/>
<title>元資料</title>
</head>
<body>
</body>
</html>
2.3.4HTML5新增的結構標記
1.header標記定義檔案的頁眉
2.footer定義檔案的或章節的頁腳
3.nva標記定義導航鏈接的部分
4.section用于分組與主題相關的內容，例如一本書中的各章，通常可以作為資料庫的一部分，
4.綜合應用，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增結構標記</title>
</head>
<body>
<header>
這里是頁眉部分
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
</nav>
<p>網頁的其它部分內容</p>
<footer>
這里是頁腳部分
</footer>
</body>
</html>
2.4綜合案例——基本的HTML5網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "關于HTML5"/>
<meta name = "keywords" content = "HTML5,CSS,網頁設計"/>
<title>基本的html網頁</title>
</head>
<body>
<header>
HTML5特性
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
<a href = "https://www.tencent.com/zh-cn">騰訊</a>
</nav>
<section>
<p>正文部分的內容1</p>
<p>正文部分的內容2</p>
<p>正文部分的內容3</p>
<p>正文部分的內容4</p>
<p>正文部分的內容5</p>
</section>
<footer>
聯系方式：175xxxxx42@qq.com
</footer>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/149834.html
標籤：其他
上一篇：阿里云網盤不限速，公測可預約了！
下一篇：Java常用的輸入輸出介紹