HTML與CSS學習記錄

時間 2019-12-02

標籤 html css 學習記錄欄目 HTML 简体版

原文原文鏈接

title: HTML與CSS學習記錄
toc: true
date: 2018-09-10 14:04:59css

《HTML與CSS進階教程讀書筆記》html

HTML基礎知識

HTML與XHTML

HTML指超文本標記語言，是構成網頁文檔的主要語言。咱們常說的HTML指HTML4.01。html5

XHTML指擴展的超文本標記語言，是XML風格的、更嚴格、更純淨的HTML。css3

二者的主要區別：web

XHTML標籤必須閉合。
XHTML標籤和屬性必須小寫。
XHTML標籤屬性必須加引號。
XHTML標籤用id屬性代替name屬性。

id和class

因爲id屬性具備惟一性，所以W3C建議，對於頁面關鍵的結構或大結構，才能使用id屬性，其餘地方使用class屬性。瀏覽器

由於搜索引擎是根據標籤的語義和id屬性來識別的，所以id屬性的使用和命名都須要謹慎。性能優化

通常來講，定義多個class的目的在於：一個class抽取公共樣式，一個class定義單獨樣式。網絡

標題欄小圖標

在head標籤內加入：app

<link rel="shortcut icon" type="image/x-icon" href="圖標路徑.ico" />

其中rel和type是固定屬性不用更改，只須要修改圖片路徑便可。ide

語義化

HTML的精髓在於標籤的語義。搜索引擎根據HTML代碼識別頁面結構。

編寫語意結構良好的頁面的好處：

利於開發調試和後期維護。
利於搜索引擎優化。

應優先使用正確的語義化標籤，若是沒有語義化標籤可用，再考慮div或者span等無語義標籤。

標題語義化

h1-h6是標題標籤，相比於其餘標籤，它們在搜索引擎優化（SEO）中佔有至關重要的地位。

通常用到h4，h5和h6權重和普通標籤差很少，不多使用。

對於標題語義化，咱們須要注意的是：

一個頁面只能有一個h1標籤。
h1-h6之間不要出現斷層。
不要用標題標籤來定義樣式（如爲了加粗字體而爲文本加上標題標籤）。
不要用div來代替標題標籤。

div是無語義的標籤，若是使用div代替標題標籤會使網頁在SEO中丟失大量權重。

圖片語義化

alt屬性和title屬性

alt是給搜索引擎看的，title是給用戶看的。

搜索引擎根據alt屬性或上下文判斷圖片內容。

所以img標籤必須添加alt屬性。

figure元素和figcaption元素

對於圖片+圖注的效果，使用figure和figcaption來加強圖片語義化。

例：

<figure>
    <img src="xxx" alt="xxx" />
    <figcaption>這是一個圖注</figcaption>
</figure>

更詳細的介紹能夠看這一篇博客。

表格語義化

標籤	說明
table	表格
caption	標題
thead	表頭（語義劃分）
tbody	表身（語義劃分）
tfoot	表尾（語義劃分）
tr	行
th	表頭單元格
td	表格單元格

表單語義化

label標籤

label標籤的for屬性有兩個做用：

語義上綁定了label元素和表單元素。（<label for="element_id">）
當咱們點擊label中的文本時，其關聯的表單元素也會得到焦點。

例：

<input id="rdo" name="rdo" type="radio" /><label for="rdo">單選框</label>

fieldset標籤和legend標籤

fieldset標籤用於給表單元素進行分組並繪製一個邊框，legend標籤用於定義某一組表單的標題。

例如這個例子：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

做用：

加強表單語義。
可使用fieldset標籤的disabled屬性來禁用整個組中的表單元素。

其餘語義化

換行符<br />

W3C標準規定，<br />標籤只能用於段落中的換行。即只能用於p標籤內部。

無序列表ul

對於列表型數據，不建議使用div實現，而應用無序列表或有序列表實現。

爲了實現外觀效果，通常使用無序列表而不是有序列表。

strong 標籤和em標籤

W3C對這兩個標籤賦予了「強調」的語義。

能夠在CSS中從新定義它們的樣式而不會改變它們的語義。

del標籤和ins標籤

這兩個標籤通常是配合使用表示更新文本：「delete」和「insert」，被刪除的文本和被更新的文本。

通常會用CSS從新定義它們的樣式。

實例連接

img標籤

對於何時使用img標籤，何時使用背景圖片，應該根據HTML的語義來判斷。

img標籤：做爲HTML的一部分，但願被搜索引擎識別。
背景圖片：只起到修飾做用，不但願被搜索引擎識別。

語義化驗證

經過去掉CSS樣式，觀察頁面是否還有很好的可讀性來判斷一個頁面是否語義良好。

HTML5捨棄的標籤

下邊這些已經被捨棄的標籤(僅爲了定義樣式的標籤和不多使用或已經被新標籤代替的標籤)應中止使用：

<acronym> 定義首字母縮寫，應用abbr代替。
<applet> 定義嵌入的applet，應用object代替。
<basefont>
<big>
<center>
<dir> 定義目錄列表，應用ul代替。
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

CSS基礎知識

CSS單位

px

pixel，像素，一個圖片或計算機屏幕中最小的點。

百分比%

CSS中支持百分比的屬性：

width、height、font-size，它們的百分比是相對於父元素的「相同元素」的值來計算的。
line-height，它的百分比是相對於父元素的font-size值來計算的。
vertical-align，它的百分比是相對於當前元素繼承的line-height值來計算的。

em

1em等於當前元素的以px爲單位的font-size值，

若當前元素的font-size值沒有定義，則從父元素繼承，

若當前元素的全部祖先元素都沒有定義font-size，則繼承瀏覽器默認的font-size值：16px。

使用em的小技巧：首行縮進使用 text-indent: 2em實現。

rem

CSS3新引入的單位，指相對根元素（即html元素）的字體大小。

CSS特性

繼承性

指子元素繼承了父元素的某些樣式屬性。

在CSS中，具備繼承性的樣式有三大類：

文本相關屬性： font--family，font-size，font-style，font-weight，font，line-height，text-align，text-indent，word-spacing。
列表相關屬性： list-style-image，list-style-position，list-style-type，list-style。
顏色相關屬性： color。

層疊性

「後者居上」原則。

CSS的層疊性指樣式的覆蓋。對於具備相同權重的相同屬性，以最後定義的值爲準。

CSS優先級

引用方式

行內樣式>(內部樣式=外部樣式)

若同時存在權重相同內部樣式和外部樣式，則以最後引入的樣式爲準。

繼承方式

以最近的祖先元素爲準。

指定樣式

常見的僞元素——:before、:after、:first-letter、:first-line。

常見的僞類——:hover、:first-child等。

經常使用的選擇器優先級：行內樣式>id選擇器>class選擇器>元素選擇器。

選擇器權值表：

選擇器	權值
通配符	0
僞元素	1
元素選擇器	1
class選擇器	10
僞類	10
屬性選擇器	10
id選擇器	100
行內樣式	1000

繼承樣式和和指定樣式

指定樣式權重更高。

!important

權值最高，不推薦使用。

CSS引入方式

導入樣式表（加載html後加載css，不推薦）
外部樣式表（link標籤）
內部樣式表（style標籤）
行內樣式表

CSS選擇器

CSS出去基本的選擇器（元素選擇器、id選擇器、class選擇器、羣組或分組選擇器），

還有層次選擇器：

選擇器	說明
M N	後代選擇器，選擇M元素全部內部後代N元素
M>N	子代選擇器，選擇M元素全部內部子代N元素
M~N	兄弟選擇器，選擇M元素全部同級N元素
M+N	相鄰選擇器，選擇M元素相鄰的下一個同級元素

CSS規範

命名規範

CSS文件命名

開發階段按照功能模塊劃分CSS文件。

文件名	說明
reset.css	重置樣式，重置元素默認樣式
global.css	全局樣式，全站公用，定義頁面基礎樣式
themes.css	主題樣式，用於實現換膚功能
module.css	模塊樣式，用於模塊的樣式
master.css	母版樣式，用於母版頁的樣式
columes.css	專欄樣式，用於專欄的樣式
forms.css	表單樣式，用於表單的樣式
mend.css	補丁樣式，用於維護、修改的樣式
print.css	打印樣式，用於打印的樣式

id和class命名

建議使用中劃線命名，例如column-title。

爲了不class命名的重複，通常取父元素的class名做爲前綴，例如column-title。

網頁主體部分	命名
最外層	wrapper(通常用於包裹整個頁面)
頭部	header
內容	content
側欄	sidebar
欄目	column
熱點	hot
新聞	news
下載	download
標誌	logo
導航條	nav
主體	main
左側	main-left
右側	main-right
底部	footer
友情連接	friendlink
加入咱們	joinus
版權	copyright
服務	service
登陸	login
註冊	register

導航部分	命名
主導航	main-nav
子導航	sub-nav
邊導航	side-nav
左導航	leftside-nav
右導航	rightside-nav
頂導航	top-nav

菜單部分	命名
菜單	menu
子菜單	submenu

其餘	命名
標題	title
摘要	summary
登陸條	loginbar
搜索	search
標籤頁	tab
廣告	banner
小技巧	tips
圖標	icon
法律聲明	siteinfolegal
網站地圖	sitemap
工具條	tool、toolbar
首頁	homepage
子頁	subpage
合做夥伴	partner
幫助	help
指南	guide
滾動	scroll
提示信息	msg
投票	vote
相關文章	related
文章列表	list

書寫規範

對於功能代碼，應該集中放在一塊兒，

對於其餘代碼，應按照以下順序：

影響文檔流屬性（佈局屬性）——display，position，float，clear等
自身盒模型屬性——width，height，padding，margin，border，overflow等
文本性屬性——font，line-height，text-align，text-indent，vertical-align等
裝飾性屬性——color，background-color，opacity等
其餘屬性——cursor，content，list-style，quotes等

例如：

#main {
  /* 影響文檔流屬性 */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  /* 盒子模型屬性 */
  width: 100px;
  height: 100px;
  border: 2px solid gray;
  /* 文本性屬性 */
  font-size: 15px;
  font-weight: bold;
  text-indent: 2em;
  /* 裝飾性屬性 */
  color: white;
  background-color: red;
  /* 其餘屬性 */
  cursor: pointer;
}

註釋規範

頂部註釋

/*
 *@description:說明
 *@author:做者
 *@update:更新時間，如2018-09-10 17:42
 */

模塊註釋

/* 導航部分，開始 */
......
/* 導航部分，結束 */

簡單註釋

/* 單行註釋 */

或者

/*多行註釋
 *多行註釋
 *多行註釋
 */

CSS reset

重置樣式，去除元素在瀏覽器中的默認樣式。

是否使用CSS reset根據實際開發需求而定。

盒子模型

外邊距疊加

又稱爲「margin疊加」，指當兩個外邊距相遇時會「合二爲一」。疊加後的外邊距爲兩個外邊距的最大值。

只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

如下圖片均來自w3school

負margin

當margin-top或者margin-left爲負數時，當前元素會被拉向指定方向。
當margin-bottom或者margin-right爲負數時，後續元素會被拉向指定方向。

這裏有一篇文章講得不錯，能夠參考一下。

聖盃佈局、雙飛翼佈局就是利用這個實現的。

overflow

當浮動引發父元素高度塌陷時，能夠爲父元素加上overflow: hidden來清除浮動。

display屬性

屬性值	說明
inline	行內元素
block	塊元素
inline-block	行內塊元素
table	以表格形式顯示，相似於table元素
table-row	以表格行形式顯示，相似於tr元素
table-cell	以表格單元格形式顯示，相似於td元素
none	隱藏元素

塊元素

獨佔一行
內部能夠容納其餘塊元素或行元素
能夠定義width和height
能夠定義四個方向的margin

inline元素

能夠與其餘行內元素位於同一行
能夠容納行內元素，但不能容納塊元素
沒法定義width和height
能夠定義margin-left和margin-right，不能定義margin-top和margin-bottom

inline-block元素

能夠定義width和height
能夠與其餘行內元素位於同一行

常見的inline-block元素：img元素和input元素

display: table-cell

能夠用於實現：

圖片垂直居中於元素
等高佈局
自動平均劃分元素，並在同一行顯示

去除inline-block元素間距

在父元素中添加font-size: 0

文本效果

文本屬性	說明
text-decoration	下劃線、刪除線、頂劃線
text-transform	文本大小寫
font-variant	將英文文本轉換爲小型大寫字母
text-indent	段落首行縮進
text-align	文本水平對齊
vertical-align	文本垂直對齊
line-height	行高
letter-spacing	字距
word-spacing	詞距

text-indent

可使用 text-indent: -9999px;來隱藏文本。

text-align

主要使用的值爲left、right、center，對文字、inline元素、inline-block元素都起做用，對塊元素不起做用。

利用margin: 0 auto實現塊元素的水平居中。

text-align: center在父元素中定義，margin: 0 auto在當前元素中定義。

line-height

關於頂線、中線、基線、底線能夠自行查閱。

行高（line-height）指的是兩行基線之間的距離。

將height和line-height設爲相同值能夠實現文字垂直居中。
當取值爲%或者em時，是相對與父元素的font-size計算的。
當取值爲無單位數字時，是相對於當前元素的font-size計算的。

vertical-align

vertical-align對inline、inline-block、table-cell元素有效，對塊元素無效。

用於定義周圍的文字、inline元素、inline-block元素相對於該元素基線的垂直對齊方式。

能夠取負長度值和百分比值。

取值

負值： vertical-align: -2px指的是該元素相對於基線向下偏移2px；
百分比：相對於當前元素繼承的line-height值計算的，也是該元素相對於基線偏移的值；
關鍵字（前四個比較經常使用）：

值	描述
top	把元素的頂端與行中最高元素的頂端對齊
middle	把此元素放置在父元素的中部。
baseline	默認。元素放置在父元素的基線上。
bottom	把元素的底端與行中最低的元素的頂端對齊。
text-top	把元素的頂端與父元素字體的頂端對齊
text-bottom	把元素的底端與父元素字體的底端對齊。
sub	垂直對齊文本的下標。
super	垂直對齊文本的上標
inherit	規定應該從父元素繼承 vertical-align 屬性的值。

應用

爲img添加vertical-align: middle能夠實現圖片與周圍的文字居中對齊
要使塊元素（如div）也可使用此屬性，能夠爲其先定義display: table-cell

表單效果

radio與checkbox

默認狀況下因爲是基線對齊所以視覺上會感受單選框或複選框旁邊的文字比它們低，這個時候可使用vertical-align來讓他們垂直居中對齊。

可使用關鍵字，也可使用數值。

textarea

可使用max-width和max-height來限制拖拽大小
可使用resize: none來禁止拖拽

要使textarea在不一樣瀏覽器中具備相同的外觀，能夠：

使用CSS的width和height定義大小
使用overflow: auto來定義textarea滾動條自適應

表單對齊

書上給了註冊的例子：

實現方法：

每一行表單分爲左欄加若干右欄
1. 全部行的左欄長度相等
2. 全部行的右欄全部盒子長度之和相等
3. 左欄通常爲一個label，右欄爲若干文本框
全部左欄和右欄盒子都設爲左浮動
左欄添加屬性text-align: right使得文字右對齊
每一行左欄盒子長度加上全部右欄盒子長度之和等於行寬
每一行由一個p包裹住，併爲p添加overflow: hidden來清除浮動

而後我又去看了一下各網站的登陸界面，基本上是一個icon+一個input的模式：

實現方法：

icon使用position: absolute脫離文檔流並蓋在input上
input將padding-left調到合適大小使得輸入框不被icon蓋住

浮動佈局

文檔流

簡單來講就是元素在頁面中出現的前後順序。

正常文檔流：「normal flow」，指默認狀況下頁面元素的佈局狀況。
脫離文檔流：脫離正常文檔流。要改變正常文檔流，使用浮動和定位方法。

浮動

可使元素移到左邊或者右邊，而且容許後邊的文字和元素環繞着它。

浮動後使用margin來定義和其餘元素之間的間距。

絕對定位的元素忽略float屬性。

float的取值表以下，默認爲none：

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

當一個元素添加float屬性爲left或者right時，它將變爲block類型。
浮動元素脫離正常文檔流，若其height大於父元素的height或者父元素的height未定義，會形成父元素高度塌陷。能夠爲父元素添加overflow: hidden來解決。
若父元素和子元素都是浮動元素，則父元素會自適應地包含子元素。
若兄弟元素不是浮動元素，因爲浮動元素脫離文檔流，可能會出現覆蓋等狀況。

清除浮動

clear: both，用於浮動元素後邊的元素，表示兩邊不容許出現浮動元素。
overflow: hidden，用於浮動元素的父元素，但會隱藏超出父元素的內容部分。
實際開發中，更常用:after僞元素結合clear: both來實現。
爲了兼容ie，爲父元素添加zoom: 1來消除浮動。

定位佈局

屬性值

值	描述
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成固定定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
sticky	粘性定位，該定位基於用戶滾動的位置。它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 須要使用 -webkit- prefix (查看如下實例)。
inherit	規定應該從父元素繼承 position 屬性的值。
initial	設置該屬性爲默認值，詳情查看 CSS initial 關鍵字。

absolute會將元素轉換爲塊元素。
若想要子元素相對於父元素定位，通常給父元素添加position: relative，給子元素定義position: absolute來實現。祖先元素同理。

z-index屬性

默認狀況下設置z-index無效，只有當元素定義position爲relative、absolute、fixed時纔會激活，z-index值越大，其堆疊順序越高，越靠上（z方向上的靠上）。

CSS圖形

因爲圖片大小比較大，數據傳輸量大且一張圖片會引起一次HTTP請求，所以對徐圖形效果，通常更傾向於用CSS實現。

這裏有一篇CSS製做圖形速查表總結得比較全面，能夠參考。

另外對於帶有邊框的圖形，通常是用大小不一樣的兩個相同圖形實現，小的覆蓋在大的上邊。

性能優化

屬性縮寫

border：border: 1px solid red
- 若不想要底邊框，能夠加上border-bottom: 0
- 若只想要底邊框，能夠border-bottom: 1px solid red
padding：
- padding: 10px指上右下左均爲10px
- padding: 10px 20px指上下爲10px，左右爲20px
- padding: 10px 20px 30px 40px的順序爲上右下左，從上開始按照順時針順序
margin：相似於padding
background： background: url('xxx.jpg') no-repeat 80px 40px,最後爲background-position
font： font: "微軟雅黑" 12px/1.5em bold
- 順序爲font-family、font-size、line-height、font-weight
- 簡寫形式必須指定font-family和font-size的值，其餘屬性沒有指定則爲默認值
- 簡寫形式中font-size和line-height之間須要加入一個斜槓/
color：十六進制的顏色值若每兩位值相同，能夠縮寫一半，好比color: #112233能夠縮寫爲color: #123

語法壓縮

當一個CSS規則只有一兩個屬性的時候，使用橫向書寫
能夠省略最後一個屬性的分號
background-image、cursor等屬性url()中的路徑不用加引號
若是某一個屬性值爲0，則不須要加單位
若是某一個屬性值是以0爲開頭的小數，能夠吧0省略
使用羣組選擇器合併相一樣式
若同一個父元素的多個子元素都定義了相同的可繼承屬性，把這些屬性定義在父元素中來精簡代碼

CSS壓縮

書中推薦了兩個在線的壓縮工具：CSS Compressor 和 YUI Compressor

以YUI Compressor爲例，它會對CSS文件執行以下操做：

刪除全部註釋
刪除無用空白符
刪除結尾分號
刪除屬性值爲0的單位
刪除以0開頭的小數前的0
合併類似屬性（屬性縮寫）
將RGB顏色轉換爲十六進制顏色

圖片壓縮

書中推薦的圖片壓縮工具：

在線的JPEGmini和TinyPNG以及本地的ImageOptim

高性能的選擇器

瀏覽器對選擇器規則是從右到左進行解析的。

CSS選擇的匹配效率：

id選擇器
class選擇器
元素選擇器
相鄰選擇器
子選擇器
後代選擇器
通配符選擇器
屬性選擇器
僞類選擇器

所以在使用選擇器時應注意：

儘可能不要使用通配符
不要在id選擇器和class選擇器前添加元素名
選擇器最好不要超過三層，靠右的選擇條件應儘量精確
避免使用後代選擇器，儘可能少使用子選擇器

CSS技巧

水平居中

文字、inline元素和inline-*元素： text-align: center
塊元素： margin: 0 auto

垂直居中

行內塊元素使用vertical-align: middle
塊元素將display改成table-cell而後使用vertical-align
多行文字使用一個標籤將文字包起來並設爲table-cell，而後再設置vertical-align
單行文字設置line-height和height屬性值相同來實現

CSS Sprite

又稱爲CSS精靈或CSS雪碧圖，它將零散的小背景圖合併成一張大背景圖，而後再利用background-position屬性進行定位從而現實小背景圖。

使用CSS Sprite技術時，須要注意：

在開發後期而不是開發前期使用此技術
有條理地組織圖片順序，應將小背景圖按照類別、風格、大小等分門別類地放好
控制雪碧圖的大小，當圖片大小小於200KB時傳輸時間是差很少的，所以雪碧圖應控制在200KB之內

書中推薦了兩個CSS Sprite工具：CSS Sprite Generator 和 Sprite Cow

Icon Font圖標

使用字體文件實現小圖標效果，從而減小圖片的使用。

推薦的Icon Font網站：http://www.iconfont.cn/

網站上就有使用教程

重要概念

包含塊

containing block，決定一個元素大小和定位的元素。

時視覺格式化模型中的一個重要概念，與CSS盒子模型相似。其做用主要是爲其內部的後代元素提供一個參考。

根元素（HTML元素）沒有父元素，它存在的包含塊被稱爲初始包含塊
定位爲fixed的元素的包含塊爲瀏覽器窗口
定位爲是static和relative的元素的包含塊是它最近的塊級（block、inline-block或table-cell）祖先元素建立的
定位爲absolute的元素的包含塊是它最近的定位不是static的祖先元素，能夠是塊元素也能夠是行內元素

層疊上下文

一個元素在z軸上的堆疊順序：

層疊級別越大越靠上
同等層疊級別，後邊的堆疊在前邊的上邊（後來者居上）
不一樣的層疊上下文比較的是父級層疊上下文，與自身無關

BFC和IFC

BFC： block formatting context，塊級格式上下文

IFC： inline formatting context，行級格式上下文

若一個元素具有如下任何一個條件，則會創造創造一個新的BFC：

根元素
float屬性不是none
position屬性是absolute或fixed
overflow屬性值不是visible
display屬性爲inline-block、table-caption、table-cell

W3C描述BFC的特色爲：

在一個BFC中，盒子從頂端開始垂直一個接着一個地排列。兩個相鄰盒子之間的垂直間距有margin決定。同一個BFC中，兩個相鄰塊盒子之間垂直方向上的外邊距會疊加。
在一個BFC中，每個盒子的左外邊界（margin-left）會緊貼着容器的border-left，右邊同理，即便存在浮動元素也是如此。

能夠獲得結論：