點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 15:24:48

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

如何來簡述html的基本結(jié)構(gòu)（附代碼）:每一個HTML文件都是有自己固定的結(jié)構(gòu)的，每一個文件的基本結(jié)構(gòu)又都包含有三個標記：HTML文件標記；HEAD文件頭部標記；BODY文件主體標記；接下來我們就來具體看一下HTML基本結(jié)構(gòu)的代碼?；窘Y(jié)構(gòu)代碼：1 <html> 2 <head>...<

推薦度：

點擊下載本文 文檔為doc格式

導讀如何來簡述html的基本結(jié)構(gòu)（附代碼）:每一個HTML文件都是有自己固定的結(jié)構(gòu)的，每一個文件的基本結(jié)構(gòu)又都包含有三個標記：HTML文件標記；HEAD文件頭部標記；BODY文件主體標記；接下來我們就來具體看一下HTML基本結(jié)構(gòu)的代碼。基本結(jié)構(gòu)代碼：1 <html> 2 <head>...<

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

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

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

代碼講解：

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

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

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

4.<p></p>是文章的段落標簽

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

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

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

8.<style>

span{

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

}

</style>

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

9.<q></q>引用，會自動加上雙引號

10.<blockquote></blockquote>縮進

11.<br />換行

12. 輸入空格

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

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

15.<code></code>代碼標簽

16.<pre></pre>大段代碼標簽

17.無序列表

<ul>

</ul>

18.有序列表(列表會自動加上序號)

<ol>

</ol>

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

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

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

<table>
 <tbody>
 <tr>
 <th>班級</th>
 <th>學生數(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>為表格添加標題

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

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

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

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

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

28.表單標簽：表單是可以把瀏覽者輸入的數(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>表單標簽</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.輸入大段內(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>個人簡介：</label>
 <textarea cols = "50" rows = "10">在這里輸入內(nèi)容...</textarea>
 <input type="submit" value="確定" name="submit" />
 <input type="reset" value="重置" name="reset" />
</form>
</body>
</html>

輸出：

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

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

1、type:

當 type="radio" 時，控件為單選框

當 type="checkbox" 時，控件為復(fù)選框

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

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

4、checked：當設(shè)置 checked="checked" 時，該選項被默認選中

　　（同一組的單選按鈕，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="運動">運動</option>
 <option value="購物">購物</option>
 </select>
</form>
</body>
</html>

輸出：

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

selected = "selected"：默認選中

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

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

輸出：

（在 windows 操作系統(tǒng)下，進行多選時按下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標簽不會向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上（就自動選中和該label標簽相關(guān)連的表單控件上）。

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

　　注意：標簽的 for 屬性中的值應(yīng)當與相關(guān)控件的 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>

輸出：

相關(guān)推薦：

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

如何來簡述html的基本結(jié)構(gòu)（附代碼）:每一個HTML文件都是有自己固定的結(jié)構(gòu)的，每一個文件的基本結(jié)構(gòu)又都包含有三個標記：HTML文件標記；HEAD文件頭部標記；BODY文件主體標記；接下來我們就來具體看一下HTML基本結(jié)構(gòu)的代碼。基本結(jié)構(gòu)代碼：1 <html> 2 <head>...<

推薦度：

點擊下載本文 文檔為doc格式

標簽：代碼的代碼 html

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦