一 排版标签（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. 基于RBAC权限管理的后台管理系统

    在摸爬滚打中渐渐理解了RBAC权限管理是个什么玩意. RBAC的基本概念: **RBAC认为权限授权实际上是Who.What.How的问题.在RBAC模型中,who.what.how构成了访问权限三元 ...

  2. mit课程ocw-business

    https://ocw.mit.edu/courses/find-by-topic/#cat=business Course # Course Title Level 1.011 Project Ev ...

  3. The web application [ROOT] appears to have started a thread named [spring.cloud.inetutils] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread:

    前景提要:启动SpringBoot项目报错 原因: DeliveryPointServiceFallBack上面没有加 @Component-_-!

  4. python基础--数据类型的常用方法1

    1.数字类型 整型 用途:存qq号,手机号,不带字母的身份证号... 进制转换: 二进制转十进制:10 -->  1*(2**1) + 0*(2**0) 2 八进制转十进制:  235  --& ...

  5. 洛谷P1474 [USACO 2.3]货币系统 Money Systems [2017年4月计划 动态规划04]

    P1474 货币系统 Money Systems 题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1 ...

  6. SourceTree windows免注册免登陆使用方法

    问题描述: 安装SourceTree后,首次使用时,需要登录账号:但我们在注册或登录时,可能根本无法打开网页,导致不能进入. 如下截图: 解决方法: 在目录C:\Users\XXXXX\AppData ...

  7. Liferay 7：如何在Liferay Portlet中使用Angular, React, Vue.js等前端框架

    https://web.liferay.com/zh/web/ivan.zaera/blog/-/blogs/modern-frontend-workflows-in-liferay-portal L ...

  8. ScrollView 实现子视图滑动到顶部时固定不动

    这个,个人建议使用自己写的布局使用view的gon或者visble的方法,使用design包中的控件来的话,局限性很大 方法有倆 (1)自定义ScrollView 重写ScrollView 的 com ...

  9. vue制作幻灯片-左右移动

    组件中: <template> <div class="slide-show" @mouseover="clearInv" @mouseout ...

  10. layui的select联动 - CSDN博客

    要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以 正常使用. html结构: <form class="layui- ...