HTML常用标签

2018-06-24 00:43:36来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

HTML常用标签:

HTML文档格式:

首先,HTML是一种超文本标签语言,它是制作网页的基础。

其次,HTML文档中至少包含基本的和成对的<html> </html>、<head> </head>、<title> </title>、<body> </body>双标签。

最后,在HTML文档中必不可少的还有<meta/>属性标签,描述HTML网页得一些属性以及转换字符编码,一般选择使用国际编码utf-8。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>我是网页标题</title>
 6 </head>
 7     <body>
 8         我是网页内容。  
 9     </body>
10 </html>

HTML文档解析:

1.<html></html> 根标签,它是HTML文档的根标签,页面中所有内容都必须包含在其中。

2.<head></head> 头部标签,其中的文档不会在网页中显示,目的是供浏览器解析其中的属性。

3.<title></title> 标题标签,要求精炼简洁,能够概括一个网页的主要内容,即作为个网页的标题。

4.<body></body> 内容标签,其中也是呈现在网页上的内容。

一、最常用的标签:

1、<h1></h1>...<h6></h6> 标题标签  ? 设置网页中的标题文字,设置后黑色粗体显示。代码及效果如下:

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>PB_6大标题类型</title> 5 </head> 6 <body> 7 <h1>我是标题h1</h1> 8 <h2>我是标题h1</h2> 9 <h3>我是标题h1</h3> 10 <h4>我是标题h1</h4> 11 <h5>我是标题h1</h5> 12 <h6>我是标题h1</h6> 13 </body> 14 </html>

 

 

 

 

 

 

 

 

 

2、<p></p> 段落标签                       ? 设置网页中的段落,其中可以嵌套列表、表格等,多行文字时将随浏览器大小自动换行。代码如下:

1 <body>
2     <p>我是一个段落。</p>
3 </body>

3、<br /> 换行标签                           ? 设置网页中文字文本的换行。【注意】这个是单标签,没有结束标签。代码及效果如下:

1 <body>
2   欢迎来到pengbo518博客园!<br /> 我是强制换行标签喔!
3 </body>
br

 

 

4、<hr />分割线标签                      ? 设置网页中内容的分割界线。【注意】这个也是单标签,没有结束标签。代码及效果如下:

1 <body>
2      你是我的月亮
3     <hr />
4      我是地球
5 </body>

 

 

5、<center></center> 居中标签       ? 设置网页中内容的位置,使文档在整个页面上居中显示。

1 <body>
2     <center>
3       我就在网页中间显示,你能怎么滴我?嗯哼
4     </center>  
5 </body>

6、<ol></ol> 有序列表标签   【注意】要套<li></li>列表项 使用。    ? 设置网页中的内容,使文档有序排列。代码及效果如下:

1 <body>
2     <ol>
3         <li>我是第1列</li>
4         <li>我是第2列</li>
5         <li>我是第3列</li>
6     </ol>
7 </body>

 

 

 

7、<ul></ul> 无序列表标签  【注意】要套<li></li>列表项 使用。     ? 设置网页中的内容,使文档无序排列。代码及效果如下:

1 <body>
2     <ul>
3         <li>我是第1列</li>
4         <li>我是第2列</li>
5         <li>我是第3列</li>
6     </ul>
7 </body>

 

 

 

8、<dl></dl> 自定义列表标签 【注意】要套<dt></dt><dd></dd>列表项使用。 ? 设置网页中的内容,使文档无序排列。代码及效果如下:

1 <body>
2     <dl>
3         <dt>我是自定义标题1</dt>
4 <dd>我是自定义描述1</dd> 5 <dt>我是自定义标题2</dt> 6 <dd>我是自定义描述2</dd> 7 </dl> 8 </body>

 

 

 

9、<pre></pre> 自定义格式标签          ? 自定义设置网页中的内容格式。代码及效果如下:

1 <body>
2    <pre>
3            您好!
4       欢迎您来到 pengbo518 博客园
5 感谢您对我的关注支持! 6 让我们共同学习探讨吧! 7 </pre> 8 </body>

 

 

 

10、<b></b> 字体形状标签 [加粗]           

11、<i></i> 字体形状标签 [斜体]            

12、<u></u> 字体形状标签 [下划线]          

13、<sub></sub> 字体形状标签 [下标]     

14、<sup></sup> 字体形状标签 [上标]    

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

1 <body>
2     <b>《静夜思》</b> 
3     <sub>李白</sub>
4     <p>
5       <i>床前明月光,疑是地上霜。</i> 
6   <u>举头望明月,低头思故乡。</u>
7   <sup>pengbo518</sup> 8 </p> 9 </body>

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

       语法:<font size="字号" face="字体" color="颜色">文本</font>

 1 <body>
 2    <font size="+2" face="Arial, Helvetica, sans-serif" color="#FF0000">
 3        HTML I love you !
 4    </font>
5 <br /> 6 <font size="+3" face="隶书" color="#0000FF"> 7 热爱生活,热爱博客园 8 </font> 9 </body>

 

 

 

16、<img> 图像标签                                ? 设置字体、字号、颜色等。代码语法及效果如下:

    语法:<img src="图片路径" title="标题" width="宽度" height="高度" align="对齐方式" alt="图片名" />

1 <body>
2    <img src="images.png" title="小鱼" width="70px" height="70px" alt="鱼干" />
3 我的小鱼干呢 4 </body>

 

 

 

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

1 <body>
2     <a href="http://www.baidu.com">百度</a>||
3 <a href="http://www.taobao.com">淘宝</a>|| 4 <a href="http://www.cnblogs.com">博客园</a> 5 </body>

【补充】

一.文件路径:

   1. 绝对路径: ? 绝对路径是指带域名或盘符的完整路径。

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

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

     <a href="pengbo518.html">pengbo518博客园</a>

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

      <a href="../pengbo518.html">pengbo518博客园</a> 

二. 锚点:   

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

         链接到当前文档中的锚点:<a href="#锚点名称">链接文本</a>

     链接到其他文档中的锚点:<a href="文件名#锚点名称">链接文本</a>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:酷酷的mapv

下一篇:CSS3 选择器——属性选择器