零基礎學建站:6.1、常見標簽及用法

2018年1月29日12:13:25 2 2,827 views

今天我們來說說HTML里面的常見標簽,常見代碼,及知識點和問答。(針對這些標簽的講解,收費100)

6.1、常見標簽及用法:(目前29個)

<!---->,<a>,<b>,<br>,<body>,<del>,<div>,<em>,<font>,<h1>,
<head>,<hr>,<html>,<i>,<iframe>,<img>,<ins>,<li>,<link>,<nav>,
<ol>,<p>,<q>,<style>,<table>,<title>,<u>,<ul>,<video>

6.1.1<!---->。注釋。如:<!--注釋不會在瀏覽器中顯示。-->

 

6.1.2、<a></a>。 定義超鏈接。用于從一張頁面鏈接到另一張頁面。通常跟href鏈接。如:<a href="URL地址">文字描述</a>,演示效果:

楊澤業博客

 

6.1.3、<b></b>。粗體文本。如:<b>這是粗體文本</b>。演示效果:

這是粗體文本

 

6.1.4、<br>。換行。<br> 標簽是空標簽,沒有結束標簽。如:我要換行<br>,演示效果:
我要換行
我要換行
我要換行

 

6.1.5、<body></body>。文檔的主體,包含文檔的所有內容(比如文本、超鏈接、圖像、表格列表等等。)如:
<body>
文檔的內容... ...
</body>

演示效果:

文檔的內容... ...

 

6.1.6、<del></del>。刪除線。如:一打有<del>20</del>12件。演示效果:

一打有2012件。

 

6.1.7、<div></div>。文檔中的分區或節、方塊。<div> 標簽可以把文檔分割為獨立的、不同的部分。通常用 id 或 class 來標記 <div>。如:
<div style="color:#00FF00">我是中國人</div>
或者
<div class="news">
<h1>建站培訓第一期只要280元</h1>
<p>好消息,為了...</p>
...
</div>

演示效果1:

我是中國人

演示效果2:

建站培訓第一期只要280元

好消息,為了...

...

 

6.1.8、<em></em>。把文本定義為強調的內容。如:我們都是<em>中國</em>人。演示效果:

我們都是中國人。

 

6.1.9、<font></font>。字體標簽。<font size="" color=""></font> 設置字體大小從1到7,顏色使用名字或RGB的十六進制值如:

<font size="5" face="arial" color="red">你會想我嗎?</font>

演示效果:
你會想我嗎?

6.1.10、<h1> 到 </h6>。標題標簽。h1-h6,h1最大標題,h6最小標題。如:<h1>這是標題 1</h1>,<h6>這是標題 6</h6>。

演示效果:

這是標題 1

這是標題 6

 

6.1.11、<head></head>。文檔頭部。下面這些標簽可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文檔的標題,它是 head 部分中唯一必需的元素。如:
<head>
<title>文檔的標題</title>
</head>

 

6.1.12、<hr>。水平分隔線。 在 HTML 頁面中創建一條水平線。<hr> 標簽沒有結束標簽。如:

<p>這是標題</p>

<hr />

<p>這是段落1</p>

<hr />

<p>這是段落2</p>

 

演示效果:

這是標題


這是段落1


這是段落2

 

6.1.13、<html></html>。HTML 文檔。此元素可告知瀏覽器其自身是一個 HTML 文檔。
<html> 與 </html> 標簽限定了文檔的開始點和結束點,在它們之間是文檔的頭部和主體。如:
<html>
<head>
這里是文檔的頭部 ... ...
</head>
<body>
這里是文檔的主體 ... ...
</body>
</html>

演示效果:

這里是文檔的頭部 ... ...

這里是文檔的主體 ... ...

6.1.14、<i></i>。<i> 標簽顯示斜體文本效果。如:<i>我是中國人</i>。演示效果:

我是中國人

 

6.1.15、<iframe></iframe>。內聯框架。即一個網頁里面調用另一個網頁里面的內容。如: <Iframe src="URL" width="100%" height="650" scrolling="no" frameborder="0"></iframe>

演示效果:(調用這個頁面,請點擊新連接查看效果了)

示例1、一個頁面調用3個頁面的顯示效果,查看今日、明日、后日刪除的cn域名列表:

http://www.kkkonw.live/cn.html

上面這個頁面,就是我的一個頁面,顯示了3個來自于cnnic官方的數據。

示例2、一個頁面里面調用一個頁面的顯示效果,漢字轉拼音:

http://www.kkkonw.live/pinyin.html

上面這個頁面,我調用了愛詞霸官方的漢語轉拼音的頁面。

 

6.1.16、<img>。圖像標簽。<img> 標簽有兩個必需的屬性:src 屬性 和 alt 屬性。如:<img src="/logo.jpg" alt="圖像說明" />。

演示效果:

楊澤業博客

 

6.1.17、<ins></ins>。下劃線文本。如:<ins>這是帶有下劃線的文字</ins>。演示效果:

這是帶有下劃線的文字

 

6.1.18、<li></li>。定義列表項目。<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。如:
<p>有序列表:</p>
<ol>
<li>先買域名和空間</li>
<li>域名和空間相互綁定</li>
<li>上傳源碼,開通網站</li>
</ol>
<p>無序列表:</p>
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>

演示效果:

有序列表:

  1. 先買域名和空間
  2. 域名和空間相互綁定
  3. 上傳源碼,開通網站

無序列表:

 

6.1.19、<link>。鏈接一個外部樣式表。如:
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

 

6.1.20、<nav></nav>。欄目、導航。如:
<nav>
<a href="/yingxiao/">網絡營銷</a> |
<a href="/website/">網站建設</a> |
<a href="/jzpx/">建站培訓</a>
</nav>

演示效果:

 

6.1.21、<ol></ol>。有序 HTML 列表。(6.1.18提到過的)如:
<ol>
<li>域名</li>
<li>主機</li>
<li>源碼</li>
</ol>

指定順序起排列:(比如從10起步)
<ol start="10">
<li>域名</li>
<li>主機</li>
<li>源碼</li>
</ol>

演示效果:

  1. 域名
  2. 主機
  3. 源碼

指定順序起排列:(比如從10起步)

  1. 域名
  2. 主機
  3. 源碼

 

6.1.22、<p></p>。段落。p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。如:
<p>你會想我嗎?</p>

演示效果:

你會想我嗎?

 

6.1.23、<q></q>。標記短的引用。瀏覽器經常在引用的內容周圍添加引號。如:小明說 :<q>他來自湖南</q>。演示效果:

小明說 :他來自湖南

 

6.1.24、<style></style>。<style> 標簽用于為 HTML 文檔定義樣式信息。在 style 中,您可以規定在瀏覽器中如何呈現 HTML 文檔。type 屬性是必需的,定義 style 元素的內容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。如:
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是段落</p>
</body>
</html>

 

6.1.25、<table></table>。表格。
<table> 標簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。
<table border="1">
<tr>
<th>月份</th>
<th>收入</th>
</tr>
<tr>
<td>五月</td>
<td>3500元</td>
</tr>
</table>

演示效果:

月份 收入
五月 3500元

 

6.1.26、<title></title>。標題。<title> 元素可定義文檔的標題。<title> 標簽是 <head> 標簽中唯一要求包含的東西。如:
<html>
<head>
<title>我的第一個 HTML 頁面</title>
</head>
<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
</body>
</html>

 

6.1.27、<u></u>。下劃線。和ins一樣都有下劃線。如:
<p>如果文本不是超鏈接,就不要<u>對其使用下劃線</u>。</p>

演示效果:

如果文本不是超鏈接,就不要對其使用下劃線。

 

6.1.28、<ul></ul>。無序列表。(6.1.18有提到)如:
<p>無序列表:</p>
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>

演示效果:

無序列表:

 

6.1.29、<video></video>。視頻。如:
<video src="/123.mp4" width="640" height="" controls="controls"></video>

效果演示:

 

 

【歡迎報名楊澤業的零基礎學建站一對一培訓,原價1980元,現在報名只需980元!】

 

 

相關文章列表:

楊澤業正在銷售的阿里云/萬網/西部數碼虛擬主機價格表(2018年版)

楊澤業《零基礎學建站》課程介紹

零基礎學建站:1.1、初步認識和了解網站建設的相關知識及網站規劃

零基礎學建站:1.2、注冊帳號和添加域名模板

零基礎學建站:1.3、注冊域名

零基礎學建站:1.4、購買空間(虛擬主機)

零基礎學建站:1.5、域名備案

零基礎學建站:1.6、域名綁定空間,空間綁定域名。

零基礎學建站:1.7、上傳網站程序,安裝網站

零基礎學建站:2.1、上傳和啟用模板(主題)

零基礎學建站:2.2、配置網站。

零基礎學建站:2.3、添加和查看統計。

零基礎學建站:3、windows服務器網站環境搭建(選學)

零基礎學建站:4、linux服務器網站環境搭建(選學)

零基礎學建站:5、幾個重要的對照表

零基礎學建站:6.1、常見標簽及用法

零基礎學建站:6.2、常用代碼及用法

零基礎學建站:6.3、常見名詞及解釋

零基礎學建站:6.4、網站建設常見問答(完)

 

  • 澤業營銷網官方QQ群
  • 群號:99293363
  • weinxin
  • 我的微信公眾號
  • ID:iyangzeye
  • weinxin

楊澤業

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前評論:2   其中:訪客  1   博主  1

    • 哦引力 哦引力 1

      這個零基礎表示抗議

        • 楊澤業 楊澤業 Admin

          @哦引力 從注冊域名,購買空間算起,都是一步一步截圖過來的,還不是0基礎嗎?