HTML中的元素使用方法1-零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML元素

這一節(jié)以及以后幾節(jié)我們將對HTML中<body>標(biāo)簽中的各種元素進行一個概述，并對一些基本元素進行練習(xí)。

HTML元素：指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

舉個例子，在《第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這一節(jié)中，我們寫了這樣一個頁面"第一個頁面.html"。后面的練習(xí)我們都在這個文件中進行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一個網(wǎng)頁</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一個網(wǎng)頁</h>"整個代碼就可以看做是一個html元素，<h></h>叫做標(biāo)題標(biāo)簽，加上"第一個網(wǎng)頁"這段文字共同構(gòu)成一個HTML元素。

HTML元素非常多，因為我們可以在頁面中顯示各種各樣的信息，不同的信息載體對應(yīng)不同的元素。

下面我們就介紹幾個常用的html元素。

HTML常用元素使用練習(xí)1

NO.1:<h></h>與<hr>

<h></h>這個用來添加標(biāo)題的元素大家比較熟悉了，這里要介紹一個新的用法。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1>
  <h2>第一個網(wǎng)頁</h2>
  <h3>第一個網(wǎng)頁</h3>
  <h4>第一個網(wǎng)頁</h4>
  <h5>第一個網(wǎng)頁</h5>
  <h6>第一個網(wǎng)頁</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

頁面顯示效果如圖：

大家通過觀察可以看出h后面的編號用來控制標(biāo)題字號大小，僅僅是標(biāo)題有這種預(yù)設(shè)，其他元素如果要調(diào)整字號的話我們放在以后CSS里講。

下面看<hr>,示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>第一個網(wǎng)頁</h2><hr>
  <h3>第一個網(wǎng)頁</h3><hr>
  <h4>第一個網(wǎng)頁</h4><hr>
  <h5>第一個網(wǎng)頁</h5><hr>
  <h6>第一個網(wǎng)頁</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下：

<hr>標(biāo)簽可以為它前面的元素添加分割線，大家注意的是分割線不是下劃線，添加下劃線的操作我們會在CSS樣式表中詳細(xì)講解。

NO.2:與

元素是添加段落的。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，
因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

通過觀察發(fā)現(xiàn)，即使我們在代碼中對段落的文字進行回車操作，但是出現(xiàn)在頁面中是沒有回車的效果的，文字按照順序長長的排列在顯示器上，非常不利于閱讀，因此我們就要介紹常常和p標(biāo)簽連用的 換行標(biāo)簽。

示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一個網(wǎng)頁</title>
</head> 
<body>
  <h1>第一個網(wǎng)頁</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，<br>
  因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元<br>
  素及屬性的指定形成一個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他<br>
  元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

、標(biāo)簽的分類：雙標(biāo)簽和單標(biāo)簽

雙標(biāo)簽：就是成對出現(xiàn)的，類似于這種 <html> </html>

單標(biāo)簽：就是可以單個使用的，類似于 換行標(biāo)簽或 <hr>水平線標(biāo)簽。

二、標(biāo)簽屬性的作用：

標(biāo)簽的屬性是用來定義文字或字符的顏色、寬高、粗細(xì)、大小、等，這個是標(biāo)簽屬性的作用。

三、標(biāo)簽屬性的特性：

1、每一個標(biāo)簽都有自己的屬性，單標(biāo)簽和雙標(biāo)簽都有。

2、一個標(biāo)簽可以有多個屬性。

3、每個屬性都有對應(yīng)的值，值要用單或雙引號引起來。

4、多個屬性之間使用空格隔開。

5、屬性沒有順序之分。

6、字體屬性值，必須是系統(tǒng)可以識別的字體，一般為系統(tǒng)自帶字體。

7、HTML5 中 font 屬性已經(jīng)棄用。

源代碼：↓

<!DOCTYPE html>

<head>

<title>中央氣象局</title>

</head>

<body>

標(biāo)簽屬性

</body>

</html>

.CSS樣式初始化

不同的瀏覽器對有些HTML標(biāo)簽屬性的默認(rèn)值是不同的，為消除這種差異，需要對CSS進行初始化，即通過設(shè)置樣式及其屬性值，替代瀏覽器默認(rèn)的屬性值。

2.京東首頁CSS初始化

（1）CSS初始化樣式引入方式

采用引入外部樣式表的方式進行CSS初始化

（2）相關(guān)代碼解讀

/* 京東CSS初始化 */
/* *為通配符，表示html所有標(biāo)簽 */
* {
margin: 0; /* 標(biāo)簽外邊距為0*/
padding: 0; /* 標(biāo)簽內(nèi)邊距為0*/
}
 /* em、i表示斜體標(biāo)簽 */
em,
i {
font-style: normal; /* 表示標(biāo)簽中內(nèi)容不以斜體表示*/
}
/* li 表示列表標(biāo)簽 */
 li {
list-style: none; /* 表示去掉列表的樣式，如前面圓點等*/
}
/* img 表示圖片標(biāo)簽 */
img {
border: 0; /* 以下兩句表示 圖片與同級別行內(nèi)元素middle對齊*/
vertical-align: middle;
}
/* button 表示按鈕標(biāo)簽 */
button {
cursor: pointer; /* 表示鼠標(biāo)樣式 小手 */
}
/* a 表示超鏈接標(biāo)簽 */
a {
color: #666;
text-decoration: none; /* 表示去掉超鏈接下劃線 */
 }
 /* a:hover 表示a標(biāo)簽的動態(tài)偽類選擇器 */
a:hover {
color: #c81623; /* 表示當(dāng)鼠標(biāo)懸停在超鏈接上時，自體變?yōu)榧t色 */
}
 /* button、input表示按鈕標(biāo)簽、表單輸入標(biāo)簽 */
button,
 input {
/* 設(shè)置默認(rèn)字體，包括unicode編碼的字體 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
}
 /* body 表示body標(biāo)簽*/
body {
/* css3屬性（-webkit-font-smoothing）字體抗鋸齒渲染，字體更為平滑 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
/* 表示當(dāng)class屬性的值包含hide、none時的樣式 */
.hide,
.none {
display: none; /* 表示隱藏元素，且該元素空間可以被其他元素使用*/
}
/* 表示偽元素選擇器 用來清除浮動*/
.clearfix:after {
visibility: hidden; /* 為保證兼容性 必要的固定設(shè)置*/
clear: both; /* 清除浮動 必要的固定設(shè)置*/
display: block; /* 清除浮 必要的動固定設(shè)置*/
content: "."; /* 清除浮動 必要的固定設(shè)置*/
height: 0; /* 可選的固定設(shè)置*/
}
.clearfix {
/* 這是針對于IE6/7的，因為IE6/7不支持:after偽類，
讓IE6/7的元素可以清除浮動來包裹內(nèi)部元素。*/
*zoom: 1;
}

3.淘寶首頁CSS初始化

（1）CSS初始化樣式引入方式

采用內(nèi)部樣式的方式進行CSS初始化

（2）相關(guān)代碼解讀

淘寶在進行CSS樣式初始化時，并沒有采用通配符*的方式設(shè)置標(biāo)簽的內(nèi)外邊距，而是將具體的標(biāo)簽進行并集羅列。根據(jù)網(wǎng)上資料，通配符*，容易書寫，但是在大型網(wǎng)站中，會初始化所有標(biāo)簽，會加大網(wǎng)站負(fù)荷，使得網(wǎng)站加載變慢。當(dāng)然京東應(yīng)該是做了優(yōu)化的，不然網(wǎng)站體驗也會很差。

/* 淘寶CSS初始化 */
/* 設(shè)置標(biāo)簽的內(nèi)外邊距為0 */
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
/* 設(shè)置字體大小、行高及默認(rèn)字體 */
body,
button,
input,
select,
textarea {
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",sans-serif;
}
/* 字體大小同body中設(shè)置的一樣 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
 }
/* 字體不采用斜體展示 */
address,
cite,
dfn,
em,
var {
font-style: normal;
}
/* 設(shè)置默認(rèn)字體 */
code,
kbd,
pre,
samp {
font-family: courier new, courier, monospace;
}
/* 設(shè)置標(biāo)簽為small的字體大小 */
small {
font-size: 12px;
}
/* 去掉字體列表樣式 */
ol,
ul {
list-style: none;
}
/* 去掉a標(biāo)簽下劃線 */
a {
text-decoration: none;
}
/* 設(shè)置動態(tài)偽類選擇器，鼠標(biāo)懸停其上時顯示下劃線 */
a:hover {
text-decoration: underline;
}
/* 設(shè)置垂直對齊方式，在右上角 */
sup {
vertical-align: text-top;
}
/* 設(shè)置垂直對齊方式，在右下角 */
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
 }
button {
border-radius: 0;
      }
 /* 設(shè)置表格相鄰邊框融合 */
table {
border-collapse: collapse;
border-spacing: 0;
 }