03-body标签中的部分标签
一、字体标签
标题标签h1-h6
h1定义最大的标题，h6定义最小的标题，一般一个页面中h1只能出现一次，尽量标题不要超过三级。h标签具有align属性，属性值分别是：left、center、right。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>
粗体标签b或strong
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<b>我好粗</b>
<strong>我也很粗的</strong>
</body>
</html>
斜体标签i或em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<i>我是斜体</i>
<em>我也是斜体</em>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<u>我是下划线</u>
<s>我是中划线</s>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
10<sup>2</sup>
Q<sub>1</sub>
</body>
</html>
特殊字符
：空格 （non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™
红色标出的是比较重要的。看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<p>这是一个HTML语言的<a>标签</p>
</body>
</html>
二、排版标签
段落标签p
p是paragraph的缩写，意思短落。
属性：align='center' 属性值：left、center、right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<p>这是一个段落</p>
<p align="center">这是另一个段落</p>
</body>
</html>
HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
还有一点就是p标签是一个文本级标签，里面只能放文字、图片、表单元素，其他一律不能放。
块级标签div和行内标签span
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
div：将标签内容当做块来对待，必须单独占一行。
属性：align='center'
属性值：left、center、right
span：和div唯一的区别在于div是换行的，而span是不换行的。
div是一个容器级标签，里面什么都能放，甚至能放div自己，而span是一个文本级标签，里面只能放文字、图片、表单元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<div>我是div</div>
<div>我也是div</div>
<span>我是span</span>
<span>我也是span</span>
</body>
</html>
div+css实现各种样式：div负责页面布局、负责结构、负责分块。css负责样式。
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="shop"></div>
</div>
<div class="footer"></div>
换行标签br
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<span>我是span</span>
<br />
<span>我也是span</span>
</body>
</html>
水平线标签hr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<span>我是span</span>
<br />
<hr />
<hr />
<span>我也是span</span>
</body>
</html>
预定义（预格式化）标签pre
保留所有的空格、tab、换行，原样输出内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<pre>
鹅鹅鹅
作者：李白
曲项向天歌
白毛浮绿水
</pre>
</body>
</html>
三、超链接标签a
超链接共分三种形式：
1.外部链接：链接到外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<a href="index.html"></a>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
2.锚链接：在本页面或其他页面的不同位置进行跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<a name="top">顶部</a>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<a href="#top">返回顶部</a>
</body>
</html>
跳转到其他文件的锚点中：
<a href="index.hhml#top">回到顶部</a>
表示跳转到index.html中的top锚点中去。
3.邮件链接
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
效果：点击之后，会弹出outlook，作用不大。
前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息
几个特殊的链接：
跳转到页面顶部：
<a href="#">跳转到顶部</a>
与js有关：
<a href="javascript:alert(1)">内容</a><a href="javascript:;">内容</a>
- javascript:;表示什么都不执行，这样点击
<a>时就没有任何反应 例如：<a href="javascrip:;">内容</2 - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。 例如：<ahref="javascript:alert()">内容</a>
a标签的属性：
href：目标URL
title：悬停文本
name：用于设置锚点名称
target：四个属性值。
_self：在当前页面打开
_black：在新的窗口打开
_parent：在父级窗口打开
_top：在顶级窗口打开
a标签是一个文本级标签。
a的语义要小于p，要想让文本内容被点击，应该是p包含a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<p align="center">
<a href="http://www.baidu.com">百度一下</a>
</p>
</body>
</html>
四、图片标签img
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
不能往网页中插入的图片格式是：psd、ai
HTML不是直接插入图片，而是插入图片的引用地址，所以要把图片上传到服务器上。
src属性： 指图片的路径
1.绝对路径：
<img src="http://www.baidu.com/2016040102.jpg">
2.相对路径：网页文件和你的图片必须在一个服务器上
<img src="data:images/1.jpg">
img标签的属性：
width：图片的宽度
height：图片的高度
align：图片的水平对齐方式。属性值可以是left、center、right
alt：当图片显示不出来时，代替显示的内容。
title：悬停文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
<img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />
</body>
</html>
文本级标签显示在浏览器上时，不管图片多高，都会有一个现象，就是“高矮不齐，底边对齐”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流浪者</title>
</head>
<body>
hello<img src="https://imgs.diercun.com/hd1/2019/808/7/m24mnorg_46.jpg" alt="美女" title='好美啊' width="200px" height="180px" />嘿嘿
</body>
</html>
注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right
点击图片跳转到某个链接，应该是：
<a> <img src="data:images/bojie.jpeg" alt="波姐" title='波多野结衣'> </a>
作者：流浪者
日期：2019-08-30
03-body标签中的部分标签的更多相关文章
- 前端 ------ 03 body标签中的相关标签
列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...
- HTML之body标签中的相关标签补充
一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- Spring源码分析（九）解析默认标签中的自定义标签元素
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 到这里我们已经完成了分析默认标签的解析与提取过程,或许涉及的内容太多,我 ...
- 03-----body标签中的相关标签
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...
- body标签中的相关标签
一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...
- 02 body标签中的相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）
一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...
- JS从后台获取数据，前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
- zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题
一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...
随机推荐
- SpringCloud之Feign
[前面的话]书接上文,本文的某些知识依赖我的第一篇SpringCLoud的文章:SpringCloud之Eureka,如果没有看过可以先移步去看一下.另外在微服务架构中,业务都会被拆分成一个个独立的服 ...
- NLP（一）语料库和WordNet
访问语料库 NLTK数据库的安装:http://www.nltk.org/data.html NLTK语料库列表:http://www.nltk.org/nltk_data/ 内部访问(以Reuter ...
- 成功项目管理与PMP认证2017
http://study.163.com/course/courseLearn.htm?courseId=1064005#/learn/video?lessonId=1003778171&co ...
- BZOJ3170 [Tjoi2013]松鼠聚会 切比雪夫距离 - 曼哈顿距离 - 前缀和
BZOJ3170 题意: 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最 ...
- HDU-6053 TrickGCD
题目连接: https://vjudge.net/problem/HDU-6053 Description You are given an array A , and Zhu wants to kn ...
- AC自动机 建立nlogn个AC自动机
String Set Queries 题意:给你3种操作,1.加入一个串到集合中. 2.删除集合中的某一个串 3.查询集合中的字符串在给定的字符串种出现几次.(同一个串可重复) 解法:建立多个AC自动 ...
- CodeForces 375D Tree and Queries 莫队||DFS序
Tree and Queries 题意:有一颗以1号节点为根的树,每一个节点有一个自己的颜色,求出节点v的子数上颜色出现次数>=k的颜色种类. 题解:使用莫队处理这个问题,将树转变成DFS序区间 ...
- hdu 1078 FatMouse and Cheese（简单记忆化搜索）
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意:给出n*n的格子,每个各自里面有些食物,问一只老鼠每次走最多k步所能吃到的最多的食物 一道 ...
- C++临时变量的回顾思考以及librdkafka设置回调函数注意点
1 生命周期 如果仅仅是临时变量,并没有调用new来在堆上创建空间,那么注意 : 生命周期仅在该作用域中,即声明该临时变量的{}中: 2 使用(librdkafka C++回调使用) 在创建临时变量后 ...
- 精品自用IDEA插件吐血推荐
Alibaba Java Coding Guidelines 该插件集成了Alibaba代码编程规范,可以帮你找出你的代码怪味道 .gitignore 当你使用Git作为版本工具的时候,想要快速的添加 ...