Day4 HTML新增元素與CSS佈局

時間 2019-12-07

標籤 day4 day html 新增元素 css 佈局欄目 HTML 简体版

原文原文鏈接

　　　　　　　　　　　　　　　　Day4 HTML新增元素與CSS佈局javascript

HTML新增屬性:
一:常見的佈局標籤(都是塊級元素)css

<header>頭部</header>
<nav>導航</nav>
<aside>側邊欄</aside>
<article>文章，獨立的塊，帖子</article>
<section>章節，頁眉，頁腳</section>
<footer>頁腳</footer>

    1.header　　頁面頭部
   2.nav 　　　導航連接
   3.article 　　定義頁面獨立的內容區域,例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等.
   4.aside　　　定義頁面的側邊欄內容
   5.footer 　　   頁腳
   6. section 　定義文檔中的節。好比章節、頁眉、頁腳或文檔中的其它部分
    7.figure　　用於對元素進行組合。多用於圖片與圖片描述組合 ( 跟dl自定義列表dd,dt相同 )html

　 8.figcaption 　　是figure的標題java

<figure>
    <img src="images/img1.png" alt=""/>
    <figcaption>中國隊周琦狂砍22分</figcaption>
</figure>
　　　　　　dl自定義列表dd,dt相同,圖片不縮進,內容縮進.
　　　　figure圖片內容都縮進

9.mark 標記　　(默認黃色背景,字體黑色)
定義帶有記號的文本，它會給你要突出顯示的文本下加個背景色。web

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

10.details 　　標籤用於描述文檔或文檔某個部分的細節 (IE不支持 <details> 標籤) canvas

<details>
    <summary>details中的標題</summary>　　　　summary 是details中的標題
    <p>詳細的內容</p>　　　　　　　　　
</details>

   11.meter　　用來表示範圍已知且可度量的內容。
   <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>
                    低於20,高於80會變顏色,相等顏色不變爲綠色

   12.ruby　　加註釋

    13.<progress></progress>標籤　　(同進度條)
            <progress> 標籤訂義運行中的進度（進程） ruby

   <progress max="100" value="20"></progress>　　
 　　 max：定義完成值　　　　value：定義當前值

   14.<datalist></datalist>標籤
       (給input提供選項列表)定義 input 可能的值.datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表

   15.<video> </video>標籤　　 (支持mp4,ogg移動端,webM高清) 行內元素,IE5,6,7,8不支持
<video> 標籤訂義視頻，好比電影片斷或其餘視頻流.ide

  eg:<video src="movie.mp4" controls>您的瀏覽器不支持視頻。</video>

經常使用屬性:src       路徑(必須屬性)
   　　　 autoplay 自動播放
   　　　   loop      循環播放
      　　　controls 顯示控制面板
   　　　 muted     靜音
  　　　    post      視頻播放前顯示圖片   post="img.jpg"
   　　　 width    height 寬度高度

   16.<audio></audio>標籤 (支持MP3,ogg,wav) 沒有寬高.
<audio> 標籤訂義聲音，好比音樂或其餘音頻流.oop

 eg:<audio src="someaudio.mp3">您的瀏覽器不支持音頻.</audio>

17.<source></source> 標籤
給瀏覽器提供多種格式,瀏覽器根據本身支持的狀況選擇支持的格式.好比視頻音頻.

  eg:<audio controls>
       <source src="horse.ogg" >
       <source src="horse.mp3" >
         您的瀏覽器不支持視頻.
    </audio>

18.<embed/>標籤　　(行內元素)
<embed> 標籤訂義嵌入的內容，好比插件，也能夠用來引入視頻,音頻.
<embed> 標籤必須有 src 屬性

 eg1:<embed src="helloworld.mp4" width="800" height="400"/>
 eg2:<embed src="images/紙短情長.mp3" type=""/>

19.<canvas> </canvas> 標籤
canvas只是個圖形容器，經過腳本js來繪製圖形.(好比圖標和其餘圖像).實現很是複雜的動畫效果.

 eg: <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>

   1.document          文檔
   2.getElementById    經過ID獲取元素
   3.ctx(getcontext)   獲取上下文
   4.fillstyle         填充樣式
   5.fillRect          填充劑

三.CSS樣式表(Cascading Style Sheets）層疊樣式表,又叫級聯樣式表，簡稱樣式表.
做用:
    1.實現了將內容與表現分離
    2.提升代碼的可重用性和可維護性
    3.文件後綴 .css
4.css樣式表特徵
　1）繼承性
  　　　父元素的樣式，子元素能夠繼承.被包含在內部的標籤能夠擁有外部標籤的樣式，好比：text-*、font-*、line-height，但有些屬性不能繼承，好比：border、padding、margin
　 2）層疊性
   　　同一個元素能夠設置多個樣式
　 3）優先級
   　　設置共同的樣式，優先級高的樣式生效，優先級相同的狀況下，後寫的樣式生效
　5.css語法
     css有鍵值對組成
      屬性:屬性值;
      字體顏色： color:red;
      　　　　 font-size:20px;

1.引入方式
1）行內樣式內聯樣式    只適用於當前元素
經過HTML的style屬性
　　<div style="css樣式"></div>

2）內部樣式只對當前頁面生效

<head>
    <style>
        選擇器{
            css樣式
        }
    </style>
</head>

3）外部樣式徹底實現了內容與表現分離提升了代碼的可重用性和可維護性

<head>
    <link rel="stylesheet" href="a.css"/>
</head>

一個HTML文件能夠引入多個.css文件，同一個css文件能夠爲多個HTML文件引入

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

4）導入式

<head>
    <style>
        @import "";(@import url())
    </style>
</head>

@import和link的區別：
1.@import先加載HTML文件，再加載css，link一邊加載HTML一邊加載css,好比定義rel鏈接屬性等
2.@import有兼容性（IE5以上支持），link沒有兼容性
3.@import只能引入css，link能夠引入其餘內容
4.JavaScript操做DOM時只能操做link引入的css樣式，@import引入的css不能操做
5.@import增長http請求,影響加載速度

四.css基礎選擇器
   做用:選中寫樣式的元素
1.選擇器{CSS樣式}

   一.基本選擇器

1.全局選擇器/通用選擇器(*)選中網頁中全部元素,經常使用於設置一些默認樣式
        優先級最低.

2.元素選擇器div p b a img input   button body (範圍越小優先於越高)
        選中全部指定元素

3.類選擇器
    1) .className{ } 如：.box{ color:red; }

類名不能以數字開頭
一個頁面中class名字能夠重複

   2)ID選擇器
     #idName{   }    如：#box{color:red;}
     一個頁面中id相同的id名只能出現一次

   3) * 選擇一個元素的時候能夠直接經過標籤，也能夠給標籤起個class名

　　通常重複使用的樣式不使用ID選擇器，由於ID屬性是惟一的

選擇器優先級:行內樣式>ID選擇器>類選擇器>元素選擇器>全局選擇器
權重:          　　　 1000    　　　　100    　　 10        　　1

   4)合併選擇器
    語法：選擇器1,選擇器2,...{ }
    做用：提取共同的樣式，減小重複代碼
    例如：.header,.footer{height:300px;}

四:div+css佈局
內容和顯示分離，便於維護擴展，網頁佈局方便，當需求改變的時候，效果最明顯

div：
1.可定義文檔中的分區或節
2.能夠把文檔分割爲獨立的、不一樣的部分。
3.是一個塊級元素。這意味着它的內容自動地開始一個新行
4.一般與css進行配合，會有更增強的表現形式

佈局實例時須要用到的css屬性
   width:數值
   height:數值
   background-color:顏色
   float:left 使div不佔據一行
通常頁面可簡單分爲上中下結構，上爲頭部，中爲內容部分，下位腳部。
    它的html結構以下:
    <body>
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
   </body>

1）css屬性：width:; 取值 px %（佔父元素的百分比）height:; 取值 px %（佔父元素的百分比）background-color:;float:left|right; 浮動，塊級元素在同一行顯示2）div+css佈局的優點佈局簡單，修改容易

相關標籤/搜索

每日一句

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