續上：HTML的講解：
第十三節：HTML5介紹
13.1發展歷史圖
1超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準）：
[if !supportLists]1. [endif]HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854于2000年6月發布之后被宣布已經過時
[if !supportLists]2. [endif]HTML 3.2——1997年1月14日，W3C推薦標準
[if !supportLists]3. [endif]HTML 4.0——1997年12月18日，W3C推薦標準
[if !supportLists]4. [endif]HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
[if !supportLists]5. [endif]HTML 5——2014年10月28日，W3C推薦標準[4]
第十四節：H5 中增強表單標簽
標簽：
<form>
<!--郵箱-->
郵箱: <input type="email" />
<!--數字-->
年齡: <input type="number" />
<!--滑動器-->
滑動器: <input type="range" />
<!--搜索框-->
搜索: <input type="search" />
<!--日期的框-->
日期: <input type="date" />
<!--日期的框-->
日期: <input type="week" />
<!--日期的框-->
日期: <input type="month" />
<!--顏色-->
顏色: <input type="color" />
<!--網址-->
網址: <input type="url" />
</form>
H5中表單增強的屬性
placeholder
autofocus:自動的獲得焦點
max：最大值
? min：最小值
minlength:最小長度
maxlength:最大長度
第十五節：HTML5 中新增結構標簽
在之前的HTML頁面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取頁面的內容的時候，它只能猜測 你的某個Div內的內容是文章內容容器，或者是導航模塊的容器，或者是作者介紹的容器等等。也就是說整個HTML文檔結構定義不清晰，HTML5中為了解 決這個問題，專門添加了：頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽。
上圖中我們非常清晰的看到了，一個普通的頁面，會有頭部，導航，文章內容，還有附著的右邊欄，還有底部等模塊，而我們是通過class進行區分，并通過不同的css樣式來處理的。但相對來說class不是通用的標準的規范，搜索引擎只能去猜測某部分的功能，另外就是此頁 面程序交給視力障礙人士來閱讀的話，文檔結構和內容也不會很清晰。而HTML5新標簽帶來的新的布局則是下面這種情況：
<!--頭部模塊-->
<header></header>
<!--中間提示-->
<nav></nav>
<!--中間的展現-->
<div class="center">
<div class="login">
? </div>
</div>
<!--底部模塊-->
<footer></footer>
第十六節：HTML5中音頻視頻標簽
<!--引入音頻的標簽-->
<audio src="img/1.mp3" controls="controls">
改網頁不支持媒體標簽
</audio>
<audio>
<source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
改網頁不支持媒體標簽
</audio>
<!--引入視頻的標簽-->
? ? <video src="img/movie.mp4" controls="controls"
width="300px" height="300px"></video>
? ? <video>
? ? ? <source src="img/movie.mp4"></source>
? ? ? <source src="img/movie.ogg"></source>
<source src="img/movie.webm"></source>
? ? ? 改網頁不支持媒體標簽
</video>
<!--多媒體標簽 --> （打開網頁自動播放）
<embed src="img/1.mp3"></embed>
<embed? src="img/movie.mp4"? width="500px"
height="500px">
</embed>
CSS 入門
第一節：css介紹
1、為什么學習 CSS（CSS 的作用）
? 【1】HTML雖然可以在一定程度上修飾頁面，但是頁面的整體還是不夠美觀。
? 【2】HTML進行網頁的書寫重復的代碼比較多，后期的維護性不好。
2、什么是 CSS（CSS 的概念）
英文全稱：Cascading Style Sheets? ? 層疊樣式表（級聯樣式表）
是一種對web文檔添加樣式的簡單機制，屬于表現層的布局語言。
第二節：引入CSS樣式
1.行內式 style=“key:value;”style="font-size:30px;color: yellow;"?
2、內嵌樣式 這個style標簽寫建議寫到head里面，因為這個中的內容需要展現到用戶面前的
<style>
? /*選擇器 */
? span{
? ? /*字體的大小*/
? ? font-size: 30px;
? ? /*字體的顏色*/
? ? color: red;
? ? /*字體的樣式*/
? ? font-family: 宋體;? <style>
? /*選擇器 */
? span{
? ? /*字體的大小*/
? ? font-size: 30px;
? ? /*字體的顏色*/
? ? color: red;
? ? /*字體的樣式*/
? ? font-family: 宋體;?
}
? </style>
? 這個? (.css)文件是在外部定義好的文件直接建立csss文件就可以了
3、鏈接式 rel:當前的文檔和引入的文檔的關系
href:是指引入文檔的關系
? ? <link rel="stylesheet" href="css/css.css"/>
CSS 中三種引入方式遵循的就近原則 ：
不相同的樣式會進行樣式的疊加，相同的樣式會采用就近的原則。樣式跟隨距離自己近的風格
第三節：CSS選擇器
常用選擇器1:
標簽選擇器
? ? ? p{
? ? ? ? color: red;
? ? ? }
id選擇器
? ? ? id:(唯一性)
? ? ? id命名：數字、字母、下劃線、中劃線（-），不能用數字開頭
#p_1{
? ? ? ? font-size: 30px;
? ? ? ? color: yellowgreen;
? ? ? }
class選擇器
? ? ? .p_2{
? ? ? ? font-weight: bold;
color: yellow; }
三種選擇器的優先級：
? ? ? id選擇器>class選擇器>標簽選擇器
常用選擇器2:
后代選擇器 只要包含該標簽對象即可
? ? ? div span{
? ? ? ? font-size: 27px;
? ? ? ? font-family: 宋體;
? ? ? ? color: red;
? ? ? }
子選擇器 直系子標簽
div>span{
? ? ? color: red;
? ? ? }
兄弟選擇器? 只會改變下面相鄰的元素對象
? ? ? #p_1+p{
? ? ? ? color: green;
}
子選擇器和后代選擇器的區別
子選擇器只會修飾與顯示標簽相同的所有父標簽衍生的子標簽，后代標簽修飾與顯示標簽相同的父標簽衍生的所有標簽。
兄弟選擇器? 只會改變下面相鄰的元素對象
? ? ? #p_1+p{
? ? ? ? color: green;
}
兄弟選擇器 后面所有的兄弟對象都會改變
? ? #p_1~p{ color: red; font-size: 30px;}
偽類選擇器 :鼠標選擇所指的地方為設置的樣式
? ? a:hover{
? ? ? ? color: red;
}
第五節：CSS常用屬性1
字體：(1)字體的顏色:color? (2) 字體的大小:font-size (3) 字體的加粗：font-weight（4）字體的風格：ont-family（5）字體傾斜font-style
文本（text） (1) 下劃線展示text-decoration: underline(2) ?去除下劃線text-decoration: none; (3)文本居中text-align: center;
邊框border(1)顏色border-color（2）寬度border-width? （3）風格border-style
（1）行高? line-height（2）設置背景圖片：?background-image:（3）設置背景圖片不重復background-repeat: no-repeat;（4）調整背景圖片的位置? ??background-position: center;（5）background-size: 寬? 高；（6）*背景顏色background-color: rgba(255,0,0,.5);red?? #f0000? rgb(255,0,0)?rgba(255,0,0,.5){包含透明度}
行內元素：（多個標簽位于同一行）
??span? font? 小標簽?? img? a? 等
塊元素：（標簽可以自動換行的元素是塊元素）
div??h1-h6? ul??? p??? 等
調整透明度的屬性opacity: 透明度（0-1）;
超出隱藏? hidden
