HTML 5新元素和CSS
Html5 新元素
多媒體元素
video/audio:
格式例子：
屬性：
canvas元素
Canvas標(biāo)簽定義圖形，用于圖形的繪制，使用????js來繪圖
拖放drag和drop
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
? 在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
語義元素：
一個語義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者。
無語義?元素實例: <div> 和 <span> - 無需考慮內(nèi)容.
語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內(nèi)容.
Html5中新的語義元素
?
<footer> 定義section或document的頁腳
<header> 定義了文檔的頭部區(qū)域
<nav> 定義了導(dǎo)航鏈接的部分
<section> 定義文檔中的節(jié)（section，區(qū)段）
css: 層疊樣式表 美化頁面 修改標(biāo)簽的樣式
寫法分類：
1、內(nèi)聯(lián)：寫在標(biāo)簽里面 以屬性的形式表現(xiàn) 屬性名style
? ? ? ? 格式例如：<span style=" "> </span>
? ? ? ? ? ? ? ? ? ? ? ? <p style="font-size:20pt;color:red;text-align:center">排版樣式</p>
?
排版專用標(biāo)記:<div>與<span>
這兩個標(biāo)簽都是用來設(shè)置涵蓋一個區(qū)塊為主.區(qū)塊就是表示一行????以上的數(shù)據(jù).如果沒有一樣,則<span> 與</span>該數(shù)據(jù)顯示前后都不會跳行.
?
2、內(nèi)嵌：寫在head標(biāo)簽里面 以標(biāo)簽的形式表現(xiàn) 標(biāo)簽名style
內(nèi)嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又必須在<head>..</head>之間.
?
選擇器：找元素 通過各種方式 例如：標(biāo)簽名 id屬性值
選擇器格式
????選擇器{
????????樣式屬性：樣式值；
????????樣式屬性：樣式值；
????}
選擇器類型????
????1.通用選擇器： *｛｝ 選擇器選擇所有元素
? ? ? 例子：選擇器選擇所有元素
?
*{padding: 0px;margin:0px; }?
選擇器也可以選擇另一個元素內(nèi)的所有元素:
例如：
?
div *{ background-color:yellow; }?
????2.標(biāo)簽選擇器：標(biāo)簽名{} 通過標(biāo)簽名找標(biāo)簽
????3.id選擇器：????#id屬性值｛｝ 通過id屬性值找元素 關(guān)鍵符號
?
<!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>?
結(jié)果為：
????4.class選擇器 : .class屬性值｛｝ 通過class屬性值找元素 關(guān)鍵符號
例子：
?
<!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>
結(jié)果為：
????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}?
?
?
"行內(nèi)"和"內(nèi)嵌式"排版定義的優(yōu)先級:
CSS????規(guī)定,范圍越小,優(yōu)先級越高.
優(yōu)先級由小到大排列:
id 的優(yōu)先級高于class級????
權(quán)值：
? 行內(nèi)：權(quán)值1000！
? ? ? id：權(quán)值100！
? ? class：權(quán)值10！
? 標(biāo)簽：權(quán)值1！
? ? ?*：權(quán)值0！
權(quán)值是可疊加，例如：
#div .class 優(yōu)先級大于 .class
?
?
3、外部引用：引入外部文件
????寫在head標(biāo)簽里面 以標(biāo)簽的形式標(biāo)簽 標(biāo)簽名 link
????????格式:
? ? ? ? ? ??
<head><link rel="stylesheet" type="text/css" href=URL /></head>?
?
外部引用優(yōu)點：
? ? ? ? ? ? ? ? ?更好的書寫css樣式；
? ? ? ? ? ? ? ? ?避免相同元素在不同頁面需要重復(fù)定義樣式問題
?
轉(zhuǎn)載于:https://www.cnblogs.com/lzw123-/p/9146608.html
總結(jié)
以上是生活随笔為你收集整理的HTML 5新元素和CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Auty 2017——WebMonito
- 下一篇： 浏览器左上角的网站图标