HTML基礎(chǔ)知識總結(jié)
HTML基本概念
什么是HTML？
HTML是用來描述網(wǎng)頁的一種語言
- HTML指的是超文本標(biāo)記語言
- HTML不是一種編程語言，而是一種標(biāo)記語言
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽
- HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
總結(jié)：HTML是超文本標(biāo)記語言，通過使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。
HTML文件基本結(jié)構(gòu)
一個標(biāo)準(zhǔn)的HTML文檔應(yīng)該由一下幾種元素構(gòu)成
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!doctype html>用來聲明文檔的類型是HTML文件，必須放在HTML文檔的第一行，不是HTML標(biāo)簽
<html></html>html標(biāo)簽之間的文本描述網(wǎng)頁
<body></body>body標(biāo)簽之間的文本是可見的頁面內(nèi)容
<head></head>head內(nèi)的內(nèi)容不會顯示在頁面上，主要是對網(wǎng)頁內(nèi)容進(jìn)行一個規(guī)范，比如設(shè)置html文件的編碼，外部CSS文件的引入也在head標(biāo)簽內(nèi)部進(jìn)行
HTML基礎(chǔ)語法
HTML標(biāo)簽由<和>括起來，一般成對出現(xiàn)，分開始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽比開始標(biāo)簽多了一個/。沒有結(jié)束標(biāo)簽的標(biāo)簽稱之為單標(biāo)簽，例如<hr/>。
HTML常用標(biāo)簽
以下為HTML常用標(biāo)簽的用法
<!DOCTYPE html>
<!--<!DOCTYPE html> 不屬于HTML標(biāo)簽 只是為了聲明文檔類型-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html基礎(chǔ)課程介紹</title>
</head>
<body bgcolor="#faebd7">
<h1>web前端課程</h1>
<ol>
<li>HTML
<ul type="square">
<li>HTML標(biāo)簽</li>
<li>HTML語法</li>
<li>HTML結(jié)構(gòu)</li>
</ul>
</li>
<li>CSS
<ul type="square">
<li>CSS語法</li>
<li>CSS樣式</li>
<li>CSS選擇器</li>
</ul>
</li>
<li>JS
<ul type="square">
<li>JS數(shù)據(jù)類型</li>
<li>JS對象</li>
<li>JS循環(huán)</li>
</ul>
</li>
</ol>
<h1>CSS樣式</h1>
<ul>
<li>CSS布局</li>
<li>CSS精華
<ol>
<li>第一課</li>
</ol>
</li>
<ol>
<li>第一課</li>
</ol>
<li>CSS總結(jié)</li>
</ul>
<form>
名：<input type="text"/><br/>
姓：<input type="text"/>
</form>
<form>
<table align="center" bgcolor="#ffffff">
<tr>
<td>用戶：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"/></td>
</tr>
</table>
</form>
<h1 align="center">注冊信息</h1>
<hr color="#336600"/>
<form>
<table align="center" bgcolor="#f2f2f2" width="600px">
<tr>
<td>用戶名：</td>
<td><input type="text" placeholder="請輸入用戶名" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" placeholder="請輸入密碼" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>確定密碼：</td>
<td><input type="password" placeholder="請再次輸入用戶名" size="25px" maxlength="6"/></td>
</tr>
<tr>
<td>上傳照片：</td>
<td><input type="file"/></td>
</tr>
<tr>
<td>性別：</td>
<td>男<input type="radio" name="sex" value="man" checked/>女<input type="radio" name="sex" value="woman"/>
</td>
</tr>
<tr>
<td colspan="2">
我喜歡的水果：<br/>
<input type="checkbox" name="fr" value="apple"/>??
<input type="checkbox" name="fr" value="pair"/>??
<input type="checkbox" name="fr" value="ban"/>??
</td>
</tr>
<tr>
<td>喜歡的食物：
<select name="li">
<option>請選擇：</option>
<optgroup label="水果">
<option>蘋果</option>
<option>獼猴桃</option>
<option>杏子</option>
</optgroup>
<optgroup label="蔬菜">
<option>西紅柿</option>
<option>白菜</option>
<option>油麥菜</option>
</optgroup>
</select></td>
</tr>
<tr>
<td colspan="2">
請做自我介紹：<br/>
<textarea name="self" rows="3" cols="20" placeholder="請在此處介紹自己。。。"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="大爺來玩啊"/> <input type="submit" value="提交表單"/> <input type="reset"
value="重置表單"/></td>
</tr>
</table>
下拉菜單：<br/>
<select>
<option>熊貓</option>
<option>貓</option>
<option>狗</option>
<option>豬</option>
<option>猴子</option>
</select>
列表：<br/>
<select size="3">
<option>熊貓</option>
<option>貓</option>
<option>狗</option>
<option>豬</option>
<option>猴子</option>
</select>
下拉菜單項：
<select size="5">
<option>熊貓</option>
<option>貓</option>
<option>狗</option>
<option>豬</option>
<option>猴子</option>
</select>
列表項：
<select size="5" multiple>
<option>熊貓</option>
<option>貓</option>
<option>狗</option>
<option>豬</option>
<option>猴子</option>
</select>
</form>
<p>html基礎(chǔ)課程介紹</p>
<hr/>
<p><a href="#錨點">hello html</a></p>
<h3 align="center">《早發(fā)白帝城》</h3>
<p align="center">朝辭白帝彩云間，千里江陵一日還</p>
<p align="center">兩岸猿聲啼不住，輕舟已過萬重山</p>
<p align="center">關(guān)于我們 | 招聘信息 | 聯(lián)系我們 | 意見反饋</p>
<hr/>
<p align="center">Copyright©2016 imooc.com All Rights Reserved</p>
<p>公式：x<sup>2</sup>+x=0 解：x<sub>1</sub>=0；x<sub>2</sub>=-1</p>
<ul type="circle">
<li>朝辭白帝彩云間</li>
<li>千里江陵一日還</li>
<li>兩岸猿聲啼不住</li>
<li>輕舟已過萬重山</li>
</ul>
<ul type="square">
<li>朝辭白帝彩云間</li>
<li>千里江陵一日還</li>
<li>兩岸猿聲啼不住</li>
<li>輕舟已過萬重山</li>
</ul>
<ol type="1">
<li>朝辭白帝彩云間</li>
<li>千里江陵一日還</li>
<li>兩岸猿聲啼不住</li>
<li>輕舟已過萬重山</li>
</ol>
<ol type="a">
<li>朝辭白帝彩云間</li>
<li>千里江陵一日還</li>
<li>兩岸猿聲啼不住</li>
<li>輕舟已過萬重山</li>
</ol>
<p>一幅圖像：<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jp g" width="30%"></p>
<br/>
<p>一幅動畫圖像<img src="http://climg.mukewang.com/58c11324000144f703550220.jp g" width="50" height="50" alt="馬圖"></p>
<p><a target="_blank" title="慕課網(wǎng)，只學(xué)有用的">慕課網(wǎng)</a></p>
<p><a href="#" title="T在線教育" name="錨點">imooc</a></p>
<a href="mailto:ckymemory@163.com">郵箱鏈接</a>
<a >文件下載</a>
<ins>插入內(nèi)容</ins>
<del>刪除內(nèi)容</del>
<table border="1">
<tr>
<td>上午</td>
<td>下午</td>
</tr>
<tr>
<td>語文</td>
<td>英語</td>
</tr>
<tr>
<td>數(shù)字</td>
<td>歷史</td>
</tr>
</table>
<table width="500" rules="all" frame="border">
<caption>表格</caption>
<tr align="center" valign="middle" bgcolor="#ffc0cb">
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center" valign="middle">
<td rowspan="2">語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td colspan="4">課間活動</td>
</tr>
<tr align="center" valign="middle">
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr align="center" valign="middle">
<td>語文</td>
<td>數(shù)學(xué)</td>
<td>英語</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
