整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文主要內容
html 的常見元素主要分為兩類：head 區域的元素、body 區域的元素。下面來分別介紹。
head 區域的 html 元素，不會在頁面上留下直接的內容。
base元素的介紹：
<base href="/">
base 標簽用于指定基礎的路徑。指定之后，所有的 a 鏈接都是以這個路徑為基準。
body 區域的 html 元素，會直接出現在頁面上。
div 是最常見的元素，大多數場景下，都可以用div（實在不行就多包幾層div）。可見，div 是比較通用的元素，這也決定了 div 的的語義并不是很明確。
常見標簽的重要屬性：
我們平時在寫論文或者其他文檔的時候，一般會先列出大綱，然后再寫具體的內容。
同樣，html 網頁也可以看成是一種文檔，也有屬于它的大綱。
一個常見的html文檔，它的結構可以是：
<section>
<h1>一級標題</h1>
<section>
<h2>二級標題</h2>
<p>段落內容</p>
</section>
<section>
<h2>二級標題</h2>
<p>段落內容</p>
</section>
<aside>
<p>廣告內容</p>
</aside>
</section>
<footer>
<p>某某公司出品</p>
</footer>
我們可以通過 http://h5o.github.io/ 這個工具查看一個網頁的大綱。
使用方法：
（1）將網址 http://h5o.github.io/ 保存到書簽欄
（2）去目標網頁，點擊書簽欄的網址，即可查看該網頁的大綱。
這個工具非常好用，既可以查看網頁的大綱，也可以查看 markdown 在線文檔的結構。
按照樣式分類：
按照內容分類：
注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 仍然是不合法的。
比如下拉框這種比較復雜的元素，是自帶默認樣式的。如果沒有這個默認樣式，則該元素在頁面上不會有任何表現，則必然增加一些工作量。
同時，默認樣式也會帶來一些問題：比如，有些默認樣式我們是不需要的；有些默認樣式甚至無法去掉。
如果我們不需要默認的樣式，這里就需要引入一個概念：CSS Reset。
方案一：
CSS Tools: Reset CSS
方案二：
雅虎的 CSS Reset
我們可以直接通過 CDN 的方式引入：
<link rel="stylesheet" type="text/css" href=">
方式三：（比較有爭議）
*{
margin: 0;
padding: 0;
}
上面何種寫法，比較簡潔，但也有爭議。有爭議的地方在于，可能會導致 css 選擇器的性能問題。
上面的幾種 css reset 的解決思路是：將所有的默認樣式清零。
但是，Normalize.css 的思路是：既然瀏覽器提供了這些默認樣式，那它就是有意義的。既然不同瀏覽器的默認樣式不一致，那么，Normalize.css就將這些默認樣式設置為一致。
共同點：二者都是表示斜體。
區別：
自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜杠。
所以，如果我們是通過 Ajax 提交表單數據，也建議加上 form。
這一節以及以后幾節我們將對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:<p></p>與<br>
<p></p>元素是添加段落的。示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，
因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
個整體認識，以后可以根據需求通過查詢手冊來自己學習其他元素及其屬性的用法。</p><hr>
</body>
</html>效果如圖所示：
通過觀察發現，即使我們在代碼中對段落的文字進行回車操作，但是出現在頁面中是沒有回車的效果的，文字按照順序長長的排列在顯示器上，非常不利于閱讀，因此我們就要介紹常常和p標簽連用的<br>換行標簽。
示例代碼如下：
<!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頁面中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的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網頁的名稱
網頁標題
2、身體（body）
body的部分是整個網頁的重要內容部分，讓人一眼就瀏覽到這個網頁的內容，可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結束標簽終止的元素：元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例：
結果：
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內部樣式，在HTML元素中使用“style”屬性
l 內部樣式表，在頭部<head>區域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
