10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

一排版标签（div,span）

1块级标签

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块级标签</title>
 6 </head>
 7 <body>
 8 <div>
 9     北京
10 </div>
11 <div>
12     上海
13 </div>
14 <span>
15     北京
16 </span>
17 <span>上海</span>
18 </body>
19 </html>

2 段落标签<p>

属性：

align='属性值'：对齐方式。属性值包括：left、center、right

例子：

<p>这是一个段落</p>
<p align="center">这是另一个段落</p>

p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

例子：

1 <p>秦岭大山里的墓葬群，西北戈壁中的无人区，浩瀚深海下的失落遗迹，雪域高原上的死亡禁区……
2 或许有一天，当你因为贪婪而拿了不该拿的东西时，你就会发现睡觉时有东西站你旁边，告诉你，天黑了，一起来玩玩吧<br>
3     <!--a标签是超链接-->
4    <a href="http://www.baidu.com">百度一下</a>
5 
6 </p>

二字体标签 h1~h6、<sup>、<sub>和特殊字符

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--字体标签包含：h1~h6、<sup>、<sub>-->
 5     <meta charset="UTF-8">
 6     <title>字体标签</title>
 7 </head>
 8 <body>
 9 <h1>北京</h1>
10 <h2>北京</h2>
11 <h3>北京</h3>
12 <h4>北京</h4>
13 <h5>北京</h5>
14 <h6>北京</h6>
15 <!--上标-->
16 2<sup>8</sup>
17 <!--下标-->
18 2<sub>8</sub>
19 <!--空格-->
20 &nbsp<br>
21 <!--小于号-->
22 &lt<br>
23 <!--大于号-->
24 &gt<br>
25 <!--符合&-->
26 &amp<br>
27 <!--双引号-->
28 &quot<br>
29 <!--单引号-->
30 &apos;<br>
31 <!--版权-->
32 &copy<br>
33 <!--商标-->
34 &trade;
35 </body>
36 </html>

三超链接<a>

例子：

<a href="#">跳转到顶部</a>

<a href="http://www.baidu.com">百度一下</a>

特殊的几个链接

<a href="javascript:alert(1)">内容</a>
  <a href="javascript:;">内容</a>

javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</2
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<ahref="javascript:alert()">内容</a>

四图片标签<img>

1，img属性：

width：宽度
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

例子

<img src="./timg.jpg" alt="紫霞仙子" title="美女" width="400">

注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right

如果点击图片想跳转到一个链接，应该是：

<a href="http://www.baidu.com">
<img src="./test.jpg" alt="紫霞仙子" title="美女" width="400">
</a>

五标签总结

1 文本级标签和排版标签

文本级的标签：p、a、span、i、em 只能放文本、图片、表单元素
排版标签：div、ul、ol、li、

2 行内标签和块级便签

行内标签：文本级标签中除了p，其它标签都是行内标签（行内块）
块级标签：所有的排版标签都是块级标签，再加上p

3 行内标签和块级标签的特点

行内标签：display：inline;
（1）在一行内显示
（2）不能设置宽高
（3）它的宽和高是内容的宽高
块级标签：display:block;
（1）独占一行
（2）可以设置宽高
（3）它的宽是父盒子的宽度100%；
行内块标签：img input display:inline-block;
（1）在一行内显示
（2）可以设置宽高

通过display属性对标签进行转化 none|inline-block|block

posted @ 2018-06-26 22:16 huningfei 阅读(288) 评论(0) 编辑收藏举报

刷新页面返回顶部

滴水可以穿石

一个爱好历史的运维

10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

公告