HTML5/CSS3基础
生活随笔
收集整理的這篇文章主要介紹了
HTML5/CSS3基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
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的優點
- 1、提高可用性和改進用戶的友好體驗；
- 2、有幾個新的標簽，這將有助于開發人員定義重要的內容；
- 3、可以給站點帶來更多的多媒體元素(視頻和音頻)；
- 4、可以很好的替代FLASH和Silverlight；
- 5、當涉及到網站的抓取和索引的時候，對于SEO很友好；
- 6、將被大量應用于移動應用程序和游戲；
- 7、可移植性好。
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。
W3C(World Wide Web Consortium)
萬維網聯盟(World Wide Web Consortium)
萬維網聯盟創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，W3C已發布了200多項影響深遠的Web技術標準及實施指南，如廣為業界采用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效獲得Web內容的信息無障礙指南（WCAG）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用。
WHATWG(Web Hypertext Application Technology Working Group)
網頁超文本應用技術工作小組是一個以推動網絡HTML 5 標準為目的而成立的組織。
在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。
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鍵為準。
2.4 HTML 注釋
<!-- 注釋內容 --> <!--這里全是注釋都是注釋 -->2.5 HTML 實體 (特殊字符)
| ? | 空格 | ? |   |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ￠ | ¢ |
| ￡ | 鎊（pound） | ￡ | £ |
| ￥ | 元（yen） | ￥ | ¥ |
| € | 歐元（euro） | € | € |
| § | 小節 | § | § |
| ? | 版權（copyright） | ? | © |
| ? | 注冊商標 | ? | ® |
| ? | 商標 | ? | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
3 HTML常用標簽
3.1 文檔聲明
你可使用此聲明在 Internet Explorer 6 及以后版本中切換為嚴格的標準兼容模式。
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>?標簽定義文檔與外部資源的關系。
<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 文檔定義樣式信息。
-
<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屬性關聯到一個名稱
authordescriptionkeywordsgeneratorrevisedrobotsothers -
http-equiv 把 content 屬性關聯到 HTTP 頭部。
content-type expires refresh set-cookie -
charset 字符集編碼
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新增?標簽定義字符（中文注音或字符）的解釋或發音
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： 保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。
轉載于:https://www.cnblogs.com/ouyang99-/p/9784066.html
總結
以上是生活随笔為你收集整理的HTML5/CSS3基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 七牛云注册创建oss并配置自定义域名
- 下一篇： 2017前端资源汇总