HTML+CSS知識點-周1.md

一、瀏覽器及內核(渲染引擎)

主流瀏覽器	內核
safari 蘋果瀏覽器	webkit
chrome 谷歌瀏覽器	webkit --> blink
opera 歐朋	presto --> webkit --> blink
firefox 火狐	gecko
IE 微軟IE瀏覽器	trident

國內瀏覽器

   QQ、360、UC、獵豹瀏覽器...
  無自主研發內核，基本都是使用webkit、trident 內核改造

二、網頁組成

    結構層   --  HTML
    表現層   --  CSS
    行爲層   --  Javascript

W3C組織：萬維網聯盟，制定web標準
web標準（W3C標準）要求網頁三層結構應該相分離

三、HTML初識

1、HTML概念

HyperText Markup Language 超文本標記語言

超文本：不僅可以承載文本、還可以承載圖片、動畫、音頻、視頻…
用來描述網頁的語言
不是編程語言，是標記語言

2、HTML基本語法

元素-標籤以及標籤之間的內容這個整體又稱之爲元素

3、HTML基本結構

<!DOCTYPE html> -告訴瀏覽器以html5的標準去解析網頁,網頁根標籤代表網頁開始和結束

<head> - 網頁頭部：通常放頁面的元信息

<meta charset="utf-8"> -設置網頁的編碼方式（字符集）
               utf-8: 國際編碼（萬國碼）
               gb2312 : 國標，簡體中文
               gbk : 國標擴，簡體+繁體

<title>  - 網頁標題

四、常用標籤

1、標籤分類

塊級標籤	行內標籤
從上往下、獨佔一行	從左到右、水平排列在一行
默認寬度佔滿父級,高度由內容撐開	默認寬度和高度都是由內容撐開
可以設置寬高,可以設置所有的盒模型屬性	不可以設置寬高，水平方向盒模型屬性（padding、border、margin）可以正常設置，垂直方向盒模型不能設置
text-align:center 有效	text-align:center 無效

佔滿父級表示盒子實際內容的寬度 content+ 左右padding + 左右border + 左右的外邊距margin= 父級寬度100%

塊級標籤
        hr 分割線  
        div 區塊、盒子
        p   段落
        h1-h6   標題   
        ol  有序列表    type="1/A/a/I/i"
        ul   無序列表    type="desc/circle/square"
        li   無序列表和有序列表的項目
        dl   定義列表
        dt   放名詞或術語
        dd   放描述或者說明
        form   表單域

行內標籤
        span    無語義標籤，給一段文字中的指定文本設置特殊樣式
        i       樣式斜體 
        em      斜體，並且強調
        b       樣式加粗
        strong  加粗並且強調
        sub     下標
        sup     上標
        del     刪除文本

行內塊級標籤（img、表單元素input/textarea/select）
從左到右、多個行內塊級標籤水平排列在一行
可以設置寬高,可以設置所有的盒模型屬性
text-align:center 無效

居中效果
1、塊元素中的行內元素或者行內塊居中，給外部的這個塊元素設置text-align:center;
2、塊元素在父級元素中水平居中，給這個塊元素設置margin:0 auto;

2、圖片img標籤

    <img src="圖片路徑../ : 返回上一級目錄
    ../../: 返回上兩級目錄" alt="替換文本" >

3、鏈接 a 行內元素

    本網站中的頁面跳轉
    <a href="相對路徑/目標頁面的網址" target="_blank在新窗口中打開/_self : 默認值，當前窗口打開" title="提示文字"> 鏈接文本 </a>

    錨點（錨記）鏈接 ：跳轉到當前頁面的指定位置
    <h3 id="f1"> ... </h3>
    <a href="#f1"> ... </a>
    跳轉頁面同時指定位置：
    <a href="./4、鏈接.html#floor2"> 跳轉到鏈接頁面的第2層</a>

五、列表

1、有序列表

'1 / A / a / I /i'ol和li屬於固定父子標籤，ol的直接子標籤只能是li
    <ol type="A">
        <li>張三</li>
        <li>
            <h3> ... </h3>
            <p> ... </p>
        </li>
    </ol>

2、無序列表

'desc (實心圓點)/cricle(空心圓圈)/square(正方形)'

    <ul type="circle">
        <li>Tom</li>
        <li>Jack</li>
        <li>Rose</li>
    </ul>

3、定義列表

一般用於解釋一些專有名詞或者術語說明
    <dl>
        <dt>放名詞或者術語</dt>
        <dd>放解釋說明</dd>
    </dl>

列表符換成圖像
list-style-type:none;//去掉圓點
list-style-image: url(images/icon.gif);

六、網頁特殊符號

    &nbsp;    空格
    &gt;    大於符號    >
    &lt;    小於符號    <
    &amp;    &符本身    &
    &copy;   版權符     ©
    &reg;    註冊商標   ®

七、語義化

什麼是語義化？
用合理的標籤去格式化文檔內容,比如標題用h標籤，段落用p標籤，重要圖片添加alt屬性添加替換文本-

好處？
1. 沒有css也能表現出良好的結構
2. 具有良好的可讀性，有利於團隊開發維護
3. 有利於用戶體驗
4. 有利於搜索引擎優化

八、表格

1、表格相關標籤

    - table  定義整個表格
    - tr  定義一行
    - td  定義表格的單元格（標準單元格）
    - th  定義表頭單元格 （加粗居中）
    - caption  定義表格標題
    - thead  表格的頭
    - tbody  表格的主體
    - tfoot  表格的底部
    > thead\tbody\tfoot 這些標籤可以增強表格的語義化，對佈局沒有影響

   <table>
          <caption>學生成績表</caption>
          <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>分數</th>
           </tr>
           <tr>
           <td>01</td>
           <td>張三</td>
                <td>90</td>
           </tr>
    </table>

2、表格相關屬性

   <table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
   </table>

border 給表格整體添加邊框（表格和單元格都有邊框）
border-collapse:collapse; 去除單元格之間的空白間距，並且把相鄰邊框合併成一個
cellspacing=“0” ：去掉單元格之間的空白間距

3、合併單元格

合併列（橫向合併）colspan = “2”

    <td colspan="2">  ... </td>

合併行（縱向合併）rowspan = “2”

    <td rowspan="2"> ... </td>

4、表格特點

不設置表格寬度時，實際寬度由內容撐開
如果給表格設置寬度width，表格的列寬會按照每一列當中內容最多的單元格的比例分配列寬，行高也是同理
也可以通過給單元格設置 width和height調整整行或整列的寬度和高度

    <tr>
        <td width="80">4444</td>
        <td width="80">5</td>
        <td width="140">6</td>
    </tr>
    <tr>
        <td width="33.33%">4444</td>
        <td width="33.33%">5</td>
        <td width="33.33%">6</td>
    </tr>

九、CSS

Cascading Style Sheets 層疊樣式表–是用來規定網頁樣式的語言

1、 css三種引入方式(行內/內嵌/link外部引入)

行內樣式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
內嵌式 :
<head>
        <style>
            p{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">

   - rel : 表示目標文件和當前文件的關係  stylesheet 表示樣式表
   - href : 目標文件的相對路徑
   - type : "text/css"標記文件類型爲 css

2、選擇器

用來獲取要添加樣式的標籤，選擇器有很多類型（標籤名、id、class、*）

div,p{  ...  }
#box{ ... }
.red{ ... }
*{
        margin: 0;
        padding: 0;
 }

3、複合選擇器（後代、子代、並集羣組、交集選擇器）

    .box div{  /* 選擇.box標籤後代當中所有div標籤*/
    }
    
    .box>div{  /* 選擇.box標籤直接子代中所有div標籤 */
    }
     
    #box,.red,h3,#box p{  /*把以下幾個選擇器匹配的元素同時選中*/
        #box
        .red
        h3
        #box p
    }
    
    div.red{ ... }   /*選擇標籤名爲div並且類名中包含red這個單詞的標籤，精準定位   */

十、文字相關屬性

1、 text系列

  text-align : left/right/center--文本對齊方式
  text-indent : 2em --首行縮進，em : 代表一個字的大小
  text-decoration ：none/underline/overline/lint-through--文字修飾  
  color : 文本顏色

2、 font 系列

字體簡寫屬性，順序不能隨意更改
可以省略不需要設置的屬性, 至少保留font-size和font-family

font 字體簡寫屬性

font: font-style font-weight  font-size/line-height font-family;
font: italic bold 20px/2 "宋體";
至少要大小、字體

font 字體屬性(size、weight、style、family)

   font-size   字體大小 16px
   font-weight 字體加粗
         100-300  細
         400-500  正常
         600-900  加粗
         normal   正常
         bold     加粗
   font-style --字體風格
         normal   正常
         italic   斜體
   font-family  --字體系列（族類）
        可以設置一個字體或多個字體
        多個字體用逗號分隔，瀏覽器會顯示第一個能夠識別的字體
   font-family: Helvetica Neue,Helvetica,Arial,"宋體",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

font 字體行高

   line-height  字體行高-由上間距、文本高度、下間距組成
      取值可以爲具體的長度  30px
      也可以爲font-size的倍數   比如2  代表font-size的兩倍
      單行文本垂直居中可以設置line-height爲盒子的高度

3、其他

設置字符間距：英文字母、中文漢字
letter-spacing:10px;  "1 2 3 a b c 漢 字"
設置單詞的間距
word-spacing:10px;  "world    hello    ujiuye   漢字   "

鼠標變小手cursor:pointer

4、長度單位和顏色表示法

單位

   px  像素
   em   相對單位，代表的是當前元素的font-size值  
   %    百分比   
   rem   1rem 等於頁面的根元素的font-size值，也就是html標籤的font-size

顏色表示法

   red                          --英文單詞  
   #000000                      --十六進制
   rgb(0-255,0-255,0-255)       --rgb()模式
   rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度

十一、HTML表單

表單是網站用來收集用戶信息的

1、表單域 form （塊級）

表示用來規定表單的一片區域，裏面用來放各種表單元素

表單域屬性

   action: 用來規定表單的提交地址(與後臺對接)
   method:用來規定表單的提交方式
   get : 默認提交方式, 會把表單數據以鍵值對形式，多組用&拼接在一起，通過地址欄進行傳遞，安全性不好，因爲地址欄可容納的數據大小有限制的，所以可能造成數據丟失
   post : 推薦使用的方法，安全性更好，理論上沒有大小限制

    <form action="" method="" >
        ...
    </form>

2、表單元素(行內塊)

input標籤（name後臺接收，要寫噢）

   <input type="text" name="username"> 普通文本框
   <input type="password" name="psd">  密碼框
   <input type="radio" name="gender" value="male">單選按鈕(name要設置相同才能互斥單選)
   <input type="checkbox" name="hobby" value="coding">複選框
   <input type="file" name="file"> 文件域
   <input type="submit" value="註冊">      提交按鈕  
   <input type="reset"  value="清空表單">  重置按鈕
   <input type="button" value="普通按鈕">  普通按鈕
   <input type="image" src="圖片路徑"> 圖片提交按鈕，顯示圖標，變成小手
   <input type="hidden" name="hid" value="傳數據">   隱藏域,頁面不顯示但是可以攜帶數據

下拉列表

   <select name="city">
            <option value="aa">AA</option>
            <option value="bb">BB</option>
            <option value="cc">CC</option>
   </select>

文本域（多行文本）

   <textarea name="des" cols="30" rows="20"
    style="width:100px; height:200px;">
    我就是文本域初始顯示的值
   </textarea>
        - cols ： 規定輸入文本列數
        - rows ： 規定輸入文本的行數

3、表單元素屬性說明

   1.type用來定義輸入框的不同類型
   2.name屬性用來規定表單字段名，如果不設置這個輸入框的內容無法隨表單一起提交到後臺
        - 多個單選按鈕想要有互斥效果，name屬性值必須相同
   3.value用來給表單元素定義值
        - 單選按鈕(radio)、複選框(checkbox)、下拉列表的選項(option)必須要設置value屬性，表示選項所代表的值
        - 提交按鈕(submit)、重置按鈕(reset)、普通按鈕(button)設置value屬性表示修改按鈕上的文字
        - 文本框(text)、密碼框(password)、隱藏域(hidden)，用value設置默認值
        - 文件域flie和textarea不能設置value
   4.maxlength="10" 用於規定輸入框允許輸入的最大字符個數
   5.disabled="disabled"  設置表單元素爲禁用狀態, 不能編輯，也不能被提交
   6.readonly="readonly"  設置表單元素爲只讀狀態, 不能編輯，可以被提交
   7.checked="checked"    設置單選按鈕和複選框默認選中
   8.selected="selected"  設置下拉列表的選項默認選中
   9.size="2"  規定下拉表默認顯示項目的個數

HTML+CSS知識點-周1.md

一、瀏覽器及內核(渲染引擎)

二、網頁組成

三、HTML初識

1、HTML概念

2、HTML基本語法

3、HTML基本結構

四、常用標籤

1、標籤分類

2、 圖片img標籤

3、鏈接 a 行內元素

五、列表

1、有序列表

2、無序列表

3、定義列表

六、網頁特殊符號

七、語義化

八、表格

1、表格相關標籤

2、表格相關屬性

3、合併單元格

4、表格特點

九、CSS

1、 css三種引入方式(行內/內嵌/link外部引入)

2、選擇器

3、複合選擇器 （後代、子代、並集羣組、交集選擇器）

十、文字相關屬性

1、 text系列

2、 font 系列

3、其他

4、長度單位和顏色表示法

十一、HTML表單

1、表單域 form （塊級）

2、表單元素(行內塊)

3、表單元素屬性說明

2、圖片img標籤

3、複合選擇器（後代、子代、並集羣組、交集選擇器）