自學html-four(css初始化及html語義標籤 -> h標籤 p標籤 img標籤 有序列表 無序列表 表格 超連接)

1、css初始化

如今咱們來作一個簡單的測試，測試步驟以下：

1.編寫代碼以下：

2.把改程序用不一樣的瀏覽器打開咱們會發現同一份代碼在不一樣的瀏覽器中的顯示會有略微的差異：

360瀏覽器下顯示效果圖：

火狐瀏覽器下顯示的效果圖：

 

同一份代碼在不一樣瀏覽器顯示的效果存在差別的緣由是：各瀏覽器對各元素的margin,border,font-size等的初始設置略有不一樣

解決方法：經過css強制讓全部元素的屬性值都同樣

 

這裏提供一段雅虎工程師css初始化代碼，直接拷貝到css位置就能夠了，body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

添加代碼位置如圖：

 

最終無論在什麼瀏覽器下打開的效果都會同樣了。

 

2、html學習思惟導圖

 

3、html有語義標籤

1.html的h標籤及p標籤

說明:h1-h6標籤表示文本的標題，由大到小；p標籤表示段落，在新聞網站中，h與p標籤常常成對出現

代碼以下：

運行效果以下：

 

2.img標籤

說明：在自學html--three中咱們有提到過img佈局

<img src="car.jpg" alt="車" title="漢蘭達"/>

src="這裏填寫圖片地址:能夠是本地地址，能夠是網絡地址，當是本地地址時，在當前目錄的圖片直接填寫圖片名，若是是上一級目錄的圖片在圖片名字前加../"

alt="搜索引擎能夠經過這裏填寫的字符串搜索到改圖片，而且當網絡不暢，加載圖片失敗是會顯示該字符串"

title="這裏填的字符串當鼠標放到圖片上會顯示"

示例代碼:

效果圖片:

 

3.img究竟是塊狀仍是內聯

說明：咱們在以前的學習中，知道塊狀元素會獨佔一行，內聯元素不換行，內聯元素不能設置width和height。

通過咱們的測試發現，當你設置兩個img時，他們是並排顯示的，這屬於內聯元素的特性；可是當你設置他們的width和height時發現圖片會隨着咱們設置的width和height而改變，這是內聯元素沒有的特性。咱們在圖片下加一個div，而且給他藍色的邊框發現div與上面的img存在一點小間隙，這就像咱們以前學習的magrin值，而內聯元素是沒有magrin值得，咱們能夠設置img的marin會發現沒有效果，由於img的本質就是內聯元素，是特殊的內聯元素（內聯替換元素，替換元素是能設置寬和高的），因此不能設置magrin值。

 

示例代碼：

效果圖：

 

4.有序列表【<ol><li>有序1</li></ol>】與無序列表【<ul><li>無序</li></ul>】

直接上示例代碼：

 

 

直接運行的效果是無序列表（實心圓默認）：

 

查看css手冊能夠看到由如下這幾種風格：

 

咱們經過css控制列表風格：

代碼以下：

 

效果以下：

 

有序列表代碼：

 

有序列表效果圖：

 

注意：這裏值得提的是，咱們通常在開發時無論有序仍是無序列表咱們都會把他設置爲nil，改有圖片代替，這樣作的緣由是爲了不用不一樣瀏覽器打開程序時致使的差別。

 

 5.整齊表格（table標籤）

在html中咱們用<table>標籤表示表格，<tr>標籤表示行，<td>標籤表示列。在曾經表格時咱們先書寫行數，再在相應的行數裏添加對於列數，而且標籤中須要有內容才能顯示。

以下圖代碼：

 

運行以上代碼時，咱們發現效果是這樣的，明顯咱們所理解的表格不一樣。其實表格咱們是畫好的了，只是沒有顯示出來而已，咱們須要用css來控制就可顯示出表格了，就像咱們以前用div佈局時，必需要css設置顏色才能顯示出來。

 

咱們用css來控制表格的邊爲1px 的藍色實線，會出現如下效果，看到下圖咱們發現這個表格是分開的一個個小方塊。這時咱們能夠查看css手冊，發現表格有個屬性border-collapse，它的默認值是separate(邊框獨立)就是咱們看到下圖的那種效果，咱們設置它的border-collapse屬性值爲collapse（相鄰邊合併）就可獲得咱們一般所須要的表格了，亦能夠給它添加一個實際的像素。

 

最終設置爲咱們一般理解的表格：

 

若是咱們要合併某項單元格要怎麼操做呢？

以上圖爲例，咱們須要把第一行合併爲1列，則需把第一行的2,3,4列去掉，而且在第1列加上屬性colspan="4"，其中的4表明跨越的列數。

<tr>
<td colspan="4">1</td>
</tr>

效果圖以下：

假如咱們又須要把2四、28兩個格子合併該怎麼辦呢？

首先把28刪掉，咱們知道24跨到28加上自己是跨越了2行，因此咱們在24列里加入屬性rowspan="2"，其中的2就是跨越的行數。

<td rowspan="2">24</td>

效果圖以下：

 

最終代碼以下：

 

 

6.超連接標籤<a>標籤

若是沒有超連接，咱們的網頁都是一個個獨立的數據，超連接把各個獨立的網頁連接起來，實現了數據資源的工享。

<a href="12.padding優化首頁佈局.html">首頁佈局</a>

href填入相應連接的地址便可，默認狀況下是從當前網頁進去一個新的網頁，若是咱們須要點擊該連接新建一個網頁再進去所連接的網頁則須要添加一個target="_blank"屬性。

程序運行效果以下：

若是不添加target="_blank"點擊首頁佈局時效果是：

 

若是添加了target="_blank"效果以下：

 

 

以上都事連接本地的網頁，其實連接網絡網頁也是同理，例如這裏連接到github開源網站：

 

代碼爲：

 

超連接標籤裏還有一個title屬性，設置以後，當鼠標放到改連接是會顯示title內容。

最終代碼：