2021.4.14 html学习第二天

HTML 段落与文字

html 的段落标记--<p>段落的内容</p>
特点:
1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。
2.段落与段落之间会有空行通常的情况下 p 标记，后有一个设置水平对齐方式的属性 align ，它的取值 left 左/center 中/right 右

1. 自成一行，会占满整行，在它的后面出现的内容将会在下一行显示
**2.**段落与段落之间会有空行
通常的情况下 p 标记，后有一个设置水平对齐方式的属性 align，它的取值 left/center/right

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>段落标签</title></head><body><h2 align="center">平凡的世界</h2><hr align="left" color="red" width="600px" size="2" /><h4 align="left">1984出版</h4> <br /><p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地， 就已经消失得无踪无影了。</p><p>黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。</p><p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴，不复挺者，輮使之然也。</p><p>故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。 故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。</p><p>干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸</p></body>
</html>

html h1~h6
1.h1~h6 显示出来的效果是字体依次变小。
H1 最大，h6 最小。
2.不同的浏览器显示效果有所差异。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标题</title>
</head>
<body><h1>陈仲文自号藏一，盖取坡诗中“万人如海一身藏”语。为度夷则商犯无射宫腔制此赠之。</h1><h2>蝶梦迷清晓，万里无家，岁晚貂裘敝。</h2><h3>载取琴书，长安闲看桃李。烂绣锦、人海花场，任客燕、飘零谁计。春风里。香泥九陌，文梁孤垒。</h3><h4>微吟怕有诗声翳。</h4><h5>镜慵看、但小楼独倚。</h5><h6>金屋千娇，从他鸳暖秋被。蕙帐移、烟雨孤山，待对影、落梅清泚。终不似。江上翠微流水。</h6>
</body>
</html>

html 换行标记
1.在 html 中键盘的回车键不能是内容回车换行。
2.br[单标签]

html 中的分隔线标记

1.网页中的一条分隔线–<hr>
2.常用的属性 color 属性–分隔线颜色【颜色单词/颜色码】
size 属性—分隔线粗细【1~7】
width 属性—分隔线长短【数字 px】
align—水平对齐属性[left-左对齐 center-居中对齐 right-右对齐]

html 中的居中标记
1.center–html 中的居中标记
2.水平居中显示的 html 标记\文字\图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>居中标记</title></head><body><center><font size="5px" face="方正粗黑宋简体">关关和鸣的雎鸠，栖息在河中的小洲。贤良美好的女子，是君子好的配偶。</font> <br /><font size="4px" color="aquamarine" face="方正粗黑宋简体">参差不齐的荇菜，在船的左右两边摘取。贤良美好的女子，弹琴鼓瑟来亲近她。</font></center></body>
</html>

html 中设置字体的标记
1.font–html 中设置字体的标记
2.常用属性 color 属性—设置字体颜色【颜色单词/颜色码】
size 属性----设置字体大小最大值 7
face 属性—设置字体风格【微软雅黑】

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>设置字体</title></head><body><p align="center"><font size="3px" face="方正粗黑宋简体">关关雎鸠，在河之洲。窈窕淑女，君子好逑。<br />求之不得，寤寐思服。悠哉悠哉，辗转反侧。<br />参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</font><hr /><p align="center">参差荇菜，左右流之。窈窕淑女，寤寐求之。<p><font size="5px" color="blue">参差荇菜，左右流之。窈窕淑女，寤寐求之。</font></p><font size="5px" color="#OOCDOO" face="方正粗黑宋简体">参差荇菜，左右采之。窈窕淑女，琴瑟友之。</font></body>
</html>

html文本格式化标记

字符实体

html 中的图片标记
img–图片标记
常见的属性

src 属性–设置图片路径
绝对路径--是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如：“D/wbe/img/logo.gif”
缺点:
1.如果图片保存目录太深，图片的操作路径就会很长.
2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。
相对路径-- 已引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相当于html页面的位置。
1.图片与当前网页在同一个目录下【src=”图片名称”】
2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
3.图片保存在当前网页所在目录的父文件夹中[…\上一级] 【src=”…\子文件夹的名称\图片名称”】
网络地址路径–【http://baidu.com】
width 属性–设置图片的宽度【数字 px】
height 属性–设置图片的高度【数字 px】
总结:
1.一般情况下我们不使用绝对路径 2.如果需要的图片资源本地磁盘存在，使用相对路径

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图像标签</title></head><body><h2>绝对路径--从操作系统的制定盘中的目录开始查找图片的路径</h2><img src="D:\HBuilderX\学习HTML\imgs\HTML.JPG" /><h2>1.如果图片保存目录太深，图片的操作路径就会很长</h2> <h2>2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片 无法正常显示。</h2><h2>相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。<img src="imgs\avatar.png"/></h2><h2>1.图片与当前网页在同一个目录下【src=”图片名称”】</h2> <img src="avatar5.png"/> <h2>2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名 称”】</h2><img src="imgs\avatar.png"/> <h2>3.图片保存在当前网页所在目录的父文件夹中[..\上一层]【src=”..\子文件夹的 名称\图片名称”】<img src="..\testimgs\avatar04.png"/> </h2>3.使用网络地址【http://......】<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1051452078,2851059078 &fm=26&gp=0.jpg" width="200px" height="200px"/> <h2>width 属性--设置图片的宽度【数字 px】</h2> <h2>height 属性--设置图片的高度【数字 px】</h2> </body>
</html>

html背景
bgcolor–设置背景颜色 例： <body bgcolor="red">
background–设置背景图片
bgcolor/background 属性出现在 body 开始标记中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页背景</title></head><body background="imgs/timg.jpg"><!-- <body bgcolor="red"> --><h2>bgcolo 设置背景颜色</h2><h2>background 设置背景图片</h2><h2>bgcolor/background 属性出现在body 开始标记中</h2></body>
</html>

html 中的超链接【链接\锚点】
a–html 中的超链接【打开其他的文件】
常用属性
1.href–设置连接地址【绝对路径/相对路径/网络地址】
2.target–属性设置被链接的资源打开方式【_blank[新窗口] _self[当前窗口]】
3.name–设置超链接的名称【本网页内部的链接】
超链接的链接方式
1. 连接本地资源

  <a href= "test2 .html"  target="_blank "  / >

连接网络资源

  < a href=  "http : / /news.baidu.com/ "  > 打开百度

本网页内部的链接

       目标：  <   a     nam e = "mulu"   >拉关系：< a      href =  "#mulu"     >

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body><h4>外部链接： </h4><a href="http://www.baidu.com" target="_blank"> 百度一下 </a><h4>空连接: </h4><a href="#">空连接 </a><h4>图片链接：</h4> <br/><a href="http://www.baidu.com" target="_blank"> <img src="imgs/美眉.jpg" /> </a><h4>内部链接</h4><a name="mulu"> <h2>目录</h2> </a><h1>平凡的世界 第一部 第 1 章</h1> <p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地， 就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。 在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。 因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜 子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的 街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。 </p> <h1>平凡的世界 第一部 第 2 章</h1><p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地， 就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。 在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。 因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜 子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的 街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有 气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。 </p> <h1>平凡的世界 第一部 第 3 章</h1> <p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地， 就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。 在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。 因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜 子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的 街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜有 气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。<h1>平凡的世界 第一部 第 4 章</h1> <p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。 在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。 因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜 子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的 街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有 气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。 </p> <h1>平凡的世界 第一部 第 5 章</h1> <p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的 雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地， 就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天 还远远地没有到来。 在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。 因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜 子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的 街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有 气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。<p align="right"> <a href="#mulu">回到目录</a> </p>
</body>
</html>

html 中的列表

1.有序列表
ol–有序列表
li–有序列表中的每一项
type 属性–设置有序列表的标号【字母 A/a 数字 1 罗马数字 i/I】
start 属性–设置有序列表标号的起始值【数字】
2.无序列表
ul–无序列表
li–无序列表中的每一项
type 属性–设置无序列表的标号【disc[小圆点] circle[小圆圈] square[小方块]】
3.自定义列表
dl–自定义列表
dt–自定义列表主分类
dd–自定义列表中主分类下的次级分类

 <meta charset="UTF-8"><title>列表</title>
</head>
<body><h2>1.无序列表</h2><h2> 你喜欢的水果</h2><ul type="square"><li>香蕉</li><li>苹果</li><li>橘子</li><li>大白菜</li></ul ><h2>2.有序列表</h2>奥运金牌榜<ol type="A" start="3"><li>中国</li><li>英国</li><li>俄罗斯</li><li>美国</li></ol><h2>3.自定义列表</h2><dl><dt>陕西</dt><dd>西安</dd><dd>宝鸡</dd><dd>咸阳</dd><dd>渭南</dd><dt>本地磁盘（C:）</dt><dd>Drivers</dd><dd>Windonws</dd><dd>用户</dd></dl>
</body>
</html>