HTML5
html---xhtml--html5（是w3c和whatwg web應用技術的工作組）
html5=html5+css3+js+api
特點
代碼更加的簡潔
标簽具有語義化
新增的一些屬性
代碼更加寬松
2004提出設想--2008模拟第一草案--2012推廣--2020正式
當今處于推廣想是以各個浏覽器曾在相容性
ie9以上支援
html5的結構
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
//<meta charset="UTF-8"></meta>
//<meta charset="UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
向下相容，文法
新增标簽
<header>标題
<nav>導航欄
<section>div類似
<article>文章
<asider>側邊欄
<footer>版權頁腳
新增type類型
placeholder=“請輸入使用者名”
required=“required”；必填項
autofocus=“autofocus”；直接定位到輸入框
新增屬性
email <inout type="email" name="name">限定必須為郵箱
url <inout type="url" name="name">
dat 限定使用者輸入必須是日期
month
time
week
number
search 必須是一個搜尋框
color 産生一個顔色
range 産生一個左右滑塊
視訊
格式
<video src="路徑" autoplay=“autoplay” controls>
<video autoplay=“autoplay” controls>
<source src ="xxx.mp4">
<source src ="xxx">
</video>
音頻
<audio src="路徑" autoplay=“autoplay” controls>
<audio autoplay=“autoplay” controls>
<source src ="xxx.mp3">
</audio>
css3
css3=css2+新文法
對css2進行擴充 删減 優化
選擇器
加了 屬性選擇器
E---element元素/标簽 data 屬性/id class
<标簽 屬性=“屬性值”></标簽>
.myclass li[class="myli"]{
}
僞類結構
E---element元素 //标簽
li：first-child{}
E:first-child{}: 選擇标簽的第一個孩子
E:last-child{}:
E:only-child{}: 隻有一個孩子
E:nth-child(){3}:第三個孩子
E:nth-child(){2n+1}:奇數
E:nth-child(){odd}
E:nth-child(){2n}偶數
E:nth-child(){even}
僞元素
E：first-letter{}：設定第一個字
E: first-line{}：第一行
E：：after{}：插入盒子的後面 content：“xxxx”
E：：before{}：插入盒子的前面
iconfont.cn
可以插入到圖示
設定文本的陰影
text-shadow：水準 垂直 大小 顔色；
text-shadow：1px 1px 3px red，1px 1px 3px red//可以多組合；
盒子的陰影
border-shadow：水準 垂直 模糊強度 模糊尺寸 顔色 内外陰影inset預設 outset
box-shadow: 2px 2px 2px 2px gray,2px 2px 2px 2px gray//可以多組合;
border-radius：5px 5px 5px 5px；圓角值
border-radius：50px ；
//這個是寬高度不同 假如一樣
設定半透明的顔色
color ：gba（255,0,0,0.3）
background：rgba（0,0,0,0.6）
背景的尺寸
background-size:寬度 和高度
background-size：屬性；
cover 背景圖檔會吧整個背景都覆寫上
contain 把寬度或者高度覆寫就停止