HTML5-CSS3總結學習(一)

時間  2021-05-01
標籤 javascript css html java chrome 瀏覽器 ide oop post 性能 欄目 HTML5 简体版
原文   原文鏈接

1、什麼是 HTML5

  1. HTML5 的概念與定義javascript

    • 定義：HTML5 定義了 HTML 標準的最新版本，是對 HTML 的第五次重大修改，號稱下一代的 HTML
    • 兩個概念：
    • 是一個新版本的 HTML 語言，定義了新的標籤、特性和屬性
    • 擁有一個強大的技術集，這些技術集是指： HTML5 、CSS3 、javascript, 這也是廣義上的 HTML5

  2. HTML5 拓展了哪些內容css

    • 語義化標籤
    • 本地存儲
    • 兼容特性
    • 2D、3D
    • 動畫、過渡
    • CSS3 特性
    • 性能與集成

  3. HTML5 的現狀html

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

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

2、HTML5 新增標籤

  1. 什麼是語義化

  2. 新增了那些語義化標籤瀏覽器

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

  1. 使用語義化標籤的注意ide

    • 語義化標籤主要針對搜索引擎
    • 新標籤可使用一次或者屢次
    • 在 IE9 瀏覽器中，須要把語義化標籤都轉換爲塊級元素
    • 語義化標籤，在移動端支持比較友好，
    • 另外，HTML5 新增的了不少的語義化標籤，隨着課程深刻，還會學習到其餘的

3、多媒體音頻標籤

  1. 多媒體標籤有兩個，分別是oop

    • 音頻 -- audio
    • 視頻 -- video

  2. audio 標籤說明post

    • 能夠在不使用標籤的狀況下，也可以原生的支持音頻格式文件的播放，
    • 可是：播放格式是有限的

  3. audio 支持的音頻格式性能

    • audio 目前支持三種格式

  1. audio 的參數

五、audio 代碼演示

<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 視頻標籤

    • 目前支持三種格式

  1. 語法格式

    <video src="./media/video.mp4" controls="controls"></video>
  2. video 參數

  1. 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>

  2. 多媒體標籤總結

    • 音頻標籤與視頻標籤使用基本一致
    • 多媒體標籤在不一樣瀏覽器下狀況不一樣，存在兼容性問題
    • 谷歌瀏覽器把音頻和視頻標籤的自動播放都禁止了
    • 谷歌瀏覽器中視頻添加 muted 標籤能夠本身播放
    • 注意：重點記住使用方法以及自動播放便可，其餘屬性能夠在使用時查找對應的手冊

5、新增 input 標籤

6、新增表單屬性

7、CSS3 屬性選擇器(上)

  1. 什麼是 CSS3

    • 在 CSS2 的基礎上拓展、新增的樣式

  2. CSS3 發展示狀

    • 移動端支持優於 PC 端
    • CSS3 目前還草案，在不斷改進中
    • CSS3 相對 H5，應用很是普遍
  3. 屬性選擇器列表

  1. 屬性選擇器代碼演示

    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. 屬性列表

  1. 代碼演示

    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 個元素或者超出了元素的個數會被忽略

  1. 代碼演示

    <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. 僞類選擇器

  1. 僞類選擇器注意事項

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

  2. 代碼演示

    <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

  2. translate 語法

    • x 就是 x 軸上水平移動
    • y 就是 y 軸上水平移動
    transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

  3. 重點知識點

    • 2D 的移動主要是指 水平、垂直方向上的移動
    • translate 最大的優勢就是不影響其餘元素的位置
    • translate 中的100%單位，是相對於自己的寬度和高度來進行計算的
    • 行內標籤沒有效果
  4. 代碼演示
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、讓一個盒子水平垂直居中

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 咱們tranlate裏面的參數是能夠用 % */
    /* 2. 若是裏面的參數是 % 移動的距離是 盒子自身的寬度或者高度來對比的 */
    /* 這裏的 50% 就是 50px 由於盒子的寬度是 100px */
    /* transform: translateX(50%); */
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /* margin-top: -100px;
    margin-left: -100px; */
    /* translate(-50%, -50%)  盒子往上走本身高度的一半   */
    transform: translate(-50%, -50%);
}

span {
    /* translate 對於行內元素是無效的 */
    transform: translate(300px, 300px);
}

十6、2D 轉換 rotate

  1. rotate 旋轉

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

  2. rotate 語法

    /* 單位是：deg */
transform: rotate(度數)

  3. 重點知識點

    • rotate 裏面跟度數，單位是 deg
    • 角度爲正時，順時針，角度爲負時，逆時針
    • 默認旋轉的中心點是元素的中心點

  4. 代碼演示

    img:hover {
  transform: rotate(360deg)
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程