0

0

HTML常用标签

php中文网

php中文网

发布时间:2016-12-05 13:26:28

|

2006人浏览过

|

来源于php中文网

原创

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 /> 我是强制换行标签喔!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>
    7 body>

    7、

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

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

      8、

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

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

      9、

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

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

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

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

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

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

      jQuery实用小标签插件
      jQuery实用小标签插件

      jQuery实用小标签插件

      下载

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

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

      1 <body>
      2     <b>《静夜思》b> 
      3     <sub>李白sub>
      4     <p>
      5            <i>床前明月光,疑是地上霜。i> 

      6    <u>举头望明月,低头思故乡。u>
      7         <sup>pengbo518sup>
      8     p>
      9 body>

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

             语法:文本

       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、HTML常用标签 图像标签                                设置字体、字号、颜色等。代码语法及效果如下:

          语法:图片名

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

      17、超链接标签                           ▷ 创建超链接,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中如下方式链接:

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

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

                    pengbo518.html">pengbo518博客园 

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

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

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

       

    • 相关文章

      HTML速学教程(入门课程)
      HTML速学教程(入门课程)

      HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

      下载

      本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

      热门AI工具

      更多
      DeepSeek
      DeepSeek

      幻方量化公司旗下的开源大模型平台

      豆包大模型
      豆包大模型

      字节跳动自主研发的一系列大型语言模型

      通义千问
      通义千问

      阿里巴巴推出的全能AI助手

      腾讯元宝
      腾讯元宝

      腾讯混元平台推出的AI助手

      文心一言
      文心一言

      文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

      讯飞写作
      讯飞写作

      基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

      即梦AI
      即梦AI

      一站式AI创作平台,免费AI图片和视频生成。

      ChatGPT
      ChatGPT

      最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

      相关专题

      更多
      go语言 注释编码
      go语言 注释编码

      本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

      2

      2026.01.31

      go语言 math包
      go语言 math包

      本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

      1

      2026.01.31

      go语言输入函数
      go语言输入函数

      本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

      1

      2026.01.31

      golang 循环遍历
      golang 循环遍历

      本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

      0

      2026.01.31

      Golang人工智能合集
      Golang人工智能合集

      本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

      1

      2026.01.31

      2026赚钱平台入口大全
      2026赚钱平台入口大全

      2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

      76

      2026.01.31

      高干文在线阅读网站大全
      高干文在线阅读网站大全

      汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

      73

      2026.01.31

      无需付费的漫画app大全
      无需付费的漫画app大全

      想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

      67

      2026.01.31

      漫画免费在线观看地址大全
      漫画免费在线观看地址大全

      想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

      19

      2026.01.31

      热门下载

      更多
      网站特效
      /
      网站源码
      /
      网站素材
      /
      前端模板

      精品课程

      更多
      相关推荐
      /
      热门推荐
      /
      最新课程
      AngularJS教程
      AngularJS教程

      共24课时 | 3.2万人学习

      第二十三期_前端开发
      第二十三期_前端开发

      共98课时 | 7.6万人学习

      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

      Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号