今天學完主要對所學知識點進行了整理。
一、超連結a
href：www.baidu.com(跳轉頁面)；id名（錨點跳到相應div位置）；01.rar(壓縮包）
target：_blank（新視窗打開）；_self(目前視窗打開）
二、檔案路徑
絕對路徑：
（1）線上：線上絕對路徑
（2）線下：完整路徑
相對路徑：
src=../img/bg.jpg(../是上一級目錄）
三、HTML常用标簽
section ：版塊 用于劃分頁面上的不同區域,或者劃分文章裡不同的節
header ：頁面頭部或者版塊（section）頭部
footer：頁面底部或者（section）底部
nav：導航 （包含連結的的一個清單）
article：用來在頁面中表示一套結構完整且獨立的内容部分
可以用來呈現論壇的一個文章，雜志或報紙中的一篇文章，一篇部落格，使用者送出的評論内容，可互動的頁面子產品挂件等。
aside：元素标簽可以包含與目前頁面或主要内容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有别與主要内容的部分
1，被包含在<article>中作為主要内容的附屬資訊部分，其中的内容 以是與目前文章有關的引用、詞彙清單等
2，在<article>之外使用，作為頁面或站點全局的附屬資訊部分；最典型的形式是側邊欄(sidebar)，其中的内容可以是友情連結、附屬導航或廣告單元等。
h1-h6 标題
ul 無序清單
ol 有序清單
li ul或者ol的清單項
dl 定義清單
dt 定義清單的項目
dd 對dt展開的描述擴充
p 段落
time 時間
em 強調一個詞或者一段話
strong 強調一個詞或者一段話
img 圖檔
四、選擇器優先級
行間樣式>ID>class>類型符>通配符
五、行内、塊元素
行内元素：
1、内容撐開寬高
2、不支援寬高
3、一行可以顯示同類多個标簽
4、不支援上下的margin
5、代碼換行被解析
塊元素：
1、預設獨占一行
2、沒有寬度時，撐滿一行
3、支援所有class指令
inline-block
1、塊在一行顯示
2、内聯支援寬高
3、預設内容撐開寬高
4、标簽之間的換行會被解析（問題）
5、IE6、IE7不支援塊屬性标簽的inline-block(問題）
塊級元素（block element）：
每個塊級元素預設單獨占一行高度，塊級元素一般可嵌套塊級元素或行内元素；
塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如<form>隻能包含塊級元素。其他的塊級元素則可以包含行級元素如<P>.也有一些則既可以包含塊級，也可以包含行級元素。
div是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
常見塊級元素有：
address（位址）、blockquote（塊引用）、center（居中對齊塊）、dir（目錄清單）、div、dl（定義清單）、fieldset - form（控制組）、form、h标簽、hr、menu、ol、p、pre（格式化文本）、table、ul
行内元素（inline element）：
行内元素隻能容納文本或其他内聯元素，元素樣式display : inline的都是行内元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。行内元素轉行内塊級元素設定display:inline-block;
對行内元素，需要注意如下
設定寬度width 無效。
設定高度height 無效，可以通過line-height來設定。
設定margin 隻有左右margin有效，上下無效。
設定padding 隻有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的内容是沒影響的。
常見内聯元素有：
a、abbr、b、acronym（首字）、b（粗體）、big(大字型）、br、cite、code（計算機代碼）、dfn、em、font、i、img、input、kbd（定義鍵盤文本）、label（表格标簽）、q、s（中劃線）、samp、select（項目選擇）、small（小字型文本）、span、strike、strong、sub（下标）、sup（上标）、textarea（多行文本輸入框）、tt（電傳文本）、u（下劃線）、var
一個小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁碼顯示效果</title>
<style>
#div1{
width:100%;
height:50px;
text-align: center;
}
a{
text-decoration: none;
color: #000;
width:20px;
height:20px;
display: inline-block;
border: 1px solid #11f;
a:hover{
background: #25e;
color: #fff;
.prev{
width: 60px;
</style>
</head>
<body>
<div id="div1">
<a href="#" class="prev">上一頁</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#" class="prev">下一頁</a>
</div>
</body>
</html>
運作效果：
![阿裡雲ECS（ubutun）下安裝docker[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)