其次,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>
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、字体形状标签 [下标] ▷ 设置文字作为下标显示。代码及效果如下:
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、 图像标签 ▷ 设置字体、字号、颜色等。代码语法及效果如下:
语法:
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博客园
二. 锚点: ▷ 设置锚点通常是放在文档的特定主题或顶部。然后创建锚点链接,通过链接可以快速定位到指定位置。
链接到当前文档中的锚点:链接文本
链接到其他文档中的锚点:
