一、HTML是什么
HyperText Mark-up Language 超文本標(biāo)記語言。
HTML是一種編程語言。是一種解釋型的編程語言。
1.1 超文本是什么
超文本，表示不只是文本。還可以有圖片，音頻，聲頻，視頻等。
.txt是文本文件，只有文本。??超文本可以有圖片，音頻。
1.2 標(biāo)記是什么
標(biāo)記又叫標(biāo)簽。
HTML就是由大量的標(biāo)簽組成的一種編程語言。
標(biāo)簽格式：
<標(biāo)簽開始 屬性=”值” 屬性=”值”>標(biāo)簽體</標(biāo)簽結(jié)束>
例如：超鏈接標(biāo)簽
<a href=“URL”>這是超鏈接的文本</a>
其他格式：
<標(biāo)簽 屬性=”值” 屬性=”值”?/>
1.3 URL是什么
URL俗稱地址。
URL統(tǒng)一資源定位符。
在網(wǎng)絡(luò)中每一個資源，都有一個唯一的訪問標(biāo)識。這個訪問標(biāo)識 就是?URL地址。
二、HTML編寫方式
HTML是一個純文本文件。使用HTML語言編寫的HTML頁面（源文件）是一個純文本內(nèi)容?？梢允褂萌我庖豢钗谋揪庉嬡浖帉慔TML源文件。
HTML頁面（.html或.htm）是使用HTML語言編寫的源文件。這個源文件是一個純文本文件。
源文件需要一個解釋器來運行。
.htm的解釋器是瀏覽器軟件。
在瀏覽器上顯示的內(nèi)容，就不只有文本了。
三、一個HTML頁面的基本結(jié)構(gòu)?
大家先記住三個HTML頁面的標(biāo)簽。
<html>表示一個HTML頁面
<head>表示一個HTML頁面的頭部（設(shè)置頁面的參數(shù)）
<body>表示一個HTML頁面的主體（設(shè)置頁面的主要內(nèi)容）
<html>
<head>
<title>這是我們第一個HTML頁面</title>
</head>
<body>
這是一個HTML頁面的主體！
</body>
</html>
四、圖片標(biāo)簽img?
在使用img標(biāo)簽時，大家一定要先整理清楚路徑位置。
將圖片與HTML頁面放到一起。
<img src=“URL”/>
五、使用工具編輯HTML頁面?
這邊我使用的是HBuilder X，擁有自帶頁面布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>六、標(biāo)題標(biāo)簽h1-h6
字體大小從h1到h6依次變小
<body>
<h1>這是h1</h1>
<h4>這是h4</h4>
<h6>這是h6</h6>
</body>七、字體標(biāo)簽font
<font color="crimson" size="7" >這是一段文字</font>
<font color="crimson" size="7" face="楷體" ?>這是一段文字</font>
八、字體其他標(biāo)簽
<b> 加粗，<i>斜體，<u>下劃線，<s>刪除線，<sub>下標(biāo)，<sup>上標(biāo)，<center>居中
<font color="crimson" size="7" face="楷體">這是一段文字<Br/>
<b>加粗</b><Br/>
<i>斜體</i><Br/>
<u>下劃線</u><Br/>
<s>S是什么</s><Br/>
H<sub>2</sub>O<br/>
O<sup>2</sup><br/>
<center>這是居中</center>
</font>九、表格標(biāo)簽
在HTML中表格標(biāo)簽有三個最基礎(chǔ)的標(biāo)簽<table><tr><td>
<table>表示表格
<tr>表示行
<td>表示單元格
一個<table>中有很多行<tr>
在每一行<tr>中有很多個單元格<td>
<table>
<tr>
<td>1</td><td>張三</td>
<td>男</td><td>38</td>
</tr>
<tr>
<td>2</td><td>李四</td>
<td>男</td><td>48</td>
</tr>
<tr>
<td>3</td><td>王五</td>
<td>女</td><td>15</td>
</tr>
</table>表格標(biāo)題標(biāo)簽<th> 自動加粗并居中
<table>
<tr>
<th>編號</th><th>姓名</th>
<th>性別</th><th>年齡</th>
</tr>
<tr>
<td>1</td><td>張三</td>
<td>男</td><td>38</td>
</tr>
<tr>
<td>2</td><td>李四</td>
<td>男</td><td>48</td>
</tr>
<tr>
<td>3</td><td>王五</td>
<td>女</td><td>15</td>
</tr>
</table>常用屬性：width 寬。
Width = “600px” 600像素。
Width = “50%” 相對父容器占50%寬。
常用屬性：border 邊框粗細
常用屬性：間距cellspacing：二個單元格之間的距離。
常用屬性：邊距cellpadding：文本與單元格邊框之間的距離。
9.1 制作一個細邊框的表格?
<table width="60%" border="0px" cellpadding="3px" cellspacing="1px" bgcolor="blue">
<tr bgcolor="white">
<th>編號</th><th>姓名</th>
<th>性別</th><th>年齡</th>
</tr>
<tr bgcolor="white">
<td>1</td><td>張三</td>
<td>男</td><td>38</td>
</tr>
<tr bgcolor="white">
<td>2</td><td>李四</td>
<td>男</td><td>48</td>
</tr>
<tr bgcolor="white">
<td>3</td><td>王五</td>
<td>女</td><td>15</td>
</tr>
</table>9.2?對表格進行結(jié)構(gòu)化的標(biāo)簽
<thead>
<tbody>
<tfoot>
<table width="60%" border="0px" cellpadding="3px" cellspacing="1px" bgcolor="blue">
<thead>
<tr bgcolor="white">
<th>編號</th><th>姓名</th>
<th>性別</th><th>年齡</th>
</tr>
</thead>
<tbody id=”tabBody”>
<tr bgcolor="white">
<td>1</td><td>張三</td>
<td>男</td><td>38</td>
</tr>
<tr bgcolor="white">
<td>2</td><td>李四</td>
<td>男</td><td>48</td>
</tr>
<tr bgcolor="white">
<td>3</td><td>王五</td>
<td>女</td><td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總?cè)藬?shù)</td><td>3</td>
</tr>
</tfoot>
</table>9.3 不規(guī)則的表格
單元格常用屬性 跨行：rowspan 同一列。占用同列下一行的單元格
單元格常用屬性 跨列：colspan 同一行。同行中的后續(xù)單元格自動后面排列
<table width="60%" border="0px" cellpadding="3px" cellspacing="1px" bgcolor="blue">
<thead>
<tr bgcolor="white">
<th>編號</th><th>姓名</th>
<th>性別</th><th>年齡</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>1</td><td>張三</td>
<td>男</td><td>38</td>
</tr>
<tr bgcolor="white">
<td>2</td><td>李四</td>
<td>男</td><td>48</td>
</tr>
<tr bgcolor="white">
<td>3</td><td>王五</td>
<td>女</td><td>15</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td colspan="3" align="right">總?cè)藬?shù)：</td><td>3</td>
</tr>
</tfoot>
</table>?十、表單標(biāo)簽<form>
10.1 表單標(biāo)簽的作用
在web應(yīng)用程序開發(fā)中，分客戶端與服務(wù)器二個部分的。
客戶端與服務(wù)器需要進行交互。交互過程中需要進行數(shù)據(jù)的交換。
例如：登錄時，需要采集用戶的賬號和密碼。給用戶一個表單，讓用戶填寫賬號和密碼。
注冊時，需要采集用戶的大量信息。使用表單進行采集用戶信息。
表單是在客戶端采集用戶信息的主要手段。
10.2 表單標(biāo)簽<form>?
<form></form> 這就是一個表單。
表單標(biāo)簽在頁面上是一個不可見的頁面元素。
10.3 form的常用屬性?
a.?<form action=“url”
Action表示表單提交的URL地址。
數(shù)據(jù)采集的接收處理的對象
例如：登錄和注冊時，表單提交的位置是否相同？一般不相同。
b.?<form method=“get|post”
Method 表示表單的提交方式。
get 直接在地址欄可見，長度受限，不安全。
post? 將數(shù)據(jù)進行打包發(fā)送。地址欄不可見。長度理論上不受限，安全性好。
<form action="h.html" method="post">
<input type="text" name="userName" value="" />
<input type="submit" value="提交" />
</form>?十一、表單元素標(biāo)簽 input
<Input 標(biāo)簽是表單元素標(biāo)簽。每一個標(biāo)簽中的內(nèi)容都是依靠表單元素標(biāo)簽設(shè)計的。
在表單中不同的表單元素使用相同的標(biāo)簽<input。
不同的表單元素之間依靠<input type=”?” ?type的屬性進行區(qū)分。
?11.1 type屬性
用來指定表單元素類型的屬性。
在input標(biāo)簽中是依靠type屬性的不同來區(qū)分表單元素的。
11.2 id屬性?
id是通用屬性，用來對頁面標(biāo)簽進行唯一標(biāo)識的屬性。
一般開發(fā)時，id的取值是唯一的。
11.3 name屬性?
name也是通用屬性，name表示標(biāo)簽的名稱。
name屬性可以重復(fù)。
一般情況在多選框和單選按鈕進，name屬性都是相同的。
表單數(shù)據(jù)提交到服務(wù)器之后，在服務(wù)器上是按name屬性來獲取表單提交的數(shù)據(jù)。
11.4 value屬性?
value也是一個通用屬性。value表示當(dāng)前表單元素的值。
value屬性值就是在表單提交時，提交到服務(wù)器上的數(shù)據(jù)。
十二、常用的表單元素?
12.1 文本框和密碼框
a.?文本框：<input type=“text” name=“” value=“” />
text也是type屬性的默認值。
value表示文本框的值，在文件框中的內(nèi)容就是文本框標(biāo)簽的value屬性的值。
b.?密碼框：<input type=”password” name=””?value=”” />
Password表示密碼框，與文本框的區(qū)別在于，value的內(nèi)容用*號。
12.2 單選按鈕?
單選框：<input type=”radio” name=””?value=”” />
單選框可以設(shè)置多個，并選擇選擇其中一個作為選項
12.3? 下拉列表
下拉列表:<select>
? ? ? ? ? ? ? ? <option selected="">XXXX</option>
????????????????<option>XXXX</option>
????????????????</select>
可以在多個option中選擇一個作為select的value，selected是默認選擇的屬性，帶有該屬性的option可以在未選擇的情況下自動默認選擇
12.4 按鈕?
按鈕:<input type="button" value="按鈕"/>
在沒有綁定onclick事件前，僅僅是一個普通的按鈕并沒有任何用處，但是也正是由于可以綁定onclick事件所以實現(xiàn)了button的效果多樣化，可以在各種情況下實現(xiàn)不同的功能，例如提交、跳轉(zhuǎn)等等。
12.5 表單?
表單:<form action="" method="">
? ? ? ? </form>文章來源：http://www.zghlxwxcb.cn/news/detail-553331.html
action屬性是設(shè)置form的跳轉(zhuǎn)地址，method屬性是設(shè)置form的提交方式。文章來源地址http://www.zghlxwxcb.cn/news/detail-553331.html
到了這里，關(guān)于前端學(xué)習(xí)HTML的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
