參數測試

時間  2020-02-01
標籤 參數 測試 简体版
原文   原文鏈接

HTML5 第一天

1、什麼是 HTML5
  1. HTML5 的概念與定義
  • 定義：HTML5 定義了 HTML 標準的最新版本，是對 HTML 的第五次重大修改，號稱下一代的 HTML
  • 兩個概念：
    • 是一個新版本的 HTML 語言，定義了新的標籤、特性和屬性
    • 擁有一個強大的技術集，這些技術集是指： HTML5 、CSS3 、javascript, 這也是廣義上的 HTML5
  1. HTML5 拓展了哪些內容
  • 語義化標籤
  • 本地存儲
  • 兼容特性
  • 2D、3D
  • 動畫、過渡
  • CSS3 特性
  • 性能與集成

  1. HTML5 的現狀javascript

    絕對多數新的屬性，都已經被瀏覽器所支持，最新版本的瀏覽器已經開始陸續支持最新的特性，css

    總的來講：HTML5 已是大勢所趨html

2、HTML5 新增標籤

  1. 什麼是語義化html5

  2. 新增了那些語義化標籤java

    • header --- 頭部標籤
    • nav --- 導航標籤
    • article --- 內容標籤
    • section --- 塊級標籤
    • aside --- 側邊欄標籤
    • footer --- 尾部標籤

    ​

  3. 使用語義化標籤的注意css3

- 語義化標籤主要針對搜索引擎
- 新標籤可使用一次或者屢次
- 在 `IE9` 瀏覽器中，須要把語義化標籤都轉換爲塊級元素
- 語義化標籤，在移動端支持比較友好，
- 另外，`HTML5` 新增的了不少的語義化標籤，隨着課程深刻，還會學習到其餘的
3、多媒體音頻標籤
  1. 多媒體標籤有兩個，分別是
  • 音頻 -- audio
  • 視頻 -- video
  1. audio 標籤說明
  • 能夠在不使用標籤的狀況下，也可以原生的支持音頻格式文件的播放，
  • 可是：播放格式是有限的

  1. audio 支持的音頻格式chrome

    • audio 目前支持三種格式瀏覽器

      ​

  2. audio 的參數ide

    ​

五、audio 代碼演示oop

<body>
  <!-- 注意：在 chrome 瀏覽器中已經禁用了 autoplay 屬性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    由於不一樣瀏覽器支持不一樣的格式，因此咱們採起的方案是這個音頻準備多個文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>
4、多媒體視頻標籤

  1. video 視頻標籤

    • 目前支持三種格式

    ​

  2. 語法格式

    <video src="./media/video.mp4" controls="controls"></video>

  3. video 參數

    ​

  4. video 代碼演示

    <body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌瀏覽器禁用了自動播放功能，若是想自動播放，須要添加 muted 屬性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>
  5. 多媒體標籤總結
  • 音頻標籤與視頻標籤使用基本一致
  • 多媒體標籤在不一樣瀏覽器下狀況不一樣，存在兼容性問題
  • 谷歌瀏覽器把音頻和視頻標籤的自動播放都禁止了
  • 谷歌瀏覽器中視頻添加 muted 標籤能夠本身播放
  • 注意：重點記住使用方法以及自動播放便可，其餘屬性能夠在使用時查找對應的手冊
5、新增 input 標籤

6、新增表單屬性

7、CSS3 屬性選擇器(上)

  1. 什麼是 CSS3

    • 在 CSS2 的基礎上拓展、新增的樣式
  2. CSS3 發展示狀
    • 移動端支持優於 PC 端
    • CSS3 目前還草案，在不斷改進中
    • CSS3 相對 H5，應用很是普遍

  3. 屬性選擇器列表

    ​

  4. 屬性選擇器代碼演示

    button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}
8、CSS3 屬性選擇器(下)

  1. 代碼演示

    input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}
9、結構僞類選擇器

  1. 屬性列表

    ​

  2. 代碼演示

    ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}
10、nth-child 參數詳解

  1. nth-child 詳解

    • 注意：本質上就是選中第幾個子元素

    • n 能夠是數字、關鍵字、公式

    • n 若是是數字，就是選中第幾個

    • 常見的關鍵字有 even 偶數、odd 奇數

    • 常見的公式以下(若是 n 是公式，則從 0 開始計算)

    • 可是第 0 個元素或者超出了元素的個數會被忽略

    ​

  2. 代碼演示

<style>
  /* 偶數 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇數 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，從 0 開始計算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶數 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇數 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 選擇第 0 5 10 15, 應該怎麼選 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是從第5個開始日後選擇 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五個 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>
11、nth-child 和 nt-of-type 的區別
  1. 代碼演示
<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

  1. 區別

    • nth-child 選擇父元素裏面的第幾個子元素，不論是第幾個類型
    • nt-of-type 選擇指定類型的元素
12、僞元素選擇器

  1. 僞類選擇器

    ​

  2. 僞類選擇器注意事項

    • before 和 after 必須有 content 屬性
    • before 在內容前面，after 在內容後面
    • before 和 after 建立的是一個元素，可是屬於行內元素
    • 建立出來的元素在 Dom 中查找不到，因此稱爲僞元素
    • 僞元素和標籤選擇器同樣，權重爲 1

  3. 代碼演示

    <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>
十3、僞元素的案例

  1. 添加字體圖標

    p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}
十4、2D 轉換之 translate
  1. 2D 轉換

  • 2D 轉換是改變標籤在二維平面上的位置和形狀

  • 移動： translate
  • 旋轉： rotate

  • 縮放： scale

  1. translate 語法
  • x 就是 x 軸上水平移動
  • y 就是 y 軸上水平移動
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
  1. 重點知識點
    • 2D 的移動主要是指 水平、垂直方向上的移動
    • translate 最大的優勢就是不影響其餘元素的位置
    • translate 中的100%單位，是相對於自己的寬度和高度來進行計算的
    • 行內標籤沒有效果
  2. 代碼演示
div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動 100px */
  /* transform: translateX(100px); */

  /* 垂直移動 100px */
  transform: translateY(100px)
}
十5、讓一個盒子水平垂直居中
  • 看代碼
十6、2D 轉換 rotate

  1. rotate 旋轉

    • 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉

  2. rotate 語法

/* 單位是：deg */
transform: rotate(度數)
  1. 重點知識點
  • rotate 裏面跟度數，單位是 deg
  • 角度爲正時，順時針，角度爲負時，逆時針
  • 默認旋轉的中心點是元素的中心點
  1. 代碼演示
img:hover {
  transform: rotate(360deg)
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程