HTML常用标签
作者：xuhongji发布时间：2020-09-13分类：Html浏览：177评论：0
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 <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中如下方式链接：
② 如果pengbo518.html文件是index.html文件的上级路径，则可以在index.html中如下方式链接：
pengbo518.html">pengbo518博客园
二. 锚点： ▷ 设置锚点通常是放在文档的特定主题或顶部。然后创建锚点链接，通过链接可以快速定位到指定位置。
链接到当前文档中的锚点：链接文本
链接到其他文档中的锚点：
- 上一篇：让一个元素垂直水平居中的三种方法
- 下一篇：CSS之详解:active选择器
相关推荐
欢迎 你 发表评论:
- Html排行
- 标签列表
- 网站分类
- 最近发表