中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

htmlcss

HTML5

創新互聯公司服務項目包括汝城網站建設、汝城網站制作、汝城網頁制作以及汝城網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，汝城網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到汝城省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

  1. HTML5的發展路程
    (1) 1993年IETF 發布了HTML1.0版本(internet工程任務組)
    (2) 1995年 W3C(www)接管 發布HTML2.0(頁面的布局表格布局)
    (3) 1996年W3C 發布了 HTML3.2(很多，很亂)
    (4) 1997年W3C發布了 HTML 4.0(精簡版本)
    (5) 1999年 W3C發布了 HTML4.01(普通使用版本)這時開始分路 分兩個線路
    (6) 線路1 XHTML 版本
    1) 2000年的時候 W3C 發布了 XHTML 1.0版本
    2) 2001年的時候 W3C 發布了 XHTML 1.1 版本
    3) XHTML 嚴格HTML
    線路2: HTML5版本(whatwg) 所有的瀏覽器廠商一起研發
  2. 2004年 whatwg 發布了HTML5草案
  3. 2004-2008年W3C 和whatwg合并了
  4. 2008年 W3C 和whatwg -> HTML5的正式版本(只是制定 沒有推廣和發布)
    HTML5 到底是什么
    HTML5≈HTML5的標簽+CSS3+JavaScript+api(瀏覽器提供的操作接口)

  5. 如何創建HTML文檔
    (1) 文檔的命名規則
    ① 不允許使用特殊字符@#￥%……&*（）
    ② 可以以中文命名.但是不推薦使用中文
    ③ HTML文檔名推薦使用小寫
    ④ HTML 文件就是以.html結尾
    注意: 如果創建完html文件后面依然是文本文件格式 那么就將系統中隱藏已知文件擴展名選項勾選掉
    win7:打開我的電腦->組織->文件夾選項->查看選項卡->高級設置->勾選掉隱藏已知文件類型擴展名

  6. HTML標簽(重點內容)
    (1) 標簽是HTML 中的最基本單位 也是最重要的組成部分，通常用兩個尖括號包起來”<” 和”>”;
    (2) 標簽兩種形式
    ① 成對出現標簽(雙標簽)
    <p>內容</p>
    <body>內容</body>
    ② 不成對出現標簽(單標簽)
    <hr/>
    <meta/>

(3) 關于標簽大小寫問題
① 標簽是大小寫無關系 <body>和<BODY>表示的意思是一樣的 但是 標簽推薦使用小寫

  1. HTML標簽屬性
    (1) HTML 屬性一般都出現在HTML標簽中 是html標簽的一部分
    (2) 標簽可以有屬性，他包含了額外信息 屬性的值一定要在雙引號中(規定)
    (3) 標簽可以擁有多個屬性
    (4) 屬性由屬性名和屬性值成對出現
    語法:
    <標簽名 屬性名1=”屬性值1 屬性名2=”屬性值2”></標簽名 >
    <標簽名 屬性名1=”屬性值1” 屬性名2=”屬性值2”/>
  2. HTML顏色值的設置
    大多數的瀏覽器都支持顏色名集合 顏色值是一個關鍵字或者是一個rgb格式的數字都可以
    主要有一下兩種:
    英文單詞作為顏色值: red 紅色 green綠色 blue 藍色 yellow ××× pink 粉色 purple 紫色...
    可以使用6位的十六進制的顏色值:
    #D6 E3 F1
    十進制:0 1 2 3 4 5 6 7 8 9 10
    十六進制: 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 十進制的:16
    十進制顏色值: 紅0-255 綠0-255 藍0 -255
    255 0 0
    #FFFF00
    91 113 164
    #5B71A4
    其中 前兩位 表示紅色 中間兩位表示綠色 最后面兩位表示 藍色
  3. HTML的注釋
    我們經常要在代碼旁做注釋 這樣的好處有很多，解析你下面的代碼，方便我們查找 比如: 方便程序員了解你的代碼，也方便以后自己對自己的代碼理解和修改
    格式:
    <!-- 中間寫注釋內容-->
    注意: HTML注釋不能進行嵌套使用 會影響注釋內容也會影響代碼
  4. HTML代碼格式
    任何回車或者空格在源代碼中都不起作用 所以在編寫HTML代碼時，可以使用空格或者回車進行代碼的排版 這樣可以使代碼清晰便于團隊開發合作,而且必須保持嚴格的規范 以 tab鍵為準
  5. HTML字符實體
    < <
    >>
      空格
  6. HTML文檔的主體結構
    (1) 最頂部聲明<!DOCTYPE html>
    告訴瀏覽器以什么樣的標準解析這個網頁，HTML5的標準 老瀏覽器都兼容的標準
    聲明時文檔的第一個成分 位于最頂部 該標簽告訴瀏覽器文檔所使用的的HTML規范
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html 4.01
    <!DOCTYPE html> HTML5

(2) 以<html> 開始 以</html>結束中間包含頭部標簽<head></head>和主體標簽<body></body>
(3) HTML文檔的頭部元素 <head></head>
head標簽代表html文檔的頭部信息以<head></head>結束
頭部包含了當前文檔的一些信息比如: 標題信息 meta信息 正常情況下面的不會顯示的一些HTML文檔信息
<title></title> 設置網頁標題
<meta charset="utf-8"/> 設置頁面字符集(推薦使用)
http-equiv 告知瀏覽器的行為
<meta http-equiv="refresh" content="5"/> 5s后刷新
<!-- 告訴瀏覽器5s以后跳轉到百度 -->
<meta http-equiv="refresh" content="5;url= "/>

<meta name="keywords" content="多個關鍵字中間用英文狀態的的逗號來分割"/>設置網頁關鍵字
<meta name="description" content="對網站內容的一些描述"/>
了解級別:
<link/> 定義兩個文檔之間連接的關系
rel 表示文檔與被連接文件的關系
type 表示被連接文件的類型
href 定義被連接文檔的地址
<link rel=”icon” href=”圖片地址” type=”圖片類型”> 網頁標題小圖標
<link rel=”stylesheet” type=”css文件類型” href=”css文件地址”/>連接css樣式表
<script></script> 定義一段腳本
<style></style> 定義css樣式
(4) body標簽中常用的標簽
常用屬性:
text 設定頁面文字的顏色
bgcolor 設定頁面背景顏色
background 設置頁面背景圖片
<p></p> 段落標簽(效果: 與上行下行文本間間隔一行)
<b></b> 粗體標簽
<strong></strong> 定義語義的文本強調(加粗)
b 是物理標記 strong 邏輯標記

  1. 什么是物理標記
    b是bold的簡寫 傳遞的意思是加粗 html
  2. 什么是邏輯標記
    strong 是強調的意思 強調某段文字 Xhtml
    <i></i> 斜體標簽
    <em></em> 強調文本 效果是斜體
    <br/> 換行
    <hr/> 水平線
    <u></u> 下劃線
    <del></del> 刪除線
    <hn></hn> n代表數字 6 -1 只有h2到h7 h2為最大 h7為最小 定義標題
    <sub></sub>定義下標文本
    <sup></sup>定義上標文本
    <details></details> 定義元素細節 用戶點擊查看 點擊隱藏
    <summary><summary> 為details標簽定義標題

了解級別：
<center></center> 居中標簽 H5中已舍棄
<font></font> 字體標簽 H5中已舍棄
屬性:
size 設置字體的大小 最大支持7 最小是1
color 設置字體的顏色
face 設置字體的族科 就是你是什么樣的字體如 宋體 黑體等...
注意:face 屬性 設置的值必須在用戶的電腦中存在才能使用

HTML5
1.<dialog></dialog> 配合open=“true”
Eg: <dialog open=”true”>
<dt>在？</dt>
<dd>嗯！</dd>
</dialog>
2.<ul></ul> 定義無序列表
3.<ol></ol> 定義無序列表
4.<li></li> 定義列表項
5.<dl></dl> 定義一個定義列表
6.<dt></dt> 定義類額標準的項目，以及dialog標簽中定義一個角色
7.<dd></dd> 定義一個項目的描述
8.<pre></pre> 原格式輸出(用來調試代碼)
9.<a></a> 超鏈接標簽
常用屬性
1）href 定義a標簽要跳轉的地址

1.1）相對路徑：   （如果是當前目錄，不使用./也代表當前）
                ./  當前目錄
                ../ 上級目錄
1.2）絕對路徑：   從根開始查找，在使用絕對路徑時要加上對應的協議
                http://     +網址
                    eg: http://www.baidu.com
                File:///        +絕對路徑
                    Eg: file:/// E:\wamp\www\PHP09\20170925

2）target 打開鏈接地址的方式
i. _self 默認值 在當前窗口打開
ii. _blank 在新窗口打開
10.錨點的應用
1）作用：快速定位頁面中需要定位的位置
聲明錨點：在需要的地方定義一個標簽a標簽屬性定義一個name或id屬性任意值
Eg: <a name=”one”></a>
使用錨點：在查詢的a標簽中寫#后面跟id或者name的值
Eg:<a href=”#one”></a>
11.發送郵件跳轉
Mailto: 表示郵件給誰
？ 開始傳參
參數名CC 代表抄送
參數名BCC 代表密送
參數名Subjec 代表郵件的主題
參數名body 代表郵件的主體
12.進度條標簽
1）<progress></progress> IE不支持此標簽
屬性：
Min: 設置最小值
Max: 設置最大值
Value: 設置當前值
Eg: <progress min=”0” max=”100” value=”60%”></progress>
2）<meter></meter>定義范圍內的度量
屬性：
Min: 設置最小值
Max: 設置最大值
Value: 設置當前值
Low: 優化最小值
High: 優化最大值
Optimum: 良好值
Eg:<meter min=”0” max=”100” value=”60%” low=”30” high=”100” optimum=”100”></meter>
13.<img/>定義圖像
屬性：
Src 定義圖片地址
Width 設置圖片寬度
Height 設置圖片高度
Alt 提示信息（圖片不存在時）
Title 提示信息（鼠標移動到圖片上時）
Usemap 定義為圖片客戶端映射，帶有可點擊區域的圖片(寫法相當于使用錨點)
Eg:<img src=”./1.jpg” width=”300” height=”300” title=”鼠標移動到圖片的時候顯示的字” alt=”圖片不存在時顯示的內容” usemap=”#wre”>
14.<map></map>定義客戶端圖像映射（相當于聲明錨點）
Name/id 用來關聯
<area/> 定義圖像映射區域
Shape 定義區域的形狀
Rect 矩形
Circle 圓
Poly 多邊形
Default 默認值 整張圖
Cords 坐標值
1) 在map標簽中添加name或id屬性，屬性值任意
2) 在usemap屬性后面使用#后面跟name或id的屬性值即可實現
Eg:<map name=”wre”>
<area
</map>
15.多媒體標簽
1）<audio></audio> 定義聲音
屬性：
Src 聲音的地址
Controls 播放控件
Loop 單曲循環
Autopray 自動播放
Eg:<audio src=”” controls ></audio>
2）<source></source>定義資源
<source src=””></source>備用
3）<video></video> 視頻標簽
屬性：
Src 聲音的地址
Controls 播放控件
Loop 單曲循環
Autopray 自動播放
Poster 定義視頻在點擊播放前顯示的圖像
Width
height
16.<embed/>加載多媒體 一般用來加載flash
屬性:
Src
Width
height
eg: <embed src=””>
注意：以上所有的多媒體都有type屬性，執行媒介的類型，如果不知道可以不寫

HTML表格標簽
1．<table></table>
常用屬性：
1) Border
2) Width
3) Height
4) Align left(默認值) right center
5) Cellspacing
6) Cellpadding
7) Background
8) Bgcolor
2 .<tr></tr>
1) Align
2) Valign top middle bottom
3) Bgcolor
4) Background
5) Height
注意：tr標簽沒有width屬性

  1. <td></td>
    1) Align
    2) Vlign
  2. <th></th>
  3. <caption></caption>
  4. <thead></thead>
  5. <tbody></tbody>
  6. <tfoot></tfoot>
    HTML中的表單
  7. <form></form>
    常用屬性：
    1) Action
    2) Methot
    (1) GET
    (2) POST
    3)
  8. <input/>
    常用屬性：
    1) Name
    2) Type
    (1) Text
    (2) Submit
    (3) Password
    (4) Radio
    (5) Checkbox []
    (6) File
    (7) Reset
    (8) Hidden
    (9) Button
    (10) Image alt
    (11) Button

3) Checked
4) Value

  1. <label></label>
  2. <input type=”submit” value=”提交”/>
    = <button type=”submit”>提交</button>
    = <button>提交</button>
  3. <select></select>
    常用屬性：
    1) Name
  4. <option></option>
    常用屬性：
    1) Value
    注意：value定義列表項的默認值, 如果列表項中設置默認值提交時則拿默認值如果沒有設置默認值，提交是獲取的option標簽中間的內容

2) Selected

  1. <textarea></textarea>
    常用屬性：
    1) Name
    2) Rows
    3) Cols
    注意：多行文本域沒有value屬性，默認值寫在標簽texrarea中間

  2. H5新增表單標簽

  3. <datalist></datalist> 可選數據列表
    <option></option> 列表項
    如何實現可選數據列表和普通文本域進行關聯
  4. 在datalist標簽中定義id屬性 屬性值任意
  5. 在普通文本域中定義list屬性 屬性值為id的值即可實現關聯
  6. 新增的表單類型 type值為:
    email 設定當前表單的驗證方式是email方式驗證
    url 設定當前表單的驗證方式是URL驗證方式
    number 設定當前表單的驗證方式是數值驗證
    range 設定當前表單的驗證方式必須在指定的范圍
    search 設定當前表單為搜索表單
    color 設定當前表單為顏色選取表單
    tel 設定當前表單為電話號碼表單
    知道: 谷歌瀏覽器支持
    data 日期選取表單
    time 時間選取表單
    week 周選取表單
    month 月份選取表單
    datetime-local 完整日期選取表單
  7. 新表單的用法:
    HTML5中為了排版方便 表單中允許跳出表單之外 但是要實現提交功能需要做2件事
  8. 為form標簽添加唯一id屬性 屬性值任意
  9. 需要提交的元素填寫form屬性 屬性值為form標簽的id屬性值即可實現關聯
  10. <fieldset></fieldset> 將表單內的相關元素進行分組
    <legend></legend> 為fieldset定義標題
  11. <optgroup></optgroup>為下拉列表定義分組
    配合屬性label 定義分組的標題
  12. form表單中的屬性
    readonly -- 只讀 輸入域可以選擇 但是無法修改
    disabled -- 禁用，輸入域無法使用無法獲取焦點 無法選擇以灰色顯示
    autofocus -- 自動獲取焦點
    placeholder 表單信息提示
    用于代替表單中顯示默認值使用 value的情況 placeholder取代了value屬性的顯示提示信息的功能 并不會隨著提交而去
    required 用于強制用戶必須填寫該表單賦值否則有提示信息
    min 用于設定表單的最小值
    max 用于設定表單的最大值
    step 設定跳過的數值或者設定2個數值之間的間隔
    multiple 設定當前表單允許同時選擇多個文件 使用于 input type=file
    pattern: 用戶自定義驗證規則(需要配合正則的語法)[A-Z] 表示大寫字母A到Z 之前任意一個字母
    novalidate 取消表單的驗證 適用于form標簽
    tabindex tab鍵切換索引屬性

formaction： 用于在提交按鈕中修改當前表單的提交頁面
formmethod 用于在提交按鈕中修改當前表單的提交方式
formnovalidate 用于在提交按鈕中修改當前表單的不驗證
formenctype: 用于在提交按鈕中修改當前表單提交數據編碼類型(一般不用) 文件上傳的 在php上傳文件的時候我們講

  1. HTML中全局屬性 name id class style
    contentEditable 內容可編輯屬性
    設定改屬性的元素內容允許在頁面中直接編輯
    designMode 頁面可編輯屬性(標簽無法使用 只能js用)
    注意: 當前屬性不是任何標簽的屬性 而是文檔的屬性 如果文檔設置該屬性為on 那么頁面中所有元素均可修改
    注意:以上兩個屬性在頁面中修改只是臨時修改，如果需要長期修改 需要以后學習JS和AJAX等技術配合使用
    hidden 隱藏屬性
    在html5中允許對任何標簽使用hidden屬性，用于隱藏該標簽的顯示
  2. HTML框架標簽
    <frameset></frameset> 代替body標簽定義框架頁面 并且定義框架頁面分多少行與多少列
    常用屬性
    cols 定義框架頁含有多少列 與列的大小
    rows 定義框架頁含多少行與行的大小(每個值使用逗號分隔，值可以是像素或者百分比 * 代表匹配所有大小)
    <frame/> 定義frameset標簽中每個框架頁的內容
    src - 定義了內容頁URL
    name 在一個框架頁連接到另一個頁面的時候使用 定義名稱
  3. Iframe
  4. <iframe></iframe> 在頁面中開一塊空間鏈接的子頁面
    常用屬性：src
    Width
    height
    frameborder
    CSS3
  5. CSS cascading style sheet
  6. CSS的基本語法
    1) CSS定義：由選擇器、屬性、屬性值組成
    格式：選擇器{屬性名：屬性值; 屬性名：屬性值;}
    2) CSS中的注釋：/注釋內容/

  7. 在HTML中放置css樣式的幾種方式
    1) 內聯樣式表 行內引用
    <p style=”color:yellow”>內容</p>
    2) 內嵌樣式表 內部引用 寫在head頭的style標簽里
    <style> P{color:red;} </style>
    3) 外部連接樣式表 外部引用
    <link rel=”stylesheet” type=”text/css” href=””/>
    Css文件以.css結尾
    4) 引入方式<style>
    @import”css文件路徑”;
    br/><style>
    @import”css文件路徑”;
    注意：如果style樣式表引入css文件就不要在style標簽中再寫其他樣式
    5) 多重樣式表疊加，依照優先級。
    內聯優先級最高,內部和外部連接之間是最后定義的優先

  8. 選擇器
    1) 基本選擇器
    (1) 類選擇器 class屬性css: .class屬性名{}
    可以在class屬性值中通過空格分隔起多個屬性值
    (2) 唯一選擇器 id屬性css: #id屬性名{}
    在當前id只能寫一個屬性值
    (3) 標簽選擇器tagname 標簽名{}
    (4) 通用選擇器 匹配所有標簽
    2) 層級選擇器
    (1) 組合選擇器 div,p多個選擇器之間用逗號隔開
    (2) 包含選擇器 div p 只要p標簽被div包含
    (3) Div>p 選擇所有作為div元素的子元素(父子)
    (4) Div+p 選擇緊貼著div元素之后的p元素(同級)
    (5) Div~p 選擇div元素之后的所有兄弟元素p(同級)
    3) 屬性選擇器
    (1) 根據屬性名或屬性值來找到元素
    E element 元素標簽
    ATT attribute 屬性
    VAL value 值
    E[ATT] 匹配所有具有ATT屬性事物E元素
    E[ATT=val] 匹配所有att屬性等于val的E元素
    E[ATT~=val]匹配所有att屬性具有多個空格分隔的值
    E[ATT^=val]屬性att的值以val開頭的E元素
    E[ATT$=val] 屬性att的值以val結尾的E元素
    E[ATT    =val]屬性att的值包含val的E元素
    CSS3 結構性偽類選擇器
  9. 偽元素選擇器
    (1) 不是對真正的元素進行選擇
    E:first-line E元素的第一行內容
    E:first-letter E元素的第一個字母
    E:before 在E元素內容之前
    E:before{content:寫要添加的內容}
    E:after 在E元素內容之后
    E:after{content:寫要添加的內容}
  10. 結構性偽類選擇器
    (1) 四個最基本的結構上偽類選擇器
    ① :root 將樣式綁定到頁面的跟元素
    所謂的根就是位于文檔數中最頂層結構元素 在HTML頁面中可就是只包含整個頁面的<html>部分
    ② E:not() 除了某一個元素
    對某個元素使用樣式 但是想拍出這個元素下的某個子元素
    ③ E:empty 所有為空的E元素
    ④ :target 連接到目標時
    (2) 其他的偽類選擇器
    E:first-child 對一個父元素中的第一個子元素E設置樣式
    E:last-child 對一個父元素中的最后一個子元素E設置樣式
    E:nth-child() 對指定需要的子元素E設置樣式(正序)
    (odd) 所有正序下來的奇數個子元素
    (even) 所有正序下來的偶數個子元素
    E:nth-last-child() 對指定需要的子元素 E設置樣式(倒序)
    (odd) 所有倒序上去的第奇數個子元素
    (even) 所有倒序上去的第偶數個子元素
    E:nth-child(an+b) 循環樣式
    a 表示循環間隔的次數
    b 表示循環開始樣式
    E:nth-of-type() 與nth-child作用類似但是他僅匹配使用同種標簽的元素
    E:nth-last-of-type() 與nth-last-child 作用類似但是他僅匹配使用同種標簽的元素
    E:fist-of-type 和filst-child 作用類似 但是他僅匹配使用同種標簽的元素
    E:last-of-type和 last-child 作用類似 但是他僅匹配使用同種標簽的元素
    E:only-child 匹配父元素下僅有一個子元素的并且這個子元素為E
    E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素E
    (父元素下可以有多個元素 但是只能有一個元素為E的)
    E:enabled 匹配表單中激活元素
    E:disabled 匹配表單中禁用元素
    E:checked 匹配表單中被選中的radio或者checkbox元素
    E:selection 在實現選中文本的時候 在火狐瀏覽器中為實驗性質,要想測試需要在該瀏覽器前面加上火狐瀏覽器私有前綴-moz- 私有前綴
    私有前綴的作用: 測試某個屬性是實驗性質時使用
    火狐兼容
    ::-moz-selection{}
    偽類選擇器
    定義好的 不能隨便起名，是為固定的某個元素在不同狀態上的定義 目前a標簽有幾種不同的狀態
    :link 設置超級鏈接a在未被訪問前的樣式
    :visited 設置超級鏈接a在其他鏈接地址被訪問的渦陽
    :active 設置元素被用戶激活(鼠標點擊與釋放之間)時的樣式
    :hover 設置元素在鼠標懸停時的樣式（所有標簽都可以使用）
    :focus 設置元素在其獲取鼠標焦點的樣式
    CSS 常用屬性
    1.字體屬性:
    font-size: 設置字體大小
    常見的單位:
    px 像素 屏幕中一個點就是一個像素
    (相對單位)
    em 相當于一個漢字的大小
    font-style：設置字體樣式 正常和斜體
    normal 正常字體
    italic 斜體
    font-family 用于設置字體的類型
    注意: 頁面中該屬性設置的字體必須存在與客戶端電腦中才可以使用
    font-weight : 設置字體的粗細
    屬性值:
    bold 粗體
    默認值:normal
    font-variant 設置字體為小型的大寫字母
    取值:
    normal 默認值
    small-caps 將小寫字母變為小型大寫字母
    font 字體樣式統一設置標簽
    但是主要注意:使用該屬性時 值具有順序關系 必須依照順序來寫 不存在的可以省略
    font 屬性順序 :<{斜體 小型大寫字母 粗體}> <字體/行高><類型>
    2.文本屬性
    text-indent 首行縮進
    常用單位: em 一個漢字的大小
    line-height:用于設置當前文本的行高就是一行的高度
  11. 設置行高美化效果
  12. 用于單行文本的垂直居中設置(行高設置為元素的高度即可)
    text-align:設置元素內容的水平對齊方式
    取值 :left center right;
    text-decoration 設置文本修飾
    取值:
    none 不修飾
    underline 下劃線
    line-through 刪除線
    word-spacing 設置單詞之間的距離（對于中文需要加上每個字加上空格才有效果）
    letter-spacing 設置字母之間的間距的
    背景屬性:
    尺寸屬性：
    列表屬性：
    盒子模型
    背景屬性
  13. Background-color
  14. Background-image
  15. Background-repeat
  16. Background-position
  17. Background-attachment
    尺寸屬性
  18. Width
  19. Height
  20. Min-height
  21. Max-height
    列表屬性
  22. List-style-type：設置列表的符號樣式
  23. List-style-image：使用指定的圖片來代替列表的序號
    格式：list-style-image：URL（圖片地址）
  24. List-style-position
    字體顏色屬性
  25. Color
    定位屬性
  26. Position：設置元素的定位方式
    Static
    Absolute
    Relative
    Fixed
    布局屬性
  27. <div></div>
  28. <span></span>
    布局屬性
  29. Display
    1) None
    2) Inline
    3) Block
    4) Inline-block
  30. Visibility
    1) Visible
    2) Hidden
    注：visibility和display隱藏的區別，visibility占位隱藏，display不占位隱藏
  31. Overflow
    1) Hidden
    2) Scroll
    3) Visible
    4) auto
  32. float
    1) left
    2) right
  33. clear
    1) left
    2) right
    3) both
  34. 盒子模型
    1) 外邊距 margin
    (1) Margin-top
    (2) Margin-right
    (3) Margin-bottom
    (4) Margin-left
    簡寫屬性：
    Margin:10px
    Margin:10px(上下) 50px(左右)
    Margin:10px(上) 50px(左右) 80px（下）
    Margin:10px(上) 50px(右) 80px(下) 100px(左)

2) 內邊距 padding
(1) Padding-top
(2) Padding-left
(3) Padding-bottom
(4) Padding-right
3) 邊框 border

  1. Cursor
    1) Text
    2) Crosshair
    3) Help
    4) Wait
    5) pointer
  2. border
    1) border-color
    2) border-width
    3) border-style
    (1) dotted 點線
    (2) dashed
    (3) solid
    (4) double 雙實線
    (5) groove 槽狀線
    (6) ridge 脊線
    (7) inset 內嵌效果
    (8) outset
    4) border-top
    (1) border-top-width
    (2) border-top-color
    (3) border-top-style

5) border-left
6) border-right
7) border-bottom

兼容性
*{margin:0px;padding:0px;}
img{border:0px;}
a{text-decoration:none;}
ul li{list-style:none;}
body,h2,h3,h4,h5,h6,h7{
font:15px 微軟雅黑;
}
布局
div+css布局
三列浮動布局
二列浮動布局
html5 布局

  1. 結構標簽(重點)
    header 表示頁面中的一個內容區域或者整體內容的標題
    <header></header>
    nav 表示連接導航部分
    <nav></nav>
    footer 表示整個頁面或者頁面中的一個內容區域的腳注 一般用來 他會包含作者 姓名 文章創建的時間或者是作者的聯系方式
    <footer></footer>
    section 定義文檔或者應用程序的一區段 文章章節 頁眉
    article 文檔中的一塊獨立內容 寫文章 寫新聞
    aside 側邊欄 制作滾動廣告
    css3新屬性
  2. 顏色單位
    rgb(255,255,255) rgb(100%,100%,100%)
    rgba(255,255,255,); a代表透明度(0-1)
    hsl
    H:hue(色調) 0-360 0 和360表示紅色 120表示綠色 240表示藍色 其他的數值就是指定顏色取值0-360
    S:saturation 飽和度 取值為 0,0%-100% 0% 黑色 100% 全彩色
    L:lightness 亮度 取值范圍 0.0%-100% 0.0%黑色-100% 白色
    hsla a 代表透明度
  3. 邊框屬性
    border -color
    border-width
    border-style
    border-image
    border-radius 圓弧
  4. 一個值 四個角
  5. 二個值 第一個 左上 右下 第二個 右上 左下
  6. 三個值 第一個值 左上 第二個 右上左下 第三個值右下
  7. 四個值 左上 右上 右下 左下
  8. 背景圖片
    background-size: 設置圖片大小的
    background-size :100px 100px
    background-size :100% 100%
    background-size :cover 等比例縮放 超出部分不顯示
    background-size :contain 等比例縮放 缺少部分白色補全
  9. 文本屬性(重點)
    text-overflow
    ellipsis 顯示省略號
    white-space
    nowrap 不換行
    以上內容是讓你的中文超出部分以省略號顯示
  10. text-shadow 文字陰影
    第一個參數 必須寫 水平偏移值 可以是負值
    第二個參數 必須寫 垂直偏移值 可以是負值
    第三個參數 可選寫 模糊距離
    第四個參數 可選寫 顏色
    每個參數之間都有空格隔開

名稱欄目：htmlcss
鏈接分享：http://www.2m8n56k.cn/article18/pchpdp.html

成都網站建設公司_創新互聯，為您提供云服務器、靜態網站、網站制作、營銷型網站建設、品牌網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

搜索引擎優化
主站蜘蛛池模板： 欧洲一级毛片免费 | 一级aaaaa毛片免费视频 | 男人女人做刺激视频免费 | 国产成人综合日韩精品婷婷九月 | 一本久道久久综合婷婷 | 在线看片一区 | 手机在线免费毛片 | 国产成人精品久久综合 | 亚洲精品久久久久中文字幕一区 | 精品欧美亚洲韩国日本久久 | 三级带黄色 | 全国男人天堂网 | 日韩美女网站在线看 | 日本一区二区三区高清福利视频 | 国产一区二区福利久久 | 国产婷婷一区二区在线观看 | 久草最新在线 | 亚洲成人自拍 | 国产三级在线免费 | 国产在线精品一区二区中文 | 在线看免费观看韩国特黄一级 | 欧美另类精品 | 久草久热 | 暴操美女| 日韩三及片 | 九久久| 一级一片免费看 | 久草在线资源视频 | 日本三级视频在线 | 亚洲欧洲eeea在线观看 | 免费v片视频在线观看视频 免费v片在线观看 | 欧美精品成人一区二区在线观看 | 91免费看片 | 99国产精品高清一区二区二区 | 亚洲天堂在线视频观看 | 69成人做爰视频69 | 日韩在线不卡一区在线观看 | 国产成人久久精品推最新 | 曰本人做爰大片免费观看一 | 国产真实乱子伦精品视手机观看 | 日本一区二区三区欧美在线观看 |