一 排版标签（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. node学习记录——搭建web服务器

    web服务器的基本知识 功能:1.接收HTTP请求(get,post,delete,put)2.处理HTTP请求 常见的web服务器架构: 1. Nginx/Apache:负责接收http请求,确定谁 ...

  2. HTTP_REFERER的用法及伪造

    引言 在php中,可以使用$_SERVER[‘HTTP_REFERER’]来获取HTTP_REFERER信息,关于HTTP_REFERER,php文档中的描述如下: “引导用户代理到当前页的前一页的地 ...

  3. 提升mysql服务器性能（复制原理与拓扑优化）

    原文:提升mysql服务器性能(复制原理与拓扑优化) 版权声明:皆为本人原创,复制必究 https://blog.csdn.net/m493096871/article/details/9008171 ...

  4. ZooKeeper的分布式锁实现

    分布式锁一般有三种实现方式: 1. 数据库乐观锁: 2. 基于Redis的分布式锁: 3. 基于ZooKeeper的分布式锁. 本篇博客将介绍第三种方式,基于Zookeeper实现分布式锁.虽然网上已 ...

  5. ubuntu上用源码进行一键安装mysql

      首先卸载原有的mysql: 首先查看自己的mysql有哪些依赖 #dpkg --list|grep mysql 先卸载 #sudo apt-get remove mysql-common #sud ...

  6. 【python之路14】发送邮件实例

    1.发邮件的代码 from email.mime.text import MIMEText from email.utils import formataddr import smtplib msg ...

  7. 【CRT相关配置】

    1.选项——会话选项 2.回话调整如下: 3.日志文件记录保存,即保存所有输入的命令 文件名:%S-%T-%M-%D.txt,表示每天会存放到一个文件 选择:在连接上启动记录 和  追加到文件

  8. Excel怎么增加撤销操作的次数？Excel增加可撤销次数教程

    Excel怎么增加撤销操作的次数?Excel增加可撤销次数教程 在Excel的使用中,返回上一步是经常用到的一个工具,当数据填写有误需要查看之前的内容时,一般会通过"Ctrl Z" ...

  9. WPF 如何显示gif

    最近碰到了要显示表情的需求,而表情刚好是gif的图片. 于是用了Image试了下,发现不行,只会显示第一帧,然后上网查了下资料,大致有这么几种方法,都可以实现. 第一种: 使用Winfrom里面的pi ...

  10. 数据库----ORACLE和MYSQL数据库简介

    一.什么是数据库? 数据库(Database---DB)按照组织.储存和管理数据的仓库.(理解以下三个概念)   数据(Data)用来描述事物的记录都可称数据,如文字音乐图像.   数据库系统(Dat ...