一 排版标签（div,span）

1块级标签

<!--div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。-->

<!--div标签的属性：-->

<!--align="属性值"：设置块儿的位置。属性值可选择：left、right、 center-->
<!--<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。-->
<!--div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。-->

<!--span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。-->

<!--就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div-->

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>块级标签</title>

 </head>

 <body>

 <div>

     北京

 </div>

 <div>

     上海

 </div>

 <span>

     北京

 </span>

 <span>上海</span>

 </body>

 </html>

2 段落标签<p>

属性：

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

例子：

<p>这是一个段落</p>

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

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

例子：

 <p>秦岭大山里的墓葬群，西北戈壁中的无人区，浩瀚深海下的失落遗迹，雪域高原上的死亡禁区……

 或许有一天，当你因为贪婪而拿了不该拿的东西时，你就会发现睡觉时有东西站你旁边，告诉你，天黑了，一起来玩玩吧<br>

     <!--a标签是超链接-->

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

 </p>

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

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <!--字体标签包含：h1~h6、<sup>、<sub>-->

     <meta charset="UTF-8">

     <title>字体标签</title>

 </head>

 <body>

 <h1>北京</h1>

 <h2>北京</h2>

 <h3>北京</h3>

 <h4>北京</h4>

 <h5>北京</h5>

 <h6>北京</h6>

 <!--上标-->

 2<sup>8</sup>

 <!--下标-->

 2<sub>8</sub>

 <!--空格-->

 &nbsp<br>

 <!--小于号-->

 &lt<br>

 <!--大于号-->

 &gt<br>

 <!--符合&-->

 &amp<br>

 <!--双引号-->

 &quot<br>

 <!--单引号-->

 &apos;<br>

 <!--版权-->

 &copy<br>

 <!--商标-->

 &trade;

 </body>

 </html>

三 超链接<a>

例子：

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

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

特殊的几个链接

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

  <a href="javascript:;">内容</a>
  1. javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</2
  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

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

  1. html - body标签中相关标签

    body标签中相关标签   今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  2. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  3. python 全栈开发，Day45（html介绍和head标签，body标签中相关标签）

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  4. 前端 -----02 body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  5. 02-body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  6. 03-body标签中相关标签-2

    主要内容: 列表标签 <ul>.<ol>.<dl>表格标签 <table>表单标签 <form> 一.列表标签 列表标签分为三种. 无序列表 ...

  7. 02-body标签中相关标签-1

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. 前端之body标签中相关标签（二）

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  9. 前端之body标签中相关标签（一）

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  10. boby标签中相关标签

    有关字体相关的标签 h1~h6   字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...

随机推荐

  1. CentOS7系统ifconfig无法使用的解决方法

    在使用RAKsmart美国服务器的时候,如果安装的CentOS7操作系统的话,可能会经常用到“ifconfig”命令.ifconfig命令大多是用于CentOS 6版本下面,主要用于查看网卡配置信息. ...

  2. Ubuntu 服务器默认的root账号是没有激活的，需要用初装的用户账号给root设置管理密码

    user@ubuntu12:~$ sudo password root //用sudo修改账户 1.根据提示输入当前用户的密码: 2.修改成功之后你就可以使用root账号了,可以使用su root 命 ...

  3. Codevs1922 骑士共存问题

    1922 骑士共存问题 题目描述 Description 在一个n*n个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入. 对于给定的n*n个方格的国 ...

  4. ant详细介绍

      Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令 ...

  5. tes..

    力扣刷题 二分查找法 二分查找法又称折半查找法. 优点:比较次数少,查找速度快,平均性能好: 缺点:要求待查表为有序表,且插入删除困难. 因此,折半查找方法适用于不经常变动而查找频繁的有序列表. 首先 ...

  6. Spring MVC JSON自己定义类型转换

    版权声明:版权归博主全部.转载请带上本文链接.联系方式:abel533@gmail.com https://blog.csdn.net/isea533/article/details/28625071 ...

  7. 使用C3P0和DBUtils

    1.导包 2.配置c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-c ...

  8. Eslint报错的翻译

    若在git中出现这个 http://eslint.org/docs/rules/eol-last 他是提醒你:在文件末尾要求或禁止换行 比如代码如下: 若在git中出现这个 https://eslin ...

  9. 想要快速完成一个Python项目，离不开这些开源库

    链接:https://opensource.com/article/18/9/python-libraries-side-projects 在Python / Django世界中有一句话:我们为语言而 ...

  10. 【JZOJ4920】【NOIP2017提高组模拟12.10】降雷皇

    题目描述 降雷皇哈蒙很喜欢雷电,他想找到神奇的电光. 哈蒙有n条导线排成一排,每条导线有一个电阻值,神奇的电光只能从一根导线传到电阻比它大的上面,而且必须从左边向右传导,当然导线不必是连续的. 哈蒙想 ...