HTML中的元素使用方法1-零基礎自學網頁制作

TML元素

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

HTML元素：指的是從開始標簽到結束標簽的所有代碼。

舉個例子，在《第一個HTML頁面如何寫？——零基礎自學網頁制作》這一節中，我們寫了這樣一個頁面"第一個頁面.html"。后面的練習我們都在這個文件中進行。

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

其中"<h>第一個網頁</h>"整個代碼就可以看做是一個html元素，<h></h>叫做標題標簽，加上"第一個網頁"這段文字共同構成一個HTML元素。

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

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

HTML常用元素使用練習1

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

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

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

頁面顯示效果如圖：

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

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

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

效果如下：

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

NO.2:與

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

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

效果如圖所示：

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

示例代碼如下：

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

效果如圖所示：

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

、標簽的分類：雙標簽和單標簽

雙標簽：就是成對出現的，類似于這種 <html> </html>

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

二、標簽屬性的作用：

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

三、標簽屬性的特性：

1、每一個標簽都有自己的屬性，單標簽和雙標簽都有。

2、一個標簽可以有多個屬性。

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

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

5、屬性沒有順序之分。

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

7、HTML5 中 font 屬性已經棄用。

源代碼：↓

<!DOCTYPE html>

<head>

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

</head>

<body>

標簽屬性

</body>

</html>

.CSS樣式初始化

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

2.京東首頁CSS初始化

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

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

（2）相關代碼解讀

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

3.淘寶首頁CSS初始化

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

采用內部樣式的方式進行CSS初始化

（2）相關代碼解讀

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

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