整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5是新的HTML標準，是對HTML和XHML的繼承和發展。學習HTML5首先需要了解HTML5的語法基礎。本章將圍繞HTML5文檔基本格式、HTML5語法來進行講解。
下面是HTML5最基本的代碼結構：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>1.<!doctype>標記
<!doctype>標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML標準規范。只有在開頭使用<!doctype>聲明，瀏覽器才能將該網頁作為有效的HTML文檔，并按指定的文檔類型進行解析。使用HTML5的DOCTYPE聲明，會觸發瀏覽器以標準兼容模式來顯示頁面。
2.<html>標記
<html>標記位于<!doctype>標記之后，也稱為根標記，用于告知瀏覽器其自身是一個HTML文檔。<html>標記標志著HTML文檔的開始，</html>標記表示HTML文檔的結束。他們之間是文檔的頭部和主體內容。
3.<head>標記
<head>標記用于定義HTML文檔的頭部信息，也稱頭部標記，是用來封裝其他位于文檔頭部標記的標記，如：<meta>、<title>、<link>、<style>、<script>標記等。上面的代碼中，<meta>標記的屬性charset指的是文檔的字符編碼，“utf-8”表示國際通用字符編碼。<title>標記用于告訴用戶這個頁面是什么，如：百度頁面，在瀏覽器導航欄的最上方百度所屬頁面，會有一個百度的標題。<link>標記一般用來引入外部的CSS文件。<style>標記用來包裹與html標簽對應的CSS樣式，通常與選擇器結合起來使用。<script>標記用于引入外部的JavaScript（js）文件，如果<script>標記位于<body>標記中，就可以將js代碼寫在<script>標記中。
注意：一個HTML文檔中只能包含一對<head>標記，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。
部分標記會在下一章節進行詳細解釋
4.<body>標記
<body>標記用于定義HTML文檔所要顯示的內容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標記內，<body>標記中的內容才是最終展示給用戶看的。
一個HTML文檔只能包含一對<body>標記，且必須位于<html>標記內部，<head>標記的后面，與<head>標記是并列關系。
1.標簽不區分大小寫
為了兼容各個瀏覽器，HTML5采用寬松的語法格式，標簽可以不區分大小寫就是HTML5語法變化的重要體現
<p>開始標記的p標記小寫，結束標記的p標記大寫</P>上面的代碼標簽的開始和結束標簽大小寫雖然不同，但它是符合HTML5語法的規范的。
2.允許屬性值不使用引號
在HTML5中，屬性值不放在引號中也是正確的，如：
<input type=text readonly=readonly/>
<input type=checkbox checked=a/>這段代碼等價于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="a"/>3.允許部分屬性值的屬性省略
在HTML5中，部分標志性的屬性的屬性值是可以省略的，如：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
可以省略為：
<input type="text" readonly/>
<input type="checkbox" checked/>下面是一張關于HTML5可以省略屬性值的屬性表：
提示：雖然HTML5對于語法的規范不是很嚴格，但是個人建議，標簽采用小寫，引號加上，這兩點是為了讓頁面看起來美觀，也是為了方便后面頁面編寫出錯時找錯。
tml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜單</title>
<link href="../css/20240401-2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Mobile App
<ul>
<li>iOS App</li>
<li>Android</li>
</ul>
</li>
<li>Advertising</li>
</ul>
</li>
<li>Blog</li>
<li>About US</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>Css:
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
background-color: #1769b0;
justify-content: center;
margin-top: 20px;
}
.container ul{
list-style: none;
}
.container ul li{
background-color: transparent;
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 19px;
position: relative;
}
.container ul li:hover{
background-color: #85C1E9;
}
.container ul ul{
display: none;
}
.container ul li:hover > ul{
display: block;
}
.container ul ul ul{
margin-left: 150px;
top: 0px;
position: absolute;
}效果：
多剛入門HTML5前端開發的小伙伴對HTML頁面的基本機構代碼還不是很清楚，下面和千鋒廣州小編一起來看看吧。
1、什么是標簽：
html標簽組成是html文檔的最基本元素,一般是成對出現,由開始標簽和與其對應的結束標簽構成.?如<html></html>，<p></p>，<body></body>，<head></head>，<span></span>等,此外，還有一些標簽是單獨出現的，如<img/>,<input/>等，標簽可以相互嵌套使用。
由于html語言是一門弱類型語言,對格式的要求不是非常嚴格，因此所有標簽是不區分大小寫的,但是，一般在實際開發中，大家都統一使用小寫。
2、html文檔的基本結構
如上圖，每一個html文檔的基本結構為：
第一層：
<!DOCTTYPE>------！文檔類型，它的目的是要告訴標準通用標記語言解析器，它應該使用什么樣的文檔類型定義（DTD）來解析文檔，在html5文檔中，一般寫為<!DOCTTYPE html> ;值得注意的是，<!DOCTTYPE>不屬于html標簽。
<html></html>-------html標簽，是html文檔的根標簽，所有的網頁標簽都放在這對標簽中，是所有html標簽的祖先容器。
第二層：
<head></head>-------頭部標簽，代表著html文檔的頭信息，是所有頭部元素的容器，內部一般包含：<title> <script><style><meta><link>這些頭部元素。
<body></body>-------網頁主體標簽，其內部主要包含著構成網頁內容的一些元素，如<p></p>,<span></span>,<div></div>,<table></table>等。這些元素都會在網頁的內容部分顯示。
3、標簽的屬性
就如人有這身高、體重、年齡等這些屬性一樣，html標簽也有自己的屬性，如字體顏色，寬，高，背景等。這些屬性一般通過鍵值對的形式卸載標簽中，是標簽的一部分，并且每種標簽的屬性都不完全像同，有的標簽有著自己特有的屬性。如下圖所示：
4、html注釋
在實際開發中，我們需要在html文檔中做一些標記，方便日后對代碼的維護及修改，也方便其他程序員了解我們的代碼。而在html文檔中，注釋的格式為:
我們可以理解為，html中，標簽元素是給計算機讀的，為注釋是給程序員看的。
以上就是今天分享的內容，希望對大家有幫助哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
