HTML_3
一、html中的图片标记
<img />---htm中显示图片
src属性--设置图片路径
图片路径的设置有三种方式
1.绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。
绝对路径缺点:
1.如果图片保存目录太深，图片的操作路径就会很长。
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就会变化。图片无法正常显示。
2.相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。
a. 图片与当前网页在同一个目录下【src=”图片名称”】
b.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
c. 图片保存在当前网页所在目录的父文件夹中[..\上一层]【src=”..\子文件夹的名称\图片名称”】
3.网络地址路径---http:\\xxxxxxxxxxxx
width属性--设置图片的宽度【数字px】
height属性--设置图片的高度【数字px】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标记</title>
</head>
<body>
<h1>img--表示图片</h1>
<h2>src属性--设置图片路径</h2>
<h3>图片路径的设置有2中方式</h3>
<h3>绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。</h3>
<h3>缺点:1.如果图片保存目录太深，图片的操作路径就会很长。</h3>
<h3>2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示</h3>
<img src="F:\20201103\HTML\20201105HTML(3)\code\imgs\avatar5.png"/>
<h3>相对路径--以当前网页为参照、为中心，对外开始查找图片的路径</h3>
<h3>图片与当前网页在同一个目录下</h3>
<img src="avatar04.png"/>
<h3>图片保存在当前网页所在目录的子文件夹中</h3>
<img src="imgs\avatar5.png"/>
<h3>图片保存在当前网页所在目录的父文件夹中[..\上一层]</h3>
<img src="../imgs/avatar2.png" />
<img src="..\imgs\avatar2.png" />
<h3>网络地址路径</h3>
<h3>width属性--设置图片的宽度【数字px】</h3>
<h3>height属性--设置图片的高度【数字px】</h3>
<center>
<img src="https://timgsa.baidu.com/timg?
image&quality=80&size=b9999_10000&sec=
1604550146647&di=851b9d8b62c3f01234c37
b663cf8c638&imgtype=0&src=http%3A%2F%
2Fb-ssl.duitang.com%2Fuploads%2Fitem%
2F201409%2F11%2F20140911211243_3rT4u.jpeg"
width="200px" height="200px"
/>
</center>
</body>
</html>
二、设置网页的背景
我们这里的设置背景指的是设置整个网页的背景，而不是设置html中某一个元素\标记的背景。
- 设置背景颜色
https://m.wang1314.com/doc/webapp/topic/21084865.html
在body元素中添加bgcolor属性来设置背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页背景颜色</title>
</head>
<body bgcolor="#000">
</body>
</html>
三、设置背景图片
在body元素中添加background属性来设置背景图片【图片路径】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页的背景图片</title>
</head>
<body background="imgs\preview (3).jpg">
</body>
</html>
四、html中的超链接【链接\锚点】
<a>链接显示描述</a>
1.href属性设置被连接的文件路径【绝对/相对/网络地址】
如果没有被连接的文件，那么请使用“#”,表示空连接
2.target属性设置被链接的资源打开方式【默认在同一个窗口中打开连接资源】
_blank----在新窗口中显示资源
_self-------在当前窗口中显示资源
3.name属性----设置链接名称[实现本网页内部的链接]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a name="top"></a>
<h1>超链接</h1>
<h2>a--表示网页的超链接</h2>
<h3>href--设置链接文件路径【绝对/相对/网络】</h3>
<h3>如果没有被连接的文件，那么请使用“#”,表示空连接</h3>
<a href="个人简历练习.html">链接打开 个人简历练习.html</a><br>
<a href="#">没有被连接的文件</a><br>
<h3>target属性设置被链接的资源打开方式【默认在同一个窗口中打开连接资源】</h3>
<h3>_blank----在新窗口中显示资源</h3>
<h3>_self-------在当前窗口中显示资源</h3>
<a href="align.html" target="_self">在当前窗口中打开被链接的资源</a><br>
<a href="HTML1.html" target="_blank">在新窗口中打开被链接的资源</a><br>
<h3>有时超链接的访问资源是一个网络地址</h3>
<a href="http://www.baidu.com">打开百度</a><br>
<h2>第一章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。
但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<h2>第二章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。
但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<h2>第三章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。
但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<h2>第四章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。
但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<h2>第五章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。
但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<p align="right">
<a href="#top" >回到顶部
<img src="imgs/preview%20(2).jpg" width="50px" height="50px"/>
</a>
</p>
</body>
</html>
五、html中的列表
Html中列表有3种形式
1.有序列表
<ol></ol>---表示一个有序列表
<li></li>-----表示有序列表中的每一项【出现在ol标记中】
type属性--设置有序列表序号的显示形式【a,A,1,i,I】
start属性--设置有序列表序号的开始数字【数字】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的列表</title>
</head>
<body>
<h1>有序列表</h1>
<h2>ol--标记表示有序列表</h2>
<h2>li--标记有序列表中的每一项【出现在ol标记中】</h2>
<h2>有序列表属性</h2>
<h2>type属性--设置有序列表序号的显示形式【a,A,1,i,I】</h2>
<h2>start属性--设置有序列表序号的开始数字【数字】</h2>
<ol type="1" start="5">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安市</li>
<li>出生日期:2020-11-05</li>
</ol>
</body>
</html>
2.无序列表
<ul></ul>---表示一个无序列表
<li></li>-----表示无序列表中的每一项【出现在ul标记中】
type属性--设置有序列表序号的显示形式[disc默认 circle square]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的列表</title>
</head>
<body>
<h1>无序列表</h1>
<h2>ul--标记表示无序列表</h2>
<h2>li--标记无序列表中的每一项【出现在ul标记中】</h2>
<h2>无序列表属性</h2>
<h2>type属性--设置有序列表序号的显示形式[disc默认 circle square]</h2>
<ul type="square">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安市</li>
<li>出生日期:2020-11-05</li>
</ul>
<p>以后再学习CSS的时候关于列表有一个list-style这个CSS属性，可以将列表前面的表示符号换成图标</p>
</body>
</html>
3.自定义列表
<dl></dl>--表示自定义列表
<dt></dt>---表示自定义列表中的主分类
<dd></dd>---表示自定义列表中主分类下的次级分类。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的列表</title>
</head>
<body>
<h1>自定义列表</h1>
<h2>dl--标记表示自定义列表</h2>
<h2>dt--表示自定义列表中的主分类</h2>
<h2>dd--表示自定义列表中中主分类下的次级分类</h2>
<dl>
<dt>c:\</dt>
<dd>Drivers文件夹</dd>
<dd>Program Files文件夹</dd>
<dd>Program Files (x86)文件夹</dd>
<dd>Windows文件夹</dd>
<dt>d:\</dt>
<dd>360Downloads文件夹</dd>
<dd>360safe文件夹</dd>
<dd>360sd文件夹</dd>
<dd>BaiduNetdisk文件夹</dd>
</dl>
</body>
</html>
4.列表的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的列表</title>
</head>
<body>
<h3>有时我们在使用的是偶可以将这些不同的列表嵌套使用</h3>
<ol type="1" start="5">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安市</li>
<li>出生日期:2020-11-05</li>
<li>
<ul type="square">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安市</li>
<li>出生日期:2020-11-05</li>
<li>
<dl>
<dt>c:\</dt>
<dd>Drivers文件夹</dd>
<dd>Program Files文件夹</dd>
<dd>Program Files (x86)文件夹</dd>
<dd>Windows文件夹</dd>
<dt>d:\</dt>
<dd>360Downloads文件夹</dd>
<dd>360safe文件夹</dd>
<dd>360sd文件夹</dd>
</dl>
</li>
</ul>
</li>
</ol>
</body>
</html>
六、html中的表格
<table></table>---表示一个表格
<tr></tr>------表示表格中的一行
<td></td>----表示表格中一行里面列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格基础设置</title>
</head>
<body>
<h2>table--表格</h2>
<h2>tr--一行</h2>
<h2>td--一行中的列</h2>
<h3>border--设置表格边框[数字px]</h3>
<h3>width--设置表格宽度[数字px]</h3>
<h3>height--设置表格高度[数字px]</h3>
<h3>cellspacing--设置表格单元格之间的间距[数字px]</h3>
<h3>cellpadding--设置表格单元格与单元格中内容之间的距离[数字px]</h3>
<h3>align--如果出现在table中设置表格的水平对齐方式</h3>
<h3>align--如果出现在tr中设置表格当前行的水平对齐方式</h3>
<h3>align--如果出现在td中设置表格当前行的水平对齐方式</h3>
<h3>valign--如果出现在tr中设置表格当前行的垂直对齐方式</h3>
<h3>valign--如果出现在td中设置表格当前行的垂直对齐方式</h3>
<h3>bgcolor--如果出现在table中设置表格的背景颜色</h3>
<h3>background--如果出现在table中设置表格的背景图片</h3>
<table border="10px" width="500px" height="300px" cellspacing="0px"
cellpadding="10px" align="center" bgcolor="chartreuse" >
<tr align="left" valign="top">
<td>用户编号</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户地址</td>
<td>注册时间</td>
</tr>
<tr align="center" valign="middle">
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr align="right" valign="bottom">
<td>1002</td>
<td>lisi</td>
<td>24</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr>
<td>1003</td>
<td>wangwu</td>
<td>25</td>
<td>西安</td>
<td align="right" valign="top">2020-11-05</td>
</tr>
</table>
</body>
</html>
1.关于表格的跨行和跨列
跨列【左右合并单元格】---给td上设置colspan属性，需要跨几个列那么就写数字几。
跨行【上下合并单元格】---给td上设置rowspan属性，需要跨几个行那么就写数字几。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置表格的跨行和跨列</title>
</head>
<body>
<h2>跨列【左右合并单元格】---给td上设置colspan属性，需要跨几个列那么就写数字几。</h2>
<table border="1px" width="500px" height="200px" >
<tr align="center">
<td colspan="5">用户信息表</td>
</tr>
<tr>
<td>用户编号</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户地址</td>
<td>注册时间</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>24</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr>
<td>1003</td>
<td>wangwu</td>
<td>25</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
</table>
<h2>跨行【上下合并单元格】---给td上设置rowspan属性，需要跨几个行那么就写数字几。</h2>
<table border="1px" width="500px" height="200px" >
<tr>
<td rowspan="4">用<br>户<br>信<br>息<br>表</td>
<td>用户编号</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户地址</td>
<td>注册时间</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>24</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
<tr>
<td>1003</td>
<td>wangwu</td>
<td>25</td>
<td>西安</td>
<td>2020-11-05</td>
</tr>
</table>
</body>
</html>
表格应用练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历练习</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<table align="center" border="1" cellpadding="10px" cellspacing="0px" width="800px" height="300px">
<tr align="center" valign="middle">
<td >
姓 名
</td>
<td>
</td>
<td>
性 别
</td>
<td>
</td>
<td>
出生年月
</td>
<td>
</td>
<td rowspan="6">
</td>
</tr>
<tr align="center" valign="middle">
<td>
籍 贯
</td>
<td>
</td>
<td>
民 族
</td>
<td>
</td>
<td>
政治面貌
</td>
<td>
</td>
</tr>
<tr align="center" valign="middle">
<td>
身体状况
</td>
<td>
</td>
<td>
培养方式
</td>
<td>
</td>
<td>
学 位
</td>
<td>
</td>
</tr>
<tr align="center" valign="middle">
<td>
学 历
</td>
<td>
</td>
<td colspan="2">
毕业学校
</td>
<td colspan="2">
</td>
</tr>
<tr align="center" valign="middle">
<td>
所在院系
</td>
<td colspan="5">
</td>
</tr>
<tr align="center" valign="middle">
<td>
技 能
</td>
<td colspan="5">
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="3">
<br>
<br>
专业能力
<br>
<br>
</td>
<td colspan="6">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr align="center" valign="middle">
<td rowspan="3">
<br>
<br>
实践
<br>
<br>
</td>
<td colspan="6">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr align="center" valign="middle">
<td rowspan="3">
<br>
<br>
专业课程
<br>
<br>
</td>
<td colspan="6">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr align="center" valign="middle">
<td rowspan="3">
<br>
<br>
求职意向
<br>
<br>
</td>
<td colspan="6">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr align="center" valign="middle">
<td rowspan="3">
<br>
<br>
联系方式
<br>
<br>
</td>
<td colspan="6">
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
