Rumah > hujung hadapan web > html tutorial > HTML常用标签

HTML常用标签

WBOY
Lepaskan: 2016-12-05 13:26:28
asal
1780 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk
<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>
Salin selepas log masuk

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>
Salin selepas log masuk

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">br </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="br"  style="max-width:90%"  style="max-width:90%"></span></span></span>
Salin selepas log masuk
<span style="color: #008080">3</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
Salin selepas log masuk

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">     我是地球<br><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>
Salin selepas log masuk
<span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
    Salin selepas log masuk
    <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    Salin selepas log masuk
    Salin selepas log masuk

    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>
      Salin selepas log masuk
      <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      Salin selepas log masuk
      Salin selepas log masuk

      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>
      Salin selepas log masuk
      <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>
      Salin selepas log masuk

      9、

      Salin selepas log masuk
      自定义格式标签         ▷ 自定义设置网页中的内容格式。代码及效果如下:

      <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>
      Salin selepas log masuk
      <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>
      Salin selepas log masuk

      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> <br><br><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>
      Salin selepas log masuk
      <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>
      Salin selepas log masuk

      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>
      Salin selepas log masuk
      <span style="color: #008080"> 5</span>        <span style="color: #0000ff"><span style="color: #800000">br </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>
      Salin selepas log masuk

      16、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>
      Salin selepas log masuk
      <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>
      Salin selepas log masuk

      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>
      Salin selepas log masuk
      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>
      Salin selepas log masuk

      【补充】一.文件路径:1. 绝对路径: 绝对路径是指带域名或盘符的完整路径。

                 2. 相对路径: ▷ 相对路径是指这个文件所在的路径引起的跟其他文件(或文件夹)的路径关系。例如:

                    如果两个在同一个文件夹中,在index.html中链接pengbo518.html则可以在index.html中如下方式链接:

                     href="pengbo518.html">pengbo518博客园

                    ② 如果pengbo518.html文件是index.html文件的上级路径,则可以在index.html中如下方式链接:

                    pengbo518.html">pengbo518博客园 

             二. 锚点:    ▷ 设置锚点通常是放在文档的特定主题或顶部。然后创建锚点链接,通过链接可以快速定位到指定位置。

                             链接到当前文档中的锚点:链接文本

                    链接到其他文档中的锚点:

       

    • Label berkaitan:
      sumber:php.cn
      Kenyataan Laman Web ini
      Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
      Tutorial Popular
      Lagi>
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan