sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > HTML常用标签

HTML常用标签

作者:xuhongji发布时间:2020-09-13分类:Html浏览:177评论:0


导读:HTML常用标签:HTML文档格式:首先,HTML是一种超文本标签语言,它是制作网页的基础。其次,HTML文档中至少包含基本的和成对的、、、双标签。...

HTML常用标签:

HTML文档格式:

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

其次,HTML文档中至少包含基本的和成对的 、 、 、 双标签。

最后,在HTML文档中必不可少的还有属性标签,描述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文档的根标签,页面中所有内容都必须包含在其中。

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

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

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

一、最常用的标签:

1、

...
标题标签 ▷ 设置网页中的标题文字,设置后黑色粗体显示。代码及效果如下:

 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>我是标题h1h1>
 8     <h2>我是标题h1h2>
 9     <h3>我是标题h1h3>
10     <h4>我是标题h1h4>
11     <h5>我是标题h1h5>
12     <h6>我是标题h1h6> 
13 body>
14 html>

2、

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

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

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

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

4、


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

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

5、

居中标签 ▷ 设置网页中内容的位置,使文档在整个页面上居中显示。

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

6、

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

    1 <body>
    2     <ol>
    3         <li>我是第1列li>
    4         <li>我是第2列li>
    5         <li>我是第3列li>
    6     ol>
     1 <html>
     2 <head>
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />0

    7、

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

       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />1
       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />0

      8、

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

       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />3
       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />4

      9、

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

       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6
       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />7

      10、 字体形状标签 [加粗] ▷ 设置字体加粗显示。代码及效果如下:

      11、 字体形状标签 [斜体] 设置字体斜体显示。代码及效果如下:

      12、 字体形状标签 [下划线] 设置字体带有下划线显示。代码及效果如下:

      13、 字体形状标签 [下标] 设置文字作为下标显示。代码及效果如下:

      14、 字体形状标签 [上标] 设置文字作为上标显示。代码及效果如下:

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

       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />8
       1 <html>
       2 <head>
       3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />9

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

      语法:文本

       4     <title>PB_6大标题类型title>
       5 head>
       6 <body>
       7     <h1>我是标题h1h1>
       8     <h2>我是标题h1h2>
       9     <h3>我是标题h1h3>
      10     <h4>我是标题h1h4>
      11     <h5>我是标题h1h5>
      12     <h6>我是标题h1h6> 
      13 body>
      14 html>0
       4     <title>PB_6大标题类型title>
       5 head>
       6 <body>
       7     <h1>我是标题h1h1>
       8     <h2>我是标题h1h2>
       9     <h3>我是标题h1h3>
      10     <h4>我是标题h1h4>
      11     <h5>我是标题h1h5>
      12     <h6>我是标题h1h6> 
      13 body>
      14 html>1

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

         语法:

       4     <title>PB_6大标题类型title>
       5 head>
       6 <body>
       7     <h1>我是标题h1h1>
       8     <h2>我是标题h1h2>
       9     <h3>我是标题h1h3>
      10     <h4>我是标题h1h4>
      11     <h5>我是标题h1h5>
      12     <h6>我是标题h1h6> 
      13 body>
      14 html>2
       4     <title>PB_6大标题类型title>
       5 head>
       6 <body>
       7     <h1>我是标题h1h1>
       8     <h2>我是标题h1h2>
       9     <h3>我是标题h1h3>
      10     <h4>我是标题h1h4>
      11     <h5>我是标题h1h5>
      12     <h6>我是标题h1h6> 
      13 body>
      14 html>3

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

       4     <title>PB_6大标题类型title>
       5 head>
       6 <body>
       7     <h1>我是标题h1h1>
       8     <h2>我是标题h1h2>
       9     <h3>我是标题h1h3>
      10     <h4>我是标题h1h4>
      11     <h5>我是标题h1h5>
      12     <h6>我是标题h1h6> 
      13 body>
      14 html>4
      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中如下方式链接:

                     href="https://www.php1.cn/detail/pengbo518.html">pengbo518博客园

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

                   pengbo518.html">pengbo518博客园 

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

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

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


      欢迎 发表评论:

      Html排行
      «    2022年7月    »
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
      标签列表
      网站分类
      文章归档
      最近发表
      推荐文章