溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html的基本結構是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
每一個HTML文件都是有自己固定的結構的，每一個文件的基本結構又都包含有三個標記：HTML文件標記；HEAD文件頭部標記；BODY文件主體標記；接下來我們就來具體看一下HTML基本結構的代碼。
基本結構代碼：
1 <html> 2 <head>...</head> 3 <body>...</body> 4 </html>
代碼講解：
1. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
2. <head></head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節中會有詳細介紹。
3. <body></body>標簽之間的內容是網頁的主要內容，如<h2>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
4.<p></p>是文章的段落標簽
5.<hx></hx>表示文章標題（x表示數字，為文章標題等級1-6）
6.<em></em>表示斜體
7.<strong></strong>表示加粗
8.<style>
span{
在這里配置樣式，比如文字大小，顏色等
}
</style>
<span></span>設置單獨樣式
9.<q></q>引用，會自動加上雙引號
10.<blockquote></blockquote>縮進
11.<br />換行
12. 輸入空格
13.<hr/>添加水平橫線
14.<address></address>輸入地址信息（默認以 斜體表示）
15.<code></code>代碼標簽
16.<pre></pre>大段代碼標簽
17.無序列表
<ul>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ul>
18.有序列表(列表會自動加上序號)
<ol>
<li>內容</li>
<li>內容</li>
<li>內容</li>
</ol>
19.<div>…</div>：劃分區域（獨立邏輯）
20.<div id="版塊名稱">…</div>：劃分板塊并給板塊命名
21.表格展示（沒有框線）
<table>
<tbody>
<tr>
<th>班級</th>
<th>學生數</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
</tbody>
</table>22.<table summary = "內容"></table>為表格添加摘要
23.<caption></caption>為表格添加標題
24.<a href = "網址" title = "提示">..</a>加入網頁鏈接（在當前頁面打開）
25.<a href="目標網址" target="_blank">..</a>加入網頁鏈接（新建頁面）
26.在網頁中鏈接Email地址
如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
27.<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">：為網頁插入圖片
28.表單標簽：表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
<form method="傳送方式" action="服務器文件">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表單標簽</title>
</head>
<body>
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value="" />
<br/>
<label for="pass">密 碼:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>29.輸入大段內容：（文本域）<textarea cols = "50" rows = "10">..</textarea>
cols = "行數"
rows = "列數"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
<label>個人簡介：</label>
<textarea cols = "50" rows = "10">在這里輸入內容...</textarea>
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>輸出：
30.單選/復選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
2、value：提交數據到服務器的值（后臺程序PHP使用）
3、name：為控件命名，以備后臺程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
（同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、復選框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>性別:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
</body>
</html>31.下拉框表<select>..</select>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected = "selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
</body>
</html>輸出：
<select>..</select>下拉框列表
selected = "selected"：默認選中
32.下拉框表支持復選:multiple = "multiple"
<select multiple = "multiple">..<select>
輸出：
（在 windows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項）
33.提交按鈕
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按鈕</title>
</head>
<body>
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
</form>
</body>
</html>34.重置按鈕
在33中把type的值改為reset.
35.form表單中的label標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用 戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>form中的lable標簽</title> </head> <body> <form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <br /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"> <br/><br/> 你對什么運動感興趣：<br /> <label for="jog">慢跑</label> <input type="checkbox" name="jog" id="jog" /><br /> <label for="climb">登山</label> <input type="checkbox" name="climb" id="climb" /><br /> <label for="basketball">籃球</label> <input type="checkbox" name="basketball" id="basketball" /> </form> </body> </html>
輸出：
關于html的基本結構是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
