1、基本結(jié)構(gòu)
第一行是文檔聲明，第二行“<html>”標(biāo)簽和最后一行“</html>”定義html文檔的整體，“<html>”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什么影響，它一般作為分析統(tǒng)計(jì)用。 “<head>”標(biāo)簽和“<body>”標(biāo)簽是它的第一層子元素，“<head>”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“<body>”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>
2、html標(biāo)題標(biāo)簽
<h1>這是一級(jí)標(biāo)題</h1>
<h2>這是二級(jí)標(biāo)題</h2>
<h3>這是三級(jí)標(biāo)題</h3>
3、換行標(biāo)簽及符號(hào)
換行：<br />
空格：
左括號(hào)<：<
右括號(hào)>：>
4、塊標(biāo)簽
1、<div> 標(biāo)簽 塊元素，表示一塊內(nèi)容，沒有具體的語義。
2、<span> 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。
5、含樣式和語義的標(biāo)簽
1、<em> 標(biāo)簽 行內(nèi)元素，斜體
2、<i> 標(biāo)簽 行內(nèi)元素，斜體
3、<b> 標(biāo)簽 行內(nèi)元素，加粗
4、<strong> 標(biāo)簽 行內(nèi)元素，加粗
6、布局標(biāo)簽
規(guī)范名稱叫語義化標(biāo)簽，比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等。
7、html圖像標(biāo)簽、絕對(duì)路徑和相對(duì)路徑
html圖像標(biāo)簽
<img>標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：
- src屬性 定義圖片的引用地址
- alt屬性 定義圖片加載失敗時(shí)顯示的文字
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對(duì)路徑和相對(duì)路徑
- 絕對(duì)地址：相對(duì)于磁盤的位置去定位文件的地址
- 相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址
絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對(duì)路徑就沒有這個(gè)問題。相對(duì)路徑的定義技巧：
- “ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
- “ ../ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“../images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。
html鏈接標(biāo)簽
<a>標(biāo)簽可以在網(wǎng)頁上定義一個(gè)鏈接地址，它的常用屬性有：
- href屬性 定義跳轉(zhuǎn)的地址
- title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框
- target屬性 定義鏈接窗口打開的位置，其中：target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開；target="_blank" 新頁面會(huì)在新開的一個(gè)瀏覽器窗口打開。
<a href="#"></a> <!-- # 表示鏈接到頁面頂部 -->
<a title="跳轉(zhuǎn)的網(wǎng)站">傳智播客</a>
<a href="2.html" target="_blank">測試頁面2</a>
8、html列表
有序列表
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
無序列表
<ul>
<li><a href="#">新聞標(biāo)題一</a></li>
<li><a href="#">新聞標(biāo)題二</a></li>
<li><a href="#">新聞標(biāo)題三</a></li>
</ul>
定義列表
定義列表通常用于術(shù)語的定義。<dl>標(biāo)簽表示列表的整體。<dt>標(biāo)簽定義術(shù)語的題目。<dd>標(biāo)簽是術(shù)語的解釋。一個(gè)<dl>中可以有多個(gè)題目和解釋，代碼如下：
<h3>前端三大塊</h3>
<dl>
<dt>html</dt>
<dd>負(fù)責(zé)頁面的結(jié)構(gòu)</dd>
<dt>css</dt>
<dd>負(fù)責(zé)頁面的表現(xiàn)</dd>
<dt>javascript</dt>
<dd>負(fù)責(zé)頁面的行為</dd>
</dl>
9、html表單
表單即各種輸入，是網(wǎng)站接收用戶信息的途徑
1、<form>標(biāo)簽 定義整體的表單區(qū)域，以</form>結(jié)束。
action屬性 定義表單數(shù)據(jù)提交地址
method屬性 定義表單提交的方式，一般有“get”方式和“post”方式
2、<label>標(biāo)簽 用戶能看到的標(biāo)題
3、<input>標(biāo)簽 定義通用的表單元素
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義復(fù)選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個(gè)普通按鈕
type="image" 定義圖片作為提交按鈕，用src屬性定義圖片地址
type="hidden" 定義一個(gè)隱藏的表單域，用來存儲(chǔ)值
value屬性 定義表單元素的組
name屬性 定義表單元素的名稱，此名稱是提交數(shù)據(jù)時(shí)的鍵名。
4、<textarea>標(biāo)簽 定義多行文本輸入框
5、<select>標(biāo)簽 定義下拉表單元素
6、<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項(xiàng)
示例
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個(gè)人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input類型為submit定義提交按鈕
還可以用圖片控件代替submit按鈕提交，一般會(huì)導(dǎo)致提交兩次，不建議使用。如：
<input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>
效果
10、html表格
1、<table>標(biāo)簽：聲明一個(gè)表格，它的常用屬性如下：
border屬性 定義表格的邊框?qū)挾?，設(shè)置值是數(shù)值
cellpadding屬性 定義單元格內(nèi)容與邊框的距離，設(shè)置值是數(shù)值
cellspacing屬性 定義單元格與單元格之間的距離，設(shè)置值是數(shù)值
align屬性 設(shè)置整體表格相對(duì)于瀏覽器窗口的水平對(duì)齊方式,設(shè)置值有：left | center | right
2、<tr>標(biāo)簽：定義表格中的一行
3、<td>和<th>標(biāo)簽：定義一行中的一個(gè)單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：
align 設(shè)置單元格中內(nèi)容的水平對(duì)齊方式,設(shè)置值有：left | center | right
valign 設(shè)置單元格中內(nèi)容的垂直對(duì)齊方式 top | middle | bottom
colspan 設(shè)置單元格水平合并數(shù)，設(shè)置值是數(shù)值
rowspan 設(shè)置單元格垂直合并數(shù)，設(shè)置值是數(shù)值
11、頁面布局概述
1、table布局：通過table元素將頁面空間劃分成若干個(gè)單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實(shí)現(xiàn)布局，這種布局方式也叫傳統(tǒng)布局，主流的布局方式不用這種。
2、HTML+CSS布局(DIV+CSS)：主要通過CSS樣式設(shè)置來布局文字或圖片等元素，需要用到CSS盒子模型、盒子類型、CSS浮動(dòng)、CSS定位、CSS背景圖定位等知識(shí)來布局，它比傳統(tǒng)布局要復(fù)雜，目前是主流的布局方式。
關(guān)于html的基礎(chǔ)知識(shí)就先寫這些，關(guān)于css講另起一篇記錄。
