03-HTML之body标签
body标签
HTML标签按作⽤主要分为两类：字体标签和排版标签
HTML标签按级别主要分为两类：⽂本级标签和容器级标签
⽂本级标签：p、span、a、b、i、u、em。⽂本标签⾥只能放⽂字、图⽚、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签⾥可以放任何东西。
1.字体标签
字体标签主要包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
1.1- 标题标签<hx></hx>
标题使⽤<h1>⾄<h6>标签进⾏定义。<h1>定义最⼤的标题，<h6>定义最⼩的标题。具有align属性，属性值可以是：left（左对齐）、center（居中）、right（右对齐）、justify（两端对齐）
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
1.2- 字体标签<font></font>（已废弃）
font标签可以设置⽂字颜⾊、⼤⼩、字体类型等
颜⾊：color="红⾊"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜⾊。设置⽅式：单词 #ff00cc rgb(0,0,255)
⼤⼩：通过size属性设置字体⼤⼩。取值范围只能是：1⾄7。取值时，如果取值⼤于7那就按照7来算，如果取值⼩于1那就按照1来算。如果想要更⼤的字体，那就只能通过css样式来解决
字体类型：face="微软雅⿊"：设置字体类型。注意在写字体时，“微软雅⿊”这个字不能写错。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<font face="幼圆" color="blue" size="6">字体标签</font>
</body>
</html>
1.3- 粗体标签<b>或<strong>（已放弃）
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
正常显⽰
<b>加粗显⽰</b>
<strong>加粗显⽰</strong>
</body>
</html>
1.4- 下划线标签<u>、中划线标签<s>（已废弃）
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
正常显⽰
<u>添加下划线</u>
<s>添加中划线</s>
</body>
</html>
1.5- 斜体标签<i>或<em>（已废弃）
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
正常显⽰
<i>斜体显⽰</i>
<em>斜体显⽰</em>
</body>
</html>
1.6- 上标<sup>、下标<sub>
sup是单词superscript的简写，意思是上标
sub是单词subscript的简写，意思是下标
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
4<sub>2</sub>
<p>2<sup>2</sup>=4</p>
</body>
</html>
1.7- 特殊字符
使⽤颜⾊标注的是要记住的，使⽤的时候注意不要漏掉结尾的分号
内容符号含义
空格 ；不打断空格（non-breaking spacing）
>>⼤于号（great than）
<<⼩于号（less than）
&&；符号&
￥¥⼈民币
双引号"“|”
单引号'‘|'
商标&trade；商标™
版权©；版权©
注册®register
例：输出这是HTML语⾔的<p>标签
2.排版标签
2.1- 段落标签<p>
段落：是英⽂paragraph的缩写。
属性：
align='属性值'：对齐⽅式。属性值包括：left、center、right
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>这是⼀个段落</p>
<p align="center">这是另⼀个段落</p>
</body>
</html>
使⽤p标签编辑⽂本会出现空⽩折叠现象，多个空格或换⾏只显⽰⼀个空格
<p>
哈哈
哈哈
</p>
2.2- 块级标签<div>和<span>
div和span是⾮常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒⼦”。<span>和<div>唯⼀的区别在于：<span>是不换⾏的，⽽<div>是换⾏的。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<span>我在span中，第⼀⾏</span>
<span>我在span中，第⼆⾏</span>
<div>我在div中，第⼀⾏</div>
<div>我在div中，第⼆⾏</div>
div标签是⼀个容器级标签，⾥⾯什么都能放，甚⾄可以放div⾃⼰。
span也是表达“⼩区域、⼩跨度”的标签，但是是⼀个⽂本级的标签。
注意：span⾥⾯只能放置⽂字、图⽚、表单元素。 span⾥⾯不能放p、h、ul、dl、ol、div。
2.3- 换⾏标签<br>（已废弃）
⽆论你将它置于何处，<br>标签都会产⽣⼀个强制的换⾏。
例：
未添加br标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>
第⼀⾏
第⼆⾏
第三⾏
</p>
</body>
</html>
添加<br>标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>
第⼀⾏<br>
第⼆⾏<br>
第三⾏<br>
</p>
</body>
</html>
2.4- ⽔平线标签<hr>（已废弃）
⽔平分隔线（horizontal rule）可以在视觉上将⽂档分隔成各个部分
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>第⼀⾏</p>
<hr>
<p>第⼆⾏</p>
</body>
</html>
2.5- 内容居中标签<center>
此时center代表是⼀个标签，⽽不是⼀个属性值了。只要是在这个标签⾥⾯的内容，都会居于浏览器的中间。
注意：不建议使⽤
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<center>内容居中标签</center>
</body>
</html>
2.6- 预定义（预格式化）标签：<pre>
含义：将保留其中的所有的空⽩字符(空格、换⾏符)，原封不动的输出结果（告诉浏览器不要忽略空格和空⾏）说明：真正排⽹页过程中，<pre>标签⼏乎⽤不着。但在PHP中⽤于打印⼀个数组时使⽤。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>李⽩诗</p>
<pre>
君不见黄河之⽔
天
上
来
</pre>
可以看到pre标签部分的字体bianxi
3.超链接标签<a><a/>
a是英语anchor“锚”的意思，就好像这个页⾯往另⼀个页⾯扔出了⼀个锚。是⼀个⽂本级的标签。
href是英语hypertext reference超⽂本地址的缩写。
超链接有三种形式：外部链接、锚链接、邮件连接
3.1- 外部链接
链接到外部⽂件。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<a href="www.baidu">百度搜索</a>
</body>
</html>
使⽤a标签的时候，⽂字会改变颜⾊，添加下划线，当⿏标放到该⽂字上会变成⼩⼿的形状，单击会跳转到连接的⽹页
3.2- 锚链接
指给超链接起⼀个名字，作⽤是在本页⾯或者其他页⾯的的不同位置进⾏跳转。⽐如说，在⽹页底部有⼀个向上箭头，点击箭头后回到顶部，这个就是利⽤到了锚链接。⾸先我们要创建⼀个锚点，也就是说，使⽤name属性或者id属性给那个特定的位置起个名字。
例：
<!DOCTYPE html>
<html lang="zh-CN">
html span 居中<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<a name="top">顶部</a>
<pre>
各种空⾏。。。。
</pre>
<!--可以简写为#-->
<!--<a href="#">回到顶部</a>-->
<a href="#top">回到顶部</a>
<pre>
各种空⾏。。。。
</pre>
</body>
</html>
当浏览的页⾯过长，出现锚链接，单击，会返回到相应的地⽅
添加指定⽂件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<a name="top">顶部</a>
<pre>
各种空⾏。。。。
</pre>
<a href="h1.html#top">回到顶部</a>
<pre>
各种空⾏。。。。
</pre>
</body>
</html>
单击回到顶部会跳转到h1.html页⾯的top锚点中区
3.3- 邮件连接
例：
<a href="mailto:zhaoxu@tedu"></a>
效果：点击之后，会弹出outlook，作⽤不⼤。
前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息
3.4- 超链接属性
href：⽬标URL
title：悬停⽂本。
name：主要⽤于设置⼀个锚点的名称。
target：告诉浏览器⽤什么⽅式来打开⽬标页⾯。target属性有以下⼏个值：
_self：在同⼀个⽹页中显⽰（默认值）
_blank：在新的窗⼝中打开。
_parent：在⽗窗⼝中显⽰
_top：在顶级窗⼝中显⽰
blank就是“空⽩”的意思，就表⽰新建⼀个空⽩窗⼝。为啥有⼀个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空⽩标签页中打开。
4.图⽚标签<img />
img: 代表的就是⼀张图⽚。是单边标记。
img是⾃封闭标签，也称为单标签。
4.1- 可以插⼊的图⽚类型
能够插⼊的图⽚类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往⽹页中插⼊的图⽚格式是：psd、ai
HTML页⾯不是直接插⼊图⽚，⽽是插⼊图⽚的引⽤地址，所以也要把图⽚上传到服务器上。
4.2- src属性
引⽤⽅式：相对路径、绝对路径（本地路径、⽹络路径）
例：
<!--相对路径-->
<img src="./Harry_Potter.jpg">
<!--绝对路径-->
<img src="E:\pythonstudy\Harry-Potter.jpg">
<!--⽹络路径-->
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1530790568032&di=9e8e42c2e796fed33b4fd402718f96e0&imgtype=0&src=http%3A%2F%2Fimages1.tianxun%2Fnews%2F2014%2Fscotland.jpg"
4.3- 其他属性
width：宽度
height：⾼度
title：提⽰性⽂本。公有属性。也就是⿏标悬停时出现的⽂本。
align：指图⽚的⽔平对齐⽅式，属性值可以是：left、center、right
alt：当图⽚显⽰不出来的时候，代替图⽚显⽰的内容。alt是英语 alternate “替代”的意思。（有的浏览器不⽀持）
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<!--相对路径-->
<img src="./Harry_Potter.jpg" alt="harry_potter" title="harrypotter" width="200" height="200">
</body>
</html>
⽂本级的标签显⽰在浏览器上时，不管你的图⽚多⾼，它总会底边对齐，这是⼀种现象，“⾼矮不齐，底边对齐”。
此时⼤家可以给图⽚设置align属性，来查看效果吧！
注意事项：
（1）如果要想保证图⽚等⽐例缩放，请只设置width和height中其中⼀个。
（2）如果想实现图⽂混排的效果，请使⽤align属性，取值为left或right
5.列表标签
5.1- ⽆序列表<ul>，⼦项为<li>
英⽂单词解释如下：
ul：unordered list，“⽆序列表”的意思。
li：list item，“列表项”的意思。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<ul>
<li>项⽬1</li>
<li>项⽬2</li>
<li>项⽬3</li>
</ul>
</body>
</html>
注意：
li不能单独存在，必须包裹在ul⾥⾯；反过来说，ul的“⼉⼦”不能是别的东西，只能有li。
我们这⾥再次强调，ul的作⽤，并不是给⽂字增加⼩圆点的，⽽是增加⽆序列表的“语义”的。
属性：
type="属性值"。属性值可以选：disc(实⼼原点，默认)，square(实⼼⽅点)，circle(空⼼圆)。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<ul>
<li>项⽬1，默认</li>
<li>项⽬2，默认</li>
<li>项⽬3，默认</li>
</ul>
<ul type="square">
<li>项⽬1，⽅形点</li>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论