? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?HTML和CSS
HTML
html:超文本標(biāo)記語言
注釋：<!--內(nèi)容-->
標(biāo)簽：分為單標(biāo)簽|自閉和標(biāo)簽
? 雙標(biāo)簽|閉合標(biāo)簽
? 塊標(biāo)簽：獨占一行|多行
可設(shè)置寬高屬性，可以嵌套其他塊元素，行內(nèi)元素，普通文本
? 行內(nèi)標(biāo)簽：：可以與其他元素一行顯示
只能嵌套其他行內(nèi)元素|文本
屬性：標(biāo)簽中添加屬性，屬性前添加空格隔開
屬性名="屬性值"，屬性值使用"|'號標(biāo)識
作用：完善標(biāo)簽
<!DOCTYPE HTML>:定義在html頁面的首行，告知html的版本
<meta charset="">:告知瀏覽器使用什么字符編碼格式進行解析
<title></title>:head中唯一一個能被用戶看到的內(nèi)容，意義為：html的標(biāo)題
<body></body>:標(biāo)簽對中定義的內(nèi)容是給用戶看的
常用標(biāo)簽：
a標(biāo)簽：超鏈接標(biāo)簽
特點：1、自帶下劃線，2、未訪問，字體為藍色，3、以訪問，字體為紫色
屬性： href：定義鏈接地址 地址可以為絕對地址和相對地址；
target:打開方式，_blank新頁面打開，_self本頁面打開
title：鼠標(biāo)懸停，顯示提示字
錨點鏈接：a標(biāo)簽的href屬性值為：#+定點id屬性的值
p標(biāo)簽：段落標(biāo)簽
特點：上下有留白，是個塊元 素
div標(biāo)簽：塊標(biāo)簽
屬性：align，對齊屬性（left，center，right）
span標(biāo)簽：便于為元素提供樣式
h1~h6標(biāo)簽：段落標(biāo)簽
br標(biāo)簽：換行
hl標(biāo)簽：水平線
img標(biāo)簽：圖像標(biāo)簽
屬性：src,圖像地址
? border：邊框
? title：鼠標(biāo)懸停，顯示的提示字
路徑：
進入某個路徑的內(nèi)部/
返回上層路徑../
列表：
無序列表：
<ul>
<li></li>
</ul>
屬性：
type：更換列表項的標(biāo)記
有序列表
<ol>
<li></li>
</ol>
表格：
table：定義表格
tr：定義行
th：定義表格頭單元格
td：定義表格單元格
屬性：
border：邊框
bordercolor：邊框顏色
bgcolor：背景顏色
align：對齊方式
width：寬
height：高
style="border-collapse:collapse":雙線變單線
表單
form
作用：收集用戶信息
表單元素：定義在form標(biāo)簽中的元素
大部分的表單元素使用input標(biāo)簽定義，type屬性不同的值代表不同的表單標(biāo)簽
屬性：
name定義表單的名字
action表單提交數(shù)據(jù)的位置
method：提交方式
get數(shù)據(jù)拼接在地址后面
post數(shù)據(jù)在請求頭中
enctype 存在文件上傳，表單的enctype屬性值修改為multipart/form-data
textarea：多行文本域
type:屬性值為：
text 普通文本框
password 密碼
radio 單選框
一組內(nèi)容，只能選其一，name屬性要一致
checkbox 多選框
file 上傳文件 修改enctype的值
value：默認(rèn)值
fieldset：文本域
下拉菜單：
<select name="" id="">
<option value="" selected></option>：定義下拉選項? selected默認(rèn)選中
</select>
placeholder：文框中提示字
hidden 隱藏框
submin 提交按鈕
button：按鈕，結(jié)合js使用
type屬性：
submin，提交 button，按鈕 reset，重置
常用屬性：
checked：單選框 默認(rèn)選中
selected：下拉菜默認(rèn)選中
autofocus：自動聚焦
placeholder：文框中提示字
required：必填屬性
readonly：只讀，不能修改
disabled：禁用，不能修改不能提交
CSS
作用：美化網(wǎng)頁
使用語法：
1、選擇器：選中元素
基礎(chǔ)選擇器：
元素選擇器：根據(jù)元素的標(biāo)簽名
屬性選擇器：
偽類選擇器:
偽元素選擇器：
2、css使用語法
選擇器{
樣式
}
3、使用方式
1）、行內(nèi)樣式表：
在行內(nèi)部使用，定義一個style屬性，屬性中定義樣式，作用只在當(dāng)前行
2）、內(nèi)部樣式表
在html文檔中head定義style標(biāo)簽對中，定義樣式
3）、外部樣式表
在html外部單獨定義一個css文件，在文件中定義樣式，那個html需使用，使用link調(diào)用
優(yōu)先級：離元素近
基礎(chǔ)選擇器:
元素選擇器: 根據(jù)元素的標(biāo)簽名選中一個或一組元素
.類選擇器: 根據(jù)元素的class屬性的值,選中一個或一組元素
一個html頁面中class屬性的值可重復(fù),可以有多個
#id選擇器: 頁面中id屬性值不能重復(fù),定義唯一的一個
*通配符 : 選中頁面中所有的元素
基礎(chǔ)選擇器優(yōu)先級: id>class>元素選擇器>通配符
后代選擇器: 父級選擇器 子集選擇器{樣式...}
某個元素的某些子元素
群組選擇器: 通過,連接多個選擇器,選中他們能夠匹配到的所有元素
常用樣式:
背景:
背景顏色 background-color
背景圖片 background-image
背景是否重復(fù) background-repeat
默認(rèn)平鋪
背景圖片的大小background-size
背景圖片的位置
background-position
復(fù)合屬性: background:顏色 圖片 重復(fù) 位置;
個數(shù),順序可以隨意改變
尺寸:
width
height
單位都是像素值
顏色:
背景顏色
字體顏色
顏色的英文單詞 :red..
顏色十六進制
顏色三原色 rgb
rgba a->透明度 0完全透明? 1完全不透明
opacity :元素的透明度
元素還是占文檔流中的位置
div
樣式：
文本水平對其方式 text-align: center
字體加粗font-weight: bolder
字體傾斜font-style: italic;
p
樣式：
首行縮進text-indent: 2em
a標(biāo)簽去除下劃線text-decoration: none
ul標(biāo)簽：去除樣式：list-style: none;
盒子模型
內(nèi)容+內(nèi)邊距+ 變框外邊距
能看到的元素的大小:內(nèi)容+內(nèi)邊距+ 變框
內(nèi)容:
寬高都是內(nèi)容的大小
內(nèi)邊距:
背景的樣式會默認(rèn)延伸到內(nèi)邊距上
設(shè)置值(內(nèi)邊距+外邊距的方式)
一個值: 四邊都是
兩個值: 上下? 左右
三個值: 上? 右? 下? 左邊與右邊一致
四個值: 上? 右? 下 左
padding-left|padding-right|padding-top|padding-bottom
變框:
變框三要素: 寬度? 樣式? 顏色;
元素四邊相同的樣式: border: 10px solid firebrick;
元素四邊不同的樣式: border-left:10px solid firebrick;
外邊距:
元素距離周圍其他元素的之間的距離
設(shè)置值的方式與內(nèi)邊距一樣
塊元素上下的外邊距會合并
盒子模型的使用:根據(jù)具體的需求分析:變框? 寬高? 變框和內(nèi)容之間(內(nèi)邊距) 變框和其他元素之間的距離(外邊距) 元素和元素之間的距離沒有變框|背景的情況(內(nèi)外邊距都可以)
