明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

發(fā)表時(shí)間：2023-09-06 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]每一個(gè)HTML文件都是有自己固定的結(jié)構(gòu)的，每一個(gè)文件的基本結(jié)構(gòu)又都包含有三個(gè)標(biāo)記：HTML文件標(biāo)記；HEAD文件頭部標(biāo)記；BODY文件主體標(biāo)記；接下來(lái)我們就來(lái)具體看一下HTML基本結(jié)構(gòu)的代碼�；窘Y(jié)構(gòu)代碼：1 <html> 2 <head>...</head&...
每一個(gè)HTML文件都是有自己固定的結(jié)構(gòu)的，每一個(gè)文件的基本結(jié)構(gòu)又都包含有三個(gè)標(biāo)記：HTML文件標(biāo)記；HEAD文件頭部標(biāo)記；BODY文件主體標(biāo)記；接下來(lái)我們就來(lái)具體看一下HTML基本結(jié)構(gòu)的代碼。

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

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

代碼講解：

1. <html></html>稱為根標(biāo)簽，所有的網(wǎng)頁(yè)標(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)頁(yè)的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁(yè)內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來(lái)。

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.無(wú)序列表

<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.表格展示（沒(méi)有框線）

<table>
     <tbody>
         <tr>
         <th>班級(jí)</th>
         <th>學(xué)生數(shù)</th>
         <th>平均成績(jī)</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)頁(yè)鏈接（在當(dāng)前頁(yè)面打開）

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

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

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。

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

28.表單標(biāo)簽：表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(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>

輸出：

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

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

輸出：

如何來(lái)簡(jiǎn)述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)選中

　�。ㄍ唤M的單選按鈕，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>

輸出：

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

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>愛(ài)好:</label>
    <select>
      <option value="看書">看書</option>
      <option value="旅游" selected = "selected">旅游</option>
      <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
      <option value="購(gòu)物">購(gòu)物</option>
    </select>
</form>
</body>
</html>

輸出：

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

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

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

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

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

輸出：

如何來(lái)簡(jiǎn)述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>

輸出：

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

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ā)此控件。就是說(shuō)，當(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>

輸出：

如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）

相關(guān)推薦：

HTML的基本結(jié)構(gòu)有哪些

HTML基本結(jié)構(gòu)介紹

以上就是如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。