HTML5的特點是語義與實現分離；原來是<div class=""></div>，然後樣式用類選擇器設置；現在是不用<div>了，而用比如<header></header>等等，然後樣式不用類選擇器，而是元素選擇器；
<meta charset="utf-8">指定編碼格式，防止在不同瀏覽器中打開亂碼；
<meta name="viewport" content="width=device-width, initial-scale=1.0">作用是能夠自適應屏幕尺寸，不至於難看；
在<head></head>中必須要有<title></title>標籤；
<style></style>爲HTML文檔定義樣式信息；它的屬性之一是type(指定樣式的類型)，它的是目前是固定的即type="text/css";
../ 表示上一個文件夾；
給整個網頁設置一個背景色：
<body>
background-image: url("../img/logo.jpg")
</body>
給段落設置首行縮進的樣式：text-indent:32px; 一般是32個像素；
一個HTML文檔可以有很多的<style></style>標籤 例如<style type="text/css"></style>， <style media="print"></style>(表示只針對打印模式時候的樣式)
網頁的樣式除了可以在style元素中添加，也可以將css樣式表保存爲一個外部文件，然後使用link元素將其鏈接起來（即鏈接外部樣式表）；
<link rel="stylesheet" type="text/css" href="style.css"> 其中rel是link元素必須要有的屬性，rel="stylesheet"表示鏈接外部樣式表， type是指類型， href表示外部樣式表的位置；
<link rel="stylesheet" type="text/css" media="screen" href="style.css">表示外部鏈接網頁背景圖片的樣式表；
<script></script>標籤用於在HTML文檔中嵌入腳本（例如：JavaScript）
一般HTML文檔執行中遇到<script>的話會先獲取腳本，然後執行腳本，等腳本執行完之後再繼續HTML文檔，若想延遲執行腳本，則用defer屬性；
<script type="text/script" src="1.js" defer></script>
註釋：
HTML文檔註釋也是用標籤來寫 <!-- 註釋的內容-->
CSS的註釋 /* 註釋的內容*/
JavaScript的註釋分爲單行和多行 單行：//註釋的內容 多行：/*註釋的內容*/
<img src=""> <script src="">
<link href=""> <a href="">
塊元素總是從新的一行開始，佔據一行，例如p元素，div元素；行內元素則不會佔據一行，例如span元素，a元素；
塊級元素既可以包含塊元素也可以包含行內元素， 而行內元素只能包含行內元素或者數據啥的；
鏈接外部樣式寫表格的邊框樣式：
table{
border:1px solid black; /*注意1px solid black之際沒有逗號，用空格隔開就行*/
}
表單是HTML中獲取用戶輸入的手段；製作表單的三個元素：form，input， button；提交表單的方法有兩個：get和post；
表單：
<form action="http://baidu.com" method="post"> <!--form的method屬性有 兩個：get和post，都會提交表單，但是post更安全些，不會將個人信息提交給url，即在url中不會暴露自己賬戶和密碼-->
</form>
type="text"是明文的，寫什麼就顯示什麼，而type="password"是不會顯示所敲的；
在鏈接<a></a>中href屬性是跳轉網頁的URL， target屬性中"_blank"表示在一個新的網頁中打開目標網頁，而不是在本地網頁中打開;
表單中input的type屬性有22種，常見的有 text, submit, password, date, time, week, month, datetime-local, radio, checkbox（多選框），color, hidden, image;
input只能用於單行文本的輸入，textarea可以用於多行文本的輸入；
接收用戶輸入用input元素，下拉列表用select元素；
圖像根據屏幕大小進行調整時引入了picture元素和source元素
<picture>
<source media="(min-width:1024px)" srcset="1.jpg">
<source media="(min-width:512px)" srcset="2.jpg">
<img src="3.jpg" alt="不滿足上面的屏幕大小時就用這個" style="width:auto">
</picture>
給圖片下面有個圖題用figure元素和figcaption
<figure>
<img src="" alt="">
<figcaption>圖的題目</figcaption>
</figure>
用<video width="" height="" src="lalala.mp4" controls autoplay loop>視頻無法播放時顯示的文本</video>能插入視頻播放；
audio元素是插入音頻，即一段音樂；類似於video元素，controls autoplay loop是三個屬性 即插入控件，自動播放，循環播放；
在一個網頁中嵌入另一個網頁就用
<iframe src="" width="" height="">無法嵌入時的說的話</iframe>
一個HTML文檔就是一個網頁，所以在HTML的頭部加入style標籤設置樣式（內部樣式表），一個內部樣式表只能影響一個網頁，當有不止一個網頁的時候，內部樣式表就有所欠缺；
類選擇器 .X {} id選擇器 #X{} 注意：類選擇器的.和X之間是不能有空格的，同理id選擇器也是；
僞元素選擇器： 最前面是兩個“：”，即 ::
::first-line{ }選擇器僅對塊級元素內的第一行元素有效，而對於像a元素這類行內元素是不起作用的； 其中可以在::的前面加元素，例如 p::first-line{};
::before{
content:"huhuhh"
}
::after{
content:url("ccc.jpg")
}
僞類選擇器：最前面是一個“：”，例如 :hover
CSS3區分是僞元素選擇器還是僞類選擇器是看有幾個 :
動態僞類選擇器 :link :visited :hover :active
<style>
a:link{ a:link{} 是鏈接未被訪問的時候
color:pink;
}
a:visited{ a:visited{}是鏈接已經被訪問過的時候
color:red;
}
a:hover{ a:hover{}是鼠標懸浮在鏈接上的時候
color:black;
}
a:active{ a:active{}是鏈接被點擊的那一刻
color:green;
}
</style>
這四個僞類選擇器是由先後順序的，順序對了樣式才能生效；記住：LoVe & HAte
UI僞類選擇器是負責用戶和系統交互的；一般web的表單元素經常會用UI僞類選擇器，
表單中設置必選和可選的樣式，即requireed和optional
<style>
:required{
outline:3px solid red;
}
</style>
<body>
<form>
<label for="required">必填:</label>
<input type="text" name="required" required>
</form>
</body>