本文介绍了HTML的基本元素和属性，包括换行`<br>`、注释`<!-- -->`、align属性、水平线`<hr>`、背景色设置、格式化文字、预格式化文本`<pre>`、计算机输出`<code>`、地址`<address>`、删除和插入文字、实体字符、图片`<img>`、链接`<a>`以及框架`<frame>`和`<frameset>`的使用。通过实例展示了各元素的用法和效果。
1 .换行标记“br"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br换行标记</title>
</head>
<body>
<h1>br换行标记</h1>
<h2>在html文件中普通的回车是无法做到换行，只能通过br标记来实现换行</h2>
<p>测试换行标记，<br>
使用br来换行</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br换行标记</title>
</head>
<body>
<h1>br换行标记</h1>
<h2>在html文件中普通的回车是无法做到换行，只能通过br标记来实现换行</h2>
<!--<p>测试换行标记，<br>
使用br来换行</p>-->
</body>
</html>2.HTML中的注释 <!-- -->
解释说明自己编写的html代码是什么含义
- 为了让被人能看懂
- 为了让以后的自己还能看懂
<!-- 需要被注释的内容 -->
特征：不会被执行
可以利用注释不会被执行的特点来调试页面。
例如:
<!--<p>测试换行标记，<br>
使用br来换行</p>-->
用法:一般写在html代码的上面，表示说明下面的代码还含义。
在调试页面的时候可以用来注释掉html代码。
注释是不能包含注释的。
例如<!--<font color="red">-->不会被执行
3.align属性
默认的标题标记<h1>~<h6>/段落标记<p>都是在左对齐，
如果我们需要设置标题标记<h1>~<h6>/段落标记<p>水平对齐方式，需要使用align属性来设置水平对齐方式，这个属性的常用取值【left左\center中\right右】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>align</title>
</head>
<body>
<h1 align="center">测试H1</h1>
<p align="right">测试段落的align</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>align</title>
</head>
<body>
<h1 align="center">测试H1</h1>
<p align="center">测试段落的align</p>
<p align="right">测试段落的align</p>
<p>测试段落的align</p>
</body>
</html>
4.水平线<hr>
属性color设置水平线的颜色【颜色单词/颜色码】
属性width设置水平线的长短【数字px】
属性align设置水平线的水平对齐方式
属性size设置水平线的粗细【整数1--7】
例如:
<hr color="#FF0000" width="500px" align="left" size="7">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线</title>
</head>
<body>
<h1 align="center">测试水平线</h1>
<hr color="#FF0000" width="500px" align="left" size="7">
</body>
</html>5.页面设置背景色
通过给body标记添加bgcolor属性设置页面的背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面设置背景色</title>
</head>
<body bgcolor="red">
<h1 align="center">页面设置背景色</h1>
<hr width="500px" color="black">
<h2 align="center">通过给body标记添加bgcolor属性设置页面的背景色</h1>
</body>
</html>
<html>
<head>
<title>
网名
</title>
<body bgcolor="yellow">
<h1 align="center"><var><font size="7"><ins>林 中 鲁 班 小 屋 装 饰 设 计 有 限 公 司</ins></font></var></h1>
<h2 align="center"><blink><font color="red"><u>盛大开业啦，全场家居材料统统9折</u><font></h2>
<h2 align="center"><marquee width=300>走过路过不要错过</marquee> </h2>
<h2 align="center">走过路过不要错过</h2><dr>
<h2 align="center">千万不要错过</h2>
</body>
</head>
</html>6.格式化的文字
<b>---加粗
<strong>--加粗
<big>--放大
<small>--缩小
<em>--倾斜
<i>--倾斜
<sup>--上标
<sub>--下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>6.格式化文字</title>
</head>
<body>
<h1>6.格式化文字</h1>
格式化文字<br>
<b>格式化文字--b--加粗</b><br>
<strong>格式化文字--strong--加粗比b稍微强一些</strong><br>
<big>格式化文字--big--放大一些</big><br>
<small>格式化文字--small--缩小一些</small><br>
<em>格式化文字--em--倾斜</em><br>
<i>格式化文字--i--倾斜</i><br>
X<sup>2</sup>-2x+1=0<br>
解：X<sub>1</sub>=1,X<sub>2</sub>=-1<br>
<big><i><b>格式化文字</b></i></big><br>
</body>
</html>
7.预格式化文本 “pre”演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pre</title>
</head>
<body>
<pre>
日月阳阴两均天,
玄鸟不辞桃花寒。
</pre>
<code>Computer code</code><br>
Computer code<br>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
<hr>
<font size="7"><del>twenty</del></font><br>
<font size="7"><ins>twelve</ins></font><br>
<font size="7"><u>twelve</u></font><br>
</body>
</html>
8.计算机输出标签
<code>Computer code</code><br>
9.地址（如何用HTML写一个地址）
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
10.删除和插入文字
<font size="7"><del>twenty</del></font><br>---删除线
<font size="7"><ins>twelve</ins></font><br>---下划线
11.实体字符
最常用的字符实体就是一些特殊符号在html中表示字符
常用的字符实体如下：
<p><font size="3"></font> ； 不可拆分的空格</font></p><br />
<p><font color="aqua"><<<小于>>>大于</font></p><br />
<p><font accesskey="1">&&&and符号</font></p><br />
<p>"""引号</p><br />
<p>¢¢¢分</p><br />
<p>£££英镑</p><br />
<P>¥¥¥人民币</P><br />
<p>§§§章节</p><br />
<p>©©©版权</p><br />
<p>®®®注册</p><br />
<p>1×2=2;</p><br />
<p>1÷1,1÷1,1÷1</p>
12.图片元素
属性src设置图片的位置【文件源】，取值是一个地址
属性width设置图片的宽度【数字px】
属性height设置图片的高度【数字px】
属性border设置图片的边框【数字px】
绝对路径---从本地磁盘开始检索/查找图片所形成的路径就是绝对路径
相对路径---本html文件为参考中心，开始查找图片所形成的路径就是相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<img src="F:\20200818\HTML\20200819HTML(2)\imgs\avatar.png">
<h3>src需要设置图片路径</h3>
<h3>绝对路径---从本地磁盘开始检索/查找图片所形成的路径就是绝对路径</h3>
<h3>例如:F:\20200818\HTML\20200819HTML(2)\imgs\avatar.png</h3>
<h3>通常情况下我们是不使用绝对路径来查找资源的，
当我们将html文件和图片资源剪切/赋值到另一个目录/另一个台计算机上的时候，
就可能会根据默认的绝对路径查找不到图片资源</h3>
<img src="imgs\avatar.png" width="100px"
height="100px" border="10px">
<h3>相对路径---本html文件为参考中心，开始查找图片所形成的路径就是相对路径</h3>
<!--<img src="../imgs/avatar.png">-->
<h3>../后退</h3>
<h3>我们应该将html文件与图片资源保存在同一个目录，这样方便使用相对路径查找资源</h3>
<img src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598411496&t=346158b7dd293cfa969e8578d5c7a42f" />
<h3>也可以通过url的这么一个网络地址显示图片</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<img src="F:\20200818\HTML\20200819HTML(2)\imgs\avatar.png">
<h3>src需要设置图片路径</h3>
<h3>绝对路径---从本地磁盘开始检索/查找图片所形成的路径就是绝对路径</h3>
<h3>例如:F:\20200818\HTML\20200819HTML(2)\imgs\avatar.png</h3>
<h3>通常情况下我们是不使用绝对路径来查找资源的，
当我们将html文件和图片资源剪切/赋值到另一个目录/另一个台计算机上的时候，
就可能会根据默认的绝对路径查找不到图片资源</h3>
<img src="imgs\avatar.png" width="100px"
height="100px" border="10px">
<h3>相对路径---本html文件为参考中心，开始查找图片所形成的路径就是相对路径</h3>
<!--<img src="../imgs/avatar.png">-->
<h3>../后退</h3>
<h3>我们应该将html文件与图片资源保存在同一个目录，这样方便使用相对路径查找资源</h3>
<img src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598411496&t=346158b7dd293cfa969e8578d5c7a42f" />
<h3>也可以通过url的这么一个网络地址显示图片</h3>
</body>
</html>
13"<a>"链接
属性href用来设置具体链接地址
链接本地资源【绝对路径/相对路径】
链接网络资源【url地址】
属性target设置链接的打开方式【 默认【不写】本窗口/ _blank【打开新窗口】】
链接到本页面的某个位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接</title>
</head>
<body>
<a name="ml"></a>
<a href="F:\20200818\HTML\20200819HTML(2)\hr.html">打开hr.html文件</a>
<h3>可以使用绝对路径链接本地文件</h3>
<a href="img.html">打开img..html文件</a>
<h3>可以使用相对路径链接本地文件</h3>
<a href="http://www.baidu.com">打开百度</a>
<h3>可以使用网络地址</h3>
<a href="bgcolor.html"><img src="imgs/avatar2.png"/></a><br>
<a href="http://www.baidu.com" target="_blank">打开百度</a><br>
<h3>链接到本页面的某个位置</h3>
<h2>第一章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨
</p>
<a href="#ml">回到目录</a>
</body>
</html>
属性href用来设置具体链接地址
链接本地资源【绝对路径/相对路径】
链接网络资源【url地址】
属性target设置链接的打开方式【 默认【不写】本窗口/ _blank【打开新窗口】】
链接到本页面的某个位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接</title>
</head>
<body>
<a name="ml"></a>
<a href="F:\20200818\HTML\20200819HTML(2)\hr.html">打开hr.html文件</a>
<h3>可以使用绝对路径链接本地文件</h3>
<a href="img.html">打开img..html文件</a>
<h3>可以使用相对路径链接本地文件</h3>
<a href="http://www.baidu.com">打开百度</a>
<h3>可以使用网络地址</h3>
<a href="bgcolor.html"><img src="imgs/avatar2.png"/></a><br>
<a href="http://www.baidu.com" target="_blank">打开百度</a><br>
<h3>链接到本页面的某个位置</h3>
<h2>第一章 小二上酒</h2>
<p>北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨
</p>
<a href="#ml">回到目录</a>
</body>
</html>
14. 框架[frame] 框架集【frameset】
框架的使用是没有body元素
rows---框架集【frameset】属性--拆分框架集为上下结构
cols---框架集【frameset】属性--拆分框架集为左右结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<frameset rows="20%,80%">
<frame src="bgcolor.html"/>
<frameset cols="20%,80%">
<frame src="a.html" />
<frame src="hr.html" />
</frameset>
</frameset>
</html>
14.框架[frame] 框架集【frameset】
框架的使用是没有body元素
rows---框架集【frameset】属性--拆分框架集为上下结构
cols---框架集【frameset】属性--拆分框架集为左右结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<frameset rows="20%,80%">
<frame src="bgcolor.html"/>
<frameset cols="20%,80%">
<frame src="a.html" />
<frame src="hr.html" />
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<frameset rows="20%,80%">
<frame src="bgcolor.html"/>
<frameset cols="20%,80%">
<frame src="a.html" />
<frame src="hr.html" />
</frameset>
</frameset>
</html>
扫一扫
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
