基礎元素
文字格式化
加粗字型 / 斜體 / 大號字型 / 小號字型 / 下標 / 上標 / 插入字 / 刪除字 計算機輸出標籤：code/kbd/samp/var/pre 引用，引文，標籤定義 abbr/address/dbo/q/blockquote/cite/dfn
- 格式字型
<b>加粗字型</b>
<i>斜體<i>
---------------
<strong>加粗字型</strong>
<em>斜體文字</em>
<big>字型放大</big>
<small>字型縮小</small>
<sub>下標</sub>
<sup>上標</sup>
複製程式碼- 預格式文字
<pre>
演示使用pre標籤。 這裡的空格
回車
會保留輸出
</pre>
複製程式碼- 計算機輸出文字標籤
1.這些標籤常用於顯示計算機/程式設計程式碼
<code>計算機輸出格式</code>
<kbd>鍵盤輸入格式</kbd>
<tt>打字機文字</tt>
<samp>計算機程式碼樣本</samp>
<var>計算機變數</var>
複製程式碼- address 標籤
<adress>
Written by <a href="#">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</adress>
複製程式碼- 縮寫 /首字母縮寫
1.滑鼠移入縮略語上，title會展示全部的文字
<abbr title="etcetera">etc.</abbr>
<acronym title="world wide web">www</acronym>
複製程式碼- 文字顯示方向
1.下面的文字右向左顯示
<p>
<bdo>
我的文字是從右向左顯示的
</bdo>
</p>
複製程式碼- 塊飲用
<p>
這是外面的文字
<q>
這是內部引入的文字
</q>
<p>
複製程式碼- 標記刪除的文字/新替換的文字
1.del 標籤標識刪除 ins標識替換的內容
<p>
世界上最偉大的語言是<del>Swift</del> <ins>PHP</ins>
</p>
複製程式碼a標籤連結
href / target / id 描述
- href 指向的地址
1.href='/index.html' 指向本網站的一個頁面
2.href='https://wwww.xxx.com' 指向一個外部網址連結
3.href='#' 一個空連結
<a href='/index.html'>內部其他頁面</a>
<a href='http://www.may.com'>外部網址</a>
<a href='#'>空地址</a>
複製程式碼- target視窗開啟方式
1.預設是空，可以設定為_blank/_top
2.空本標籤頁開啟 _blank 是新開視窗開啟
3._top 情況下 如果網址是根目錄，並且返回最頂部
<a href='https://www.baidu.com' target=''>訪問連結1</a>
<a href='https://www.baidu.com' target='_blank'>訪問連結1</a>
<a href="http://www.w3cschool.cn/" target="_top">點選這裡!</a>
複製程式碼- id 用於建立書籤，跳轉到一個ID相同元素位置
1.已經存在一個id為tips 的元素
2.三種方式跳轉到上面元素的位置
2.1 a標籤內 id='tips'
2.2 a href='#tips'
2.3 a href='//www.w3cschool.cn/html_links.html#tips'
複製程式碼- 傳送郵件
1.電子郵件連結 mailto:
2.單詞之間的空格使用%20代替 以確保瀏覽器可以正常顯示
<p>下面的是電子郵件連結<p>
<a href='mailto:ytxinana@163.com?Subject=Hellow%20email' target='_top'>點選傳送郵件<a/>
3.更復雜的電子郵件 mailto:收件人?cc=抄送人&bcc=密送人&subject=主題&body=正文
<p>
這是另一個電子郵件連結：
<a href="mailto:someone@example.com?
cc=someoneelse@example.com&
bcc=andsomeoneelse@example.com&
subject=Summer%20Party&
body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">傳送郵件!</a>
</p>
複製程式碼頭部 heade 標籤
可以在頭部區域新增的元素標籤：title/base/meta/style/link/script/noscript
- base 定義所有連結的URL
1.在head中配置 base 標籤 該標籤指定了所有的連結的預設url
2.在body中img標籤 設定的是相對地址，base中設定了URL，所有能正常訪問
3.在body中的a 標籤 ，設定了絕對地址，但是沒有設定taget跳轉方式，base標籤中設定了，點選連結，新開介面跳轉
<head>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>
<body>
<img src='logo.png'>
<a href='http://www.baidu.com'>點選連結跳轉</a>
</body>
複製程式碼- meta 描述 html 文件的描述/關鍵詞/作者/字符集
1. 單標籤 格式是name='' content=''
<meta name='keywords' content='html,css,xmk.js'>
<meta name='description' content='html and css'>
<meta name='auton' content='HH'>
<!--美30秒重新整理當前頁面-->
<meta http-equiv='refresh' content='30'>
複製程式碼- link 元素
定義了文件與外部資源的關係 通常連結到樣式css
<head>
<link rel='stylesheet' type='text/css' href='mystyle.css'>
</head>
複製程式碼- style元素
定義了html文件的樣式檔案引用地址 在style 中定義css樣式
- script元素
用於載入指令碼檔案 javascript
CSS百科及常用嵌入方式
內聯樣式 / 內部樣式 / 外部樣式
img影像
必須要有的兩個屬性 src / alt; width/height 寬高可選；
是空標籤，包含屬性，並且沒有閉合標籤
<img src='url' alt='some_text'>
-
src屬性 可以是資料夾地址，可以是網路地址
-
alt屬性；替換文字； 圖片無法載入的時候，替換文字會告知資訊
-
width/height 設定影像的高度/寬度
-
align 文字和影像對其方式
1. align值可選 top/ bottom / middle / 預設是底部對其
2. html5 之後已經廢棄
<p>這是一些文字。 <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">這是一些文字。</p>
複製程式碼- float:left 圖片浮動的方式
1. style="float:right"
2. html5已經廢棄
<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文字的右邊。
</p>
複製程式碼- 建立圖片映像 分別監聽圖片點選的某一部分
1.原圖 usemap='#planemap'
2.<map> 定義影像地圖
3.<area> 定義影像地圖中可以點選區域
4. area 的屬性 alt/shanpe/coords/target/href/
- rect 的時候 coords ='x1,y1,x2,y2'
- circ 的時候 coords ='x,y,radius'
<p>點選太陽或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
複製程式碼table 表格
html表格結構
1.<table></table> 定義表格
<thead></thead> 頭部
<tbody></tbody> 內容
2.<tr></tr> 定義行
3.<th></th> 定義列 標題欄的列
4.<td></td> 定義列 普通的列
5.常用的標籤
table 定義表格
th 定義頭
tr 定義行
td 定義列
caption 表格的標題
colgroup 定義表格列的組
col 定義列的屬性
thead 表格的頁首
tbody 表格主體
tfoot 表格的頁尾
複製程式碼- 表格邊框屬
boder='1' - 表頭 th
1.在th標籤中定義
2.設定主要的公共屬性 align / dir / width / height
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
複製程式碼- 設定沒有邊框的表格
- 預設是沒有邊框的，或者
<table border='0'>
- 預設是沒有邊框的，或者
- 帶標題的表格
<caption> - 合併行/和並列
colspan='2'rowspan='2'
1.合併列 colspan="2" th佔了2個列的位置，所以之後的tr中td 會多出來
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
2.合併行 rowspan="2" 合併2列 相當於和 下一行的 第一列合併在一起，所以下一行的td少一個
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
複製程式碼- 表格內的標籤 一個td中 可以有 p標籤；可以ul/li；也可以巢狀一個table
<table border="1">
<tr>
<td>
<p>這是一個段落</p>
<p>這是另一個段落</p>
</td>
<td>
這個單元格包含一個表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元格包含一個列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
複製程式碼- 單元格邊距
cellpadding="10"
<table border='1' cellpadding='10'>
複製程式碼- 單元格間距
cellspacing='10'
1. border 設定table 和td 的border 都是1
2. 預設cellspacing是1，就是td之間 和table 之間 間距離 是1
3. 設定 cellspacing 為0 之後，border 會重疊顯示
<h4>沒有單元格間距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>單元格間距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>單元格間距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
複製程式碼html列表 ul/ol (無序列表/有序列表)
1.無序列表 `ul/li`
無序索引樣式 預設是disc / circle / square / none
style='list-style-type:disc'
style='list-style-type:circle'
style='list-style-type:square'
2.有序列表 `ol/li` `start="50"`
有序的索引預設 是number 可設定大些字母/小寫字母/大寫阿拉伯數字/小寫阿拉伯數字
type='A' type='a' type='I' type='i'
3.自定義列表 dl dt dd
4.總結列表標籤
ol 定義有序列表
ul 定義無序列表
li 定義列表項
dl 自定義列表
dt 自定義列表專案
dd 定義自定義列表的描述
複製程式碼- 自定義列表一二級
1.dt一級 dd二級
2.<dt> 與 <dd> 在其中數量不限、對應關係不限
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
複製程式碼- 巢狀列表
1最外層 預設是disc
2層樣式是circle
3層樣式是square
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國</li>
<li>歐洲</li>
<ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
複製程式碼html表單 form
from 屬性 action
1.表單本身看不見，文字框預設是20位元組寬度
2.表單是包含表單元素的區域，允許再表單中輸入內容，文字域 下拉選單，單選框，核取方塊
3.input 輸入標籤輸入型別 有 type='text' / type='password' / type='radio' / type='checkbox' / type='submit'
4.總結標籤
form 定義一個使用者輸入的表單
input 定義輸入域
textarea 定義文字域
lable 定義input元素的標籤，一般為輸入的標題
filedset 定義一組相關的表單元素，用外框包含起來
legend 定義了fieldset元素的標題
select 定義下拉選項列表
optgroup 定義選項組
option 定義下拉選單的選項
button 定義點選按鈕
datalist 執行預先定義的輸入空間選項列表
keygen 定義表單的金鑰生成器
output 定義一個計算結果
複製程式碼- 輸入框表單 內容輸入
<form action=''>
Name:<input type='text' name='name'> <br>
Age:<input type='text' name='age'> <br>
Username:<input type='text' name='user'> <br>
Password:<input type='password' name='passw'> <br>
<input type='radio' name='sex' value='male'>
<input type='radio' name='sex' value='female'>
<input type='checkbox' name='vehicle' value='Bike'> I have a bike <br>
<input type='checkbox' name='vehicle' value='car'> i have a car
</form>
複製程式碼- 輸入框表單 推薦按鈕
點開submint 時 會講user='33232' 通過get方式傳入到php 檔案中，action.php 通過get方法獲取到傳入值
<form name='input' action='html_form_action.php' method='get'>
Username:<input type='text' name='user'>
<input type='submit' value='submit'>
</form>
複製程式碼- 下拉選單 select/option
預設選擇第一個，如果需要指定第三個，在第三個option中 寫入屬性selected
<form>
<select name='cars'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value='fiat' selected>Fiat</option>
</select>
</form>
複製程式碼- 文字域
1.cols 列數 控制一行顯示字數
2.rows 行數，控制最多顯示多少行。超出了之後scroll。
<form>
<textarea rows='40' cols='80' >
文字域很多內容ss..d，s.d.sdm.，f.f
</textarea>
</form>
複製程式碼- 帶邊框的表單
fieldset
<form action=''>
<fieldset>
<legend>Personal Information:</legend>
Name:<input type='text' size='30'><br>
E-mail:<input type='text' size='30'><br>
Data of Birth:<input type='text' size='10'>
</fieldset>
</form>
複製程式碼- 用表單傳送電子郵件
<form action='mallto:someine@example.com' method='post' enctype='text/plain'>
Name:<br>
<input type='text' name='name' value='your name'><br>
E-mail:<br>
<input type='text' name='mail' value='your email'><br>
Comment:<br>
<input type='text' name='comment' value='your comment' size['50'><br>
send-time:<br>
<select name='time'>
<option value='2016'>2016</option></br>
<option value='2017'>2017</option></br>
<option value='2018'>2018</option></br>
<select>
<input type=''submit value='Send'>
<input type='reset' value='Reset'>
</form>
複製程式碼html框架 iframe
內聯框架 一個文件中鑲嵌另一個文件，
<iframe src='url'></iframe>
-
語法：URL指向不同的網頁
-
設定寬高
width / height -
移除邊框
frameborder='0' -
巢狀例項 a標籤重新整理 iframe
1.因為 a 標籤的 target 屬性是名為 iframe_a 的 iframe 框架，所以在點選連結時頁面會顯示在 iframe框架中
2.標準屬性
- class 元素的類名
- id 規定元素的唯一地址
- style 規定元素的行內樣式
- title 規定元素的額外資訊
<iframe src='/staic/demosource/demo.iframs.html' name='iframe_a'></iframe>
<p>
<a href='https://www.baidu.com' target='iframe_a'>這是一個連結，taget指向上面的iframe<a/>
</p>
複製程式碼html顏色 RGB
1.web 安全色216種 適應256色調色盤
2.顏色名 141 宗，（17標準顏色 加上124）
3.17種標準色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色，
複製程式碼html 指令碼 JavaScript
JavaScript 是可以插入的HTML頁面的程式設計程式碼 JavaScript 使HTML頁面具有更強的動態和互動性
- script標籤
1.script 既可以包含指令碼語言，也可以用src屬性指向外部指令碼檔案
- 如果使用src 屬性，則script是必須是空的
複製程式碼- noscript標籤
1.不支援 JavaScript 的瀏覽器會使用 noscript 元素中定義的內容（文字）來替代。
<noscript>抱歉，你的瀏覽器不支援 JavaScript!</noscript>
複製程式碼html字元實體
某些字型是預留的 不能使用包含這些字元的文字 連結
比如 大於號，空格 結合音標符等
- 列出常用的字元實體
顯示結果 描述 實體名稱 實體編號
空格  
< 小於號 < <
> 大於號 > >
& 和號 & &
" 引號 " "
' 撇號 ' (IE不支援)'
￠ 分 ¢ ¢
£ 鎊 £ £
¥ 人民幣/日元 ¥ ¥
€ 歐元 € €
§ 小節 § §
© 版權 © ©
® 註冊商標 ® ®
™ 商標 ™ ™
× 乘號 × ×
÷ 除號 ÷ ÷
複製程式碼html URL
- url 是一個網址 IP地址，dns解析
- url 統一資源定位符
scheme + '://' + host + '.' + domain + :port + path + filename
1.scheme 定義因特網服務的型別 http
2.host 定義域主機 www
3.domain 因特網域名 mayt.cn
4.:port 埠:8080
5.path 定義伺服器上的檔案路徑 如果省略 文件必須位於網站的根目錄
6.filename 定義文件/資源的名稱
複製程式碼- URL 字元編碼
1.URL 只能使用 ASCII字符集
2.URL 編碼 使用%其後跟隨的16進位制來替換非ASCII字元
3.不能包含空格
複製程式碼html速查列表
- 上面知識總結速查 原文連結
1.基本文件
<!DOCTYPE html>
<html>
<head>
<title>文件標題</title>
</head>
<body> 可見文字... </body>
</html>
2.基本標籤（Basic Tags）
<h1>最大的標題</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的標題</h6>
<p>這是一個段落。</p>
<br> （換行）
<hr> （水平線）
<!-- 這是註釋 -->
3.文字格式化（Formatting）
<b>粗體文字</b>
<code>計算機程式碼</code>
<em>強調文字</em>
<i>斜體文字</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式化文字</pre>
<small>更小的文字</small>
<strong>重要的文字</strong>
<abbr> （縮寫）
<address> （聯絡資訊）
<bdo> （文字方向）
<blockquote> （從另一個源引用的部分）
<cite> （工作的名稱）
<del> （刪除的文字）
<ins> （插入的文字）
<sub> （下標文字）
<sup> （上標文字）
4.連結（Links）
普通的連結：<a href="連結地址">連結文字</a>
影像連結： <a href="http://www.example.com/"><img src="URL" alt="替換文字"></a>
郵件連結： <a href="mailto:webmaster@example.com">傳送e-mail</a>
書籤： <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>
5.圖片（Images）
<img src="URL" alt="替換文字" height="42" width="42">
6.表格（Tables）
<table border="1">
<tr>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>表格資料</td>
<td>表格資料</td>
</tr>
</table>
7.表單（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>蘋果</option>
<option selected="selected">香蕉</option>
<option>櫻桃</option>
</select>
<textarea name="comment" rows="60" cols="20">
</textarea>
</form>
8.實體（Entities）
< 等同於 <
> 等同於 >
© 等同於 ©
複製程式碼html媒體（Media）
音效 音樂 視訊 動畫
HTML外掛object/embed
- object 元素
1.定義了嵌入的物件
2.具有區域性屬性 data type. height width usemap name form
3.用於插入（java小程式 PDF閱讀器 Flash 播放器）
// 嵌入動畫
<object width='400' height='500' data='bookmark.swf'></object>
嵌入html
<object width="100%" height="100px" data="/statics/demosource/snippet.html"></object>
嵌入圖片
<object data='apic.png'></object>
複製程式碼- embed 元素
1.embed 和object標籤一樣
複製程式碼HMTL 音訊（Audio）
多媒體標籤
embed 定義內嵌物件 HTML4不支援 html5支援
object 內嵌物件
param 定義物件的引數
audio 定義聲音
video 定義視訊
source 定義media元素的多媒體元素
track 規定media元素的字幕或其他包含文字的檔案 歌詞?
複製程式碼- 使用embed
1.embed在HTML4中無效
2.不同的瀏覽器對音訊格式的支援也不同。
3.如果瀏覽器不支援該檔案格式，沒有外掛的話就無法播放該音訊。
4.如果使用者的計算機未安裝外掛，無法播放音訊。
5.如果把該檔案轉換為其他格式，仍然無法在所有瀏覽器中播放
<embed height='50' width='300' src='horse.mp3'>
複製程式碼- 使用object
1.不同的瀏覽器對音訊格式的支援也不同。
2.如果瀏覽器不支援該檔案格式，沒有外掛的話就無法播放該音訊。
3.如果使用者的計算機未安裝外掛，無法播放音訊。
4.如果把該檔案轉換為其他格式，仍然無法在所有瀏覽器中播放
<object height='50' width='300' data='horse.mp3'></object>
複製程式碼- 使用Audio
1. <audio> 標籤來描述 MP3 檔案(Internet Explorer、Chrome 以及 Safari 中是有效的),
2. 同樣新增了一個 OGG 型別檔案(Firefox 和 Opera瀏覽器中有效).如果失敗，它會顯示一個錯誤文字資訊:
<audio controls>
<source src='horse.mp3' type='audio/mp3'>
<source src='horse.ogg' type='audio/ogg'>
Your browser does not support this audio format
</audio>
複製程式碼- 相容性解決辦法
1.html5 audio 會先嚐試以mp3 ogg 來播放音樂，如果失敗，將使用<embed>
<audio controls width='100' height='100'>
<source src='horse.mp3' type='audio/mpeg'>
<source src='horse.mp3 type=''audio/ogg'>
<embed height='50' width='100' src='horse.mp3'>
</audio>
複製程式碼- 使用超連結
1.如果網頁只指向媒體檔案，大多數瀏覽器會使用輔助應用程式來播放檔案
<a href='horse.mp3'> click play the sound<a>
複製程式碼HMTL 視訊（videos）
1.可以使用 embed object video 標籤
<video controls width='320' height='240'>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.ogg' type='video/ogg'>
<source src='movie.webm' type='video/webm'>
<object data='movie.mp4' width='320' height='240'>
<object src='movie.swf' width='320' height='240'>
</video>
2.ogg：帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
3.mp4：帶有 H.264 視訊編碼和 AAC 音訊編碼的 mp4 檔案
4.webm：帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 webm 檔案
複製程式碼