推廣 熱搜: WEB前端教程  雅思培訓班  雅思培訓 

WEB前端教程:04HTML5新增元素和css選擇器

   日期:2019-04-21     瀏覽:331    
核心提示:關于HTML5你知道多少?HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。1993年HTML的草案發布,在html5

關于HTML5你知道多少?

HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。

1993年HTML的草案發布,在html5版本之前,html共有4個版本.2.0版、3.2版、4.0版,再到1999年的4.01版。

為什么會有HTML5這個版本?

4.01后,w3c并不看好html,他們轉而去發展XHTML,但并不理想。這時候由瀏覽器廠商們提出的H5標準更能順應web2.0的時代,所以h5被慢慢推廣了起來。

  2004年,瀏覽器主要廠商成立了WHATWG(Web Hypertext Application Technology Working Group)組織,它們創立了HTML5規范,專門針對WEB應用開發新功能(web應用新功能被認為是HTML4中最薄弱的環節)。WEB2.0也正是那個時候提出的。WEB2.0實至名歸,開創了web的第二個時代,舊的靜態網站逐漸讓位于需要更多特性的動態網站和社交網站。2014年10月底(29日),HTML5規范正式定稿。


常見的html5新增語義化標簽

1.header 頁面頭部

2.footer 頁腳

3.article 定義頁面獨立的內容區域

4.aside 定義頁面的側邊欄內容

5.details 文檔某個部分的細節

6.summary 是details中的標題

7.figure 規定獨立的流內容

8.figcaption 是figure的標題

9.mark  標記

10.nav 導航鏈接

11.meter用來表示范圍已知且可度量的內容。

12.ruby加注釋


HTML5新增的結構標簽

<header>...</header>     頭部

<nav>...</nav> 導航

<section>...</section>定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分 

<aside>...</aside>      側邊欄

<footer>...</footer> 頁腳

<article>...</article>代表一個獨立的、完整的相關內容塊,可獨立于頁面其它內容使用。例如一篇完整的論壇帖子,一篇博客文章,一個用戶評論等


HTML5新增的結構標簽

<figure></figure> 用于對元素進行組合。多用于圖片與圖片描述組合

<figure>

<img src=https://www.school#/skin/m03skinBlue/image/nopic.gif alt="figure標簽"  title="figure標簽" />

<figcaption>figure的標題</figcaption>

</figure>


HTML5新增的結構標簽

<details> 標簽用于描述文檔或文檔某個部分的細節

IE不支持 <details> 標簽

<details>

<summary>details中的標題</summary>

<p>詳細的內容</p>

</details>


HTML5新增的結構標簽

<mark>  </mark>

定義帶有記號的文本,它會給你要突出顯示的文本下加個背景色。

如:<p>你是<mark>大長腿</mark>嗎?</p>


<meter> </meter>標簽

<meter> 標簽定義度量衡。僅用于已知最大和最小值的度量。

<meter min="0" max="100" value="80"></meter>

low:最低臨界點

high:最高臨界點

<meter min="0" max="100" value="81" low="20" high="80"></meter>


<progress></progress>標簽

<progress> 標簽定義運行中的進度(進程)

<progress max="100" value="20"></progress>

max:定義完成值

value:定義當前值


<datalist></datalist>標簽

<datalist> 標簽定義選項列表,與 input 元素配合使用該元素,來定義 input 可能的值

datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表。

請使用 input 元素的 list 屬性來綁定 datalist。

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

<source></source> 標簽

<source> 標簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。

<source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

<audio controls>

    <source src=https://www.school#/skin/m03skinBlue/image/nopic.gif >

    <source src=https://www.school#/skin/m03skinBlue/image/nopic.gif >

  Your browser does not support the audio element.

</audio> 


<embed/>標簽

<embed> 標簽定義嵌入的內容,比如插件,當然也可以用來嵌入聲音

<embed> 標簽必須有 src 屬性

<embed src=https://www.school#/skin/m03skinBlue/image/nopic.gif />

<canvas> </canvas> 標簽

canvas只是個容器,你可以通過控制坐標在canvas上繪制圖形。一般配合js使用能實現非常復雜的動畫效果

    <canvas id="myCanvas">你的瀏覽器不支持canvas標簽</canvas>

    <script type="text/javascript">

        var canvas=document.getElementById('myCanvas');

        var ctx=canvas.getContext('2d');

        ctx.fillStyle='#FF0000';

        ctx.fillRect(0,0,80,100);

    </script>


c s s

什么是CSS

CSS(Cascading Style Sheets)層疊樣式表,又叫級聯樣式表,簡稱樣式表

1.用于HTML文檔中元素樣式的定義

實現了將內容與表現分離

提高代碼的可重用性和可維護性

2.文件后綴是.css


CSS與HTML之間的關系

1.HTML用于構建網頁的結構

2.CSS用于構建HTML元素的樣式

3.HTML是頁面的內容組成,CSS是頁面的表現


結構層   HTML

表示層   CSS

行為層   Javascript


使用CSS樣式表的方式

1.內聯方式

直接把CSS代碼用style屬性添加到開始標簽中

<p style=“color:red;”>紅色字體</p>

2.內部樣式表

直接把CSS代碼添加到頭部的style標簽中

<head>

 <style>

 p{color:red;}

</style>

</head>

3.外部樣式表

<link rel="stylesheet" href=""/>   StyleSheet,的意思就是樣式調用

4.導入式

<head>

<style>

@import url(my.css);

</style>

  </head>

優先級:行內樣式>內部樣式>外部樣式>導入樣式


css加載方式link和@import的區別,為什么不推薦使用@import?

1. @import是CSS提供加載樣式的一種方式,只能用于加載CSS。link標簽除了可以加載CSS外,還可以做很多其它的事情,比如定義rel連接屬性等。

2. 加載順序的差別。當一個頁面被加載的時候,link引用的CSS會同時被加載,@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候會比較明顯。

3. 兼容性的差別。@import在IE5以上才能識別,而link標簽無此問題。

4. 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為dom操作元素的樣式時,用@import方式的樣式也許還未加載完成。

5.使用@import方式會增加HTTP請求,會影響加載速度,所以謹慎使用該方法。


css語法

1.css是以屬性/值對形式出現

2.屬性和屬性值之間用冒號(:)連接

3.多對屬性之間用分號(;)隔開

如:color:red;


CSS樣式表特征

1.繼承性

指被包含在內部的標簽可以擁有外部標簽的樣式,比如:text-*、font-*、line-height,但有些屬性不能繼承,比如:border、padding、margin

2.層疊性

可以定義多個樣式

3.優先級

樣式定義沖突時,按照不同樣式規則的優先級來應用樣式


css基礎選擇器

1.通用選擇器,全局選擇器(*)

可以與任何元素匹配

常用于設置一些默認樣式

優先級最低

2.元素選擇器

HTML文檔中的元素

p、b、div、a、img、body等

3.類選擇器

.className{  }  如:.box{ color:red; }

類名不能以數字開頭

一個頁面中class名字可以重復

4.ID選擇器

#idName{   }  如:#box{color:red;}

一個頁面中id相同的id名只能出現一次

一般重復使用的樣式不使用ID選擇器,因為ID屬性是唯一的

5.合并選擇器

語法:選擇器1,選擇器2,...{ }

作用:提取共同的樣式,減少重復代碼

例如:.header,.footer{height:300px;}


div+css布局

內容和顯示分離,便于維護擴展,網頁布局方便,當需求改變的時候,效果最明顯

div:

1.可定義文檔中的分區或節

2.可以把文檔分割為獨立的、不同的部分。

3.是一個塊級元素。這意味著它的內容自動地開始一個新行

4.通常與css進行配合,會有更加強的表現形式


布局實例時需要用到的css屬性

width:數值

height:數值

background-color:顏色

float:left 使div不占據一行

 
打賞
 
更多>同類資訊

推薦圖文
推薦資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  網站留言  |  RSS訂閱  |  違規舉報  |  粵ICP備19057289號-9
 
伦理电影在线手机观看神马一视频