HTML入門練習案例

1）熟練使用p標簽加粗樣式標簽給文本分段
（2）熟練使用換行標簽h標簽加粗給標簽寫標題
（3）使用圖像標簽加圖像
（4）使用錨點鏈接可以點擊鏈接快速定位到頁面中的某個位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1標簽的使用 -->
<h1 id="top">貓貓種類</h1>
 <!--換行標簽<br/>的使用  -->
貓貓分為<br/>
<!-- 錨點鏈接的<a herf="#"></a>使用 -->
<a href="#miao">妙貓貓，</a><br/>
<a href="#cry">流淚貓貓，</a><br/>
<a href="#ben">本拉豆貓貓，</a><br/>
<a href="#wei">委屈貓貓</a><br/>
<h4 id="miao"><h3>妙貓貓</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
    秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流淚貓貓</h3></h4>
沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒<p>人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓</p>
<img src="images/流淚貓貓.gif"width="300"/>
<h4 id="ben"><h3>本拉豆貓貓</h3></h4>
<p>哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！
   </p>
   <!-- 圖像標簽<img src="圖像地址"/>的使用 -->
   <img src="images/本拉豆貓.jpg"width="300"/>
<h4 id="wei"><h3>委屈貓貓</h3></h4>
<p>我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？</p>
<a href="#top">返回頂部</a><br>
<a href="images/菠蘿頭簡介.html"target="_blank">引申貓貓：菠蘿頭的簡介和照片</a>
</body>
</html>
![本拉豆貓圖片插入圖 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)

![流淚貓貓](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)




1234567891011121314151617181920212223242526272829303132333435363738394041

原文鏈接：https://blog.csdn.net/qq_45067479/article/details/109083277?utm_medium=distribute.pc_category.none-task-blog-hot-2.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2.nonecase&request_id=

作者：thorn豆豆

、什么是HTML

HTML簡介

HTML是用來描述網頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

發展史

HTML：Hyper Text Markup Language超文本標記語言

超文本標記語言—在1993年6月互聯網工程工作小組工作案發布（并非標準）

HTML2.0—1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布過時。

HTML3.2—1996年1月14日，W3C推薦標準

HTML4.0—1997年12月18日，W3C推薦標準

HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準

XHTML1.0—發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布

XHTML1.1—2001年5月31日發布

XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術的成本過高而最終胎死腹中，因此，現在最常用的還是XHTML1.0標準。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度

HTML的優勢

各大瀏覽器廠商對H5的支持
市場的需求
跨平臺

二、HTML的基本結構

<html>......</html> HTML文檔的開始和結束標記。
<head>……</head> 頭控制標記，不在界面上進行展示，子標簽可設置SEO優化的一些內容以及設置網頁的編碼。
<title>……</title>：設置瀏覽器的窗口上標題。
<body>……</body>：頁面可見內容。

三、HTML的基本標簽

標題標簽

h1~h6

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h1>這是一級標題</h1>

<h2>這是二級標題</h2>

<h3>這是三級標題</h3>

<h4>這是四級標題</h4>

<h5>這是五級標題</h5>

<h6>這是六級標題</h6>

<h7>這是七級標題</h7>效果怎么顯示不出來呢？？？

<h1>這是一級標題</h1>

</body>

</html>

瀏覽器預覽效果

段落標簽和換行標簽

p標簽為段落標簽，br標簽為換行標簽

源代碼

<!DOCTYPE html>

<head>

<title>段落和換行標簽</title>

</head>

<body>

<h1>北京歡迎你</h1>

<p>北京歡迎你，<br>為你開天辟地</p>

<p>北京歡迎你，<br/>有有勇氣就會有奇跡</p>

</body>

</html>

瀏覽器預覽效果圖

水平線標簽

hr標簽為水平線標簽

源代碼

<!DOCTYPE html>

<head>

<title>水平線標簽</title>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了半年的積蓄，<br>漂洋過海來看你</p>

<hr/>

</body>

</html>

瀏覽器預覽效果圖

字體樣式標簽

em為斜體標簽，strong為字體加粗標簽

源代碼

<!DOCTYPE html>

<head>

<title>字體樣式標簽</title>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br>

<em><strong>漂洋過海</strong></em>來看你

</p>

<hr/>

</body>

</html>

瀏覽器預覽效果圖

注釋和特殊符號

注釋使用：

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權符號：©

空格：

源代碼

<!DOCTYPE html>

<head>

<title>注釋和特殊符號</title>

</head>

<body>

<pre>

注釋使用：

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權符號：©

空格：

</pre>

5<10>6 <br>

"我是被雙引號引起來的內容"<br>

©自由職業開發者公司<br>

我是測試空格的

</body>

</html>

瀏覽器預覽效果圖

以上就是HTML的簡單入門，后續帶大家更深入的了解HTML

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

在線咨詢

上一篇：編寫你的第一行 HTML 代碼，來幫助蝙蝠俠寫一封情書
下一篇：CSS 中幾種最常用的水平垂直居中的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML入門練習案例

、什么是HTML

二、HTML的基本結構

三、HTML的基本標簽

您的項目需求