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>
6194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
