玩轉html概述和基礎標籤使用

1.html是什麼?

        HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作的文件保存的是一個文本文件,文件的擴展名爲html或者htm,一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。所以,我們學HTML其實就是學習標籤的使用。

2.html基本結構

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>

 第一行是文檔聲明,第二行“<html>”標籤和最後一行“</html>”定義html文檔的整體,“<html>”標籤中的‘lang=“en”’定義網頁的語言爲英文,定義成中文是'lang="zh-CN"',不定義也沒什麼影響,它一般作爲分析統計用。 “<head>”標籤和“<body>”標籤是它的第一層子元素,“<head>”標籤裏面負責對網頁進行一些設置以及定義標題,設置包括定義網頁的編碼格式,外鏈css樣式文件和javascript文件等,設置的內容不會顯示在網頁上,標題的內容會顯示在標題欄,“<body>”內編寫網頁上顯示的內容。

3.HTML文檔類型

      目前常用的兩種文檔類型是xhtml 1.0和html5。xhtml 1.0 是html5之前的一個常用的版本,目前許多網站仍然使用此版本。pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的。兩者的區別:

  • 1、文檔聲明和編碼聲明
  • 2、html5新增了標籤元素以及元素屬性

3.1  xhtml1.0格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文檔類型 </title>
</head>
<body>

</body>
</html>

3.2 html5文檔格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文檔類型 </title>
</head>
<body>

</body>
</html>

4.HTML常用標籤的使用介紹

4.1html註釋

html文檔代碼中可以插入註釋,註釋是對代碼的說明和解釋,註釋的內容不會顯示在頁面上,html代碼中插入註釋的方法是:

<!-- 這是一段註釋  -->

 4.2html標題標籤

通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關係,比如說: <h1>用作主標題,其後是 <h2>,再其次是 <h3>,以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引,所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

4.3html段落標籤、換行標籤與字符實體 

4.3.1 <p>標籤定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超
    文本指的是超鏈接,標記指的是標籤,是一種用來製作網頁的語言,這種語言由一個個的
    標籤組成,用這種語言製作的文件保存的是一個文本文件,文件的擴展名爲html或者htm。
    </p>

    <p>一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方
    式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示的網
    頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

4.3.2html換行標籤

代碼中成段的文字,直接在代碼中回車換行,在渲染成網頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入<br />來強制換行,代碼如下:

<p>
一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用<br />
文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

4.3.3 html字符實體

代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體,代碼如下:

<!--  在段落前想縮進兩個文字的空格,使用空格的字符實體:&nbsp;   -->
<p>
&nbsp;&nbsp;一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用<br />
文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件<br />
渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

4.3.4 在網頁上顯示 “<” 和 “>” 會誤認爲是標籤,想在網頁上顯示“<”和“>”可以使用它們的字符實體,比如:

<!-- “<” 和 “>” 的字符實體分別爲 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

最終結果展示如下: 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>html簡介</h1>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML是 HyperText Mark-up Language 的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,<br />
	是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作<br />
	的文件保存的是一個文本文件,文件的擴展名爲html或者htm,一個html文件<br />
	就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯<br />
	它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示<br />
	的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>


	<p>10&gt;5</p>

	<p>2&lt;8</p>

</body>
</html>

4.4html塊標籤、含樣式的標籤

4.4.1 html塊標籤

1、<div> 標籤 塊元素,表示一塊內容,沒有具體的語義。
2、<span> 標籤 行內元素,表示一行中的一小段內容,沒有具體的語義。

4.4.2 含樣式和語義的標籤

1、<em> 標籤 行內元素,表示語氣中的強調詞
2、<i> 標籤 行內元素,表示專業詞彙
3、<b> 標籤 行內元素,表示文檔中的關鍵字或者產品名
4、<strong> 標籤 行內元素,表示非常重要的內容

語義化的標籤,就是在佈局的時候多使用有語義的標籤,搜索引擎在爬網的時候能認識這些標籤,理解文檔的結構,方便網站的收錄。比如:h1標籤是表示標題,p標籤是表示段落,ul、li標籤是表示列表,a標籤表示鏈接,dl、dt、dd表示定義列表等,語義化的標籤不多。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>塊標籤</title>
</head>
<body>
	<p>

	HTML是 <span>HyperText Mark-upLanguage</span>的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,
	是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作
	就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯
	它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示
	的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

	<p>HTML是 <em>HyperText Mark-up Language</em> 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,
	是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作
	就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯
	它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示
	的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
	
	
	<div>HTML是 <i>HyperText Mark-up Language</i> 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,
	是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作
	就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯
	它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示
	的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</div>


	<div>
		<h1>html概述</h1>
		<p>HTML是 <b>HyperText Mark-up Language</b> 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,
		是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作
		就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯
		它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示
		的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

	</div>

	<p><strong>HTML是 HyperText Mark-up Language的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標籤,
		是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作
		就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯
		它,如果用瀏覽器打開,瀏覽器會按照標籤描述內容將文件渲染成網頁,顯示
		的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</strong></p>


	<div>
		<div>html概述</div>
		<div>HTML是 HyperText Mark-up Language</div>
	</div>

</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章