HTML
1.
html中的lang="en"屬性:
a.語言是英文language=english
b.告訴搜索引擎爬蟲，我們的網站是關於什麼內容的
en是關於英文內容
zh是關於中文
2.
SEO--搜索引擎技術
3.標籤：
p標籤：
pragraph--段落
h1-h6標籤：標題標籤
獨成一行；更改字體大小；加粗
strong標籤：加粗標籤；em標籤：斜體字體
del標籤：中劃線標籤，商品打折的原價
address標籤：地址標籤 成段展示 + 斜體（<p><em></em></p>）
div標籤：分塊
span標籤：
空格：文本分隔符（並不是真正的一個空格）
html編碼格式： (空格) <(<) >(>)
回車：<br>換行
有序列表：<ol type="1" reversed="reversed" start="2"><li></li></ol>
type: 1 a A I(大寫羅馬數字) i(小寫羅馬數字)
reversed="reversed" 逆序排序
start="2" 從第幾個開始排
無序列表：<ul type="disc"><li></li></ul>
type: disc(默認實心圓) square(方塊) circle(空心圓)
img標籤：圖片標籤 單標籤
src:圖片地址(網上的url;本地的相對路徑;本地絕對路徑)
alt：圖片佔位符(圖片加載不出來時顯示的文字)
title:圖片提示符(鼠標放上去時提示的文字)
a(anchor--錨)標籤：超鏈接
a.超鏈接 href="www.baidu.com"
b.錨點 href="#id"
c.打電話 href="tel:15617698485"(移動端)
href="mailto:[email protected]"發郵件
d.協議限定符：href="javascript:"
href：鏈接地址 #id(類似回到頂點)
form(表單)標籤：發送數據
<form method="get/post" action="">
<input type="text" />(輸入框)
<input type="password" />(密碼框)
<input type="submit" />(提交按鈕)
<input type="radio" />(單選框)
</form>
select標籤：下拉菜單
<select name="">
<option></option>
<option></option>
<option></option>
</select>
CSS
1.主流瀏覽器及其內核：
瀏覽器：shell + 內核
IE trident
Firefox Gecko
Google Chrome Webkit/blink
Safari Webkit
Opera presto
2.註釋
<!-- -->
3.html + css + javascript (結構 + 樣式 + 行爲相分離)
4.引入css
a.行間樣式
<div style="width:100px;height:100px;"></div>
b.頁面級css
寫在head標籤中間<style></style>
c.外部css文件：單獨的css文件
在需要的html文件中用link引入：
<link rel="stylesheet" type="text/css" href="./index.css">
5.css選擇器
選擇器的優先級順序：(css權重---256進制)
!import Infinity(正無窮)
行間樣式 1000
id選擇器 100
class選擇器|屬性|僞類 10
標籤|僞元素 1
通配符 0
!import > 行間樣式 > id > class | 屬性選擇器 > 標籤選擇器 > 通配符
a.id選擇器
#id名字
<div id="demo"></div>
<style type="text/css">
#demo{
}
</style>
b.class選擇器
.class名
<div class="demo demo2"></div>
<style type="text/css">
.demo{
}
</style>
c.標籤選擇器
標籤名稱(作用於所有的這個標籤)
<div class="demo demo2"></div>
<style type="text/css">
div{
}
</style>
d.通配符
*(選中所有的標籤)
<style type="text/css">
*{
}
</style>
f.屬性選擇器
<div class="demo demo2"></div>
<div class="demo demo3"></div>
<style type="text/css">
[class]{(有該class名稱的標籤都能選擇到)
}
</style>
<div id="demo">
<em>123</em>
<strong>
<em>456</em>
</strong>
</div>
1).父子選擇器/派生選擇器:
div em{
//同時選擇到123 456
}
div strong em{
//選擇到456
}
or
.demo stong em{
//選擇到456
}
2).直接子元素選擇器:
div > em{
//div下的直接子元素(只能選擇到123)
}
3).並列選擇器:
<div class="demo">123</div>
<span class="demo">456</span>
123背景顏色變色，如何解決？
div.demo{
//class=‘demo’的div被選擇
//解決上面一個問題
}
4).分組選擇器：(,分開)
em,
strong{//同時作用於em元素和strong元素
background-color: red;
}
5).僞類選擇器：
<a href="www.baidu.com">百度一下</a>
a:hover{
//鼠標移入時所顯示的樣式
}
or
[href]:hover{
//鼠標移入時所顯示的樣式
}
6).僞元素選擇器：
<span>123</span>
span::before{
}
選擇器權重計算問題：
<div id="idDiv" class="classDiv">
<p id="idP" class="classP"></p>
</div>
<style type="text/css">
#idDiv p{//權重相加 100 + 1(101)
background-color: red;
}
.classDiv .classP{//權重相加 10 + 10(20)
background-color: green;
}
</style>
問p標籤的背景顏色是什麼？red? green?
：對應選擇器權重相加最大的應用樣式，因此red
<style type="text/css">
#idDiv p#idP{//權重相加 100 + 1 + 100 (201)
background-color: red;
}
</style>
6.瀏覽器面對父子選擇器的css查找順序，從左往右？從右往左?：
從右往左找--快
div ul li p span{
//先找span--p--li--ul--div
}
7.顏色表示方法：
a.純英文單詞
b.顏色代碼
# + 6位16進制
c.顏色函數
rgb(0-255,0-255,0-255)
8.border:
利用四條邊畫三角(width,height都爲0)
9.屬性：
text-align:left;//文本對其方式
line-height = height;垂直居中
text-indent:2em;//首行縮進
單位：絕對單位/相對單位
px：一個像素只能表示一種顏色；一英寸垂直能放的像素點數表示分辨率
em:1em = 1 * font-size;
text-decoration:none;//文本中的劃線樣式
cursor:;//光標所表示樣式
z-index:1/2/3;//層面上越靠近你自己（誰覆蓋誰；只作用於position）
10.行級元素/塊級元素
inline inline-block --> 都叫文本類元素
具有文本的屬性
決定元素的屬性:
display:inline/block/inline-block;
行級元素 內聯 inline:內容決定元素所佔位置；不可以通過css改變寬高
span strong a em del
塊級元素 block：獨佔一行；可以通過css改變寬高
div p ul li ol form
行級塊元素 inline-block：內容決定大小；可以改寬高
img
凡是帶有inline的元素，都有文字特性
解決圖片中間有空格問題：（下面四張圖片中間存在空格問題）
<img src="this.jpg">
<img src="this.jpg">
<img src="this.jpg">
<img src="this.jpg">
這樣解決：
<img src="this.jpg"><img src="this.jpg"><img src="this.jpg"><img src="this.jpg">
11.（編程思想）可以先定義功能，後寫html
12.標籤選擇器爲了設置默認值（自定義標籤樣式/設置剛出生的樣式）主要並不是爲了選中該元素
13.盒子模型
14.定位：
position:absolute;//絕對定位(系統內部會將該元素改爲inline-block)
配合left;top;使用
特點：
a.脫離原來位置進行定位（相當於在不同的層位置）
b.相對於最近的有定位的父級進行定位（都沒有的話相對於文檔進行定位）
position:relative;//相對定位
配合left;top;使用
特點：
a.保留原來位置進行定位（但是也是不通層位置）
b.相對於自己出生的位置進行定位
position:fixed;//固定定位
總結：
relative用作參照物，absolute用來真正的定位
15.margin塌陷 + margin
bfc：block format context（每個盒子都有固定的渲染方式；bfc可以改變該盒子的bfc(渲染方式)）
如何觸發一個盒子的bfc：
a.postion:absolute;//絕對定位
b.display:inline-block;//行級塊元素
c.float:left/right;//浮動
d.overflow:hidden;//溢出部分隱藏
父子嵌套垂直方向的margin重合（取最大的）--margin塌陷
解決方式：觸發bfc
兄弟結構垂直方向的margin是合併的---margin合併
可以通過觸發bfc解決，但是實際上我們不解決（沒有意義）
16.浮動模型
float:left/right;(系統內部會將該元素改爲inline-block)
浮動元素產生了浮動流；
所有產生浮動流的元素，塊級元素看不到他，產生了bfc的元素和文本類屬性(inline)的元素以及文本都能看到浮動元素
clear:left/right/both;//清除浮動流(塊級元素這個屬性才能生效)
浮動最原始的用法：報紙排版（文字環繞圖片）
17.單行文本溢出顯示...
white-space: nowrap;//禁止文字超出容器換行
over-flow: hidden;//溢出隱藏
text-overflow:ellipsis;//顯示...
18.多行文本溢出顯示...
不依靠技術實現，手寫...
19.圖片替換文本
a.
text-indent:;//縮進整個容器的寬
over-flow:hidden;//溢出隱藏
whit-overflow:nowrap;//不換行
b.
padding-left:;//整個容器的寬
over-flow:hidden;//溢出隱藏
20.特殊點：
行級元素只能嵌套行級元素
塊級元素可以嵌套所有元素
特殊規定：p---塊級元素 div---塊級元素
p下不能套div（塊級元素）
a標籤不能套a標籤
多練習纔是王道！！！