一、W3C --- web標(biāo)準(zhǔn)
W3C標(biāo)準(zhǔn) 即萬(wàn)維網(wǎng)聯(lián)盟標(biāo)準(zhǔn)。 在線教程
W3C 表針 對(duì) web 開(kāi)發(fā),進(jìn)行一系列的標(biāo)準(zhǔn)化定義
網(wǎng)頁(yè)的三層結(jié)構(gòu):html(結(jié)構(gòu))、css(表現(xiàn))、javaScript(行為)
符合 W3C 標(biāo)準(zhǔn)的頁(yè)面是什么樣的?
后續(xù)更新
二、HTML 基礎(chǔ)
1. HTML 是一門(mén) 超文本標(biāo)記語(yǔ)言,運(yùn)行在瀏覽器上,由瀏覽器解析
全拼:HyperText Markup Language
.htm
.html
都是靜態(tài)網(wǎng)頁(yè)文件的擴(kuò)展名
推薦使用 html 后綴名
htm 是歷史遺留的 8.3 文件格式,DOS 操作系統(tǒng)只能支持長(zhǎng)度為三位的后綴名
HTML 是一種標(biāo)記語(yǔ)言,而不是一種編程語(yǔ)言
HTML 是使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言
web瀏覽器來(lái)讀取HTML文件,并將其作為網(wǎng)頁(yè)顯示
2. HTML 結(jié)構(gòu)
- 一個(gè)簡(jiǎn)單的 html 文檔
<html>
<head>
<title>文檔的標(biāo)題</title>
</head>
<body>
文檔的內(nèi)容... ...
</body>
</html>
- html5 文檔
<!DOCTYPE html> 聲明文檔類(lèi)型
<html> 頁(yè)面根元素
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
(1) <!DOCTYPE html>
標(biāo)簽 聲明是 html5 文檔類(lèi)型
<!DOCTYPE html>
聲明為 HTML5 文檔,html5只有一種聲明方式HTML4 有三種聲明格式( 不再使用 )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
(2) <html></html>
標(biāo)簽 根元素
(3) <head></head>
標(biāo)簽 定義文檔的頭部,是所有頭部元素的容器
- 下面這些標(biāo)簽可用在 head 部分:
<base>, <link>, <meta>, <script>, <style>, <title>
(4) <body></body>
標(biāo)簽 定義文檔的主體
(5) <title></title>
標(biāo)題 雙標(biāo)簽,是 <head></head>
標(biāo)簽中唯一必須的元素
在 HTML / XHTML 文檔中是必須的
定義了瀏覽器工具欄的標(biāo)題、
默認(rèn)顯示在收藏夾中的標(biāo)題、
搜索引擎結(jié)果頁(yè)的標(biāo)題(搜索引擎)
(6) <meta>
head中 單標(biāo)簽 描述了元數(shù)據(jù) 參考資料
-
元數(shù)據(jù)不會(huì)顯示在頁(yè)面,但會(huì)被瀏覽器解析,作用如下:
為搜索引擎定義關(guān)鍵詞
為網(wǎng)頁(yè)定義描述內(nèi)容
定義網(wǎng)頁(yè)作者
每30秒中刷新當(dāng)前頁(yè)面
<meta name="keywords" content="搜索引擎定義關(guān)鍵詞">
<meta name="description" content="網(wǎng)頁(yè) 描述內(nèi)容">
<meta name="author" content="組這名字">
<meta http-equiv="refresh" content="30">
(7) <base>
head中 單標(biāo)簽 為頁(yè)面上的所有鏈接 規(guī)定默認(rèn)地址、打開(kāi)方式
<a>、<img>、<link>、<form>
標(biāo)簽中的 URL 不再生效屬性
href=""
頁(yè)面所有鏈接的跳轉(zhuǎn)地址屬性
target=""
打開(kāi)時(shí)方式:_self
默認(rèn)本網(wǎng)頁(yè)中打開(kāi);_blank
默認(rèn)新網(wǎng)頁(yè)中打開(kāi)
(8) <link>
單標(biāo)簽 引入外部資源 ( 引入css樣式、引入瀏覽器工具欄圖標(biāo))
屬性
href=“ ”
外部資源地址-
屬性
rel=“ ”
規(guī)定當(dāng)前文檔 與 被連接文檔間的對(duì)應(yīng)關(guān)系- 值
stylesheet
:表示引入css樣式 - 值
shortcut icon
: 表示引入圖標(biāo) - 值 有多個(gè)
- 值
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="shortcut icon" > // 路徑必須使用絕對(duì)路徑
(9) <style></style>
雙標(biāo)簽 引入外部css樣式、包含css樣式
屬性
type="text/scc"
定義內(nèi)容為 css 類(lèi)型h5 屬性
scoped="scoped"
樣式僅僅應(yīng)用到 style 元素的父元素及其子元素引入外部樣式 不推薦
<style src="mystyle.css"></style>
; 需使用<link>
引入
(10) <script></script>
雙標(biāo)簽 引入外部腳本、包含腳本代碼;新增異步屬性
屬性
src=""
規(guī)定外部腳本文件的 URL, 該屬性 具有跨域請(qǐng)求能力屬性 type = "text/javascript" 默認(rèn)屬性,可忽略
-
異步屬性:--- 僅適用于外部腳本
屬性
async
或async="async"
被立即下載、解析、執(zhí)行(異步完成,與頁(yè)面渲染同時(shí)進(jìn)行);若置于頂端引入外部js腳本,有可能出現(xiàn)解析不到元素報(bào)錯(cuò)的情況屬性
defer
或defer="defer"
腳本被立即下載(異步完成,與頁(yè)面渲染同時(shí)進(jìn)行),但 解析、執(zhí)行 是等到整個(gè)頁(yè)面全部解析完成 再解析、執(zhí)行不添加 異步屬性:瀏覽器解析到
script
標(biāo)簽時(shí)會(huì)停止其他元素的渲染,只是下載、解析、執(zhí)行 js 完成后,在繼續(xù)解析渲染頁(yè)面
三、元素 類(lèi)型
1. 塊級(jí)元素 (block element)
- 塊級(jí)元素 獨(dú)占一行
- 塊級(jí)元素 可設(shè)置寬高
- 可容納塊級(jí)元素、行內(nèi)元素...
- div 、 p 、 h1 、 ul 、 li 、 table 系列、 form 表單
2. 行內(nèi)元素(內(nèi)聯(lián)元素) (inline element)
- 塊級(jí)元素 一行可多個(gè)行內(nèi)、行內(nèi)塊元素
- 塊級(jí)元素 不可設(shè)置寬高;但可以設(shè)置:
margin左右
、padding左右
- 只能容納 行內(nèi)元素/行內(nèi)塊...
- a 、 span 、 img 、 input 、 select 、textarea、 b、 p、i 、 sub、 sup
3. 塊級(jí)元素、行內(nèi)元素的 的重要區(qū)別:
塊級(jí)元素單行顯示;可設(shè)置寬高;
行內(nèi)元素一行顯示;不可設(shè)置寬高;但可設(shè)置
margin左右
、padding左右
、line-height
4. 行內(nèi)塊 元素
行內(nèi)塊元素:行內(nèi)元素轉(zhuǎn)化的一種類(lèi)別
-
特性:
- 行內(nèi)塊:可設(shè)置寬高
- 行內(nèi)塊:一行可現(xiàn)實(shí)多個(gè)
-
vertical-align
對(duì)齊屬性:- 默認(rèn) 以父元素的基線對(duì)齊;
-
middle
值:在父元素的中部; -
top
值:以行中最高元素的頂端對(duì)齊; -
bottom
值:以行中最低元素的頂端對(duì)齊;
5. 行內(nèi)元素、行內(nèi)塊元素( 都屬于 內(nèi)聯(lián)元素 ) 及 存在間隙的bug
-
內(nèi)聯(lián)元素 存在間隙原因:
- 元素之間有空格 或 回車(chē)等
-
解決方案:
- margin-right: -4px;
- float: left;
- 外層容器 font-size: 0px; 行內(nèi)塊 再單獨(dú)設(shè)置 font-size;
四、常用標(biāo)簽
1. a 標(biāo)簽
-
屬性:
href=" "
頁(yè)面跳轉(zhuǎn)的地址-
target=""
-
target="_self"
在本窗口中打開(kāi),【默認(rèn)】 -
target="_blank"
在新窗口中打開(kāi)
-
download="filename"
該屬性也可以設(shè)置一個(gè)值來(lái)規(guī)定下載文件的名稱(chēng)
-
a 標(biāo)簽優(yōu)化:
- head 中寫(xiě)
<base target=”_blank”>
決定了 頁(yè)面中所有a標(biāo)簽鏈接 在新窗口中打開(kāi)
- head 中寫(xiě)
-
錨點(diǎn)鏈接
- 設(shè)置錨點(diǎn):
id = “”
- 鏈接到錨點(diǎn)
<a href = "#id值"></a>
- 空連接
<a href = "#"></a>
默認(rèn)的錨是#top 也就是網(wǎng)頁(yè)的最上端
- 設(shè)置錨點(diǎn):
-
下載壓縮包等資源文件
<a href="a.zip">下載</a>
<a href="a.rar">下載</a>
-
阻止 a 標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn) 的 4種方式:
<a href="javascript:void(0);" onclick= "myjs( )">
void是一個(gè)操作符,void(0)返回undefined,地址不發(fā)生跳轉(zhuǎn) 、頁(yè)面不會(huì)移動(dòng)<a href="#">
頁(yè)面不跳轉(zhuǎn),但頁(yè)面會(huì)移動(dòng)到頂端a 標(biāo)簽 被點(diǎn)擊執(zhí)行的函數(shù)中
return false
e.preventDefault()
阻止 與 事件關(guān)聯(lián)的默認(rèn)動(dòng)作,IE 不支持,兼容代碼如下:
<body>
<a id="test"> Click Me </a>
</body>
<script>
var test = document.getElementById('test');
function stopDefault(e) {
if (e && e.preventDefault)
e.preventDefault();
else {
window.event.returnValue = false;
}
}
test.onclick = function(e) {
stopDefault(e);
}
</script>
2. img 標(biāo)簽
-
必需屬性:
-
src=""
圖片路徑: 絕對(duì)路徑 / 相對(duì)路徑 -
alt=""
替換文本,圖片不顯示的時(shí)候顯示文字
-
-
屬性:
width="" height=""
設(shè)置圖片的寬高- 只設(shè)置一個(gè)則成比例放大縮小
- 兩個(gè)都設(shè)置圖片會(huì)變形
-
屬性:
align=""
圖像被環(huán)繞的方式- left / right 多行文字環(huán)繞 圖片
- top / bottom / middle 單行文字環(huán)繞 圖片
- 但實(shí)現(xiàn) 文本環(huán)繞圖片 的常見(jiàn)形式: 給圖片設(shè)置
float: left
3. ul ol dl 等 列表標(biāo)簽
去除每一項(xiàng)的序號(hào) 或圓點(diǎn),設(shè)置:
list-style: none
-
無(wú)序列表: ul li
- ul 的
type
屬性: -
disc
默認(rèn)值 實(shí)心小圓圈 -
circle
空心小圓圈 -
square
小方塊
- ul 的
-
有序列表: ol li
- ol 的
type
屬性: -
1
默認(rèn)值 1、2、3 -
a
: a 、 b 、 c -
A
: A 、 B 、 C -
i
: i 、 ii 、 iii -
I
: I 、 II 、 III
- ol 的
無(wú)序列表:dl dt dd
4. table 系列標(biāo)簽
-
table
thead
-
tbody
-
tr
行-
th
列(表頭) -
td
列
-
-
基本結(jié)構(gòu)如下:
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>愛(ài)好</th>
</tr>
</thead>
<tbody>
<tr>
<td>張新</td>
<td>18</td>
<td>帥</td>
</tr>
</tbody>
</table>
-
table
標(biāo)簽上的屬性 (屬性值 為 number 類(lèi)型,不帶單位)cellspacing=" "
單元格 與 單元格 之間的距離,默認(rèn)值為 2cellpadding=" "
表格中內(nèi)容距邊框的距離width=" "
表格寬height=" "
表格高border=" "
表格邊框的寬度align="center / left / right"
整個(gè)表格的水平對(duì)齊方式
-
th / td
標(biāo)簽上的屬性 (屬性值 為 number 類(lèi)型,表示合并幾個(gè)單元格)colspan=" "
水平方向上 合并單元格rowspan=" "
垂直方向上 合并單元格align="center / left / right"
每個(gè)單元格中內(nèi)容 水平對(duì)齊方式
- 創(chuàng)建一個(gè)紅色邊框 1px 寬的表格(制作假邊框:用邊框間距離 當(dāng)做邊框的寬度)
- 表格 邊框 寬度設(shè)為0
- 邊框間距離為 1px
- 整體table的 背景顏色 定位 紅色
- 每個(gè)單元格原色 定位 白色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style media="screen">
table {
width: 200px;
height: 100px;
background-color: red;
}
th, td {
background-color: #fff;
}
</style>
</head>
<body>
<table cellspacing="1" border="0">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>愛(ài)好</th>
</tr>
</thead>
<tbody>
<tr>
<td >張新</td>
<td>18</td>
<td>帥</td>
</tr>
</tbody>
</table>
</body>
</html>
5. 易忽略標(biāo)簽匯總
<h1></h1> 標(biāo)題標(biāo)簽 --- 利于搜索引擎
- 搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引
- h1 用作主標(biāo)題(最重要的),其后是 h2(次重要的),再其次是 h3,以此類(lèi)推
<font size="6"></font> 一號(hào)標(biāo)題 對(duì)應(yīng) 6號(hào)字體,依次類(lèi)推
<br> 換行
<hr> 定義水平線
<q>引用文本</q> 它的語(yǔ)義:引用別人的話, 不單單是加了雙引號(hào)
空格(分號(hào)不能少)
<pre></pre> 保留原格式(對(duì)空行和空格進(jìn)行控制)
<b></b> <strong></strong> 加粗
<i></i> <em></em> 斜體
<del></del> <s></s> 刪除文本標(biāo)簽
<ins></ins> <u></u> 下劃線
<sub></sub> 上標(biāo)
<sup></sup> 下標(biāo)
<small></small> 縮小
<code></code> 電腦自動(dòng)輸出
五、表單控件
1. 表單構(gòu)成:表單域、提示信息、表單控件
2. 表單標(biāo)簽 <form> </form>
- 屬性:
-
action="url"
規(guī)定提交表單 向何處發(fā)送數(shù)據(jù) -
method="get / post 等值"
規(guī)定用于發(fā)送 form-data 的 HTTP 方法 -
name=" "
表單的名稱(chēng)
-
3. 文本輸入框 <input type="text">
- 屬性:
-
type=" "
根據(jù)不用的type
值,輸入字段有很多種形式 -
name=" "
輸入內(nèi)容的鍵名 -
value=" "
默認(rèn)內(nèi)容值 -
autocomplete="on / off"
是否啟動(dòng)自動(dòng)記憶補(bǔ)全功能,瀏覽器基于之前鍵入過(guò)的值 -
required
必填的表單項(xiàng) -
readonly
輸入框,只讀模式 -
disabled
未激活 -
autofocus
自動(dòng)獲取光標(biāo)焦點(diǎn) -
placeholder=" "
占位符的值,僅適用于 input 標(biāo)簽;此屬性?xún)H適用于:屬性適用于以下的type
類(lèi)型:text, search, url, telephone, email 以及 password。設(shè)置占位符內(nèi)容的樣式,如下:
-
<style>
input::placeholder {
color: green;
}
</style>
4. 密碼輸入框 <input type="password">
- 文本輸入框的所有屬性值,對(duì)于密碼輸入框都有效
5. 單選框 <input type="radio">
圓形選項(xiàng)
-
屬性:
-
type="radio"
單選框?qū)傩?/li> -
checked
或checked="checked"
默認(rèn)選中項(xiàng) -
name=" "
單選框名稱(chēng) -
required
必填的表單項(xiàng)
-
要想保證單選效果,
name
屬性值 必須相同
6. 多選框 <input type="checkbox">
方形選項(xiàng)
-
屬性:
-
type="checkbox"
多選框?qū)傩?/li> -
checked
或checked="checked"
默認(rèn)選中項(xiàng) -
name=" "
多選框名稱(chēng) -
required
必填的表單項(xiàng)
-
name
屬性設(shè)置同樣的值,也不能單選
7. 提交按鈕 <input type="submit">
8. 下拉列表 <select> <option> tab1 </option></select>
<select> </select>
標(biāo)簽可創(chuàng)建:?jiǎn)芜x 或 多選下拉框-
select
標(biāo)簽屬性:-
name=" "
下拉列表的名稱(chēng) -
multiple
下拉列表可多選 size=" "
-
disabled
規(guī)定禁用該下拉列表 -
required
必填項(xiàng)
-
-
option
標(biāo)簽屬性:-
selected
選中項(xiàng) (不設(shè)置該屬性,默認(rèn)選中第一個(gè)) -
value=" "
定義送往服務(wù)器的選項(xiàng)值
-
- 下拉列表分組顯示:
<select> <optgroup> <option> <option> </optgroup> </select>
<select>
<optgroup label="北京市">
<option value="33">1</option>
<option value="22">2</option>
<option value="11">3</option>
</optgroup>
<optgroup label="天津市">
<option value="33">4</option>
<option value="22">5</option>
<option value="11">6</option>
</optgroup>
</select>
-
optgroup
標(biāo)簽屬性-
label
分組選項(xiàng)組名
-
9. 文本域 <textarea> </textarea>
- 屬性:
-
rows=" "
輸入的行數(shù) ;值為 number -
cols=" "
輸入的字符數(shù) ;值為 number ; 字符數(shù)可理解為:以阿拉伯?dāng)?shù)字個(gè)數(shù)為準(zhǔn)
-
10. 文件上傳控件 <input type="file">
11. 隱藏域 <input type="hidden" value="">
收集 或 發(fā)送信息
- 隱藏域的作用:
-
value=" "
屬性 存儲(chǔ)數(shù)據(jù),可在提交表單時(shí)一起發(fā)送給服務(wù)器
-
12. <label></label>
標(biāo)簽,被點(diǎn)擊時(shí) 出發(fā)相應(yīng)表單控件
- label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果;但 在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件
- 屬性:
for=" "
關(guān)聯(lián) 表單控件的id=" "
屬性
13. 完整的表單提交代碼【待實(shí)現(xiàn)】
六、常用的全局屬性(含h5)
1. title=" "
顯示提示信息
- 鼠標(biāo)移動(dòng)到元素上時(shí),會(huì)顯示一段提示文本(
title
屬性值)
2. class=" "
規(guī)定標(biāo)簽類(lèi)名
3. style=" "
規(guī)定行內(nèi)樣式
4. id=" "
規(guī)定元素id,作為唯一標(biāo)識(shí)
5. data-屬性名 = " "
(h5)自定義屬性,用于 存儲(chǔ)數(shù)據(jù)
屬性名:其中不應(yīng)該含大寫(xiě)字母
數(shù)據(jù)存儲(chǔ)在標(biāo)簽DOM對(duì)象的
dataset
數(shù)據(jù)集中;訪問(wèn)數(shù)據(jù)DOM.dataset.屬性名
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11</title>
</head>
<body>
<button type="button" data-id="888">按鈕</button>
</body>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function (e) {
console.log(e.target.dataset.id); // '888'
});
</script>
</html>
6. draggable="true / false / auto"
(h5)元素是否可以被拖動(dòng), 默認(rèn)值 auto
使用瀏覽器默認(rèn)行為
- 拖拽示例:
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動(dòng)的段落。請(qǐng)把該段落拖入上面的矩形。</p>
</body>
<script type="text/javascript">
function allowDrop(e) {
// 阻止默認(rèn)事件
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e) {
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
</script>
</html>
七、路徑
相對(duì)路徑:相對(duì)當(dāng)前文件所在位置的路徑
"./":代表目前所在的目錄。
"../":代表上一層目錄。
以"/"開(kāi)頭:代表根目錄。
絕對(duì)路徑
盤(pán)符路徑:
c:/apache/cgi-bin 下的
不建議使用服務(wù)器路徑:以http開(kāi)頭的鏈接
根目錄
- 是相對(duì)子目錄來(lái)說(shuō)的,在文件系統(tǒng)建立時(shí)即已被創(chuàng)建
- 打開(kāi)“我的電腦”,雙擊C盤(pán)就進(jìn)入C盤(pán)的根目錄,雙擊D盤(pán)就進(jìn)入D盤(pán)的根目錄;其它類(lèi)推。
八、link
標(biāo)簽引入 瀏覽器工具欄圖標(biāo);制作 .ico
格式的圖標(biāo)
關(guān)于網(wǎng)站圖標(biāo)favicon.ico
favicon.ico 制作工具
-
圖標(biāo)大小
- 三種尺寸:16 × 16、32 × 32、48 × 48
- 32*32 最佳,再大了某些瀏覽器會(huì)不顯示
引入方式
<link rel="shortcut icon" >