HTML 與 CSS
主要內(nèi)容
HTML
? HTML（HyperText Markup Language）就是超文本標(biāo)記語言方淤。"超文本"就是表示頁面內(nèi)可以包含非文字元素，如：圖片贮喧、鏈接、音樂等等。
? 它是一種建立網(wǎng)頁文件的語言讼稚，通過標(biāo)記式的指令（Tag），將影像绕沈、聲音乱灵、圖片、文字等鏈接顯示出來七冲。這種標(biāo)記性語言是因特網(wǎng)上網(wǎng)頁的主要語言。
? HTML 網(wǎng)頁文件可以使用記事本规婆、寫字板澜躺、HBuilder蝉稳、Sublime 等編輯工具來編寫，以 .htm 或 .html 為文件后綴名保存掘鄙。將 HTML 網(wǎng)頁文件用瀏覽器打開顯示耘戚，若測(cè)試沒有問題則可以放到服務(wù)器（Server）上，對(duì)外發(fā)布信息操漠。
基礎(chǔ)語法
標(biāo)簽
? HTML 標(biāo)記是由"<"和">"所括住的指令標(biāo)記收津，用于向?yàn)g覽器發(fā)送標(biāo)記指令。
? 主要分為：單標(biāo)記指令浊伙、雙標(biāo)記指令（由"<起始標(biāo)記>"＋內(nèi)容＋"</結(jié)束標(biāo)記>"構(gòu)成）撞秋。
? HTML語言使用標(biāo)志對(duì)的方法編寫文件，既簡單又方便嚣鄙。它通常使用"<標(biāo)志名>內(nèi)容</標(biāo)志名>"來表示標(biāo)志的開始和結(jié)束吻贿，因此在HTML文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。
? 為了便于理解哑子，將HTML標(biāo)記語言大致分為：基本標(biāo)記舅列、格式標(biāo)記、文本標(biāo)記卧蜓、圖像標(biāo)記帐要、表格標(biāo)記、鏈接標(biāo)記弥奸、表單標(biāo)記和幀標(biāo)記等榨惠。
單標(biāo)簽
單標(biāo)簽,不設(shè)置屬性值。
如：
<br/>其爵、<hr/>
單標(biāo)簽屬性
單標(biāo)簽(也叫空元素)冒冬，設(shè)置屬性值。如：
<hr width="800" />
雙標(biāo)簽
雙標(biāo)簽摩渺，不設(shè)置屬性值简烤。如：
<title>…</title>
雙標(biāo)簽屬性
雙標(biāo)簽，設(shè)置屬性值摇幻。如：
<body bgcolor="red">…</body>
<font size="7">…</font>
整體結(jié)構(gòu)
? HTML的內(nèi)容都是由一對(duì)一對(duì)的標(biāo)簽組成横侦，標(biāo)簽不能混亂，頁面有頁面的整體架構(gòu)和規(guī)則绰姻，標(biāo)簽和標(biāo)簽之間有需要正確嵌套枉侧。
? 通常一個(gè)HTML網(wǎng)頁文件包含3個(gè)部分：標(biāo)記頭區(qū)<HEAD>......</HEAD>、內(nèi)容區(qū)<BODY>......</BODY>和網(wǎng)頁區(qū)<HTML>......</HTML>狂芋。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML文檔的基本結(jié)構(gòu)</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>
html
? <html>標(biāo)志用于HTML文檔的最前邊榨馁，用來標(biāo)識(shí)HTML文檔的開始。而</html>標(biāo)志放在HTML文檔的最后邊帜矾，用來標(biāo)識(shí)HTML文檔的結(jié)束翼虫，兩個(gè)標(biāo)志必須一塊使用屑柔。
head
? <head>和</head>構(gòu)成HTML文檔的開頭部分。<head>和</head>標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來的珍剑，兩個(gè)標(biāo)志必須一塊使用掸宛。
? 在此標(biāo)志對(duì)之間可以使用<title></title>、<script></script>招拙、<meta>唧瘾、<link>等標(biāo)簽。
? <meta>：用來提供關(guān)于文檔的信息别凤，起始屬性為：charset="utf8"饰序。表示告訴瀏覽器頁面采用的什么編碼，一般來說我們就用 utf8闻妓。當(dāng)然菌羽，文件保存的時(shí)候也是utf8，而瀏覽器也設(shè)置 utf8 即可正確顯示中文由缆。
? <link>：用來引入css文件
? <script>：用來引入js文件或編寫js代碼注祖。
title
? <title>定義文檔的標(biāo)題。瀏覽器會(huì)以特殊的方式來使用標(biāo)題均唉，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上是晨。同樣，當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)舔箭，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱罩缴。
? 注意：<title>標(biāo)簽位于<head>標(biāo)簽內(nèi)，是<head>標(biāo)簽中唯一要求包含的東西层扶。
body
? 一般情況下大部分瀏覽器上顯示的內(nèi)容箫章，都放在body中。但也不排除其他標(biāo)簽可以不用body镜会，比如frameset框架集標(biāo)簽檬寂。
? <body>和</body>是HTML文檔的主體部分，在此標(biāo)志對(duì)之間可包含<div></div>戳表、<a>桶至、<p>…</p>、<h1>…</h1>匾旭、
等眾多的標(biāo)志镣屹。它們所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來价涝。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| bgcolor | #xxxxxx：十六進(jìn)制的數(shù)字女蜈，00-ff colorname：Red、Green... rgb(x,x,x)：red、green伪窖、blue吏廉，x:0-255 |
規(guī)定文檔的背景顏色，以后可以用樣式取代它 |
| text | rgb(x,x,x) #xxxxxx colorname | 規(guī)定文檔中所有文本的顏色惰许，以后可以用樣式取代它 |
DOCTYPE
? Document Type HyperText Mark-up Language，文檔中超文本標(biāo)記語言的類型史辙，可告知瀏覽器怎么解析該文檔汹买。
? 由于使用的場(chǎng)景或者版本的更替間，HTML使用的標(biāo)準(zhǔn)不同聊倔，所以需要瀏覽器按照不同的標(biāo)準(zhǔn)來解析HTML文本內(nèi)容晦毙，這就需要告知瀏覽器我當(dāng)前的HTML頁面是按照那種方式進(jìn)行編寫的。沒有該聲明耙蔑，將是你HTML噩夢(mèng)的開始见妒。
常用標(biāo)簽
? HTML頁面是由標(biāo)簽組成，不同的標(biāo)簽瀏覽器對(duì)其進(jìn)行不同樣式和內(nèi)容的渲染 甸陌，我們需要記憶常用的標(biāo)簽即可须揣。大致可分為如下幾類：標(biāo)題、水平線钱豁、段落耻卡、換行、圖片牲尺、表格卵酪、超鏈接、列表谤碳、表單溃卡、下拉列表、div 和 span等蜒简。
標(biāo)題和水平線
標(biāo)題
? <h1> - <h6> 標(biāo)簽可定義標(biāo)題瘸羡，標(biāo)題依次遞減，由于 h 元素?fù)碛写_切的語義臭蚁，因此請(qǐng)慎重地選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)來構(gòu)建文檔的結(jié)構(gòu)最铁。請(qǐng)不要利用標(biāo)題標(biāo)簽來改變同一行中的字體大小。相反垮兑，我們應(yīng)當(dāng)使用層疊樣式表定義來達(dá)到漂亮的顯示效果冷尉。
? <h999>這樣的標(biāo)簽不產(chǎn)生錯(cuò)誤，但是不具有標(biāo)題的效果系枪。
? h1標(biāo)簽可以為搜索引擎獲取雀哨，便于頁面在被搜索的時(shí)候檢索到，但是一個(gè)頁面最好只有一個(gè)h1標(biāo)簽，否則可能進(jìn)入搜索引擎的黑名單雾棺。
<h1></h1>
水平線
? <hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分膊夹。在 HTML 中，
標(biāo)簽沒有結(jié)束標(biāo)簽捌浩。
<hr />
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | CenterLeftright | 規(guī)定 hr 元素的對(duì)齊方式放刨，以后可以用樣式取代它 |
| size | pixels | 規(guī)定 hr 元素的高度（厚度），后可以用樣式取代它 |
| width | Pixels% | 規(guī)定 hr 元素的寬度尸饺，后可以用樣式取代它 |
段落和換行
段落
? <p>標(biāo)簽定義段落进统。p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間浪听，您也可以在樣式表中規(guī)定螟碎。
? 理解：語文課本中各個(gè)段落之間會(huì)有大的空隙。
<p></p>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left迹栓、right掉分、center、justify | 規(guī)定段落中文本的對(duì)齊方式克伊，以后可以用樣式取代它 |
換行
? br標(biāo)簽為換行符號(hào)酥郭，<br> 標(biāo)簽是空標(biāo)簽（意味著它沒有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：<br></br>）答毫。
? 注意：<br> 標(biāo)簽只是簡單地開始新的一行褥民，而當(dāng)瀏覽器遇到 <p> 標(biāo)簽時(shí)，通常會(huì)在相鄰的段落之間插入一些垂直的間距洗搂。請(qǐng)使用 <br> 來輸入空行消返，而不是分割段落。
<br/>
列表
無序列表
由<ul></ul>和<li></li>標(biāo)簽組成耘拇。
<ul>
<li></li>
<li></li>
......
</ul>
<ul>
<li>好好學(xué)習(xí)</li>
<li>天天向上</li>
</ul>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| type | disc circle square |
規(guī)定列表的項(xiàng)目符號(hào)類型撵颊。可以使用樣式取代惫叛。 dise：實(shí)心圓（默認(rèn)） circle：空心圓 square：方塊 |
有序列表
? 由<ol></ol>和<li></li>標(biāo)簽組成倡勇。
<ol>
<li></li>
<li></li>
......
</ol>
<ol>
<li>好好學(xué)習(xí)</li>
<li>天天向上</li>
</ol>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| type | 1 a A i I |
規(guī)定在列表中使用的標(biāo)記類型。 1：用數(shù)字形式表示序號(hào)（默認(rèn)） a：用小寫字母表示序號(hào) A：用大寫字母表示序號(hào) i：用小寫羅馬數(shù)字表示序號(hào) I（大寫i）：用大寫羅馬數(shù)字表示序號(hào) |
div和span
div
? <div>是一個(gè)塊級(jí)元素嘉涌，通常與css配合使用妻熊，用于布局。
? <div> 標(biāo)簽可以把文檔分割為獨(dú)立的仑最、不同的部分扔役。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)警医。
? <div> 是一個(gè)塊級(jí)元素亿胸。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行坯钦。實(shí)際上，換行是 <div> 固有的唯一格式表現(xiàn)侈玄⊥竦叮可以通過 <div> 的 class 或 id 應(yīng)用額外的樣式。
<div>content</div>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left序仙、right突颊、center | 規(guī)定div元素中的內(nèi)容的對(duì)齊方式，以后可以用樣式取代它 |
span
? <span>標(biāo)簽被用來組合文檔中的行內(nèi)元素 潘悼，span 沒有固定的格式表現(xiàn)洋丐。當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺上的變化 挥等。
<span>content</span>
格式化標(biāo)簽
font
? 規(guī)定文本的字體、字體尺寸堤尾、字體顏色
pre
? 定義預(yù)格式化的文本肝劲。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體
文本標(biāo)簽
**<b>**（粗文本）郭宝、**<i>**（斜體文本）辞槐、**<u>**（下劃線文本）、
? < del >（中劃線文本）粘室、（下標(biāo)文本）榄檬、（上標(biāo)文本）
a標(biāo)簽
? <a>標(biāo)簽定義超鏈接，用于從一張頁面鏈接到另一張頁面衔统。
? <a>元素最重要的屬性是 href 屬性鹿榜，它指示要鏈接的目標(biāo)位置，同時(shí)沒有href屬性a標(biāo)簽內(nèi)的內(nèi)容與普通文本沒有區(qū)別锦爵，也就失去了超鏈接的功能舱殿。
? 若是想要跳轉(zhuǎn)到當(dāng)前頁面，那么href的值為#险掀。被鏈接頁面通常顯示在當(dāng)前瀏覽器窗口中沪袭，除非您規(guī)定了另一個(gè)目標(biāo)（target 屬性）。
<a >百度</a>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| href | URL | 連接所要跳轉(zhuǎn)的位置樟氢，可能是其他或當(dāng)前頁面冈绊。 |
| target | _blank _parent self top Framename作為錨點(diǎn)的a標(biāo)簽的name值 |
規(guī)定在何處打開鏈接文檔。 _blank：開啟新頁面顯示頁面埠啃； _self：當(dāng)前頁面顯示跳轉(zhuǎn)到頁面死宣，默認(rèn)值。 _top：用于有frameset布局的頁面霸妹，想要覆蓋整個(gè)頁面顯示十电。 Framename：這里framename與上邊的值不同，具體以為frame起了什么樣的名字為準(zhǔn)，該值指示要連接的頁面跳轉(zhuǎn)后將在相應(yīng)名稱的框架中顯示鹃骂。 |
錨點(diǎn)的實(shí)現(xiàn)
? 利用a標(biāo)簽的name屬性：
<a name="top"></a>
? 一般標(biāo)簽的id屬性：div id=""台盯、a id="" 等：
<div id="top"></div>、<a id="top"></a>
? 錨點(diǎn)定位
<a href="#top">返回首部</a>
圖片
? img 元素向網(wǎng)頁中嵌入一幅圖像畏线。
? 注意：從技術(shù)上講静盅，<img> 標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像寝殴。<img> 標(biāo)簽創(chuàng)建的是被引用圖像的占位空間蒿叠。
<img src="" alt="" >
必須屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 規(guī)定圖像的替代文本，一般在圖片無法正常顯示占位的文字蚣常。 |
| src | URL | 規(guī)定顯示圖像的 URL市咽。 |
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | top、bottom抵蚊、middle施绎、left、right | 規(guī)定如何根據(jù)周圍的文本來排列圖像 |
| border | pixels | 定義圖像周圍的邊框 |
| height | pixels贞绳、% | 定義圖像的高度谷醉。 |
| width | pixels、% | 定義圖像的寬度冈闭。 |
| title | 文本 | 當(dāng)鼠標(biāo)在圖片上時(shí)顯示的文字 |
表格
? <table></table> 標(biāo)簽定義 HTML表格俱尼。
? <tr></tr>標(biāo)簽定義表格的行。tr元素包含一個(gè)或多個(gè)th或td元素
? <td></td>標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格萎攒。
? <th></th>定義表格內(nèi)的表頭單元格遇八。th元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本胜蛉，而 td 元素內(nèi)的文本通常是左對(duì)齊的普通文本洲脂。
? 簡單的HTML表格由table元素以及一個(gè)或多個(gè)tr岩齿、th豹爹、或td元素組成佃乘。
? 理解：table相當(dāng)于一個(gè)表格的外框忘苛，tr為行浦徊，td為一個(gè)一個(gè)單元格媒楼，th為有標(biāo)題作用的單元格园匹，th中的內(nèi)容同時(shí)有加粗的效果雳刺。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right、center裸违、left | 表格對(duì)齊方式 |
| border | px | 規(guī)定表格邊框的寬度 |
| width | % 掖桦、px | 規(guī)定表格的寬度 |
tr常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right、left供汛、center | 定義表格行的內(nèi)容對(duì)齊方式枪汪。 |
| bgcolor | rgb(x,x,x)涌穆、#xxxxxx、colorname | 規(guī)定表格行的背景顏色雀久，以后可以用樣式取代它 |
| valign | top宿稀、middle、bottom | 規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式赖捌，以后可以用樣式取代它 |
? <td>的colspan和rowspan分別規(guī)定單元格橫跨的列數(shù)和行數(shù)
表單
form
? <form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單祝沸。
? 表單能夠包含 input 元素，比如文本字段越庇、復(fù)選框罩锐、單選框、提交按鈕等等卤唉。還可以包含 textarea等元素涩惑。
? 表單用于向服務(wù)器傳輸數(shù)據(jù)。form 元素是塊級(jí)元素桑驱，其前后會(huì)產(chǎn)生折行境氢。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| action | URL | 規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù) |
| method | get、post | 規(guī)定用于發(fā)送 form-data 的 HTTP 方法 |
| name | Form_name | 規(guī)定表單的名稱 |
| target | _blank _self _ parent _top framename | 規(guī)定在何處打開 action URL |
? method：表單提交方式：get碰纬、post
? get：默認(rèn)，主動(dòng)的獲取方式问芬，數(shù)據(jù)放在url上悦析，數(shù)據(jù)的容量有限，安全性差此衅，有緩存
? post：數(shù)據(jù)放在請(qǐng)求實(shí)體中强戴，數(shù)據(jù)量理論上沒有限制，相對(duì)安全挡鞍，沒有緩存
input
? <input> 標(biāo)簽用于搜集用戶信息骑歹。
? 根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式墨微。輸入字段可以是文本字段道媚、復(fù)選框、單選按鈕翘县、按鈕等等最域。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 定義圖像輸入的替代文本。 |
| checked | checked | 規(guī)定此 input 元素首次加載時(shí)應(yīng)當(dāng)被選中锈麸。 |
| disabled | disabled | 當(dāng) input 元素加載時(shí)禁用此元素镀脂。 |
| readonly | readonly | 規(guī)定輸入字段為只讀。 |
| maxlength | number | 規(guī)定輸入字段中的字符的最大長度忘伞。 |
| value | value | 規(guī)定 input 元素的值薄翅。 |
| type | button checkbox file hidden image password radio reset submit text |
規(guī)定 input 元素的類型沙兰。按鈕復(fù)選框文件隱藏域圖像形按鈕密碼單選框重置按鈕提交按鈕文本 |
若上傳文件，請(qǐng)求方式為post翘魄，且表單添加一個(gè)屬性:enctype="multipart/form-data"
注意：
? 1. 沒有name屬性的屬性是無法提交到后臺(tái)的６μ臁！Ｊ焱琛训措！
? 2. Radio單選按鈕以name相同為一組。
? 3. Checkbox復(fù)選按鈕以name相同為一組光羞。
textarea
? 該標(biāo)簽定義多行的文本輸入控件绩鸣。文本區(qū)中可容納無限數(shù)量的文本，可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸纱兑。cols規(guī)定文本區(qū)內(nèi)的可見寬度呀闻。rows規(guī)定文本區(qū)內(nèi)的可見行數(shù)。
<textarea>content</textarea>
label
? <label> 標(biāo)簽為input 元素定義標(biāo)注（標(biāo)記）潜慎。
? label元素不會(huì)呈現(xiàn)任何的特殊效果捡多。
? label標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同，此時(shí)點(diǎn)擊label標(biāo)簽會(huì)自動(dòng)為元素聚焦
<label for="username">用戶名：</label>
<input type="text" id="username" name="username"/>
button
<button>按鈕</button>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該按鈕铐炫。 |
| type | button垒手、submit、reset | 規(guī)定按鈕的類型倒信。 |
| value | text | 規(guī)定按鈕的初始值科贬。 |
| name | button_name | 規(guī)定按鈕的名稱。 |
select
? <select>用于定義下拉列表
<select name="color" >
<option value="red">紅色</option>
<option value="green">綠色</option>
<option value="blue">藍(lán)色</option>
</select>
select常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉框鳖悠。 |
| multiple | multiple | 規(guī)定可選擇多個(gè)選項(xiàng)榜掌。 |
| name | name | 規(guī)定下拉列表的名稱。 |
| size | number | 規(guī)定下拉列表中可見選項(xiàng)的數(shù)目乘综。 |
option常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉框憎账。 |
| selected | selected | 規(guī)定選項(xiàng)（在首次顯示在列表中時(shí)）表現(xiàn)為選中狀態(tài)。 |
| value | text | 定義送往服務(wù)器的選項(xiàng)值卡辰。 |
?
常用字符實(shí)體
? 在 HTML 中胞皱，某些字符是預(yù)留的。
? 在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>）九妈，這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽朴恳。
? 如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）允蚣。
? 實(shí)體名稱對(duì)大小寫敏感于颖！
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-kTJzeofy-1606890041388)(/1579341520148.png)]
標(biāo)簽的分類
? HTML中標(biāo)簽元素三種不同類型：塊狀元素，行內(nèi)元素嚷兔，行內(nèi)塊狀元素森渐。
塊級(jí)元素
? 元素都從新的一行開始做入，并且其后的元素也另起一行；元素的高度同衣、寬度竟块、行高以及頂和底邊距都可設(shè)置；元素寬度在不設(shè)置的情況下耐齐，是它本身父容器的100%（和父元素的寬度一致）浪秘，除非設(shè)定一個(gè)寬度。
行內(nèi)元素
? 和其他元素都在一行上埠况；元素的高度耸携、寬度及頂部和底部邊距不可設(shè)置；元素的寬度就是它包含的文字或圖片的寬度辕翰，不可改變夺衍。
行內(nèi)塊狀元素
? 和其他元素都在一行上；元素的高度喜命、寬度沟沙、行高以及頂和底邊距都可設(shè)置。
CSS
? CSS（英文全稱：Cascading Style Sheets）層疊樣式表, 是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言壁榕。
? CSS目前最新版本為CSS3矛紫，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言牌里，CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制颊咬，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力二庵，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言缓呛。CSS能夠根據(jù)不同使用者的理解能力催享，簡化或者優(yōu)化寫法，針對(duì)各類人群哟绊，有較強(qiáng)的易讀性因妙。
? CSS是用來美化網(wǎng)頁用的，沒有網(wǎng)頁則CSS毫無用處票髓，所以CSS需要依賴HTML展示其功能 攀涵。
? [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-T1bfz3JL-1606890041392)(/圖片1.png)]
CSS的基本使用
CSS基本語法
? CSS 樣式由選擇器和一條或多條以分號(hào)隔開的樣式聲明組成。每條聲明的樣式包含著一個(gè) CSS屬性和屬性值洽沟。 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-u2ZMZ9D7-1606890041399)(/QQ截圖20200205160701.png)]
選擇器名 {
屬性 : 屬性值;
......
}
div {
background-color : red;
}
注意：
- css聲明要以分號(hào);結(jié)束以故，聲明以{}括起來
- 建議一行書寫一個(gè)屬性
- 若值為若干單詞，則要給值加引號(hào)裆操，如 font-family: "agency fb";
注釋
多行注釋：
/* 這里的內(nèi)容就是注釋 */
CSS的使用
1. 行內(nèi)式
? 行內(nèi)樣式將樣式定義在具體html元素的style屬性中怒详。以行內(nèi)式寫的CSS耦合度高炉媒，只適用于當(dāng)前元素，在設(shè)定某個(gè)元素的樣式時(shí)比較常用昆烁。
<p style="color:red;font-size:50px;">這是一段文本</p>
在當(dāng)前元素使用 style 屬性的聲明方式吊骤。
? style 是行內(nèi)樣式屬性；
? color 是顏色屬性静尼；red 是顏色屬性值白粉；
? font-size是字體大小屬性；50px 是字體大小屬性值
2. 嵌入式
? 嵌入式通過在html頁面內(nèi)容開辟一段屬于css的代碼區(qū)域鼠渺，通常做法為在< head>標(biāo)簽中嵌套<style>標(biāo)簽鸭巴，在<style>中通過選擇器的方式調(diào)用指定的元素并設(shè)置相關(guān) CSS。
<style type="text/css">p {color: blue;font-size: 40px;}</style>
3. 引入外聯(lián)樣式文件
? 在實(shí)際開發(fā)當(dāng)中系冗，很多時(shí)候都使用引入外聯(lián)樣式文件奕扣，這種形式可以使html頁面更加清晰，而且可以達(dá)到更好的重用效果掌敬。
style.css
p {color: green;font-size: 30px;}
test.html
<link rel="stylesheet" type="text/css" href="style.css">
? rel:rel 屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系惯豆。
? stylesheet:文檔的外部樣式表。
? 很多時(shí)候奔害，大量的 HTML 頁面使用了同一個(gè)CSS楷兽。那么就可以將這些 CSS 樣式保存在一個(gè)單獨(dú)的.css 文件中，然后通過<link>元素去引入它华临。
? 注意：當(dāng)有多重樣式時(shí)芯杀，記住前提規(guī)則，越精確越優(yōu)先雅潭。
CSS選擇器
? 在 CSS 中揭厚，選擇器是一種模式，用于選擇需要添加樣式的元素扶供。
? CSS選擇器有很多筛圆，掌握常用的即可；
基本選擇器
通用選擇器
選擇所有 <font color="red">*</font>
* {
......
}
* {
color: orange;
}
元素選擇器
選擇指定標(biāo)簽
元素名稱 {
......
}
p {
color: red;
font-size: 20px;
}
ID選擇器
選擇設(shè)置過指定id屬性值的元素 <font color="red">#</font>
#id屬性值 {
......
}
#p1 {
font-weight: bold;
}
類選擇器
選擇設(shè)置過指定class屬性值的元素 <font color="red">.</font>
.class屬性值 {
......
}
.hidden {
display: none;
}
分組選擇器
? 當(dāng)幾個(gè)元素樣式屬性一樣時(shí)椿浓，可以共同調(diào)用一個(gè)聲明太援，元素之間用逗號(hào)分隔
選擇器1,選擇器2,... {
......
}
h2 , #pre1 {
color: orange;
font-style: italic;
}
? CSS樣式的優(yōu)先級(jí)，是根據(jù)選擇器的精確度/權(quán)重來決定的扳碍，常見的權(quán)重如下提岔，權(quán)重越大，優(yōu)先級(jí)越高
? 元素選擇器：1
? 類選擇器：10
? id選擇器：100
? 內(nèi)聯(lián)樣式：1000
組合選擇器
? CSS組合選擇器說明了兩個(gè)選擇器直接的關(guān)系笋敞。 CSS組合選擇符包括各種簡單選擇符的組合方式碱蒙。
? 在 CSS 中包含了四種組合方式: 后代選取器(以空格分隔)，子元素選擇器(以大于號(hào)分隔）夯巷，相鄰兄弟選擇器（以加號(hào)分隔）振亮，普通兄弟選擇器（以波浪線分隔）巧还。
后代選擇器（派生選擇器）
? 用于選擇指定標(biāo)簽元素下的后輩元素，以空格分隔
選擇器1 選擇器2 {
......
}
.food li {
border: 1px solid red;
}
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
子元素選擇器
? 用于選擇指定標(biāo)簽元素的所有第一代子元素坊秸，以大于號(hào)分隔
選擇器1 + 選擇器2 {
......
}
#d + div {
border: 1px solid red;
}
html代碼同上
相鄰兄弟選擇器
? 可選擇緊接在另一元素后的元素麸祷，且二者有相同父元素。以加號(hào)分隔
選擇器1 + 選擇器2 {
......
}
#d + div {
border: 1px solid red;
}
<div id="d">
相鄰兄弟選擇器1
<ul>
<li>開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
</ul>
</div>
<div>
相鄰兄弟選擇器2
</div>
普通兄弟選擇器
? 選擇緊接在另一個(gè)元素后的所有元素褒搔，而且二者有相同的父元素阶牍，以波浪線分隔
選擇器1 ~ 選擇器2 {
......
}
li ~ li {
background-color : yellow;
}
<div>
普通兄弟選擇器1
<ul>
<li>開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
<li>沈騰</li>
<li>王寧</li>
</ul>
</div>
CSS常用屬性設(shè)置
背景
? CSS 背景屬性用于定義HTML元素的背景效果
background-color
? 設(shè)置元素的背景顏色
body {
background-color:#ff0000;
}
background-image
? 設(shè)置元素的背景圖像，默認(rèn)情況下星瘾，背景圖像進(jìn)行平鋪重復(fù)顯示走孽，以覆蓋整個(gè)元素實(shí)體。
body {
background-image:url('paper.gif');
}
background-repeat
? 設(shè)置是否及如何重復(fù)背景圖像
body {
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
}
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wWoGAyCC-1606890041406)(/QQ截圖20200205171029.png)]
文本
color
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
text-align
? 設(shè)置文本對(duì)齊方式琳状，center（居中）磕瓷，left（左對(duì)齊），right（右對(duì)齊）
body {
text-align:center;
}
h1 {
text-align:right;
}
h2 {
text-align:right;
}
text-decoration
? 規(guī)定添加到文本的修飾念逞，屬性值：none困食、underline、overline翎承、line-through
1）underline
? 對(duì)文本添加下劃線硕盹，與HTML的u元素相同。
2）overline
? 對(duì)文本添加上劃線叨咖。
3）line-through
? 對(duì)文本添加中劃線瘩例，與HTML中的s和 strike 元素相同。
4）none
? 關(guān)閉原本應(yīng)用到元素上的所有裝飾甸各。
h3 {
text-decoration:underline;
}
text-indent
? 設(shè)置文本首行縮進(jìn)
p.ident2 {
text-indent: 2em;
}
? em一個(gè)相對(duì)值垛贤，例如頁面的文本大小為17px,則2em就為17px*2
字體
font-family
? 文本字體，該屬性設(shè)置文本的字體趣倾。
? font-family屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制聘惦，如果瀏覽器不支持第一種字體，他將嘗試下一種字體誊酌，所以盡量將不常見的字體靠前部凑，將最常見的字體放置在最后露乏，作為替補(bǔ)碧浊。
注意：
? 1）只有當(dāng)字體名中含有空格或#、$之類的符號(hào)時(shí)（如 New York）瘟仿，才需要在font-family聲明中加引號(hào)：
body {
font-family: "arial black";
}
? 2）多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明
/* 靠前的字體先生效 */
p{
font-family: 微軟雅黑,黑體,"agency fb";
}
font-size
? 文本大小
body {
font-size: 50px; /*字體大小50px*/
}
#span1 {
font-size: 25px; /*字體大小25px*/
}
font-style
? 字體風(fēng)格箱锐，該屬性最常用于規(guī)定斜體文本。 屬性值：normal劳较、italic驹止、oblique
? 1）normal：文本正常顯示浩聋；
? 2）italic：文本斜體顯示；
? 3）oblique：文本傾斜顯示臊恋，oblique是將文字強(qiáng)制傾斜衣洁。
? 說明：一般情況下，字體有粗體抖仅、斜體坊夫、下劃線、刪除線等諸多屬性撤卢，但是不是所有字體都具有這些屬性环凿，一些不常用字體可能只有正常體，若使用italic屬性則沒有效果放吩，所以需要oblique屬性強(qiáng)制傾斜智听。
font-weight
? 字體加粗，該屬性設(shè)置文本的粗細(xì)渡紫。
? bold：可以將文本設(shè)置為粗體到推。
? 100 ~ 900：為字體指定了 9 級(jí)加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別腻惠，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別环肘。
? 100 對(duì)應(yīng)最細(xì)的字體變形；
? 900 對(duì)應(yīng)最粗的字體變形集灌；
? 400 等價(jià)于 normal悔雹；
? 700 等價(jià)于 bold。
對(duì)齊方式
text-align
? 規(guī)定元素中的文本的水平對(duì)齊方式欣喧。屬性值如下：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DueOLrbp-1606890041410)(/QQ%E6%88%AA%E5%9B%BE20200205180655.png)]
注意：
? 值 justify 可以使文本的兩端都對(duì)齊腌零。在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上唆阿。然后益涧，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等驯鳖。對(duì)最后一行不生效闲询。
display屬性
? display 屬性規(guī)定元素應(yīng)該生成的框的類型。這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型浅辙。[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-tCti0P8D-1606890041414)(/QQ%E6%88%AA%E5%9B%BE20200205181007.png)]
浮動(dòng)
? float的屬性值有none扭弧、left、right记舆。
只有橫向浮動(dòng)鸽捻，并沒有縱向浮動(dòng)。
會(huì)將元素的display屬性變更為block。
浮動(dòng)元素的后一個(gè)元素會(huì)圍繞著浮動(dòng)元素（典型運(yùn)用是文字圍繞圖片）
浮動(dòng)元素的前一個(gè)元素不會(huì)受到任何影響（如果你想讓兩個(gè)塊狀元素并排顯示御蒲，必須讓兩個(gè)塊狀元素都應(yīng)用float）衣赶。
盒子模型
? border、padding厚满、margin三個(gè)屬性構(gòu)成了盒子模型府瞄。 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-eokXYxqD-1606890041416)(/QQ截圖20200205174125.png)]
border
? 設(shè)置所有的邊框?qū)傩浴?/p>
? 1）可同時(shí)設(shè)置邊框的寬度、樣式碘箍、顏色
table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
? 2）使用border-width摘能、border-style、border-color單獨(dú)設(shè)置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
? 3）border-style的屬性
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-NBZDIqU6-1606890041419)(/QQ截圖20200205174509.png)]
? 4）border-collapse
? 設(shè)置是否將表格邊框折疊為單一邊框敲街。
? 屬性值：separate（默認(rèn)团搞，單元格邊框獨(dú)立）、collapse（單元格邊框合并）
table {
border-collapse : collapse;
}
padding
? 設(shè)置元素所有內(nèi)邊距的寬度多艇，或者設(shè)置各邊上內(nèi)邊距的寬度逻恐。
? 如果在表的內(nèi)容中控制文本到邊框的內(nèi)邊距，使用td和th元素的填充屬性：
td {
padding:15px;
}
? 單獨(dú)設(shè)置各邊的內(nèi)邊距：padding-top峻黍、padding-left复隆、padding-bottom、padding-right
? <font color="red">默認(rèn)按照上右下左的順序設(shè)定</font>
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
這個(gè)表格單元的每個(gè)邊擁有相等的內(nèi)邊距姆涩。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個(gè)表格單元的上和下內(nèi)邊距是0.5cm挽拂，左和右內(nèi)邊距是 2.5cm。
</td>
</tr>
</table>
? 注意：通過padding屬性設(shè)置元素內(nèi)邊距時(shí)骨饿，會(huì)使元素變形亏栈。若不想影響格式效果，可以用margin屬性設(shè)置元素外邊距宏赘。
margin
? 設(shè)置一個(gè)元素所有外邊距的寬度绒北，或者設(shè)置各邊上外邊距的寬度。
p.margin {
margin: 2px 4px 3px 4px;
}
? 單獨(dú)設(shè)置各邊的外邊距：margin-top察署、margin-left闷游、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
說明：
? auto：自動(dòng)贴汪，可以理解為居中的意思脐往。瀏覽器自動(dòng)計(jì)算外邊距熬甫。
? margin: auto auto：第一個(gè)auto表示上下外邊距自動(dòng)計(jì)算漆弄，第二個(gè)auto表示左右外邊距自動(dòng)計(jì)算。
? 但是上下外邊距在自動(dòng)計(jì)算時(shí)不會(huì)生效究反，而左右外邊距會(huì)生效聂喇，表現(xiàn)為居中狀態(tài)辖源，效果如下： [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9GWVl6PH-1606890041422)(/圖片3.png)]
? 若要設(shè)置為上下左右居中狀態(tài)，則要計(jì)算好自行設(shè)置上下的外邊距希太，效果如下： [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-a2Rt0CxL-1606890041425)(/圖片4.png)]
? 注意：此時(shí)使用margin-top不生效克饶。了解
d">默認(rèn)按照上右下左的順序設(shè)定</font>
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
這個(gè)表格單元的每個(gè)邊擁有相等的內(nèi)邊距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個(gè)表格單元的上和下內(nèi)邊距是0.5cm誊辉，左和右內(nèi)邊距是 2.5cm矾湃。
</td>
</tr>
</table>
? 注意：通過padding屬性設(shè)置元素內(nèi)邊距時(shí)，會(huì)使元素變形堕澄。若不想影響格式效果邀跃，可以用margin屬性設(shè)置元素外邊距。
margin
? 設(shè)置一個(gè)元素所有外邊距的寬度蛙紫，或者設(shè)置各邊上外邊距的寬度拍屑。
p.margin {
margin: 2px 4px 3px 4px;
}
? 單獨(dú)設(shè)置各邊的外邊距：margin-top、margin-left坑傅、margin-bottom僵驰、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
說明：
? auto：自動(dòng)，可以理解為居中的意思唁毒。瀏覽器自動(dòng)計(jì)算外邊距蒜茴。
? margin: auto auto：第一個(gè)auto表示上下外邊距自動(dòng)計(jì)算，第二個(gè)auto表示左右外邊距自動(dòng)計(jì)算浆西。
? 但是上下外邊距在自動(dòng)計(jì)算時(shí)不會(huì)生效粉私，而左右外邊距會(huì)生效，表現(xiàn)為居中狀態(tài)近零，效果如下： [外鏈圖片轉(zhuǎn)存中...(img-9GWVl6PH-1606890041422)]
? 若要設(shè)置為上下左右居中狀態(tài)诺核，則要計(jì)算好自行設(shè)置上下的外邊距，效果如下： [外鏈圖片轉(zhuǎn)存中...(img-a2Rt0CxL-1606890041425)]
? 注意：此時(shí)使用margin-top不生效久信。了解
HTML 與 CSS
主要內(nèi)容
HTML
? HTML（HyperText Markup Language）就是超文本標(biāo)記語言猪瞬。"超文本"就是表示頁面內(nèi)可以包含非文字元素，如：圖片入篮、鏈接陈瘦、音樂等等。
? 它是一種建立網(wǎng)頁文件的語言潮售，通過標(biāo)記式的指令（Tag）痊项，將影像、聲音酥诽、圖片鞍泉、文字等鏈接顯示出來。這種標(biāo)記性語言是因特網(wǎng)上網(wǎng)頁的主要語言肮帐。
? HTML 網(wǎng)頁文件可以使用記事本咖驮、寫字板边器、HBuilder、Sublime 等編輯工具來編寫托修，以 .htm 或 .html 為文件后綴名保存忘巧。將 HTML 網(wǎng)頁文件用瀏覽器打開顯示，若測(cè)試沒有問題則可以放到服務(wù)器（Server）上睦刃，對(duì)外發(fā)布信息砚嘴。
基礎(chǔ)語法
標(biāo)簽
? HTML 標(biāo)記是由"<"和">"所括住的指令標(biāo)記，用于向?yàn)g覽器發(fā)送標(biāo)記指令涩拙。
? 主要分為：單標(biāo)記指令际长、雙標(biāo)記指令（由"<起始標(biāo)記>"＋內(nèi)容＋"</結(jié)束標(biāo)記>"構(gòu)成）。
? HTML語言使用標(biāo)志對(duì)的方法編寫文件兴泥，既簡單又方便工育。它通常使用"<標(biāo)志名>內(nèi)容</標(biāo)志名>"來表示標(biāo)志的開始和結(jié)束，因此在HTML文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的搓彻。
? 為了便于理解翅娶，將HTML標(biāo)記語言大致分為：基本標(biāo)記、格式標(biāo)記好唯、文本標(biāo)記竭沫、圖像標(biāo)記、表格標(biāo)記骑篙、鏈接標(biāo)記蜕提、表單標(biāo)記和幀標(biāo)記等。
單標(biāo)簽
單標(biāo)簽,不設(shè)置屬性值靶端。
如：
<br/>谎势、<hr/>
單標(biāo)簽屬性
單標(biāo)簽(也叫空元素)，設(shè)置屬性值杨名。如：
<hr width="800" />
雙標(biāo)簽
雙標(biāo)簽脏榆，不設(shè)置屬性值。如：
<title>…</title>
雙標(biāo)簽屬性
雙標(biāo)簽台谍，設(shè)置屬性值须喂。如：
<body bgcolor="red">…</body>
<font size="7">…</font>
整體結(jié)構(gòu)
? HTML的內(nèi)容都是由一對(duì)一對(duì)的標(biāo)簽組成，標(biāo)簽不能混亂趁蕊，頁面有頁面的整體架構(gòu)和規(guī)則坞生，標(biāo)簽和標(biāo)簽之間有需要正確嵌套。
? 通常一個(gè)HTML網(wǎng)頁文件包含3個(gè)部分：標(biāo)記頭區(qū)<HEAD>......</HEAD>掷伙、內(nèi)容區(qū)<BODY>......</BODY>和網(wǎng)頁區(qū)<HTML>......</HTML>是己。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML文檔的基本結(jié)構(gòu)</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>
html
? <html>標(biāo)志用于HTML文檔的最前邊，用來標(biāo)識(shí)HTML文檔的開始任柜。而</html>標(biāo)志放在HTML文檔的最后邊卒废，用來標(biāo)識(shí)HTML文檔的結(jié)束沛厨，兩個(gè)標(biāo)志必須一塊使用。
head
? <head>和</head>構(gòu)成HTML文檔的開頭部分摔认。<head>和</head>標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來的逆皮，兩個(gè)標(biāo)志必須一塊使用。
? 在此標(biāo)志對(duì)之間可以使用<title></title>级野、<script></script>、<meta>粹胯、<link>等標(biāo)簽蓖柔。
? <meta>：用來提供關(guān)于文檔的信息，起始屬性為：charset="utf8"风纠。表示告訴瀏覽器頁面采用的什么編碼况鸣，一般來說我們就用 utf8。當(dāng)然竹观，文件保存的時(shí)候也是utf8镐捧，而瀏覽器也設(shè)置 utf8 即可正確顯示中文。
? <link>：用來引入css文件
? <script>：用來引入js文件或編寫js代碼臭增。
title
? <title>定義文檔的標(biāo)題懂酱。瀏覽器會(huì)以特殊的方式來使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上誊抛。同樣，當(dāng)把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時(shí)拗窃，標(biāo)題將成為該文檔鏈接的默認(rèn)名稱瞎领。
? 注意：<title>標(biāo)簽位于<head>標(biāo)簽內(nèi)，是<head>標(biāo)簽中唯一要求包含的東西随夸。
body
? 一般情況下大部分瀏覽器上顯示的內(nèi)容九默，都放在body中。但也不排除其他標(biāo)簽可以不用body宾毒，比如frameset框架集標(biāo)簽驼修。
? <body>和</body>是HTML文檔的主體部分，在此標(biāo)志對(duì)之間可包含<div></div>诈铛、<a>邪锌、<p>…</p>、<h1>…</h1>癌瘾、
等眾多的標(biāo)志觅丰。它們所定義的文本、圖像等將會(huì)在瀏覽器的框內(nèi)顯示出來妨退。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| bgcolor | #xxxxxx：十六進(jìn)制的數(shù)字妇萄，00-ff colorname：Red蜕企、Green... rgb(x,x,x)：red、green冠句、blue轻掩，x:0-255 |
規(guī)定文檔的背景顏色，以后可以用樣式取代它 |
| text | rgb(x,x,x) #xxxxxx colorname | 規(guī)定文檔中所有文本的顏色懦底，以后可以用樣式取代它 |
DOCTYPE
? Document Type HyperText Mark-up Language唇牧，文檔中超文本標(biāo)記語言的類型，可告知瀏覽器怎么解析該文檔聚唐。
? 由于使用的場(chǎng)景或者版本的更替間丐重，HTML使用的標(biāo)準(zhǔn)不同，所以需要瀏覽器按照不同的標(biāo)準(zhǔn)來解析HTML文本內(nèi)容杆查，這就需要告知瀏覽器我當(dāng)前的HTML頁面是按照那種方式進(jìn)行編寫的扮惦。沒有該聲明，將是你HTML噩夢(mèng)的開始亲桦。
常用標(biāo)簽
? HTML頁面是由標(biāo)簽組成崖蜜，不同的標(biāo)簽瀏覽器對(duì)其進(jìn)行不同樣式和內(nèi)容的渲染 ，我們需要記憶常用的標(biāo)簽即可客峭。大致可分為如下幾類：標(biāo)題豫领、水平線、段落舔琅、換行氏堤、圖片、表格搏明、超鏈接鼠锈、列表、表單星著、下拉列表购笆、div 和 span等。
標(biāo)題和水平線
標(biāo)題
? <h1> - <h6> 標(biāo)簽可定義標(biāo)題虚循，標(biāo)題依次遞減同欠，由于 h 元素?fù)碛写_切的語義，因此請(qǐng)慎重地選擇恰當(dāng)?shù)臉?biāo)簽層級(jí)來構(gòu)建文檔的結(jié)構(gòu)横缔。請(qǐng)不要利用標(biāo)題標(biāo)簽來改變同一行中的字體大小铺遂。相反，我們應(yīng)當(dāng)使用層疊樣式表定義來達(dá)到漂亮的顯示效果茎刚。
? <h999>這樣的標(biāo)簽不產(chǎn)生錯(cuò)誤襟锐，但是不具有標(biāo)題的效果。
? h1標(biāo)簽可以為搜索引擎獲取膛锭，便于頁面在被搜索的時(shí)候檢索到粮坞，但是一個(gè)頁面最好只有一個(gè)h1標(biāo)簽蚊荣，否則可能進(jìn)入搜索引擎的黑名單。
<h1></h1>
水平線
? <hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分莫杈。在 HTML 中互例，
標(biāo)簽沒有結(jié)束標(biāo)簽。
<hr />
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | CenterLeftright | 規(guī)定 hr 元素的對(duì)齊方式筝闹，以后可以用樣式取代它 |
| size | pixels | 規(guī)定 hr 元素的高度（厚度）媳叨，后可以用樣式取代它 |
| width | Pixels% | 規(guī)定 hr 元素的寬度，后可以用樣式取代它 |
段落和換行
段落
? <p>標(biāo)簽定義段落关顷。p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白糊秆。瀏覽器會(huì)自動(dòng)添加這些空間，您也可以在樣式表中規(guī)定解寝。
? 理解：語文課本中各個(gè)段落之間會(huì)有大的空隙扩然。
<p></p>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left艘儒、right聋伦、center、justify | 規(guī)定段落中文本的對(duì)齊方式界睁，以后可以用樣式取代它 |
換行
? br標(biāo)簽為換行符號(hào)觉增，<br> 標(biāo)簽是空標(biāo)簽（意味著它沒有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：<br></br>）翻斟。
? 注意：<br> 標(biāo)簽只是簡單地開始新的一行逾礁，而當(dāng)瀏覽器遇到 <p> 標(biāo)簽時(shí)，通常會(huì)在相鄰的段落之間插入一些垂直的間距访惜。請(qǐng)使用 <br> 來輸入空行嘹履，而不是分割段落。
<br/>
列表
無序列表
由<ul></ul>和<li></li>標(biāo)簽組成债热。
<ul>
<li></li>
<li></li>
......
</ul>
<ul>
<li>好好學(xué)習(xí)</li>
<li>天天向上</li>
</ul>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| type | disc circle square |
規(guī)定列表的項(xiàng)目符號(hào)類型砾嫉。可以使用樣式取代窒篱。 dise：實(shí)心圓（默認(rèn)） circle：空心圓 square：方塊 |
有序列表
? 由<ol></ol>和<li></li>標(biāo)簽組成焕刮。
<ol>
<li></li>
<li></li>
......
</ol>
<ol>
<li>好好學(xué)習(xí)</li>
<li>天天向上</li>
</ol>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| type | 1 a A i I |
規(guī)定在列表中使用的標(biāo)記類型。 1：用數(shù)字形式表示序號(hào)（默認(rèn)） a：用小寫字母表示序號(hào) A：用大寫字母表示序號(hào) i：用小寫羅馬數(shù)字表示序號(hào) I（大寫i）：用大寫羅馬數(shù)字表示序號(hào) |
div和span
div
? <div>是一個(gè)塊級(jí)元素墙杯，通常與css配合使用配并，用于布局。
? <div> 標(biāo)簽可以把文檔分割為獨(dú)立的高镐、不同的部分溉旋。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)嫉髓。
? <div> 是一個(gè)塊級(jí)元素低滩。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行召夹。實(shí)際上，換行是 <div> 固有的唯一格式表現(xiàn)恕沫〖嘣鳎可以通過 <div> 的 class 或 id 應(yīng)用額外的樣式。
<div>content</div>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left婶溯、right鲸阔、center | 規(guī)定div元素中的內(nèi)容的對(duì)齊方式，以后可以用樣式取代它 |
span
? <span>標(biāo)簽被用來組合文檔中的行內(nèi)元素 迄委，span 沒有固定的格式表現(xiàn)褐筛。當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺上的變化 叙身。
<span>content</span>
格式化標(biāo)簽
font
? 規(guī)定文本的字體渔扎、字體尺寸、字體顏色
pre
? 定義預(yù)格式化的文本信轿。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符晃痴。而文本也會(huì)呈現(xiàn)為等寬字體
文本標(biāo)簽
**<b>**（粗文本）、**<i>**（斜體文本）财忽、**<u>**（下劃線文本）倘核、
? < del >（中劃線文本）、（下標(biāo)文本）即彪、（上標(biāo)文本）
a標(biāo)簽
? <a>標(biāo)簽定義超鏈接紧唱，用于從一張頁面鏈接到另一張頁面。
? <a>元素最重要的屬性是 href 屬性隶校，它指示要鏈接的目標(biāo)位置漏益，同時(shí)沒有href屬性a標(biāo)簽內(nèi)的內(nèi)容與普通文本沒有區(qū)別，也就失去了超鏈接的功能深胳。
? 若是想要跳轉(zhuǎn)到當(dāng)前頁面绰疤，那么href的值為#。被鏈接頁面通常顯示在當(dāng)前瀏覽器窗口中稠屠，除非您規(guī)定了另一個(gè)目標(biāo)（target 屬性）峦睡。
<a >百度</a>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| href | URL | 連接所要跳轉(zhuǎn)的位置，可能是其他或當(dāng)前頁面权埠。 |
| target | _blank _parent self top Framename作為錨點(diǎn)的a標(biāo)簽的name值 |
規(guī)定在何處打開鏈接文檔榨了。 _blank：開啟新頁面顯示頁面； _self：當(dāng)前頁面顯示跳轉(zhuǎn)到頁面攘蔽，默認(rèn)值龙屉。 _top：用于有frameset布局的頁面，想要覆蓋整個(gè)頁面顯示。 Framename：這里framename與上邊的值不同转捕，具體以為frame起了什么樣的名字為準(zhǔn)作岖，該值指示要連接的頁面跳轉(zhuǎn)后將在相應(yīng)名稱的框架中顯示。 |
錨點(diǎn)的實(shí)現(xiàn)
? 利用a標(biāo)簽的name屬性：
<a name="top"></a>
? 一般標(biāo)簽的id屬性：div id=""五芝、a id="" 等：
<div id="top"></div>痘儡、<a id="top"></a>
? 錨點(diǎn)定位
<a href="#top">返回首部</a>
圖片
? img 元素向網(wǎng)頁中嵌入一幅圖像。
? 注意：從技術(shù)上講枢步，<img> 標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像沉删，而是從網(wǎng)頁上鏈接圖像。<img> 標(biāo)簽創(chuàng)建的是被引用圖像的占位空間醉途。
<img src="" alt="" >
必須屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 規(guī)定圖像的替代文本矾瑰，一般在圖片無法正常顯示占位的文字。 |
| src | URL | 規(guī)定顯示圖像的 URL隘擎。 |
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | top殴穴、bottom、middle货葬、left采幌、right | 規(guī)定如何根據(jù)周圍的文本來排列圖像 |
| border | pixels | 定義圖像周圍的邊框 |
| height | pixels、% | 定義圖像的高度宝惰。 |
| width | pixels植榕、% | 定義圖像的寬度再沧。 |
| title | 文本 | 當(dāng)鼠標(biāo)在圖片上時(shí)顯示的文字 |
表格
? <table></table> 標(biāo)簽定義 HTML表格尼夺。
? <tr></tr>標(biāo)簽定義表格的行。tr元素包含一個(gè)或多個(gè)th或td元素
? <td></td>標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格炒瘸。
? <th></th>定義表格內(nèi)的表頭單元格淤堵。th元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本，而 td 元素內(nèi)的文本通常是左對(duì)齊的普通文本顷扩。
? 簡單的HTML表格由table元素以及一個(gè)或多個(gè)tr拐邪、th、或td元素組成隘截。
? 理解：table相當(dāng)于一個(gè)表格的外框扎阶，tr為行，td為一個(gè)一個(gè)單元格婶芭，th為有標(biāo)題作用的單元格东臀，th中的內(nèi)容同時(shí)有加粗的效果。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right犀农、center惰赋、left | 表格對(duì)齊方式 |
| border | px | 規(guī)定表格邊框的寬度 |
| width | % 、px | 規(guī)定表格的寬度 |
tr常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right呵哨、left赁濒、center | 定義表格行的內(nèi)容對(duì)齊方式轨奄。 |
| bgcolor | rgb(x,x,x)、#xxxxxx拒炎、colorname | 規(guī)定表格行的背景顏色挪拟，以后可以用樣式取代它 |
| valign | top、middle击你、bottom | 規(guī)定表格行中內(nèi)容的垂直對(duì)齊方式舞丛，以后可以用樣式取代它 |
? <td>的colspan和rowspan分別規(guī)定單元格橫跨的列數(shù)和行數(shù)
表單
form
? <form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。
? 表單能夠包含 input 元素果漾，比如文本字段球切、復(fù)選框、單選框绒障、提交按鈕等等吨凑。還可以包含 textarea等元素。
? 表單用于向服務(wù)器傳輸數(shù)據(jù)户辱。form 元素是塊級(jí)元素鸵钝，其前后會(huì)產(chǎn)生折行。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| action | URL | 規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù) |
| method | get庐镐、post | 規(guī)定用于發(fā)送 form-data 的 HTTP 方法 |
| name | Form_name | 規(guī)定表單的名稱 |
| target | _blank _self _ parent _top framename | 規(guī)定在何處打開 action URL |
? method：表單提交方式：get恩商、post
? get：默認(rèn)，主動(dòng)的獲取方式必逆，數(shù)據(jù)放在url上怠堪，數(shù)據(jù)的容量有限，安全性差名眉，有緩存
? post：數(shù)據(jù)放在請(qǐng)求實(shí)體中粟矿，數(shù)據(jù)量理論上沒有限制，相對(duì)安全损拢，沒有緩存
input
? <input> 標(biāo)簽用于搜集用戶信息陌粹。
? 根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式福压。輸入字段可以是文本字段掏秩、復(fù)選框、單選按鈕荆姆、按鈕等等蒙幻。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 定義圖像輸入的替代文本。 |
| checked | checked | 規(guī)定此 input 元素首次加載時(shí)應(yīng)當(dāng)被選中胞枕。 |
| disabled | disabled | 當(dāng) input 元素加載時(shí)禁用此元素狸捕。 |
| readonly | readonly | 規(guī)定輸入字段為只讀挨下。 |
| maxlength | number | 規(guī)定輸入字段中的字符的最大長度欠拾。 |
| value | value | 規(guī)定 input 元素的值错蝴。 |
| type | button checkbox file hidden image password radio reset submit text |
規(guī)定 input 元素的類型。按鈕復(fù)選框文件隱藏域圖像形按鈕密碼單選框重置按鈕提交按鈕文本 |
若上傳文件，請(qǐng)求方式為post，且表單添加一個(gè)屬性:enctype="multipart/form-data"
注意：
? 1. 沒有name屬性的屬性是無法提交到后臺(tái)的！０稣丁！范嘱！
? 2. Radio單選按鈕以name相同為一組送膳。
? 3. Checkbox復(fù)選按鈕以name相同為一組。
textarea
? 該標(biāo)簽定義多行的文本輸入控件丑蛤。文本區(qū)中可容納無限數(shù)量的文本叠聋，可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸。cols規(guī)定文本區(qū)內(nèi)的可見寬度受裹。rows規(guī)定文本區(qū)內(nèi)的可見行數(shù)碌补。
<textarea>content</textarea>
label
? <label> 標(biāo)簽為input 元素定義標(biāo)注（標(biāo)記）。
? label元素不會(huì)呈現(xiàn)任何的特殊效果棉饶。
? label標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同厦章，此時(shí)點(diǎn)擊label標(biāo)簽會(huì)自動(dòng)為元素聚焦
<label for="username">用戶名：</label>
<input type="text" id="username" name="username"/>
button
<button>按鈕</button>
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該按鈕。 |
| type | button照藻、submit袜啃、reset | 規(guī)定按鈕的類型。 |
| value | text | 規(guī)定按鈕的初始值幸缕。 |
| name | button_name | 規(guī)定按鈕的名稱群发。 |
select
? <select>用于定義下拉列表
<select name="color" >
<option value="red">紅色</option>
<option value="green">綠色</option>
<option value="blue">藍(lán)色</option>
</select>
select常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉框。 |
| multiple | multiple | 規(guī)定可選擇多個(gè)選項(xiàng)冀值。 |
| name | name | 規(guī)定下拉列表的名稱也物。 |
| size | number | 規(guī)定下拉列表中可見選項(xiàng)的數(shù)目宫屠。 |
option常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉框列疗。 |
| selected | selected | 規(guī)定選項(xiàng)（在首次顯示在列表中時(shí)）表現(xiàn)為選中狀態(tài)。 |
| value | text | 定義送往服務(wù)器的選項(xiàng)值浪蹂。 |
?
常用字符實(shí)體
? 在 HTML 中抵栈，某些字符是預(yù)留的。
? 在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>）坤次，這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽古劲。
? 如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）缰猴。
? 實(shí)體名稱對(duì)大小寫敏感产艾！
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-kTJzeofy-1606890041388)(/1579341520148.png)]
標(biāo)簽的分類
? HTML中標(biāo)簽元素三種不同類型：塊狀元素，行內(nèi)元素，行內(nèi)塊狀元素闷堡。
塊級(jí)元素
? 元素都從新的一行開始隘膘，并且其后的元素也另起一行；元素的高度杠览、寬度弯菊、行高以及頂和底邊距都可設(shè)置；元素寬度在不設(shè)置的情況下踱阿，是它本身父容器的100%（和父元素的寬度一致）管钳，除非設(shè)定一個(gè)寬度。
行內(nèi)元素
? 和其他元素都在一行上软舌；元素的高度才漆、寬度及頂部和底部邊距不可設(shè)置；元素的寬度就是它包含的文字或圖片的寬度佛点，不可改變栽烂。
行內(nèi)塊狀元素
? 和其他元素都在一行上；元素的高度恋脚、寬度腺办、行高以及頂和底邊距都可設(shè)置。
CSS
? CSS（英文全稱：Cascading Style Sheets）層疊樣式表, 是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言糟描。
? CSS目前最新版本為CSS3怀喉，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言船响，CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制躬拢，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力见间，并能夠進(jìn)行初步交互設(shè)計(jì)聊闯，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力米诉，簡化或者優(yōu)化寫法菱蔬，針對(duì)各類人群，有較強(qiáng)的易讀性史侣。
? CSS是用來美化網(wǎng)頁用的拴泌，沒有網(wǎng)頁則CSS毫無用處，所以CSS需要依賴HTML展示其功能 惊橱。
? [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-T1bfz3JL-1606890041392)(/圖片1.png)]
CSS的基本使用
CSS基本語法
? CSS 樣式由選擇器和一條或多條以分號(hào)隔開的樣式聲明組成蚪腐。每條聲明的樣式包含著一個(gè) CSS屬性和屬性值。 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-u2ZMZ9D7-1606890041399)(/QQ截圖20200205160701.png)]
選擇器名 {
屬性 : 屬性值;
......
}
div {
background-color : red;
}
注意：
- css聲明要以分號(hào);結(jié)束税朴，聲明以{}括起來
- 建議一行書寫一個(gè)屬性
- 若值為若干單詞回季，則要給值加引號(hào)家制，如 font-family: "agency fb";
注釋
多行注釋：
/* 這里的內(nèi)容就是注釋 */
CSS的使用
1. 行內(nèi)式
? 行內(nèi)樣式將樣式定義在具體html元素的style屬性中。以行內(nèi)式寫的CSS耦合度高泡一，只適用于當(dāng)前元素慰丛，在設(shè)定某個(gè)元素的樣式時(shí)比較常用。
<p style="color:red;font-size:50px;">這是一段文本</p>
在當(dāng)前元素使用 style 屬性的聲明方式瘾杭。
? style 是行內(nèi)樣式屬性诅病；
? color 是顏色屬性；red 是顏色屬性值粥烁；
? font-size是字體大小屬性贤笆；50px 是字體大小屬性值
2. 嵌入式
? 嵌入式通過在html頁面內(nèi)容開辟一段屬于css的代碼區(qū)域，通常做法為在< head>標(biāo)簽中嵌套<style>標(biāo)簽讨阻，在<style>中通過選擇器的方式調(diào)用指定的元素并設(shè)置相關(guān) CSS芥永。
<style type="text/css">p {color: blue;font-size: 40px;}</style>
3. 引入外聯(lián)樣式文件
? 在實(shí)際開發(fā)當(dāng)中，很多時(shí)候都使用引入外聯(lián)樣式文件钝吮，這種形式可以使html頁面更加清晰埋涧，而且可以達(dá)到更好的重用效果。
style.css
p {color: green;font-size: 30px;}
test.html
<link rel="stylesheet" type="text/css" href="style.css">
? rel:rel 屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系奇瘦。
? stylesheet:文檔的外部樣式表棘催。
? 很多時(shí)候，大量的 HTML 頁面使用了同一個(gè)CSS耳标。那么就可以將這些 CSS 樣式保存在一個(gè)單獨(dú)的.css 文件中醇坝，然后通過<link>元素去引入它。
? 注意：當(dāng)有多重樣式時(shí)次坡，記住前提規(guī)則呼猪，越精確越優(yōu)先。
CSS選擇器
? 在 CSS 中砸琅，選擇器是一種模式宋距，用于選擇需要添加樣式的元素。
? CSS選擇器有很多症脂，掌握常用的即可谚赎；
基本選擇器
通用選擇器
選擇所有 <font color="red">*</font>
* {
......
}
* {
color: orange;
}
元素選擇器
選擇指定標(biāo)簽
元素名稱 {
......
}
p {
color: red;
font-size: 20px;
}
ID選擇器
選擇設(shè)置過指定id屬性值的元素 <font color="red">#</font>
#id屬性值 {
......
}
#p1 {
font-weight: bold;
}
類選擇器
選擇設(shè)置過指定class屬性值的元素 <font color="red">.</font>
.class屬性值 {
......
}
.hidden {
display: none;
}
分組選擇器
? 當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明摊腋，元素之間用逗號(hào)分隔
選擇器1,選擇器2,... {
......
}
h2 , #pre1 {
color: orange;
font-style: italic;
}
? CSS樣式的優(yōu)先級(jí)沸版，是根據(jù)選擇器的精確度/權(quán)重來決定的，常見的權(quán)重如下兴蒸，權(quán)重越大，優(yōu)先級(jí)越高
? 元素選擇器：1
? 類選擇器：10
? id選擇器：100
? 內(nèi)聯(lián)樣式：1000
組合選擇器
? CSS組合選擇器說明了兩個(gè)選擇器直接的關(guān)系细办。 CSS組合選擇符包括各種簡單選擇符的組合方式橙凳。
? 在 CSS 中包含了四種組合方式: 后代選取器(以空格分隔)蕾殴，子元素選擇器(以大于號(hào)分隔），相鄰兄弟選擇器（以加號(hào)分隔）岛啸，普通兄弟選擇器（以波浪線分隔）钓觉。
后代選擇器（派生選擇器）
? 用于選擇指定標(biāo)簽元素下的后輩元素，以空格分隔
選擇器1 選擇器2 {
......
}
.food li {
border: 1px solid red;
}
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
子元素選擇器
? 用于選擇指定標(biāo)簽元素的所有第一代子元素坚踩，以大于號(hào)分隔
選擇器1 + 選擇器2 {
......
}
#d + div {
border: 1px solid red;
}
html代碼同上
相鄰兄弟選擇器
? 可選擇緊接在另一元素后的元素荡灾，且二者有相同父元素。以加號(hào)分隔
選擇器1 + 選擇器2 {
......
}
#d + div {
border: 1px solid red;
}
<div id="d">
相鄰兄弟選擇器1
<ul>
<li>開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
</ul>
</div>
<div>
相鄰兄弟選擇器2
</div>
普通兄弟選擇器
? 選擇緊接在另一個(gè)元素后的所有元素瞬铸，而且二者有相同的父元素批幌，以波浪線分隔
選擇器1 ~ 選擇器2 {
......
}
li ~ li {
background-color : yellow;
}
<div>
普通兄弟選擇器1
<ul>
<li>開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
<li>沈騰</li>
<li>王寧</li>
</ul>
</div>
CSS常用屬性設(shè)置
背景
? CSS 背景屬性用于定義HTML元素的背景效果
background-color
? 設(shè)置元素的背景顏色
body {
background-color:#ff0000;
}
background-image
? 設(shè)置元素的背景圖像，默認(rèn)情況下嗓节，背景圖像進(jìn)行平鋪重復(fù)顯示荧缘，以覆蓋整個(gè)元素實(shí)體。
body {
background-image:url('paper.gif');
}
background-repeat
? 設(shè)置是否及如何重復(fù)背景圖像
body {
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
}
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-wWoGAyCC-1606890041406)(/QQ截圖20200205171029.png)]
文本
color
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
text-align
? 設(shè)置文本對(duì)齊方式拦宣，center（居中）截粗，left（左對(duì)齊），right（右對(duì)齊）
body {
text-align:center;
}
h1 {
text-align:right;
}
h2 {
text-align:right;
}
text-decoration
? 規(guī)定添加到文本的修飾鸵隧，屬性值：none绸罗、underline、overline豆瘫、line-through
1）underline
? 對(duì)文本添加下劃線从诲，與HTML的u元素相同。
2）overline
? 對(duì)文本添加上劃線靡羡。
3）line-through
? 對(duì)文本添加中劃線系洛，與HTML中的s和 strike 元素相同。
4）none
? 關(guān)閉原本應(yīng)用到元素上的所有裝飾略步。
h3 {
text-decoration:underline;
}
text-indent
? 設(shè)置文本首行縮進(jìn)
p.ident2 {
text-indent: 2em;
}
? em一個(gè)相對(duì)值描扯，例如頁面的文本大小為17px,則2em就為17px*2
字體
font-family
? 文本字體，該屬性設(shè)置文本的字體趟薄。
? font-family屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制绽诚，如果瀏覽器不支持第一種字體，他將嘗試下一種字體杭煎，所以盡量將不常見的字體靠前恩够，將最常見的字體放置在最后，作為替補(bǔ)羡铲。
注意：
? 1）只有當(dāng)字體名中含有空格或#蜂桶、$之類的符號(hào)時(shí)（如 New York），才需要在font-family聲明中加引號(hào)：
body {
font-family: "arial black";
}
? 2）多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明
/* 靠前的字體先生效 */
p{
font-family: 微軟雅黑,黑體,"agency fb";
}
font-size
? 文本大小
body {
font-size: 50px; /*字體大小50px*/
}
#span1 {
font-size: 25px; /*字體大小25px*/
}
font-style
? 字體風(fēng)格也切，該屬性最常用于規(guī)定斜體文本扑媚。 屬性值：normal腰湾、italic、oblique
? 1）normal：文本正常顯示疆股；
? 2）italic：文本斜體顯示费坊；
? 3）oblique：文本傾斜顯示，oblique是將文字強(qiáng)制傾斜旬痹。
? 說明：一般情況下附井，字體有粗體、斜體两残、下劃線永毅、刪除線等諸多屬性，但是不是所有字體都具有這些屬性磕昼，一些不常用字體可能只有正常體卷雕，若使用italic屬性則沒有效果，所以需要oblique屬性強(qiáng)制傾斜票从。
font-weight
? 字體加粗漫雕，該屬性設(shè)置文本的粗細(xì)。
? bold：可以將文本設(shè)置為粗體峰鄙。
? 100 ~ 900：為字體指定了 9 級(jí)加粗度浸间。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別吟榴。
? 100 對(duì)應(yīng)最細(xì)的字體變形魁蒜；
? 900 對(duì)應(yīng)最粗的字體變形；
? 400 等價(jià)于 normal吩翻；
? 700 等價(jià)于 bold兜看。
對(duì)齊方式
text-align
? 規(guī)定元素中的文本的水平對(duì)齊方式。屬性值如下：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DueOLrbp-1606890041410)(/QQ%E6%88%AA%E5%9B%BE20200205180655.png)]
注意：
? 值 justify 可以使文本的兩端都對(duì)齊狭瞎。在兩端對(duì)齊文本中细移，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后熊锭，調(diào)整單詞和字母間的間隔弧轧，使各行的長度恰好相等。對(duì)最后一行不生效碗殷。
display屬性
? display 屬性規(guī)定元素應(yīng)該生成的框的類型精绎。這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-tCti0P8D-1606890041414)(/QQ%E6%88%AA%E5%9B%BE20200205181007.png)]
浮動(dòng)
? float的屬性值有none锌妻、left代乃、right。
只有橫向浮動(dòng)从祝，并沒有縱向浮動(dòng)襟己。
會(huì)將元素的display屬性變更為block引谜。
浮動(dòng)元素的后一個(gè)元素會(huì)圍繞著浮動(dòng)元素（典型運(yùn)用是文字圍繞圖片）
浮動(dòng)元素的前一個(gè)元素不會(huì)受到任何影響（如果你想讓兩個(gè)塊狀元素并排顯示牍陌，必須讓兩個(gè)塊狀元素都應(yīng)用float）擎浴。
盒子模型
? border、padding毒涧、margin三個(gè)屬性構(gòu)成了盒子模型贮预。 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-eokXYxqD-1606890041416)(/QQ截圖20200205174125.png)]
border
? 設(shè)置所有的邊框?qū)傩浴?/p>
? 1）可同時(shí)設(shè)置邊框的寬度、樣式契讲、顏色
table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
? 2）使用border-width仿吞、border-style、border-color單獨(dú)設(shè)置
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
? 3）border-style的屬性
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-NBZDIqU6-1606890041419)(/QQ截圖20200205174509.png)]
? 4）border-collapse
? 設(shè)置是否將表格邊框折疊為單一邊框捡偏。
? 屬性值：separate（默認(rèn)唤冈，單元格邊框獨(dú)立）、collapse（單元格邊框合并）
table {
border-collapse : collapse;
}
padding
? 設(shè)置元素所有內(nèi)邊距的寬度银伟，或者設(shè)置各邊上內(nèi)邊距的寬度你虹。
? 如果在表的內(nèi)容中控制文本到邊框的內(nèi)邊距，使用td和th元素的填充屬性：
td {
padding:15px;
}
? 單獨(dú)設(shè)置各邊的內(nèi)邊距：padding-top彤避、padding-left傅物、padding-bottom、padding-right
? <font color="red">默認(rèn)按照上右下左的順序設(shè)定</font>
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
這個(gè)表格單元的每個(gè)邊擁有相等的內(nèi)邊距琉预。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個(gè)表格單元的上和下內(nèi)邊距是0.5cm董饰，左和右內(nèi)邊距是 2.5cm。
</td>
</tr>
</table>
? 注意：通過padding屬性設(shè)置元素內(nèi)邊距時(shí)圆米，會(huì)使元素變形卒暂。若不想影響格式效果，可以用margin屬性設(shè)置元素外邊距娄帖。
margin
? 設(shè)置一個(gè)元素所有外邊距的寬度也祠，或者設(shè)置各邊上外邊距的寬度。
p.margin {
margin: 2px 4px 3px 4px;
}
? 單獨(dú)設(shè)置各邊的外邊距：margin-top块茁、margin-left齿坷、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
說明：
? auto：自動(dòng)数焊，可以理解為居中的意思永淌。瀏覽器自動(dòng)計(jì)算外邊距。
? margin: auto auto：第一個(gè)auto表示上下外邊距自動(dòng)計(jì)算佩耳，第二個(gè)auto表示左右外邊距自動(dòng)計(jì)算遂蛀。
? 但是上下外邊距在自動(dòng)計(jì)算時(shí)不會(huì)生效，而左右外邊距會(huì)生效干厚，表現(xiàn)為居中狀態(tài)李滴，效果如下： [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9GWVl6PH-1606890041422)(/圖片3.png)]
? 若要設(shè)置為上下左右居中狀態(tài)螃宙，則要計(jì)算好自行設(shè)置上下的外邊距，效果如下： [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-a2Rt0CxL-1606890041425)(/圖片4.png)]
? 注意：此時(shí)使用margin-top不生效所坯。了解
d">默認(rèn)按照上右下左的順序設(shè)定</font>
td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
這個(gè)表格單元的每個(gè)邊擁有相等的內(nèi)邊距谆扎。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個(gè)表格單元的上和下內(nèi)邊距是0.5cm，左和右內(nèi)邊距是 2.5cm芹助。
</td>
</tr>
</table>
? 注意：通過padding屬性設(shè)置元素內(nèi)邊距時(shí)堂湖，會(huì)使元素變形。若不想影響格式效果状土，可以用margin屬性設(shè)置元素外邊距无蜂。
margin
? 設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度蒙谓。
p.margin {
margin: 2px 4px 3px 4px;
}
? 單獨(dú)設(shè)置各邊的外邊距：margin-top斥季、margin-left、margin-bottom累驮、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
說明：
? auto：自動(dòng)酣倾，可以理解為居中的意思。瀏覽器自動(dòng)計(jì)算外邊距慰照。
? margin: auto auto：第一個(gè)auto表示上下外邊距自動(dòng)計(jì)算灶挟，第二個(gè)auto表示左右外邊距自動(dòng)計(jì)算。
? 但是上下外邊距在自動(dòng)計(jì)算時(shí)不會(huì)生效毒租，而左右外邊距會(huì)生效稚铣，表現(xiàn)為居中狀態(tài)，效果如下： [外鏈圖片轉(zhuǎn)存中...(img-9GWVl6PH-1606890041422)]
? 若要設(shè)置為上下左右居中狀態(tài)墅垮，則要計(jì)算好自行設(shè)置上下的外邊距惕医，效果如下： [外鏈圖片轉(zhuǎn)存中...(img-a2Rt0CxL-1606890041425)]
? 注意：此時(shí)使用margin-top不生效。了解
