day43-HTML、CSSHTML5/CSS3基礎

時間 2019-11-16

標籤 day43 day html csshtml5 csshtml css3 css 基礎欄目 HTML 简体版

原文原文鏈接

1. HTML

1.1 什麼是HTML

HTML是用來製做網頁的標記語言
HTML是Hypertext Markup Language的英文縮寫,即超文本標記語言
HTML語言是一種標記語言,不須要編譯,直接由瀏覽器執行
HTML文件是一個文本文件,包含了一些HTML元素,標籤等
HTML文件必須使用.html或.htm爲文件名後綴
HTML是大小寫不敏感的,HTML與html是同樣的
HTML是由W3C的維護的
HTML 是通向 WEB 技術世界的鑰匙。

1.2 發展歷史

HTML是從2.0版本開始的，實際上沒有1.0的官方規範,在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準） HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
HTML 5——2014年10月28日，W3C推薦標準

1.3 HTML5的由來

HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工做團隊。
HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。
2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：「HTML5是開放的Web網絡平臺的奠定石。」
2013年5月6日， HTML 5.1正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的做者，努力提升新元素互操做性。
2014年10月29日，萬維網聯盟宣佈，通過接近8年的艱苦努力，該標準規範終於制定完成。

1.4 HTML5的優勢

一、提升可用性和改進用戶的友好體驗；
二、有幾個新的標籤，這將有助於開發人員定義重要的內容；
三、能夠給站點帶來更多的多媒體元素(視頻和音頻)；
四、能夠很好的替代FLASH和Silverlight；
五、當涉及到網站的抓取和索引的時候，對於SEO很友好；
六、將被大量應用於移動應用程序和遊戲；
七、可移植性好。

1.5 HTML5的兼容性

Internet Explorer 9 以及以上版本
chrome、Safari、opera、Firefox和各類以wekkit爲內核的國產瀏覽器

附：相關組織

IETF(The Internet Engineering Task Force)

國際互聯網工程任務組（The Internet Engineering Task Force，簡稱 IETF）
互聯網工程任務組，成立於1985年末，是全球互聯網最具權威的技術標準化組織，主要任務是負責互聯網相關技術規範的研發和制定，當前絕大多數國際互聯網技術標準出自IETF。javascript

W3C(World Wide Web Consortium)

萬維網聯盟(World Wide Web Consortium)
萬維網聯盟建立於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前爲止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，如廣爲業界採用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效得到Web內容的信息無障礙指南（WCAG）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐做用。css

WHATWG(Web Hypertext Application Technology Working Group)

網頁超文本應用技術工做小組是一個以推進網絡HTML 5 標準爲目的而成立的組織。
在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。html

2 HTML基本語法

2.1 HTML標籤

標籤是HTML中最基本單位,也是最重要組成部分
一般要用兩個角括號括起來:<和>
標籤都是閉合的（兩種形式：成對與不成對）
雙標籤（成對）: <標籤名>內容</標籤名> 如：<table></table> 即分起始和結束
單標籤（不成對）: <標籤名 />; 如： <br/>、<hr/>
標籤是大小寫無關的,<body>;跟<BODY>表示意思是同樣的，標準推薦使用小寫，這樣符合XHTML標準。
對於HTML標籤來說，最重要的是語義

2.2 HTML標籤屬性

HTML屬性通常都出如今HTML的開始標籤中, 是HTML標籤的一部分。
標籤能夠有屬性,它包含了額外的信息.屬性的值必定要在雙引號中。
標籤能夠擁有多個屬性。
屬性由屬性名和值成對出現。

語法格式以下：

<標籤名 屬性名1="屬性值" 屬性名2="屬性值" ... 屬性名N="屬性值"> <!– 輸出內容… --> </標籤名>

2.3 HTML代碼格式

任何回車或空格在源代碼中都是不起做用，
因此在編寫HTML代碼時，均可以使用回車或者空格進行代碼排版，
這樣可使代碼清晰，也便於團隊合做。必須保持嚴格的縮進規則，以Tab鍵爲準。html5

2.4 HTML 註釋

<!-- 註釋內容 --> <!-- 這裏全是註釋 都是註釋 -->

2.5 HTML 實體 (特殊字符)

	描述	實體名稱	實體編號
	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分（cent）	¢	¢
£	鎊（pound）	£	£
¥	元（yen）	¥	¥
€	歐元（euro）	€	€
§	小節	§	§
©	版權（copyright）	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

3 HTML經常使用標籤

3.1 文檔聲明

你可以使用此聲明在 Internet Explorer 6 及之後版本中切換爲嚴格的標準兼容模式。java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>

3.2 HTML主體結構標籤

<html></html> 此元素可告知瀏覽器其自身是一個 HTML 文檔。
<head></head> 用於定義文檔的頭部，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。
<body></doby> 定義文檔的主體

3.3 HEAD頭部標籤

<title></title> 定義文檔標題
<base /> 標籤爲頁面上的全部連接規定默認地址或默認目標
<meta /> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。<meta> 標籤永遠位於 head 元素內部。
```
<meta charset="utf-8"> 
```

<link></link> 標籤訂義文檔與外部資源的關係。web

<link rel="stylesheet" type="text/css" href="style.css"></link> <link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">

<style></style> 籤用於爲 HTML 文檔定義樣式信息。chrome
<script></script> 標籤用於定義客戶端腳本，好比 JavaScript。script 元素既能夠包含腳本語句，也能夠經過 src 屬性指向外部腳本文件。瀏覽器
```
<script type="text/javascript" src="script.js"></script> <script> alert('OK') </script> 
```

3.4 meta元信息

content 定義與 http-equiv 或 name 屬性相關的元信息

name 把content屬性關聯到一個名稱ruby

author

description

keywords

generator

revised

robots

others

http-equiv 把 content 屬性關聯到 HTTP 頭部。cookie
```
content-type
expires
refresh
set-cookie
```
charset 字符集編碼

編碼字符集
<meta charset="utf-8"> HTML5 支持 HTML5向下兼容 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML 4支持 網頁關鍵字： <meta name="keywords" content="8-12個以英文逗號隔開的單詞/詞語"> 網頁描述信息 <meta name="description" content="80字之內的一段話，與網站內容相關"> <!--下面的內容，只須要了解。 本身看看--> 全部搜索引擎，抓取這個頁面、爬行連接、禁止快照： <meta name="robots" content="index,follow,noarchive"> all：文件將被檢索，且頁面上的連接能夠被查詢； none：文件將不被檢索，且頁面上的連接不能夠被查詢； index：文件將被檢索； follow：頁面上的連接能夠被查詢； noindex：文件將不被檢索，但頁面上的連接能夠被查詢； nofollow：文件將被檢索，但頁面上的連接不能夠被查詢； noarchive：文件將被檢索，但禁止保存快照； 網頁做者： <meta name="author" content="obama"> 網頁網頁生成工具 <meta name="generator" content="Sublime Text3"> 定義頁面最新版本 <meta name="revised" content="David, 2008/8/8/" /> 網頁版權信息： <meta name="copyright" content="2009-2014©版權全部"> 網頁刷新信息： <meta http-equiv="refresh" content="10;url=http://www.baidu.com"> 10秒後跳轉到百度頁面

3.5 格式排版標籤

<br/> 換行標籤，完成文字的緊湊顯示。可使用連續多個<br/>標籤來換行
<hr/> 水平分割線標籤，用於段落與段落之間的分割
<p></p>段落標籤,裏面能夠加入文字,列表,表格等，能夠<p></p>或<p />使用
<pre></pre>按原文顯示標籤，能夠把原文件中的空格,回車,換行,tab鍵表現出來
<hn></hn> 標題字標籤，n爲1-6，定義六級標題，並且會自動換行插入一個空行
<div></div> 沒有任何語義的標籤

3.6 文本標籤

<em></em> 表示強調，一般爲斜體字
<strong></strong> 表示強調(語氣更強)，一般爲粗體字
<del></del> 標籤訂義文檔中已刪除的文本。
<ins></ins> 標籤訂義已經被插入文檔中的文本
<sub></sub> 文字下標字體標籤
<sup></sup> 文字上標字體標籤
<mark></mark> H5新增標籤訂義帶有記號的文本請在須要突出顯示文本時使用,如搜索引擎搜索頁面
<ruby></ruby> H5新增標籤訂義 ruby 註釋（中文註音或字符）在東亞使用，顯示的是東亞字符的發音。
<rt></rt> H5新增標籤訂義字符（中文註音或字符）的解釋或發音

<!--一下文本標籤 做爲了解--> <cite> 用於引證、舉例、(標籤訂義做品（好比書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)一般爲斜體字 <dfn> 定義一個定義項目 <code> 定義計算機代碼文本 <samp> 定義樣式文本 標籤並不常用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以強調的極少狀況下，才使用這個標籤。 <kbd> 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它常常用在與計算機相關的文檔或手冊中。 <abbr> 定義縮寫 配合title屬性 (IE6以上) <bdo> 來覆蓋默認的文本方向 dir屬性 值: lrt rtl <var> 定義變量。您能夠將此標籤與 <pre> 及 <code> 標籤配合使用。 <small> 標籤訂義小型文本（和旁註） <b> 粗體字標籤 根據 HTML 5 的規範，<b> 標籤應該作爲最後的選擇，只有在沒有其餘標記比較合適時才使用它。 <i> 斜體字標籤 標籤被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等等。 <u> 下劃線字體標籤 標籤訂義與常規文本風格不一樣的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。 請儘可能避免使用 <u> 爲文本加下劃線，用戶會把它混淆爲一個超連接。 <q> 簽訂義一個短的引用。瀏覽器常常會在這種引用的周圍插入引號。(小段文字) <blockquote> 標籤訂義摘自另外一個源的塊引用。瀏覽器一般會對 <blockquote> 元素進行縮進。(大段文字) (塊狀元素) <address> 定義地址 一般爲斜體 (注意非通信地址) 塊狀元素 <font> H5已刪除 字體標籤，能夠經過標籤的屬性指定文字的大小、顏色及字體等信息 <tt> H5已刪除 打字機文字 <big> H5已刪除 大型字體標籤 <strike> H5已刪除 添加刪除線 <acronym> H5已刪除 首字母縮寫 請使用<abbr>代替 <bdi> H5新增 標籤容許您設置一段文本，使其脫離其父元素的文本方向設置。(經測試,各大瀏覽器都不起做用) <mark> H5新增 標籤訂義帶有記號的文本 請在須要突出顯示文本時使用,如搜索引擎搜索頁面 <meter> H5新增 定義預約義範圍的度量 <progress> H5新增 標籤標示任務的進度（進程） <time> H5新增 定義時間和日期 <wbr> H5新增 規定在文本中的何處適合添加換行符。Word Break Opportunity

4 CSS基礎語法

4.1 使用方法

寫在標籤內的style屬性中

<p style="color:red;"</p>

寫在<style> 元素中

<style> p { color:red } </style>

外部導入

<link rel="stylesheet" type="text/css" href="./style.css">

4.2 CSS格式組成

選擇器負責圈定範圍，要修改的元素集合聲明由屬性名和屬性值組成，中間用冒號鏈接(屬性名:屬性值)，用於設定具體樣式
CSS由選擇器和一或多個聲明組成，多個聲明之間用分號
```
選擇器{
  屬性名:屬性值;
  屬性名:屬性值;
}
```

4.3 CSS註釋

/*註釋內容*/

4.4 CSS基本長度單位

em 倍數默認字體大小的倍數
px：pixel，像素，屏幕上顯示的最小單位，用於網頁設計，直觀方便；%
百分比
pt：point，是一個標準的長度單位，1pt＝1/72英寸，用於印刷業，很是簡單易用；
cm 釐米
mm 毫米

4.5 CSS基本顏色單位

colorName 顏色名方式 red,green,blue...

RGB十進制數字表示顏色
```
數字（1-255） rgb(255,0,0)
 百分比(1-100) rgb(100%,0,0)
```
RGB十六進制表示
```
#rrggbb
 #rgb  簡寫
```

5 CSS選擇器(基礎)

HTML元素選擇器
```
div { } 
```
ID選擇器
```
#idName { } 
```
CLASS選擇器
```
.className { } 
```
全局選擇器
```
* {

 }
```

組合: 後代元素

選擇器 選擇器 {

 }
 .nav li {} #box div {} div .list {} .container li {}

組合：子元素

選擇器>選擇器 {

 }
 .nav>li {} #box>div {} div>.list {} .container>li {}

組合：羣組選擇器

選擇器,選擇器，選擇器 {

 }

 body,ul,li,p,figure,table,.item,.list-item { }

組合：多選擇器

div.item { } .item.list-item { } div#container { }

6 選擇器優先級

計算 選擇符 中ID的數量(=a)                    
計算 選擇符 中 類選擇器 屬性選擇器 僞類選擇器 的數量(=b)    
計算選擇符 中 標籤選擇器 僞對象選擇器的數量 (=c)        
忽略全局選擇器                            
a的權重100  b的權重10   c的權重1    相加

7 CSS經常使用屬性和值

7.1 字體屬性

font

font:字體風格[字體加粗]<字體大小>[/行高]<字體族科>

font-family 字體族科宋體|微軟雅黑

font-family:"Arial","Helvetica",sans-serif;

font-size 字體大小
font-style 字體風格 normal | italic | oblique (斜體)
font-weight 字體加粗 normal | bold | lighter
font-variant 字體變形 normal | small-caps

7.2 文字顏色

color 設置文字顏色

7.3 文本屬性

letter-spacing 字母間隔值爲長度，能夠是負值
word-spacing 詞的間距(經過空格識別)

text-decoration 文字修飾

underline
overline
line-through
none(默認)

text-align 橫向排列 left | right | center

vertical-align 垂直對其方式

baseline： 將支持valign特性的對象的內容與基線對齊 
sub： 垂直對齊文本的下標 
super： 垂直對齊文本的上標 
top： 將支持valign特性的對象的內容與對象頂端對齊 
text-top： 將支持valign特性的對象的文本與對象頂端對齊 
middle： 將支持valign特性的對象的內容與對象中部對齊 
bottom： 將支持valign特性的對象的文本與對象底端對齊 
text-bottom： 將支持valign特性的對象的文本與對象頂端對齊 
<percentage>： 用百分比指定由基線算起的偏移量。能夠爲負值。基線對於百分數來講就是0%。 
<length>： 用長度值指定由基線算起的偏移量。能夠爲負值。基線對於數值來講爲0。（CSS2）

text-indent 文本縮進 2em(2個字) 50px
line-height 設置行間距離不容許使用負值

word-break 規定自動換行的處理方法

normal        使用瀏覽器默認的換行規則。
break-all    容許在單詞內換行。
keep-all    只能在半角空格或連字符處換行。

word-wrap 容許長單詞或URL地址換行到下一行

normal        只在容許的斷字點換行（瀏覽器保持默認處理）。
break-word    在長單詞或 URL 地址內部進行換行。

overflow-wrap CSS3中把word-wrap 更名爲 overflow-wrap

white-space

normal：     默認處理方式。
pre：        用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱pre對象
nowrap：     強制在同一行內顯示全部文本，合併文本間的多餘空白，直到文本結束或者遭遇br對象。
pre-wrap：   用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字碰到邊界時發生換行。
pre-line：   保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。