10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)
一 排版标签(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>
<!--空格-->
 <br>
<!--小于号-->
<<br>
<!--大于号-->
><br>
<!--符合&-->
&<br>
<!--双引号-->
"<br>
<!--单引号-->
'<br>
<!--版权-->
©<br>
<!--商标-->
™
</body>
</html>
三 超链接<a>
例子:
<a href="#">跳转到顶部</a> <a href="http://www.baidu.com">百度一下</a>
特殊的几个链接
<a href="javascript:alert(1)">内容</a>
<a href="javascript:;">内容</a>
- javascript:;表示什么都不执行,这样点击
<a>
时就没有任何反应 例如:<a href="javascrip:;">
内容</2 - javascript:是表示在触发
<a>
默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>
四 图片标签<img>
1,img属性:
width
:宽度height
:高度title
:提示性文本。公有属性。也就是鼠标悬停时出现的文本。align
:指图片的水平对齐方式,属性值可以是:left、center、rightalt
:当图片显示不出来的时候,代替图片显示的内容。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),超链接,图片标签)的更多相关文章
- html - body标签中相关标签
body标签中相关标签 今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- 前端 -----02 body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 02-body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 03-body标签中相关标签-2
主要内容: 列表标签 <ul>.<ol>.<dl>表格标签 <table>表单标签 <form> 一.列表标签 列表标签分为三种. 无序列表 ...
- 02-body标签中相关标签-1
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 前端之body标签中相关标签(二)
一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...
- 前端之body标签中相关标签(一)
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- boby标签中相关标签
有关字体相关的标签 h1~h6 字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...
随机推荐
- springMvc实现拦截特定请求判断用户是否登录
流程: 新建一个拦截器,配置拦截哪些,放行哪些 在spring servrt中配置拦截器 <!--配置拦截器--> <mvc:interceptors> <!--登录拦截 ...
- eclipse 代码格式化快捷键CTRL SHIFT F无反应的解决办法
基本上就是被其他软件占用了,比如输入法的简繁体切换,改其他软件,保留eclipse就好
- 13类100个常用Linux基础命令
玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.然而每个人玩Linux的目的 ...
- java-文件切割合并_对象的序列化
一 文件的操作 1.1 概况 1,切割文件的原理:一个源对应多个目的:切割文件的两种方式. 2,碎片文件的命名和编号. 3,程序代码体现. 4,如何记录源文件的类型以及碎片的个数(建立配置信息文件)( ...
- R语言的可视化
1. 完整的数据分析流程 定义研究问题 定义理想数据集 确定能够获取什么数据 清理数据 2. 变量的类型: 数值变量(可进行加减乘除运算):连续(可在给定区间取任意数值).离散(给定集合内不连续取值) ...
- 使用log4j打印日志
在项目中我们必不可少需要打印日志,通过日志我们可以查看系统的运行状态是否正常,当程序出现异常的时候,我们也可以通过查看日志来定位问题的位置,给程序员的工作带来了极大的便利. 以下这边博客的内容是我从一 ...
- hdu 2087剪花布条 (KMP入门 子串出现的次数和子串个数)
剪花布条 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- string型的“600.000”如何转换为int型
string型的“600.000”怎么转换为int型?为什么我用int.parse不能转换? ------解决方案--------------------int.Parse("600.000 ...
- golang函数二
- 【JZOJ4161】于神之怒 莫比乌斯反演
任务 答案mod 1e9+7. 解法 容易写出反演: Ans=∑T=1nTk∗∑i=1⌊nT⌋⌊niT⌋⌊miT⌋μ(i) ∑⌊nT⌋i=1⌊niT⌋⌊miT⌋μ(i)这个因式显然是经典的分块处理: ...