HTML 5新元素和CSS
Html5 新元素
多媒體元素
video/audio:
格式例子：
屬性：
canvas元素
Canvas標簽定義圖形，用于圖形的繪制，使用????js來繪圖
拖放drag和drop
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
? 在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
語義元素：
一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。
無語義?元素實例: <div> 和 <span> - 無需考慮內容.
語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內容.
Html5中新的語義元素
?
<footer> 定義section或document的頁腳
<header> 定義了文檔的頭部區域
<nav> 定義了導航鏈接的部分
<section> 定義文檔中的節（section，區段）
css: 層疊樣式表 美化頁面 修改標簽的樣式
寫法分類：
1、內聯：寫在標簽里面 以屬性的形式表現 屬性名style
? ? ? ? 格式例如：<span style=" "> </span>
? ? ? ? ? ? ? ? ? ? ? ? <p style="font-size:20pt;color:red;text-align:center">排版樣式</p>
?
排版專用標記:<div>與<span>
這兩個標簽都是用來設置涵蓋一個區塊為主.區塊就是表示一行????以上的數據.如果沒有一樣,則<span> 與</span>該數據顯示前后都不會跳行.
?
2、內嵌：寫在head標簽里面 以標簽的形式表現 標簽名style
內嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又必須在<head>..</head>之間.
?
選擇器：找元素 通過各種方式 例如：標簽名 id屬性值
選擇器格式
????選擇器{
????????樣式屬性：樣式值；
????????樣式屬性：樣式值；
????}
選擇器類型????
????1.通用選擇器： *｛｝ 選擇器選擇所有元素
? ? ? 例子：選擇器選擇所有元素
?
*{padding: 0px;margin:0px; }?
選擇器也可以選擇另一個元素內的所有元素:
例如：
?
div *{ background-color:yellow; }?
????2.標簽選擇器：標簽名{} 通過標簽名找標簽
????3.id選擇器：????#id屬性值｛｝ 通過id屬性值找元素 關鍵符號
?
<!DOCTYPE html> <html><head><style type=”text/css”>#firstname{background-color:yellow;}</style></head><body><div ><p id="firstname">My name is Donald.</p></div></body> </html>?
結果為：
????4.class選擇器 : .class屬性值｛｝ 通過class屬性值找元素 關鍵符號
例子：
?
<!DOCTYPE html><html><head><style type="text/css">.intro{background-color:yellow;}</style></head><body><h1>Welcome to My Homepage</h1><div class="intro"><p>My name is Donald.</p><p>I live in Duckburg.</p></div><p>My best friend is Mickey.</p></body></html>
結果為：
????5.后代選擇器 選擇器1 選擇器2｛｝
例子：
#div div{width: 50px;height: 50px;background: red;}
????6.子類選擇器????選擇器1 > 選擇器2｛｝
例如：
#div > div{width: 50px;height: 50px;background: red;}
????7.并列???????? 選擇器1 ， 選擇器2.. ｛｝
例如：
#dd , #ddd{background: red;}
????8.偽類選擇器 選擇器：偽類 hover
例如：
#d:hover a{background: red;}
9.其他選擇器:
對比選擇器：
例子：
選擇所有帶有target屬性的?<a>元素
a[target]{ background-color:yellow;}
?
??:last-child
例子：指定父元素中最后一個p元素的背景色：
?
p:last-child{background:#ff0000}?
?
?
"行內"和"內嵌式"排版定義的優先級:
CSS????規定,范圍越小,優先級越高.
優先級由小到大排列:
id 的優先級高于class級????
權值：
? 行內：權值1000！
? ? ? id：權值100！
? ? class：權值10！
? 標簽：權值1！
? ? ?*：權值0！
權值是可疊加，例如：
#div .class 優先級大于 .class
?
?
3、外部引用：引入外部文件
????寫在head標簽里面 以標簽的形式標簽 標簽名 link
????????格式:
? ? ? ? ? ??
<head><link rel="stylesheet" type="text/css" href=URL /></head>?
?
外部引用優點：
? ? ? ? ? ? ? ? ?更好的書寫css樣式；
? ? ? ? ? ? ? ? ?避免相同元素在不同頁面需要重復定義樣式問題
?
轉載于:https://www.cnblogs.com/lzw123-/p/9146608.html
總結
以上是生活随笔為你收集整理的HTML 5新元素和CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Auty 2017——WebMonito
- 下一篇： KMP算法--深入浅出