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 段落标签

属性：

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

例子：

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

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

例子：

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

二 字体标签 h1~h6、、和特殊字符

例子：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     
 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>8sup>
17 
18 2<sub>8sub>
19 
20  <br>
21 
22 <<br>
23 
24 ><br>
25 
26 &<br>
27 
28 "<br>
29 
30 '<br>
31 
32 ©<br>
33 
34 ™
35 body>
36 html>

三 超链接

例子：

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

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

特殊的几个链接

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

四 图片标签

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

htmlcss

相关

标签