標籤：padding 格式化 並且 lan 格式 組織 寬高 相關 cron
今天學完主要對所學知識點進行了整理。
一、超連結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;
text-align: center;
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>
運行效果：
第2天：HTML常用標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
