首頁 > web前端 > html教學 > HTML常用標籤

HTML常用標籤

WBOY
發布: 2016-12-05 13:26:28
原創
1780 人瀏覽過

HTML常用標籤:

HTML文件格式:

首先,HTML是一種超文本標籤語言,它是製作網頁的基礎。

其次,HTML文件中至少包含基本的和成對的 、 、 、 雙標籤。

最後,在HTML文件中必不可少的還有屬性標籤,描述HTML網頁得一些屬性以及轉換字符編碼,一般選擇使用國際編碼utf-8。

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #ff00ff">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">html </span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span> <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html; charset=utf-8"</span> <span style="color: #0000ff">/></span>
<span style="color: #008080"> 5</span>     <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">></span>我是网页标题<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span> <span style="color: #000000">        我是网页内容。  
</span><span style="color: #008080"> 9</span>     <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span></span></span></span></span></span>
登入後複製

HTML文件解析:

1. 根標籤,它是HTML文件的根標籤,頁面中所有內容都必須包含在其中。

2. 頭部標籤,其中的文件不會在網頁中顯示,目的是供瀏覽器解析其中的屬性。

3. 標題標籤,要求精煉簡潔,能夠概括一個網頁的主要內容,即作為個網頁的標題。

4. 內容標籤,其中也是呈現在網頁上的內容。

一、最常用的標籤:

1、

...
標題標籤  ▷ 設定網頁中的標題文字,設定後黑色粗體顯示。程式碼及效果如下:

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html; charset=utf-8"</span> <span style="color: #0000ff">/><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204948381-163635024.png" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span></span>
登入後複製
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">><span style="color: #000000">PB_</span></span>6大标题类型<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span> <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>     <span style="color: #0000ff"><span style="color: #800000">h2</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h2</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"><span style="color: #800000">h3</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h3</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>     <span style="color: #0000ff"><span style="color: #800000">h4</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>     <span style="color: #0000ff"><span style="color: #800000">h5</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h5</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>     <span style="color: #0000ff"><span style="color: #800000">h6</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h6</span><span style="color: #0000ff">></span> 
<span style="color: #008080">13</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span>
登入後複製

2、

段落標籤                           ▷ 設定網頁中的段落,其中可巢狀清單、表格、表單等,多行文字時將隨行。 程式碼如下:

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>我是一个段落。<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span>
登入後複製

3、 換行標籤                           ▷ 設定網頁中文字文字的換行。 【注意】這個是單標籤,沒有結束標籤。 程式碼及效果如下:

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>   欢迎来到pengbo518博客园!<span style="color: #0000ff"><span style="color: #800000">HTML常用標籤 </span><span style="color: #0000ff">/></span><span style="color: #000000"> 我是强制换行标签喔!<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161203000631271-945862362.png" alt="HTML常用標籤"  style="max-width:90%"  style="max-width:90%"></span></span></span>
登入後複製
<span style="color: #008080">3</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
登入後複製

4、


分割線路標籤                      ▷ 設定網頁中內容的分割界線。 【注意】這個也是單標籤,沒有結束標籤。 代碼及效果如下:

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span> <span style="color: #000000">     你是我的月亮
</span><span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">hr </span><span style="color: #0000ff">/></span>
<span style="color: #008080">4</span> <span style="color: #000000">     我是地球<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161203001938631-1115592738.png" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span>
登入後複製
<span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
登入後複製

5、

居中標籤       ▷ 設定網頁中內容的位置,使文件在整個頁面上居中顯示。

1 body>
2     center>
3       我就在网页中间显示,你能怎么滴我?嗯哼
4     center>  
<span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
登入後複製

6、

    有序列表标签【注意】要套
  1. 列表项 使用。  ▷ 设置网页中的内容,使文档有序排列。代码及效果如下:

    <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ol</span><span style="color: #0000ff">></span>
    <span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
    <span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
    <span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
    <span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ol</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204319599-592154556.png" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span></span></span></span>
    登入後複製
    <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    登入後複製
    登入後複製

    7、

      无序列表标签【注意】要套
    • 列表项 使用。  ▷ 设置网页中的内容,使文档无序排列。代码及效果如下:

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
      <span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
      <span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
      <span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
      <span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ul</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204218693-875385495.png" alt=""></span></span></span></span></span></span>
      登入後複製
      <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      登入後複製
      登入後複製

      8、

      自定义列表标签【注意】要套
      列表项使用。 ▷ 设置网页中的内容,使文档无序排列。代码及效果如下:

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
      <span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题1<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204205523490-2070875690.png" alt=""></span></span></span></span>
      登入後複製
      <span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述1<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
      <span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题2<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">></span>
      <span style="color: #008080">6</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述2<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
      <span style="color: #008080">7</span>     <span style="color: #0000ff"></span><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
      <span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span>
      登入後複製

      9、

      登入後複製
      自定义格式标签         ▷ 自定义设置网页中的内容格式。代码及效果如下:

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
      <span style="color: #008080">3</span> <span style="color: #000000">           您好!
      </span><span style="color: #008080">4</span> <span style="color: #000000">           欢迎您来到 pengbo518 博客园<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204210310131-1915429582.png" alt=""></span></span></span>
      登入後複製
      <span style="color: #008080">5</span> <span style="color: #000000">           感谢您对我的关注支持!
      </span><span style="color: #008080">6</span> <span style="color: #000000">           让我们共同学习探讨吧!      
      </span><span style="color: #008080">7</span>    <span style="color: #0000ff"></span><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
      <span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      登入後複製

      10、 字體形狀標籤 [加粗]              ✖ 設置字體加粗。程式碼及效果如下:

      11、 字型標籤 [斜體]                設定字體斜體顯示。 碼及效果如下: 12、 字體形狀標籤[底線

      設定字體帶有底線顯示。 碼及效果如下:

      13、 字體形狀標籤[下標]       設定文字作為下標顯示。 碼及效果如下: 14、 字體形狀標籤[上標]       設定文字作為上標顯示。

      碼及效果如下:

           ** 10、11、12、13、14 **                    代码及效果集合如下:

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">b</span><span style="color: #0000ff">></span>《静夜思》<span style="color: #0000ff"></span><span style="color: #800000">b</span><span style="color: #0000ff">></span> 
      <span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">sub</span><span style="color: #0000ff">></span>李白<span style="color: #0000ff"></span><span style="color: #800000">sub</span><span style="color: #0000ff">></span>
      <span style="color: #008080">4</span>     <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>
      <span style="color: #008080">5</span>            <span style="color: #0000ff"><span style="color: #800000">i</span><span style="color: #0000ff">></span>床前明月光,疑是地上霜。<span style="color: #0000ff"></span><span style="color: #800000">i</span><span style="color: #0000ff">></span> <span style="color: #008080">6</span>           <span style="color: #0000ff"><span style="color: #800000">u</span><span style="color: #0000ff">></span>举头望明月,低头思故乡。<span style="color: #0000ff"></span><span style="color: #800000">u</span><span style="color: #0000ff">></span> </span></span></span></span></span></span>
      登入後複製
      <em id="__mceDel"><span style="color: #008080">7</span>         <span style="color: #0000ff"><span style="color: #800000">sup</span><span style="color: #0000ff">></span>pengbo518<span style="color: #0000ff"></span><span style="color: #800000">sup</span><span style="color: #0000ff">></span>
      <span style="color: #008080">8</span>     <span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
      <span style="color: #008080">9</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></em>
      登入後複製

      15、 字体标签                    设置字体、字号、颜色等。代码语法及效果如下:

             语法:文本

      <span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080"> 2</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+2"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="Arial, Helvetica, sans-serif"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#FF0000"</span><span style="color: #0000ff">></span>
      <span style="color: #008080"> 3</span> <span style="color: #000000">       HTML I love you !
      </span><span style="color: #008080"> 4</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204231516740-1821234010.png" alt=""></span></span></span>
      登入後複製
      <span style="color: #008080"> 5</span>        <span style="color: #0000ff"><span style="color: #800000">HTML常用標籤 </span><span style="color: #0000ff">/></span>
      <span style="color: #008080"> 6</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+3"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="隶书"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#0000FF"</span><span style="color: #0000ff">></span>
      <span style="color: #008080"> 7</span> <span style="color: #000000">       热爱生活,热爱博客园
      </span><span style="color: #008080"> 8</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">></span>     
      <span style="color: #008080"> 9</span> <span style="color: #0000ff"><span style="color: #800000">body<span style="color: #0000ff">></span></span></span>
      </span></span>
      登入後複製

      16、HTML常用標籤 图像标签                                设置字体、字号、颜色等。代码语法及效果如下:

          语法:HTML常用標籤

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images.png"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="小鱼"</span><span style="color: #ff0000"> width</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> height</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">="鱼干"</span> <span style="color: #0000ff">/><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204232949302-201637373.png" alt=""></span></span></span>
      登入後複製
      <span style="color: #008080">3</span> <span style="color: #000000">      我的小鱼干呢
      </span><span style="color: #008080">4</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      登入後複製

      17、超链接标签                           ▷ 创建超链接,href属性来设置页面的链接地址。代码语法及效果如下:

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      <span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.baidu.com"</span><span style="color: #0000ff">></span>百度<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #000000">||<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161205001152240-1209790473.png" alt=""></span></span></span>
      登入後複製
      3     a href="http://www.taobao.com">淘宝a>||
      4     a href="http://www.cnblogs.com">博客园a>
      <span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      登入後複製

      【補充】一.檔案路徑:1. 絕對路徑: 絕對路徑是指有網域名稱或盤符的完整路徑。            2. 相對路徑:

      路徑關係。例如:

        『  〜 〜 〜〜 〜〜 〜〜 〜〜 〜〜 〜〜 〜〜 〜〜 〜 〜〜、〜〜、〜〜〜、〜〜〜〜、〜〜〜〜、、〜〜〜〜 〜〜〜〜、〜 文件夾中,在index.html中連結pengbo518.htmlpengbo518.html 則可以在index.html中如下方式連結:

               〜 〜〜〜〜〜 href=" pengbo518.html ">pengbo518博客園 a>

        『  〜 〜〜 〜、 index.html 文件的上級路徑,則可以在index.html中如下方式連結:               pengbo518博客園 

             二. 錨點:    或錨定。然後創建錨點鏈接,透過鏈接可以快速定位到指定位置。

                           

        連結至目前文件中的錨點:連結文字  連結到目前文件中的錨點:連結文字               連結到其他文件中的錨點:

       
      🎜

    • 相關標籤:
      來源:php.cn
      本網站聲明
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
      最新問題
      熱門教學
      更多>
      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板