04 实体超链接href 图像image 表格table

与 的区别：

：段落表示将内容当做是一个整体并换行，下面空一行再开头。

表示此处之后换行之后直接在下一行开头。

通常文章中段落区分明显上段文字与下段文字有一定间隔我们就可以对上下段文字都使用p标签，我们使用p段落标签，在一段文字开始前使用，在这段文字结束加个标签。段落p标签将让上段与下段文字有一定距离，大概是两倍line-height行高距离。

 

通常同等初始化下网页里，要实现上下文字间隔相同，2个br换行标签相当于使用p段落标签。

<html>
<body>
第一行文字<br/><br/>
第二行文字<br/>
第三行文字
第四行文字
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
</body>
</html>

运行结果：

Html符号实体介绍：

在网页上显示一些特殊的符号，我们需要使用html的符号实体，（也称字符实体）

为在网页上显示版权符号，我们就需要使用html的符号实体©,才能在网页上正确显示。

；分号要带上

<html>
<head>
<title>字符实体案例</title>
</head>
<body>
<font size=7> &copy; &pound; &reg; </font>
</body>
</html>

运行结果：

Html常用标记/元素-超链接

Html超链接

使用超链接可以让网页链接到另外一个页面

通过使用 href 属性 - 创建指向另一个文档的链接

使用 Target 属性，你可以定义被链接的文档在何处显示。

①_self 原页面替换(默认属性)

②_blank 在一个新页面打开

<html>
<head>
<title>超链接案例</title>
</head>
<body>
<!--target常见的两个属性值_blank(开新的页面)
    _self替换当前页面（默认是这个属性）-->
<a href="a.html" target="_blank">老鼠爱大米</a><br/>
<a href="http://www.sohu.com" target="_self" >搜狐主页</a><br/>
<a href="http://www.ustc.edu.cn" target="_self">中国科学技术大学</a><br/>
<a href ="mailto:zhuwenchao90@126.com">给管理员写信</a><!--outlook 先配置的情况下-->
</body>
</html>

a.html

<html>
<body>
老鼠爱大米歌词
</body>
</html>

Target属性

<a href=”url地址”></a>　　href是可以链接到外部文件的

<a href = “mailto:电子邮箱地址”></a>　　点击超链接，弹出一个写电子邮件的窗口

Html 的图片元素（标记）

html语法不区分大小写

指定一个宽度width后，html可以自动按照比例调整高度,不需要指定high

<img src=‘#’> #指的是图片的地址

可以盗连图片，也可以进行防盗链设置

src:可以是外部网站的url

<html>
<head>
<title>图片实例</title>
</head>
<body>
<img src='apple.jpg' width=200px border=1px />
<img src='apple.jpg' width=200px border=1px /><br/>
<!--图片的资源是从百度那里拿来的-->
<img src="https://www.baidu.com/img/bdlogo.png" width=200px border=1px />
<img src="https://www.baidu.com/img/bdlogo.png" width=200px border=1px /><br/>
</body>
</html>

演示效果图：

Html表格案例

表格的主要用途：是显示数据和图片，并且可以进行布局

表格的元素名称是table

<tr></tr>表示行

<td></td>表示列

cellspacing 表格空隙大小：指两个列，行间的距离【两个格子间隔多大】

cellpadding 表示填充大小：各行各列中的内容周边被填充了，这样在一定程度上把格子撑大了。

<html>
<head>
<title>表格案例</title>
</head>
<body>
<!--boder 设置表格的边框，align="center"使表格居中，width= 500px表格的宽度,bgcolor背景的颜色, cellspacing填充格子之间大小，cellpadding填充的是格子的大小-->
<table border=5px  align='center' cellspacing=5px cellpadding=5px bgcolor='yellow' width=500px >
<tr align='center'><td>11</td><td>12</td><td>13</td></tr>
<tr align='center'><td>21</td><td>22</td><td>23</td></tr>
<tr align='center'><td>31</td><td>32</td><td>33</td></tr>
</table>
<body>
</html>

运行效果：

04 实体 超链接href 图像image 表格table

04 实体超链接href 图像image 表格table