目錄
## 一、瀏覽器及內核(渲染引擎)
- 主流瀏覽器
```
safari 蘋果瀏覽器 webkit
chrome 谷歌瀏覽器 webkit --> blink
opera 歐朋 presto --> webkit --> blink
firefox 火狐 gecko
IE 微軟IE瀏覽器 trident
```
- 國內瀏覽器
```
QQ、360、UC、獵豹瀏覽器...
無自主研發內核，基本都是使用webkit、trident 內核改造
```
## 二、網頁組成
```
結構層 -- HTML
表現層 -- CSS
行爲層 -- Javascript
```
- W3C組織 ： 萬維網聯盟，制定web標準
- web標準（W3C標準）要求網頁三層結構應該相分離
## 三、HTML初識
### 1、HTML是什麼？
> HyperText Markup Language 超文本標記語言
- 超文本： 不僅可以承載文本、還可以承載圖片、動畫、音頻、視頻...
- 用來描述網頁的語言
- 不是編程語言，是標記語言
### 2、HTML基本語法
- 元素-標籤以及標籤之間的內容這個整體又稱之爲元素
### 3、HTML基本結構
```
<!DOCTYPE html> -告訴瀏覽器以html5的標準去解析網頁,網頁根標籤 ： 代表網頁開始和結束
```
```
<head> - 網頁頭部：通常放頁面的元信息
```
```
<meta charset="utf-8"> -設置網頁的編碼方式（字符集）
utf-8: 國際編碼（萬國碼）
gb2312 : 國標，簡體中文
gbk : 國標擴，簡體+繁體
```
```
<title> - 網頁標題
```
## 四、常用標籤
### 1、標籤分類
- 塊級標籤：
- 從上往下、獨佔一行
- 默認寬度佔滿父級,高度由內容撐開
- (佔滿父級表示 盒子實際內容的寬度 + 左右padding + 左右border + 左右的外邊距 = 父級寬度100% )
- 可以設置寬高,可以設置所有的盒模型屬性
- text-align:center 有效
```
hr 分割線
div 區塊、盒子
p 段落
h1-h6 標題
ol 有序列表 type="1/A/a/I/i"
ul 無序列表 type="desc/circle/square"
li 無序列表和有序列表的項目
dl 定義列表
dt 放名詞或術語
dd 放描述或者說明
form 表單域
```
- 行內標籤:
- 從左到右 、水平排列在一行
- 默認寬度和高度都是由內容撐開
- 不可以設置寬高
- 水平方向盒模型屬性（padding、border、margin）可以正常設置，垂直方向盒模型不能設置
- text-align:center 無效
```
span 無語義標籤，給一段文字中的指定文本設置特殊樣式
i 樣式斜體
em 斜體，並且強調
b 樣式加粗
strong 加粗並且強調
sub 下標
sup 上標
del 刪除文本
```
- 行內塊級標籤 （img、表單元素input/textarea/select）
- 從左到右 、多個行內塊級標籤水平排列在一行
- 可以設置寬高,可以設置所有的盒模型屬性
- text-align:center 無效
>居中
- 1、塊元素中的行內元素或者行內塊居中，給外部的這個塊元素設置text-align:center;
- 2、塊元素在父級元素中水平居中，給這個塊元素設置margin:0 auto;
### 2、 圖片
```
<img src="圖片路徑../ : 返回上一級目錄
../../: 返回上兩級目錄" alt="替換文本" >
```
### 3、鏈接 a 行內元素
```
本網站中的頁面跳轉
<a href="相對路徑/目標頁面的網址" target="_blank在新窗口中打開/_self : 默認值，當前窗口打開" title="提示文字"> 鏈接文本 </a>
```
```
錨點（錨記）鏈接 ：跳轉到當前頁面的指定位置
<h3 id="f1"> ... </h3>
<a href="#f1"> ... </a>
跳轉頁面同時指定位置：
<a href="./4、鏈接.html#floor2"> 跳轉到鏈接頁面的第2層</a>
```
## 五、列表
### 1、有序列表
```
'1 / A / a / I /i'ol和li屬於固定父子標籤，ol的直接子標籤只能是li
<ol type="A">
<li>張三</li>
<li>
<h3> ... </h3>
<p> ... </p>
</li>
</ol>
```
### 2、無序列表
```
'desc (實心圓點)/cricle(空心圓圈)/square(正方形)'
<ul type="circle">
<li>Tom</li>
<li>Jack</li>
<li>Rose</li>
</ul>
```
### 3、定義列表
```
一般用於解釋一些專有名詞或者術語說明
<dl>
<dt>放名詞或者術語</dt>
<dd>放解釋說明</dd>
</dl>
```
```
列表符換成圖像
list-style-type:none;//去掉圓點
list-style-image: url(images/icon.gif);
```
## 六、網頁特殊符號
```
空格
> 大於符號 >
< 小於符號 <
& &符本身 &
© 版權符 ©
® 註冊商標 ®
```
## 七、語義化
```
什麼是語義化？
用合理的標籤去格式化文檔內容,比如 標題用h標籤，段落用p標籤，重要圖片添加alt屬性添加替換文本
好處？
- 沒有css也能表現出良好的結構
- 具有良好的可讀性，有利於團隊開發維護
- 有利於用戶體驗
- 有利於搜索引擎優化
```
## 八、表格
### 1、表格相關標籤
- table 定義整個表格
- tr 定義一行
- td 定義表格的單元格（標準單元格）
- th 定義表頭單元格 （加粗居中）
- caption 定義表格標題
- thead 表格的頭
- tbody 表格的主體
- tfoot 表格的底部
> thead\tbody\tfoot 這些標籤可以增強表格的語義化，對佈局沒有影響
```
<table>
<caption>學生成績表</caption>
<tr>
<th>編號</th>
<th>姓名</th>
<th>分數</th>
</tr>
<tr>
<td>01</td>
<td>張三</td>
<td>90</td>
</tr>
</table>
```
### 2、表格相關屬性
```
<table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
...
</table>
```
- 1)、border 給表格整體添加邊框（表格和單元格都有邊框）
- 2)、border-collapse:collapse; 去除單元格之間的空白間距，並且把相鄰邊框合併成一個
- 3)、cellspacing="0" ：去掉單元格之間的空白間距
### 3、合併單元格
```
合併列（橫向合併）colspan = "2"
<td colspan="2"> ... </td>
```
```
合併行（縱向合併）rowspan = "2"
<td rowspan="2"> ... </td>
```
### 表格特點
- 不設置表格寬度時，實際寬度由內容撐開
- 如果給表格設置寬度width，表格的列寬會按照每一列當中內容最多的單元格的比例分配列寬，行高也是同理
- 也可以通過給單元格設置 width和height調整整行或整列的寬度和高度
```
<tr>
<td width="80">4444</td>
<td width="80">5</td>
<td width="140">6</td>
</tr>
<tr>
<td width="33.33%">4444</td>
<td width="33.33%">5</td>
<td width="33.33%">6</td>
</tr>
```
## 九、CSS
> Cascading Style Sheets 層疊樣式表
- 是用來規定網頁樣式的語言
### 1. css三種引入方式--行內/內嵌/link外部引入
```
行內樣式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
內嵌式 :
<head>
<style>
p{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">
```
```
- rel : 表示目標文件和當前文件的關係 stylesheet 表示樣式表
- href : 目標文件的相對路徑
- type : "text/css"標記文件類型爲 css
```
### 2. 選擇器 : 用來獲取要添加樣式的標籤，選擇器有很多類型（標籤名、id、class、*）
```
div,p{ ... }
#box{ ... }
.red{ ... }
*{
margin: 0;
padding: 0;
}
```
### 3、複合選擇器 （後代、子代、並集羣組、交集選擇器）
```
.box div{ /* 選擇.box標籤後代當中所有div標籤*/
}
.box>div{ /* 選擇.box標籤直接子代中所有div標籤 */
}
#box,.red,h3,#box p{ /*把以下幾個選擇器匹配的元素同時選中*/
#box
.red
h3
#box p
}
div.red{ ... } /*選擇標籤名爲div並且類名中包含red這個單詞的標籤，精準定位 */
```
## 十、文字相關屬性
### 1、 text系列
- text-align : left/right/center--文本對齊方式
- text-indent : 2em --首行縮進，em : 代表一個字的大小
- text-decoration ：none/underline/overline/lint-through--文字修飾
- color : 文本顏色
### 2、 font 系列
> 字體簡寫屬性，順序不能隨意更改
> 可以省略不需要設置的屬性, 至少保留font-size和font-family
- font 字體簡寫屬性
```
font: font-style font-weight font-size/line-height font-family;
font: italic bold 20px/2 "宋體";
至少要大小、字體
```
- font-size --字體大小
- font-weight 字體加粗
- 100-300 細
- 400-500 正常
- 600-900 加粗
- normal 正常
- bold 加粗
- font-style --字體風格
- normal 正常
- italic 斜體
- font-family --字體系列（族類）
- 可以設置一個字體或多個字體
- 多個字體用逗號分隔，瀏覽器會顯示第一個能夠識別的字體
```
font-family: Helvetica Neue,Helvetica,Arial,"宋體",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
```
- line-height 字體行高-由上間距、文本高度、下間距組成
- 取值可以爲具體的長度 30px
- 也可以爲font-size的倍數 比如2 代表font-size的兩倍
- 單行文本垂直居中可以設置line-height爲盒子的高度
### 3、其他
```
設置字符間距：英文字母、中文漢字
letter-spacing:10px; "1 2 3 a b c 漢 字"
設置單詞的間距
word-spacing:10px; "world hello ujiuye 漢字 "
```
```
鼠標變小手cursor:pointer
```
### 4、長度單位和顏色表示法
#### 單位
```
- 1）、px 像素
- 2）、em 相對單位，代表的是當前元素的font-size值
- 3）、% 百分比
- 4）、rem 1rem 等於頁面的根元素的font-size值，也就是html標籤的font-size
```
#### 顏色表示法
```
red --英文單詞
#000000 --十六進制
rgb(0-255,0-255,0-255) --rgb()模式
rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度
```
## 十一、HTML表單
> 表單是網站用來收集用戶信息的
### 1、表單域 form （塊級）: 表示用來規定表單的一片區域，裏面用來放各種表單元素
- 表單域屬性：
- action: 用來規定表單的提交地址(與後臺對接)
- method:用來規定表單的提交方式
- get : 默認提交方式, 會把表單數據以鍵值對形式，多組用&拼接在一起，通過地址欄進行傳遞，安全性不好，因爲地址欄可容納的數據大小有限制的，所以可能造成數據丟失
- post : 推薦使用的方法，安全性更好，理論上沒有大小限制
```
<form action="" method="" >
...
</form>
```
### 2、表單元素：(行內塊)
- ①input標籤（name後臺接收，要寫噢）
```
<input type="text" name="username"> 普通文本框
<input type="password" name="psd"> 密碼框
<input type="radio" name="gender" value="male">單選按鈕(name要設置相同才能互斥單選)
<input type="checkbox" name="hobby" value="coding">複選框
<input type="file" name="file"> 文件域
<input type="submit" value="註冊"> 提交按鈕
<input type="reset" value="清空表單"> 重置按鈕
<input type="button" value="普通按鈕"> 普通按鈕
<input type="image" src="圖片路徑"> 圖片提交按鈕，顯示圖標，變成小手
<input type="hidden" name="hid" value="傳數據"> 隱藏域,頁面不顯示但是可以攜帶數據
```
- ② 下拉列表
```
<select name="city">
<option value="aa">AA</option>
<option value="bb">BB</option>
<option value="cc">CC</option>
</select>
```
- ③ 文本域（多行文本）
```
<textarea name="des" cols="30" rows="20"
style="width:100px; height:200px;">
我就是文本域初始顯示的值
</textarea>
- cols ： 規定輸入文本列數
- rows ： 規定輸入文本的行數
```
### 3、表單元素屬性說明
1) type用來定義輸入框的不同類型
2) name屬性用來規定表單字段名，如果不設置這個輸入框的內容無法隨表單一起提交到後臺
- 多個單選按鈕想要有互斥效果，name屬性值必須相同
3) value用來給表單元素定義值
- 單選按鈕(radio)、複選框(checkbox)、下拉列表的選項(option)必須要設置value屬性，表示選項所代表的值
- 提交按鈕(submit)、重置按鈕(reset)、普通按鈕(button)設置value屬性表示修改按鈕上的文字
- 文本框(text)、密碼框(password)、隱藏域(hidden)，用value設置默認值
- 文件域flie和textarea不能設置value
4) maxlength="10" 用於規定輸入框允許輸入的最大字符個數
5) disabled="disabled" 設置表單元素爲禁用狀態, 不能編輯，也不能被提交
6) readonly="readonly" 設置表單元素爲只讀狀態, 不能編輯，可以被提交
7) checked="checked" 設置單選按鈕和複選框默認選中
8) selected="selected" 設置下拉列表的選項默認選中
9) size="2" 規定下拉表默認顯示項目的個數
```
type
name:字段名
value: 值
- 單選、複選、下拉列表選項必須設置，代表選項的值
- 設置按鈕的文字
- 文本框、密碼、隱藏域，用來設置默認值
- file、textarea 不能設置value
disabled="disabled" 禁用
readonly="readonly" 只讀
checked="checked" 單選、複選 默認選中
selected="selected" 下拉列表選項選中
maxlength="10" 最大字符個數
size="2" 設置下拉列表顯示的選項個數
```