一 排版标签（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. JS---案例：无刷新评论---属于创建对象的案例拿出来复习

    案例:无刷新评论---属于创建对象的案例拿出来复习 创建行和单元格,添加到相应元素中,设置内容 createElement, appendChild,innerHTML <!DOCTYPE ht ...

  2. 使用junit单元测试，报Cannot instantiate test(s): java.lang.SecurityException: Prohibited package name: java.com.com.test

    在测试类中不能一级包名不能以java开头, 将包改为com.com.test就好了.

  3. windows 环境下搭建docker私有仓库

    windows 环境下搭建docker私有仓库 1.在公用仓库中pull仓库镜像 docker pull regitry 2.启动仓库镜像 //-d意思是后台运行,-p是做端口映射,这里是将本地的50 ...

  4. 【洛谷P1632】点的移动

    P1632 点的移动 题目描述 平面上有N个整数坐标点.如果将点(x0,y0)移动到(x1,y1),则需要的代价为|x0-x1|+|y0-y1|.求使得K(K=1,-,N)个点在同一位置上最少需要的代 ...

  5. web前端学习（四）JavaScript学习笔记部分（2）-- JavaScript语法详解

    2.1.Javascript语法-运算符(1) 复数运算符 %取余 ++ -- 赋值运算符 += -= *= /= %= 字符串操作 <!DOCTYPE html> <html la ...

  6. 三分钟学会在ASP.NET Core MVC 中使用Cookie

    一.Cookie是什么? 我的朋友问我cookie是什么,用来干什么的,可是我居然无法清楚明白简短地向其阐述cookie,这不禁让我陷入了沉思:为什么我无法解释清楚,我对学习的方法产生了怀疑!所以我们 ...

  7. 每日算法之三十四：Multiply Strings

    大数相乘,分别都是用字符串表示的两个大数.求相乘之后的结果表示. 首先我们应该考虑一下測试用例会有哪些,先准备測试用例对防御性编程会有比較大的帮助.可以考虑一些极端情况.有以下几种用例: 1)&quo ...

  8. day38 16-Spring的Bean的装配：注解的方式

    Struts 2和hibernate也使用注解,但是使用注解在以后的开发中应用不多.但是可以说在整合的时候如何进行注解开发.在Spring中,注解必须会玩. package cn.itcast.spr ...

  9. php中array_slice和array_splice函数解析方式方法

    array_slice array array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_k ...

  10. Intellij：用Intellij出的Gradle插件进行开发

    前言:之前看到网上大部分的Intellij开发教程都是采用Intellij官方文档的那个版本,配置Intellij SDK一大堆的. 现在给大家介绍简单的方法吧,我们组内大神找到的.我们需要用到的是I ...