HTML常用标签二
目 录
1.背景属性bgcolor和background
2.序列标签 ul/ol/dt
(1)无序列表< ul>
(2)有序列表
(3)自定义列表 dl/dd
3.超链接
(1)连接到其他的文档
(2)网页的内部链接
(3)网页的外部链接
(4)图片的锚点链接
1.背景属性bgcolor和background
这两个属性适用于body标签，div盒子等等，只有在一定范围内就可以生效！
| 属性 | 属性值 | 描述 |
|---|---|---|
| bgcolor | 颜色单词或16进制颜色表（例：red，FF0000） | 设置某一范围的背景颜色 |
| background | 图片路径或图片名 | 设置某一范围的背景图片 |
<body bgcolor="blue">
这个是蓝色背景！！！
</body>
<body background="img/pkq.png">
这个是背景图片！！！
</body>
补充：图片过小时，为保证图片不失真，默认这样平铺效果，后期会学到相关的知识可以去修改这个默认效果！
2.序列标签 ul/ol/dt
(1)无序列表< ul>
其中<ul>就是无序列表，每增加一列内容，就需要加一个<li>，无序列表的属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | disk（默认） | 表示前面的图标为实心点 |
| square | 表示前面的图标为小正方形 | |
| circle | 表示前面的图标为空心点 |
<ul>
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ul>
<ul type="square">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ul>
<ul type="circle">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ul>
(2)有序列表 <ol>
其中<ol>就是有序列表，每增加一列内容，就需要加一个<li>，无序列表的属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | 1（默认） | 表示前面的标为数字 |
| A | 表示前面的标为大写字母 | |
| a | 表示前面的标为小写字母 | |
| I | 表示前面的标为大写罗马 | |
| i | 表示前面的标为小写罗马 | |
| start | 数字 | 指定序列的开始数目 |
<ol>
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
<ol type="1" start="5">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
<ol type="A">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
<ol type="a">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
<ol type="I">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
<ol type="i">
<li>姓名：jock
<li>生日：1989/4/9
<li>星座：天蝎座
</ol>
(3)自定义列表 dl/dd
<dt>咖啡</dt>
<dd>黑色热饮</dd>
<dt>牛奶</dt>
<dd>白色冷饮</dd>
3.超链接
(1)连接到其他的文档
点击超链接后会跳转到新的页面。需要注意的就是文件的路径，这里我用的是相对路径。绝对路径：是指从根目录到文件的完整路径。 相对路径：是指相对于当前文件的文件位置。
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | xxx.html的相对路径 | 跳转到这个html页面 |
| target | _blank | 在新的窗口打开页面 |
| _self | 在自身窗口打开 |
首页代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<h1>这里是首页</h1>
<a href="myhtml.html" target="_blank">新开窗口打开</a>
<a href="myhtml.html" target="_self">当前窗口打开</a>
</body>
</html>跳转后的页面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myhtml</title>
</head>
<body bgcolor="green">
<h1>欢迎来到myhtml页面</h1>
<a href="index.html" target="_blank">回到首页</a>
</body>
</html>
新窗口打开:
当前窗口打开:
(2)网页的内部链接
点击超链接后会跳转本页面指定的位置。
<a href="#name">点击这里就会跳转</a>
<a name="name"> <!--这里就是会跳转的位置，将这个标放在哪里就会跳到哪里-->
<a name="top">这里是顶部</a>
<h2>章节1</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节2</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节3</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节4</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节5</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节6</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节7</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节8</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节9</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节10</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节11</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节12</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节13</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节14</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节15</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节16</h2>
<p>该章节是关于。。。。。。。。。。</p>
<h2>章节17</h2>
<p>该章节是关于。。。。。。。。。。</p>
<a href="#top">回到顶部</a>
(3)网页的外部链接
点击超链接后会跳转到指定的别的网站。例如百度，网易云等网站。href后面跟网站地址。
<a href="http://www.baidu.com">链接的百度</a>
(4)图片的锚点链接
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
<h5>点击下面这个图片跳转到百度</h5>
<a href="http://www.baidu.com" target="_blank"><img src="img/pkq.png"></a>效果展示：
补充：后期可以通过CSS去掉超链接的下划线哟！
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
