溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html的基本結(jié)構(gòu)是什么

發(fā)布時(shí)間：2020-09-28 17:30:19 來源：億速云 閱讀：169 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html的基本結(jié)構(gòu)是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

每一個(gè)HTML文件都是有自己固定的結(jié)構(gòu)的，每一個(gè)文件的基本結(jié)構(gòu)又都包含有三個(gè)標(biāo)記：HTML文件標(biāo)記；HEAD文件頭部標(biāo)記；BODY文件主體標(biāo)記；接下來我們就來具體看一下HTML基本結(jié)構(gòu)的代碼。

基本結(jié)構(gòu)代碼：

1 <html>
2     <head>...</head>
3     <body>...</body>
4 </html>

代碼講解：

1. <html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。

2. <head></head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。

3. <body></body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h2>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。

4.<p></p>是文章的段落標(biāo)簽

5.<hx></hx>表示文章標(biāo)題（x表示數(shù)字，為文章標(biāo)題等級(jí)1-6）

6.<em></em>表示斜體

7.<strong></strong>表示加粗

8.<style>

span{

在這里配置樣式，比如文字大小，顏色等

}

</style>

<span></span>設(shè)置單獨(dú)樣式

9.<q></q>引用，會(huì)自動(dòng)加上雙引號(hào)

10.<blockquote></blockquote>縮進(jìn)

11.<br />換行

12.&nbsp;輸入空格

13.<hr/>添加水平橫線

14.<address></address>輸入地址信息（默認(rèn)以 斜體表示）

15.<code></code>代碼標(biāo)簽

16.<pre></pre>大段代碼標(biāo)簽

17.無序列表

<ul>

<li>內(nèi)容</li>

<li>內(nèi)容</li>

<li>內(nèi)容</li>

</ul>

18.有序列表(列表會(huì)自動(dòng)加上序號(hào))

<ol>

<li>內(nèi)容</li>

<li>內(nèi)容</li>

<li>內(nèi)容</li>

</ol>

19.<div>…</div>：劃分區(qū)域（獨(dú)立邏輯）

20.<div  id="版塊名稱">…</div>：劃分板塊并給板塊命名

21.表格展示（沒有框線）

<table>
     <tbody>
         <tr>
         <th>班級(jí)</th>
         <th>學(xué)生數(shù)</th>
         <th>平均成績</th>
         </tr>
 
         <tr>
         <td>一班</td>
         <td>30</td>
         <td>89</td>
         </tr>
     </tbody>
</table>

22.<table summary = "內(nèi)容"></table>為表格添加摘要

23.<caption></caption>為表格添加標(biāo)題

24.<a href = "網(wǎng)址" title = "提示">..</a>加入網(wǎng)頁鏈接（在當(dāng)前頁面打開）

25.<a href="目標(biāo)網(wǎng)址" target="_blank">..</a>加入網(wǎng)頁鏈接（新建頁面）

26.在網(wǎng)頁中鏈接Email地址

html的基本結(jié)構(gòu)是什么

html的基本結(jié)構(gòu)是什么如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。

27.<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">：為網(wǎng)頁插入圖片

28.表單標(biāo)簽：表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。

<form   method="傳送方式"   action="服務(wù)器文件">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表單標(biāo)簽</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">密&nbsp;碼:</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.輸入大段內(nèi)容：（文本域）<textarea cols = "50" rows = "10">..</textarea>

　　　　cols = "行數(shù)"

　　　　rows = "列數(shù)"

<!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>個(gè)人簡介：</label>
    <textarea cols = "50" rows = "10">在這里輸入內(nèi)容...</textarea>
    <input type="submit" value="確定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form>
</body>
</html>

輸出：

html的基本結(jié)構(gòu)是什么

30.單選/復(fù)選框

<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

1、type:

當(dāng) type="radio" 時(shí)，控件為單選框

當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）

3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用

4、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中

　　（同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、復(fù)選框</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="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
      <option value="購物">購物</option>
    </select>
</form>
</body>
</html>

輸出：

html的基本結(jié)構(gòu)是什么

<select>..</select>下拉框列表

selected = "selected"：默認(rèn)選中

32.下拉框表支持復(fù)選:multiple = "multiple"

<select multiple = "multiple">..<select>

輸出：

html的基本結(jié)構(gòu)是什么

（在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)）

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標(biāo)簽

label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用     戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。

<label for="控件id名稱">

　　注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable標(biāo)簽</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/>
 
  你對(duì)什么運(yùn)動(dòng)感興趣：<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的基本結(jié)構(gòu)是什么

關(guān)于html的基本結(jié)構(gòu)是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手