整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
習(xí)總目標(biāo)
本次學(xué)習(xí)目標(biāo)
3. HTML
3.1 HTML概念
HTML是Hyper Text Markup Language的縮寫。意思是『超文本標(biāo)記語(yǔ)言』。它的作用是搭建網(wǎng)頁(yè)結(jié)構(gòu)，在網(wǎng)頁(yè)上展示內(nèi)容
3.1.1 超文本
HTML文件本質(zhì)上是文本文件，而普通的文本文件只能顯示字符。但是HTML技術(shù)則通過(guò)HTML標(biāo)簽把其他網(wǎng)頁(yè)、圖片、音頻、視頻等各種多媒體資源引入到當(dāng)前網(wǎng)頁(yè)中，讓網(wǎng)頁(yè)有了非常豐富的呈現(xiàn)方式，這就是超文本的含義——本身是文本，但是呈現(xiàn)出來(lái)的最終效果超越了文本。
3.1.2 標(biāo)記語(yǔ)言
說(shuō)HTML是一種『標(biāo)記語(yǔ)言』是因?yàn)樗皇窍騄ava這樣的『編程語(yǔ)言』，因?yàn)樗怯梢幌盗小簶?biāo)簽』組成的，沒(méi)有常量、變量、流程控制、異常處理、IO等等這些功能。HTML很簡(jiǎn)單，每個(gè)標(biāo)簽都有它固定的含義和確定的頁(yè)面顯示效果。
標(biāo)簽是通過(guò)一組尖括號(hào)+標(biāo)簽名的方式來(lái)定義的：
<p>HTML is a very popular fore-end technology.</p>
這個(gè)例子中使用了一個(gè)p標(biāo)簽來(lái)定義一個(gè)段落，<p>叫『開始標(biāo)簽』，</p>叫『結(jié)束標(biāo)簽』。開始標(biāo)簽和結(jié)束標(biāo)簽一起構(gòu)成了一個(gè)完整的標(biāo)簽。開始標(biāo)簽和結(jié)束標(biāo)簽之間的部分叫『文本標(biāo)簽體』，也簡(jiǎn)稱『標(biāo)簽體』。
有的時(shí)候標(biāo)簽里還帶有『屬性』：
<a href="http://www.xxx.com">show detail</a>
href=“http://www.xxx.com”就是屬性，href是『屬性名』，“http://www.xxx.com”是『屬性值』。
還有一種標(biāo)簽是『?jiǎn)螛?biāo)簽』：
<input type="text" name="username" />
3.2 HTML的入門程序
3.3 HTML的結(jié)構(gòu)
3.4 HTML語(yǔ)法規(guī)則
3.5 使用idea創(chuàng)建StaticWeb工程
3.6 HTML的各個(gè)標(biāo)簽的使用
3.6.1 標(biāo)題標(biāo)簽
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這是一級(jí)標(biāo)題</h1>
<h2>這是二級(jí)標(biāo)題</h2>
<h3>這是三級(jí)標(biāo)題</h3>
<h4>這是四級(jí)標(biāo)題</h4>
<h5>這是五級(jí)標(biāo)題</h5>
<h6>這是六級(jí)標(biāo)題</h6>
</body>
</html>
頁(yè)面效果
3.6.2 段落標(biāo)簽
代碼
<p>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>
頁(yè)面效果
3.6.3 換行標(biāo)簽
代碼
We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. <br/>The only real requirement we have is that your CSS validates.
3.6.4 無(wú)序列表標(biāo)簽
代碼
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ul>
頁(yè)面效果
3.6.5 超鏈接標(biāo)簽(重要)
代碼
<body>
<!--
超鏈接標(biāo)簽a的作用: 進(jìn)行資源跳轉(zhuǎn)
href: 你要跳轉(zhuǎn)到的資源的路徑
target: 新頁(yè)面的打開方式
-->
<!--
1. 跳轉(zhuǎn)到本項(xiàng)目的資源: 使用相對(duì)路徑
相對(duì)路徑: 以當(dāng)前路徑作為基準(zhǔn)，如果資源跟我說(shuō)同一個(gè)目錄下的則直接寫資源名就行了
如果在不同目錄下，要找上一級(jí)目錄，則使用../
. 當(dāng)前目錄
.. 上一級(jí)目錄
2. 跳轉(zhuǎn)到其它服務(wù)器的資源: 此時(shí)就要使用完整的url訪問(wèn)路徑
-->
<a href="../01_html的入門/start.html">跳轉(zhuǎn)到start.html頁(yè)面</a><br/>
<!--
target屬性表示新頁(yè)面的打開方式，我們目前只需要掌握兩種取值:
_self 表示新頁(yè)面在當(dāng)前頁(yè)面打開
_blank 表示新頁(yè)面會(huì)新打開一個(gè)標(biāo)簽頁(yè)
-->
<a href="https://www.baidu.com" target="_blank">跳轉(zhuǎn)到百度</a>
</body>
點(diǎn)擊后跳轉(zhuǎn)到href屬性指定的頁(yè)面
3.6.6 圖片標(biāo)簽(重點(diǎn))
準(zhǔn)備圖片文件
代碼
<!--
img標(biāo)簽是用于顯示圖片的，它有如下屬性
1. src: 用于指定要顯示的圖片的路徑，建議使用相對(duì)路徑
項(xiàng)目中的圖片一般存放在一個(gè)img的文件夾中
2. width: 圖片的寬度
3. height: 圖片的高度
-->
<img src="../img/mm.jpg" width="409" height="292"/>
頁(yè)面效果
3.6.7 塊標(biāo)簽(重點(diǎn))
『塊』并不是為了顯示文章內(nèi)容的，而是為了方便結(jié)合CSS對(duì)頁(yè)面進(jìn)行布局。塊有兩種，div是前后有換行的塊，span是前后沒(méi)有換行的塊。
把下面代碼粘貼到HTML文件中查看他們的區(qū)別：
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
3.6.8 HTML實(shí)體(了解)
在HTML文件中，<、>等等這樣的符號(hào)已經(jīng)被賦予了特定含義，不會(huì)作為符號(hào)本身顯示到頁(yè)面上，此時(shí)如果我們想使用符號(hào)本身怎么辦呢？那就是使用HTML實(shí)體來(lái)轉(zhuǎn)義。
3.7 路徑介紹
在我們整個(gè)Web開發(fā)技術(shù)體系中，『路徑』是一個(gè)貫穿始終的重要概念。凡是需要獲取另外一個(gè)資源的時(shí)候都需要用到路徑。要想理解路徑這個(gè)概念，我們首先要認(rèn)識(shí)一個(gè)概念：『文件系統(tǒng)』。
3.7.1 文件系統(tǒng)
我們寫代碼的時(shí)候通常都是在Windows系統(tǒng)來(lái)操作，而一個(gè)項(xiàng)目開發(fā)完成后想要讓所有人都能夠訪問(wèn)到就必須『部署』到服務(wù)器上，也叫『發(fā)布』。而服務(wù)器通常是Linux系統(tǒng)。
Windows系統(tǒng)和Linux系統(tǒng)的文件系統(tǒng)有很大差別，為了讓我們編寫的代碼不會(huì)因?yàn)閺腤indows系統(tǒng)部署到了Linux系統(tǒng)而出現(xiàn)故障，實(shí)際開發(fā)時(shí)不允許使用物理路徑。
物理路徑舉例：
D:\aaa\pro01-HTML\page01-article-tag.html
D:\aaa\pro01-HTML\page02-anchor-target.html
幸運(yùn)的是不管是Windows系統(tǒng)還是Linux系統(tǒng)環(huán)境下，目錄結(jié)構(gòu)都是樹形結(jié)構(gòu)，編寫路徑的規(guī)則是一樣的。
所以我們以項(xiàng)目的樹形目錄結(jié)構(gòu)為依據(jù)來(lái)編寫路徑就不用擔(dān)心操作系統(tǒng)平臺(tái)發(fā)生變化之后路徑錯(cuò)誤的問(wèn)題了。有了這個(gè)大前提，我們具體編寫路徑時(shí)有兩種具體寫法：
3.7.2 相對(duì)路徑
相對(duì)路徑都是以『當(dāng)前位置』為基準(zhǔn)來(lái)編寫的。假設(shè)我們現(xiàn)在正在瀏覽a頁(yè)面，想在a頁(yè)面內(nèi)通過(guò)超鏈接跳轉(zhuǎn)到z頁(yè)面。
那么按照相對(duì)路徑的規(guī)則，我們現(xiàn)在所在的位置是a.html所在的b目錄：
z.html并不在b目錄下，所以我們要從b目錄出發(fā)，向上走，進(jìn)入b的父目錄——c目錄：
c目錄還是不行，繼續(xù)向上走，進(jìn)入c的父目錄——d目錄：
在從d目錄向下經(jīng)過(guò)兩級(jí)子目錄——e目錄、f目錄才能找到z.html：
所以整個(gè)路徑的寫法是：
<a href="../../../e/f/z.html">To z.html</a>
3.8 使用表格標(biāo)簽展示數(shù)據(jù)(重要)
3.8.1 目標(biāo)頁(yè)面效果
3.8.2 第一版代碼
<!-- 使用table標(biāo)簽定義表格 -->
<table>
<!-- 使用tr標(biāo)簽定義表格的行 -->
<tr>
<!-- 使用th標(biāo)簽定義表頭，表頭有字體加粗效果 -->
<th>姓名</th>
<th>屬性</th>
<th>級(jí)別</th>
<th>忍村</th>
</tr>
<tr>
<!-- 使用td標(biāo)簽定義單元格 -->
<td>漩渦鳴人</td>
<td>風(fēng)</td>
<td>下忍</td>
<td>木葉</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td>下忍</td>
<td>木葉</td>
</tr>
<tr>
<td>我愛(ài)羅</td>
<td>沙</td>
<td>影</td>
<td>砂隱村</td>
</tr>
</table>
如果只有上面的代碼，頁(yè)面顯示效果是：
沒(méi)有表格邊框。想要顯示好看的表格邊框可以把下面的style標(biāo)簽代碼復(fù)制粘貼到head標(biāo)簽里,CSS還沒(méi)講，不必在意語(yǔ)法細(xì)節(jié)，整體照搬即可。
<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>
我們發(fā)現(xiàn)，相較于目標(biāo)效果而言，還未實(shí)現(xiàn)橫縱向合并單元格
3.8.3 合并單元格
① 橫向合并單元格(列合并)
使用colspan屬性將兩個(gè)橫向相鄰的單元格跨列合并：
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td colspan="2">下忍</td>
</tr>
注意: 『被合并』的單元格要?jiǎng)h掉。
② 縱向合并單元格(行合并)
使用rowspan屬性將兩個(gè)縱向相鄰的單元格跨行合并：
<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷&火</td>
<td colspan="2">下忍</td>
</tr>
<tr>
<td>我愛(ài)羅</td>
<td>影</td>
<td>砂隱村</td>
</tr>
注意: 『被合并』的單元格要?jiǎng)h掉。
3.9 表單標(biāo)簽(最重要)
3.9.1 表單標(biāo)簽的作用
在項(xiàng)目開發(fā)過(guò)程中，凡是需要用戶填寫的信息都需要用到表單。它的作用是接收用戶的輸入信息，并且將用戶輸入的信息提交給服務(wù)器
3.9.2 form標(biāo)簽的介紹
在HTML中我們使用form標(biāo)簽來(lái)定義一個(gè)表單。而對(duì)于form標(biāo)簽來(lái)說(shuō)有兩個(gè)最重要的屬性：action和method。
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
</form>
① action屬性
用戶在表單里填寫的信息需要發(fā)送到服務(wù)器端，對(duì)于Java項(xiàng)目來(lái)說(shuō)就是交給Java代碼來(lái)處理。那么在頁(yè)面上我們就必須正確填寫服務(wù)器端的能夠接收表單數(shù)據(jù)的地址。
這個(gè)地址要寫在form標(biāo)簽的action屬性中。但是現(xiàn)在暫時(shí)我們還沒(méi)有服務(wù)器端環(huán)境，所以先借用一個(gè)HTML頁(yè)面來(lái)當(dāng)作服務(wù)器端地址使用。
② method屬性
『method』這個(gè)單詞的意思是『方式、方法』，在form標(biāo)簽中method屬性用來(lái)定義提交表單的『請(qǐng)求方式』。method屬性只有兩個(gè)可選值：get或post，沒(méi)有極特殊情況的話使用post即可。
什么是『請(qǐng)求方式』？
瀏覽器和服務(wù)器之間在互相通信時(shí)有大量的『數(shù)據(jù)』需要傳輸。但是不論是瀏覽器還是服務(wù)器都有很多不同廠商提供的不同產(chǎn)品。
常見(jiàn)的瀏覽器有：
常見(jiàn)的Java服務(wù)器有：
這么多不同廠商各自開發(fā)的應(yīng)用程序怎么能保證它們彼此之間傳輸?shù)摹簲?shù)據(jù)』能夠被對(duì)方正確理解呢？
很簡(jiǎn)單，我們給這些數(shù)據(jù)設(shè)定『格式』，發(fā)送端按照格式發(fā)送數(shù)據(jù)，接收端按照格式解析數(shù)據(jù)，這樣就能夠?qū)崿F(xiàn)數(shù)據(jù)的『跨平臺(tái)傳輸』了。
而這里定義的『數(shù)據(jù)格式』就是應(yīng)用程序之間的『通信協(xié)議』。
在JavaSE階段的網(wǎng)絡(luò)編程章節(jié)我們接觸過(guò)TCP/IP、UDP這樣的協(xié)議，而我們現(xiàn)在使用的『HTTP協(xié)議』的底層就是TCP/IP協(xié)議。
但是在HTML標(biāo)簽中，點(diǎn)擊超鏈接是GET方式的請(qǐng)求，提交一個(gè)表單可以通過(guò)form標(biāo)簽的method屬性指定GET或POST請(qǐng)求，其他請(qǐng)求方式無(wú)法通過(guò)HTML標(biāo)簽實(shí)現(xiàn)。除了GET、POST之外的其他請(qǐng)求方式暫時(shí)我們不需要涉及（到我們學(xué)習(xí)SpringMVC時(shí)會(huì)用到PUT和DELETE）。至于GET請(qǐng)求和POST請(qǐng)求的區(qū)別我們會(huì)在講HTTP協(xié)議的時(shí)候詳細(xì)介紹，現(xiàn)在大家可以從表面現(xiàn)象來(lái)觀察一下。
3.10 表單項(xiàng)標(biāo)簽
表單中的每一項(xiàng)，包括: 文本框、密碼框、單選框、多選框等等，都稱之為表單項(xiàng)，一個(gè)表單中可以包含多個(gè)表單項(xiàng)
3.10.1 name和value屬性
在用戶使用一個(gè)軟件系統(tǒng)時(shí)，需要一次性提交很多數(shù)據(jù)是非常正常的現(xiàn)象。我們肯定不能要求用戶一個(gè)數(shù)據(jù)一個(gè)數(shù)據(jù)的提交，而肯定是所有數(shù)據(jù)填好后一起提交。那就帶來(lái)一個(gè)問(wèn)題，服務(wù)器怎么從眾多數(shù)據(jù)中識(shí)別出來(lái)收貨人、所在地區(qū)、詳細(xì)地址、手機(jī)號(hào)碼……？
很簡(jiǎn)單，給每個(gè)數(shù)據(jù)都起一個(gè)『名字』，發(fā)送數(shù)據(jù)時(shí)用『名字』攜帶對(duì)應(yīng)的數(shù)據(jù)，接收數(shù)據(jù)時(shí)通過(guò)『名字』獲取對(duì)應(yīng)的數(shù)據(jù)。
在各個(gè)具體的表單標(biāo)簽中，我們通過(guò)『name屬性』來(lái)給數(shù)據(jù)起『名字』，通過(guò)『value屬性』來(lái)保存要發(fā)送給服務(wù)器的『值』。
但是名字和值之間既有可能是『一個(gè)名字對(duì)應(yīng)一個(gè)值』，也有可能是『一個(gè)名字對(duì)應(yīng)多個(gè)值』。
這么看來(lái)這樣的關(guān)系很像我們Java中的Map，而事實(shí)上在服務(wù)器端就是使用Map類型來(lái)接收請(qǐng)求參數(shù)的。具體的是類型是：Map<String,String[]>。
name屬性就是Map的鍵，value屬性就是Map的值。
有了上面介紹的基礎(chǔ)知識(shí)，下面我們就可以來(lái)看具體的表單項(xiàng)標(biāo)簽了。
3.10.2 單行文本框
代碼
個(gè)性簽名：<input type="text" name="signal"/><br/>
顯示效果
3.10.3 密碼框
代碼
密碼：<input type="password" name="secret"/><br/>
顯示效果
3.10.4 單選框
代碼
你最喜歡的季節(jié)是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
你最喜歡的動(dòng)物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />寶馬
<input type="radio" name="animal" value="cheetah" />捷豹
顯示效果
說(shuō)明:
3.10.5 多選框
代碼
你最喜歡的球隊(duì)是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德國(guó)
<input type="checkbox" name="team" value="France"/>法國(guó)
<input type="checkbox" name="team" value="China" checked="checked"/>中國(guó)
<input type="checkbox" name="team" value="Italian"/>意大利
顯示效果
說(shuō)明:
3.10.6 下拉框
代碼
你喜歡的運(yùn)動(dòng)是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射擊</option>
<option value="skating">溜冰</option>
</select>
顯示效果
說(shuō)明:
3.10.7 按鈕
代碼
<button type="button">普通按鈕</button>或<input type="button" value="普通按鈕"/>
<button type="reset">重置按鈕</button>或<input type="reset" value="重置按鈕"/>
<button type="submit">提交按鈕</button>或<input type="submit" value="提交按鈕"/>
顯示效果
說(shuō)明:
3.10.8 隱藏域
代碼
<input type="hidden" name="userId" value="2233"/>
說(shuō)明:
通過(guò)表單隱藏域設(shè)置的表單項(xiàng)不會(huì)顯示到頁(yè)面上，用戶看不到。但是提交表單時(shí)會(huì)一起被提交。用來(lái)設(shè)置一些需要和表單一起提交但是不希望用戶看到的數(shù)據(jù)，例如：用戶id等等。
3.10.9 多行文本框
代碼
自我介紹：<textarea name="desc"></textarea>
顯示效果
說(shuō)明:
textarea沒(méi)有value屬性，如果要設(shè)置默認(rèn)值需要寫在開始和結(jié)束標(biāo)簽之間。
3.10.10 文件表單
代碼
頭像:<input type="file" name="file"/>
顯示效果
說(shuō)明:
不同瀏覽器顯示的樣式有微小差異
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置行內(nèi)式。
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛(ài)</div><head>
<style type="text/CSS">
選擇器（選擇的標(biāo)簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head><style>
div {
color: red;
font-size: 12px;
}
</style><style>
/*選擇器{屬性:值；}*/
p {
color:#06C;
font-size:14px;
} /*文字的顏色是 藍(lán)色*/
h4 {
color:#900;
}
h1 {
color:#090;
font-size:16px;
}
body {
background:url(bg2.jpg);
}
</style><head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>屬性 | 作用 |
rel | 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。 |
type | 定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略 |
href | 定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。 |
樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 沒(méi)有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒(méi)有徹底分離 | 較多 | 控制一個(gè)頁(yè)面（中） |
外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名.
命名規(guī)范： 見(jiàn)附件（Web前端開發(fā)規(guī)范手冊(cè).doc）
命名是我們通俗約定的，但是沒(méi)有規(guī)定必須用這些常用的命名。
課堂案例：
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>我們可以給標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。
注意：
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>id選擇器使用#進(jìn)行標(biāo)識(shí)，后面緊跟id名
id選擇器和類選擇器最大的不同在于 使用次數(shù)上。
總結(jié)他們**
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}選擇器 | 作用 | 缺點(diǎn) | 使用情況 | 用法 |
標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
類選擇器 | 可以選出1個(gè)或者多個(gè)標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav { color: red; } |
id選擇器 | 一次只能選擇器1個(gè)標(biāo)簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
選擇器
p {
font-size:20px;
}注意：
p{ font-family:"微軟雅黑";}p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}常用技巧：
1. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。
2. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。
4. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。字體名稱 | 英文名稱 | Unicode 編碼 |
宋體 | SimSun | B8BF53 |
新宋體 | NSimSun | B0B8BF53 |
黑體 | SimHei | ED1F53 |
微軟雅黑 | Microsoft YaHei | FAEF6FC5ED1 |
楷體_GB2312 | KaiTi_GB2312 | 77F53_GB2312 |
隸書 | LiSu | B6E66 |
幼園 | YouYuan | E7C06 |
華文細(xì)黑 | STXihei | 4E87EC6ED1 |
細(xì)明體 | MingLiU | EC60EF53 |
新細(xì)明體 | PMingLiU | B0EC60EF53 |
屬性值 | 描述 |
normal | 默認(rèn)值（不加粗的） |
bold | 定義粗體（加粗的） |
100~900 | 400 等同于 normal，而 700 等同于 bold 我們重點(diǎn)記住這句話 |
提倡：
我們平時(shí)更喜歡用數(shù)字來(lái)表示加粗和不加粗。
font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：
屬性 | 作用 |
normal | 默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式 font-style: normal; |
italic | 瀏覽器會(huì)顯示斜體的字體樣式。 |
小技巧：
平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置
選擇器 { font: font-style font-weight font-size/line-height font-family;}屬性 | 表示 | 注意點(diǎn) |
font-size | 字號(hào) | 我們通常用的單位是px 像素，一定要跟上單位 |
font-family | 字體 | 實(shí)際工作中按照?qǐng)F(tuán)隊(duì)約定來(lái)寫字體 |
font-weight | 字體粗細(xì) | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數(shù)字不要跟單位 |
font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號(hào) 和 字體 必須同時(shí)出現(xiàn) |
表示表示 | 屬性值 |
預(yù)定義的顏色值 | red，green，blue，還有我們的御用色 pink |
十六進(jìn)制 | #FF0000，#FF6600，#29D794 |
RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
屬性 | 解釋 |
left | 左對(duì)齊（默認(rèn)值） |
right | 右對(duì)齊 |
center | 居中對(duì)齊 |
一般情況下，行距比字號(hào)大7.8像素左右就可以了。
line-height: 24px;1em 就是一個(gè)字的寬度 如果是漢字的段落， 1em 就是一個(gè)漢字的寬度
p {
/*行間距*/
line-height: 25px;
/*首行縮進(jìn)2個(gè)字 em 1個(gè)em 就是1個(gè)字的大小*/
text-indent: 2em;
}text-decoration 通常我們用于給鏈接修改裝飾效果
值 | 描述 |
none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本。 取消下劃線（最常用） |
underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
overline | 定義文本上的一條線。（不用） |
line-through | 定義穿過(guò)文本下的一條線。（不常用） |
屬性 | 表示 | 注意點(diǎn) |
color | 顏色 | 我們通常用 十六進(jìn)制 比如 而且是簡(jiǎn)寫形式 #fff |
line-height | 行高 | 控制行與行之間的距離 |
text-align | 水平對(duì)齊 | 可以設(shè)定文字水平的對(duì)齊方式 |
text-indent | 首行縮進(jìn) | 通常我們用于段落首行縮進(jìn)2個(gè)字的距離 text-indent: 2em; |
text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
Emmet的前身是Zen coding,它使用縮寫,來(lái)提高h(yuǎn)tml/css的編寫速度。
emment語(yǔ)法
瀏覽器更好用，自然離不開萬(wàn)能的《油猴插件》（戳這里），通過(guò)腳本實(shí)現(xiàn)去廣告、繞過(guò)二次跳轉(zhuǎn)、自動(dòng)翻頁(yè)、懸停看圖、扒下載鏈接等功能。雖說(shuō)AC-baidu這類的腳本自帶更改頁(yè)面樣式，
但由于是1對(duì)1的，沒(méi)法改所有網(wǎng)站的面貌，這時(shí)候就要用到另一個(gè)插件“Stylus”了，它可以讓絕大多數(shù)網(wǎng)頁(yè)都變得工工整整（趕上時(shí)代）。
▌?dòng)蒙蟂tylus
插件可以直接誒從Chrome瀏覽器插件商店安裝，或者網(wǎng)上直接下一個(gè)。
樣式可以點(diǎn)擊插件中[查找更多樣式]，
接下來(lái)會(huì)列出所在網(wǎng)頁(yè)可用的所有樣式，供你選擇，包含源鏈接、發(fā)布日期、本周/所有下載數(shù)據(jù)等。
裝好的樣式可以在頂部選擇開關(guān)，也可以組合搭配使用（可能有bug沖突），比方說(shuō)：
這一步可能需要梯子，不然可能加載不出來(lái)...你也可以到Stylish的網(wǎng)站userstyles.org下載安裝。
點(diǎn)擊[選項(xiàng)]進(jìn)入設(shè)置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一鍵在其他電腦上同步使用，不再需要一個(gè)個(gè)手動(dòng)重新添加。
▌樣式推薦
百度：Baidu Lite 百度輕
谷歌：Google Search - Material Design
IT之家：IT之家去廣告,優(yōu)化閱讀
貼吧：TieBa Maverick
知乎：Flat Zhihu 扁平化知乎
微博：Weibo v6 簡(jiǎn)約微博
斗魚：Douyu Cleaner清爽斗魚
夜讀：NightShift - eye care 全局夜間模式
字體：ForceMyFonts 全局字體美化
如果你恰巧會(huì)一點(diǎn)CSS，那么可以自定義修改任意樣式，也可以從頭自己做。
▌什么是CSS（層疊樣式表）？
Stylus的原理也不復(fù)雜，通過(guò)CSS層疊樣式表改變網(wǎng)頁(yè)樣式，什么字體、背景、邊框、網(wǎng)頁(yè)布局，統(tǒng)統(tǒng)在它的掌控之中，就像整形一樣，換個(gè)鼻子、調(diào)個(gè)眼睛什么的，還是全程無(wú)痛。
CSS很復(fù)雜，但是Stylus簡(jiǎn)單好用、沒(méi)啥學(xué)習(xí)成本，所以這部分只是當(dāng)簡(jiǎn)單的拓展講一下：
那它是如何誕生的呢？這還得從1993年說(shuō)起，早期網(wǎng)頁(yè)使用的是RRP樣式，僅支持一個(gè)樣式表，只能顯示文字，看網(wǎng)頁(yè)的體驗(yàn)可能還不如看報(bào)紙來(lái)的豐富。之前在《瀏覽器的輝煌發(fā)展史》（戳這里）中咱們提到過(guò)一款Mosaic（馬賽克）瀏覽器，
開始采用HTML標(biāo)簽實(shí)現(xiàn)樣式表達(dá)，支持了書簽、圖標(biāo)按鈕、圖片顯示這些革命性的功能、沿用至今。網(wǎng)景最早支持HTML框架顯示，也就是最簡(jiǎn)單的table布局，
可以調(diào)整內(nèi)外邊距，網(wǎng)頁(yè)看著更舒服，優(yōu)點(diǎn)是兼容性高，但既要負(fù)責(zé)圖文內(nèi)容、又要負(fù)責(zé)排版樣式，注定了他的樣式不夠美觀。
魏培源開發(fā)的ViolaWWW瀏覽器用了有層次嵌套性的樣式表，率先支持用<Link>標(biāo)簽引用外部樣式表（可以簡(jiǎn)單理解為：你請(qǐng)了個(gè)美工幫你改善改善）。但各家瀏覽器各用各的，豈不是亂了套？1994年，以萬(wàn)維網(wǎng)之父老李為首的W3C萬(wàn)維網(wǎng)聯(lián)盟，開始提供網(wǎng)絡(luò)標(biāo)準(zhǔn)化建議。
同年老萊（H?kon W Lie）提出層疊HTML樣式表（CHSS）支持用戶自定義樣式，網(wǎng)頁(yè)作者可以自己DIY版面，不同的規(guī)則用不同的百分比呈現(xiàn)，這也是CSS的雛形。隔壁的波斯正在做一款A(yù)rgo瀏覽器，兩人相談盛歡、打算合作。
1996年底出現(xiàn)了一種和CSS語(yǔ)法很像的表現(xiàn)指明語(yǔ)言，PSL 96，可以根據(jù)不同的瀏覽器信息，自動(dòng)判斷用什么樣式。年底，CSS已經(jīng)完成，支持改變字體大小、字形、顏色、間距、排列、表格、邊框、id、class等等，如果說(shuō)普通網(wǎng)頁(yè)是你剛買到手的毛坯房，那么CSS就是你給它做裝修。
但由于早期網(wǎng)頁(yè)設(shè)計(jì)師濫用HTML導(dǎo)致了“tagsoup標(biāo)簽湯”問(wèn)題，哪怕微軟在IE上逐步實(shí)現(xiàn)CSS，但BUG依然不少（
果然BUG是微軟祖?zhèn)鰾UFF）。
隔壁對(duì)手網(wǎng)景則推出了JS（JavaScript）語(yǔ)言，瀏覽器大戰(zhàn)沒(méi)有勝者，當(dāng)時(shí)的網(wǎng)頁(yè)設(shè)計(jì)師被迫要為IE和網(wǎng)景分別設(shè)計(jì)一套網(wǎng)頁(yè)，頭都?xì)舛d了...
于是民間團(tuán)體WaSP（網(wǎng)頁(yè)標(biāo)準(zhǔn)計(jì)劃）發(fā)動(dòng)水軍推動(dòng)W3C 標(biāo)準(zhǔn)化，怒噴那些不加盟的廠商。在1998年出臺(tái)CSS2，他們之中的7位主要成員成立了CSS 武士團(tuán)（CSS Samurai），催廠商們改善對(duì)CSS的支持，Opera照做了，但微軟依舊無(wú)動(dòng)于衷。
可能也是因?yàn)榇蠹铱床坏紺SS的優(yōu)勢(shì)，覺(jué)得沒(méi)必要，但2003年，Dave Shea推出了CSS 禪意花園（CSS Zen Garden）來(lái)展示樣式效果，也就是搭了個(gè)“樣板房”，讓設(shè)計(jì)師們熱血沸騰起來(lái)。
在2006~2009年間，DIV+CSS布局開始取代傳統(tǒng)表格布局，CSS3引入了簡(jiǎn)單動(dòng)畫等功能，插了JS一腳，還有靈活的flex彈性布局，沿用至今，而2011年開始設(shè)計(jì)的CSS4特性目前支持的還太少。
▌其他瀏覽器
你說(shuō)為啥不直接用Stylish呢？因?yàn)?年前原作者賣給SimilarWeb之后，它涉嫌竊取用戶瀏覽歷史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的開發(fā)分支，也是原作者維護(hù)的最后一個(gè)版本，作為GH上的開源項(xiàng)目，代碼公開審查，可以安心食用啦。
除了Chrome外，F(xiàn)irefox、Opera也都支持，Safari可以用FreeStyler（你也要來(lái)一段說(shuō)唱嗎），同類插件還有xStyle。當(dāng)然，由于win的字體渲染并不美觀，還可以搭配MacType使用，關(guān)于它的配置方法，咱們以后繼續(xù)說(shuō)。
參考&引用：
sspai.com/post/40485
sspai.com/post/45537
github.com/openstyles/stylus
zhihu.com/search?type=content&q=css
zhihu.com/question/24826065/answer/194294438
zh.wikipedia.org/wiki/層疊樣式表?oldformat=true
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
