1. 程式人生 > >Html5 學習筆記 --》html基礎 css 基礎

Html5 學習筆記 --》html基礎 css 基礎

學習 ado itl doctype tran red 陰影 基礎 插圖

HTML5 功能

技術分享圖片

HTML5特點

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>基本格式</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

基本元素了解:

  blockquote :此元素實際作用出了和<p> 元素一樣 有段落空隙的功能 還包含了手尾縮進的功能 語義上表示 打斷的引用他處的內容

  pre:編輯器什麽樣 顯示出來什麽樣

  figure figcaption 使用插圖:

    <figure>

      <figcaption>這是一張圖</figcaption>

      <img src="img.png">

    </figure>

  table 行合並 rowspan 列合並 clospan

    tfoot 不管編輯器頁面具體位置 顯示固定在表格下方

    thead 固定在表格上方 為表頭結構

    caption 給表格添加標題

      <caption>這是一個任務表格</caption>

    colgroup 處理某個列 span 定義處理那些列 1 表示1列 2表示處理2列 如果單獨處理第二列則需要先定義第一列 然後再單獨定義第二列

      <colgroup span="2" style="background:red;"> // 紅色和綠色部分可以相互替換

        <col> // 進行占位

        <col style="background:red;">

      </colgroup>

  文檔元素使用:

    hgroup 作用為當多個標題出現 幹擾到已對或者多個本身需要整合的標題 這是使用此元素的包含組群

    section 這裏一般存放文檔主題內容

    nav 添加一個導航

    article 獨立添加一個獨立的文檔 包含頭 尾 主題等一系列內容 比較大的頁面會使用到

    aside 生成註釋欄

    address 聯系信息 地址電話等

    details 元素生成詳情區域 summary 勻速在內部生成說明標簽 盡量不要用

    整體結構:

    技術分享圖片

  img圖像嵌入元素

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

  音頻視頻:

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    音頻和視頻差不多:

    技術分享圖片

  表單元素:

    元素列表:

      技術分享圖片

    form 元素:

      技術分享圖片

    input 元素:

      技術分享圖片

      技術分享圖片

      技術分享圖片

      技術分享圖片

      input type=text 時候:

        技術分享圖片

          技術分享圖片

      技術分享圖片

      技術分享圖片

      技術分享圖片

    html實體:

      技術分享圖片

  css選擇器:

    技術分享圖片

    技術分享圖片

    技術分享圖片

     只有第一層的 li 才控制 其他層次的不控制

    技術分享圖片

        a::after {

          content : ‘搜索-‘;

        }

    偽類選擇器:

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

       解釋 選擇子元素的第二個元素

    技術分享圖片

    技術分享圖片

      組件默認情況下不顯示

    技術分享圖片

     技術分享圖片

  顏色定義:  顏色表示方案

      html 4 時候 顏色代碼只有16種

    技術分享圖片

    技術分享圖片

  字體設置:

    技術分享圖片

    Web字體: BrushScriptStd.otf 是系統字體庫字體 引入可以直接使用

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    塊級元素隔離其他元素 p div 等

    技術分享圖片

    技術分享圖片

    技術分享圖片

      transparent :透明色設置

    技術分享圖片

    技術分享圖片

    等比例縮放圖像:

    技術分享圖片

    技術分享圖片

    技術分享圖片

    eg:

    技術分享圖片

  表格列表樣式:

    技術分享圖片

    border-spacing :單元格每個格子之間間距

    empty-cells: hide 單元格內容為空 隱藏單元格邊框

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

    盒子的陰影和輪廓

    box-shadow:給div實現光影效果

    技術分享圖片

    技術分享圖片

    技術分享圖片

Html5 學習筆記 --》html基礎 css 基礎