一、文本标签

1、文本标签

1.1普通文本

如果直接在<body></body>中添加文字，即该文字只是普通文本，文本编辑器中的任何效果：比如空格，换行都不影响页面，页面想要实现效果必须通过标签来实现。

例如下面代码中，文本当中的任何空格换行对页面均不起作用。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文本标签</title></head><body><!--文本标签-->床前明月光，疑是地上霜。举头望明月，低头思故乡。</body>
</html>

效果：

1.2标题标签<hn></hn>

h1-h6 字号逐渐变小，每个标题独占一行，自带换行效果，

h7之后都属于无效标签，但是浏览器也不会报错，而是以普通文本的形式进行展现。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文本标签</title></head><body><!--标题标签--><h1>床前明月光</h1><h2>床前明月光</h2><h3>床前明月光</h3><h4>床前明月光</h4><h5>床前明月光</h5><h6>床前明月光</h6><h7>床前明月光</h7><h8>床前明月光</h8></body>
</html>

效果：

1.3横线标签<hr />

在<body></body>中加入<hr />标签，网页中将会出现一条横线，如下图所示：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文本标签</title></head><body><!--标题标签--><h1>床前明月光</h1><h2>床前明月光</h2><h3>床前明月光</h3><h4>床前明月光</h4><h5>床前明月光</h5><h6>床前明月光</h6><h7>床前明月光</h7><h8>床前明月光</h8><hr/></body>
</html>

效果：

同时可以对横线标签设置一些属性来改变横线。

①width：设置宽度，width可以等于一个具体的数值，同时也可以等于百分比，百分比会随着页面的变化而变化。

例如：

<hr width="300px"/>
<hr width="30%"/>

其中width="300px"表示的是横线的固定宽度为300像素。

而width="30%"则表示宽度占页面的百分三十，会随着页面的宽度的变化而变化。

②align：设置横线的位置 left,center,right 默认不写的话就是居中效果。

<hr align="center"/><hr align="left"/><hr align="right"/>

1.4段落标签<p></p>

当将过多的普通文本直接输入在body标签中时，文本不会进行换行，只有将文本放入段落标签当中时，文本才会自动地随着页面的缩放进行相应的换行。

段落效果：段落中文字自动换行，段落和段落之间有空行。

<p>一个漆黑的夜晚，又高又远的天空中，有一颗小小的星星正在做梦。
他梦里自已是一颗慧星，好像一道炽热的火花，瞬间划过天空......突然，他直直地往下掉落。地上的孩子们看见了，都指着他叫：“流星！”并且对着他许愿。
小星星紧紧地抓着玩具泰迪熊，他们一起掉落......掉落......掉落......直到......扑通！他们一起掉入了深深的大海。小星星仔细地看一看四周，他简直不敢相信，这里到处都是奇形怪状的鱼。有条纹的，有带斑点的，还有各种大大小小、粗细不同的生物。但是，他们都不是星星。小星星把泰迪熊抱得紧紧的，夜空似乎离他很远很远了。这时候，他发现附近有一闪一闪微弱的光芒。他心里充满了喜悦，激动地以为那是星星。
但是，当他靠近一看，发现他们不是，只是一群闪闪发亮的鱼，正好奇地看着他。
小星星坐在一块石头上，对泰迪熊说：“这里没有别的星星，我好想回家。”
“不要哭。”大石头突然说话了！原来那不是石头，是一只海龟。他说：“大海中也有很多星星啊！”
</p>

1.5实体字符

不管实在标题标签、普通文本、段落标签还是其他的标签当中，空格对网页中显示的文本没有任何效果，这里我们需要用到实体字符在去进行相应的空格操作，同时实体字符也包含一些其他字符。（这是我在w3school上截下来的，大家可以参考一下。）

1.6加粗<b></b>、<i>倾斜</i>、<u>下划线</u>

将文本放入对应的标签中，可以对文本进行相应的效果改变，同时可以多个效果一起使用，即将标签嵌套起来，如下所示

<b>加粗</b><i>倾斜</i><u>下划线</u><i><b><u>加粗倾斜下划线</u></b></i>

效果：

1.7预编译标签<pre></pre>

在页面上显示原样效果，在pre标签中写什么，就会原样输出什么样的效果。

1.                  <!--预编译标签：在页面上显示原样效果-->
2.                  <pre>
3.  public static void main(String[] args){
4.          System.out.println("hello ....");
5.  }
6.                  </pre>

效果：

1.8换行<br />

在文本的任意地方输入文本标签，网页效果中就会在相应的位置出现换行效果。

1.9中划线<del></del>

<del>一箭穿心</del>

效果：

1.9字体标签<font></font>

在字体标签中可以加一些字体、颜色等相应的效果

1. <font color="aquamarine" size="7" face=arial>床前明月光</font>

<font color="aquamarine" size="7" face=arial>其中color是设置颜色，size设置字体大小，face设置字体格式

效果：

二、多媒体标签

1、图片

<img src="img/1.jpg" width="300px"
title="小黄人图片" alt="图片加载失败"/><img src="https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">

<img/>:图片标签。

src：引入图片的位置，引入图片时，需将图片方在指定的位置上。

"img/1.jpg"：引入本地资源，图片的位置。

https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500:引入网络资源，可以在网络上选择图片，右键复制图片地址。

width：设置宽度。

height：设置高度。

注意：一般高度和宽度只设置一个即可，另一个会按照比例自动使用。

title：设置图片的标签，鼠标悬浮在图片上的时候的提示于，即当鼠标放在图片任意位置时便会显示title的内容，默认情况下图片如果加载失败（即没有设置alt属性的时候），那么提示语也是title中的内容。

alt：图片加载失败后的提示语。

2、音视频引用标签

<!--音频--><embed src="music/我要你.mp3"></embed><!--视频--><embed src="video/周杰伦-说好的幸福呢.mp4" width="500px" height="500px"></embed>

和图片标签一样，embe标签可以引用网络资源，设置大小、主题、提示语等属性。

3、全部代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--图片--><img src="img/1.jpg" width="300px" title="小黄人图片" alt="图片加载失败"/><img src="https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/><!--音频--><embed src="music/我要你.mp3"></embed><br /><!--视频--><embed src="video/周杰伦-说好的幸福呢.mp4" width="500px" height="500px"></embed></body>
</html>

效果：

三、超链接标签

1、什么是超链接

首先大家可以看百科上对于超链接的一个定义。

2、超链接标签

作用：实现页面的跳转功能。

（1）href:控制跳转的目标位置，可以跳转到指定的html页面、文字或者相应的网页。

target:设置跳转到的目标属性。

（2）_self 在自身页面打开（默认效果也是在自身页面打开） _blank 在空白页面打开。）

举例：

<a href="文本标签.html">超链接01</a><!--跳转到本地资源-->
<a
href="">超链接02</a>
<!--跳转到自身页面-->
<a
href="abc">超链接03</a><!--跳转的目标找不到，提示找不到资源-->
<a
href="https://www.baidu.com" target="_self">超链接04</a><!--跳转到网络资源--> <a
href="https://www.baidu.com" target="_blank">超链接05</a><!--跳转到网络资源-->

（3）在<a></a>中添加其他的元素，例如：<img src="img/1.jpg" />图片元素，单击图片也可以完成一个相应的页面跳转。

（4）代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="文本标签.html">超链接01</a><!--跳转到本地资源--><a href="">超链接02</a> <!--跳转到自身页面--><a href="abc">超链接03</a><!--跳转的目标找不到，提示找不到资源--><a href="https://www.baidu.com" target="_self">超链接04</a><!--跳转到网络资源--><a href="https://www.baidu.com" target="_blank">超链接05</a><!--跳转到网络资源--><a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a></body>
</html>

3、设置锚点：

应用场合：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。

（1）同一个页面上设置锚点，设置同一个页面不同位置的跳转。

<a name="1F"></a>：在文本的某个位置设置锚点。

<a href="#1F">手机</a>：点击页面上的手机便会跳转到相应的设置好的锚点的位置。

这里举例的页面较短，当页面过长或者在不同位置时，设置锚点可以帮助快睡定位跳转到相应的位置。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><a name="1F"></a><h1>手机</h1><p>华为p40</p><p>华为p40</p><p>华为p40</p><p>华为p40</p><p>华为p40</p><p>华为p40</p><p>华为p40</p><p>华为p40</p><a href="#1F">手机</a></body>
</html>

（2）不同页面的锚点设置跳转

锚点还可以实现不用页面的跳转，即它可以跳转到另一个页面指定的锚点位置上去。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><a href="设置锚点.html#1F">超链接</a></body>
</html>

四、列表标签

1、无序列表标签

<ul></ul>当中放入列的标签<li></li>

type:可以设置列表前图标的样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--无序列表--><h1>今天要做的事情</h1><ul type="circle"><!--type:可以设置列表前图标的样式--><li>早起</li><li>多喝水</li><li>开心</li><li>奋斗</li></ul><!--有序列表--></body>
</html>

如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;"

效果：

2、有序列表

<ol></ol>当中放入列的标签<li></li>

type:可以设置列表的标号：1,a,A,i,I。

start:设置起始标号。

有序列表相比无序列表来说，每列前方的图标，变成了有序的序号，对于需要使用顺序来排列的列表，就推荐使用有序列表。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--有序列表--><h1>今天要做的事情</h1><ol type="1"><!--type:可以设置列表前标号的样式--><li>早起</li><li>洗漱</li><li>喝水</li><li>奋斗</li><li>洗漱</li><li>睡觉</li></ol><!--有序列表--></body>
</html>

效果：

五、表格标签

1、应用场景：

在页面布局很规整的时候，可能利用的就是表格。

2、表格中的标签：

<table></table>：表格标签。

<th></th>:表头，默认效果，字体加粗，文字居中，是一种特殊的单元格。

<tr></tr>:一个tr代表一行。

<td></td>：一个td代表一个单元格。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--表格页面--><table><!--四行四列-->
<tr><!--一个tr标签代表一行--><td>学号</td><!--一个td代表一列--><td>姓名</td><td>年龄</td><td>成绩</td></tr><tr><td>1001</td><td>张三</td><td>20</td><td>89</td></tr><tr><td>1002</td><td>李四</td><td>19</td><td>78</td></tr><tr><td>1003</td><td>小花</td><td>20</td><td>96</td></tr></table></body>
</html>

效果：

由运行效果可知，表格默认是没有边框的，可以通过属性来增加边框可其他的一些属性。

3、table中的一些属性：

border="1px" cellspacing="0px"

boeder:设置边框及大小。

border="1px"：设置边框的大小为1px，但是如果只设置边框不设置其他属性的话，单元格与边框直接就会出现空隙如下图所示，这样边框就不太好看，所以我们需要加上cellspacing属性。

效果：

cellspacing="0px"：设置单元格和边框之间的空隙，"0px"即设置单元格与边框之间没有空隙。

  <table border="1px" border="1px" cellspacing="0px">

width:设置页面的高度，也可以在行和单元格标签中设置该属性。

height:设置页面高度，也可以在行和单元格标签中设置该属性。

background 设置背景图片 background="img/1.jpg"，即将图1.jpg设置为整个表格的背景图片，也可以在行和单元格标签中设置该属性。

bgcolor :设置背景颜色，也可以在行和单元格标签中设置该属性。

4、设置文字居中：

需要在单元格标签，即需要在单元格<td></td>标签中设置一个align属性，

align="center"设置居中，同时也可以设置文字居左具右如下

 <td align="center">学号</td>

5、合并单元格：

①rowspan:行合并，对于同一列不同行的合并，写入到<td></td>单元格标签中，当表格需要进行行合并时，该列中需要合并的几行中，

只需要保留需要的一个单元格即可，

rowspan="3"，即代表合并3行。

这里将第四列的2、3、4行合并，则需将后面两行中的单元格删除，只保留一个，再将属性rowspan放入单元格标签当中。

<tr><!--一个tr标签代表一行--><td align="center">学号</td><!--一个td代表一列--><td>姓名</td><td>年龄</td><td>成绩</td></tr><tr><td>1001</td><td>张三</td><td>20</td><td rowspan="3">89</td></tr><tr><td>1002</td><td>李四</td><td>19</td></tr><tr><td>1003</td><td>小花</td><td>20</td></tr>

效果：

②colspan：列合并，对于同一行不同列的合并，，写入到<td></td>单元格标签中，当表格需要进行列合并时，该行行中需要合并的几列中，

只需要保留需要的一个单元格即可，

colspan="4"：列合并的单元格横跨4列

这里以合并第一行的几列为例，合并几列，则需将该行这几列中的数据保留着只剩需要的一个单元格即可，同时可以加一个居中效果。

<table border="1px" border="1px" cellspacing="0px"><!--四行四列--><tr><!--一个tr标签代表一行--><td colspan="4" align="center">学生信息</td></tr><tr><td>1001</td><td>张三</td><td>20</td><td>89</td></tr><tr><td>1002</td><td>李四</td><td>19</td><td>78</td></tr><tr><td>1003</td><td>小花</td><td>20</td>
.       <td>96</td>

效果：

六、div标签

div 和 span标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

通俗理解可以把div理解为一个“塑料袋。

而span理解为一个可以变化容量的袋子，跟着容量大小的改变而改变。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{border: 1px red solid;
}span{border: 1px greenyellow solid;}</style></head><body><div>Hello world<br />Hello world</div><div>Hello world</div><span>world</span><span>world</span><span>world</span></body>
</html>

效果：

通过css样式对div和span赋予样式，可以看出div的框占整行，而span跟着内容的变大而变大。

div属于块级元素-->换行

span属于行内元素-->没有换行效果

span:里面的内容占多大，span包裹的区域就多大。

body中的基本标签相关推荐

html中section与div,如何在html中的section标签内包含div标签
我正在制作一个完整版块的页面网站,如this.每个页面都有自己的标签.目前我的网页有4个部分(呈现不同的背景颜色).如何在html中的section标签内包含div标签我的第一部分有一个容器div, ...
seaborn箱图（box plot）可视化、并且使用matplotlib的meanprops函数在箱图中自定义均值标签、标签形状、标签大小、标签填充色彩、标签边缘颜色
seaborn箱图(box plot)可视化.并且使用matplotlib的meanprops函数在箱图中自定义均值标签.标签形状.标签大小.标签填充色彩.标签边缘颜色目录
R语言ggplot2可视化：可视化饼图分面图并在图中添加数据标签
R语言ggplot2可视化:可视化饼图分面图并在图中添加数据标签目录 R语言ggplot2可视化:可视化饼图分面图并在图中添加数据标签
R语言ggplot2可视化添加希腊字母标签：图表题（title）中加入希腊字母、图中加入希腊字母标签
R语言ggplot2可视化添加希腊字母标签:图表题(title)中加入希腊字母.图中加入希腊字母标签目录
jekyll 博客对搜索引擎的SEO提升方法--head中的meta标签和Jekyll SEO Tag
我用GitHub Pages搭建了jekyll的博客后,想要提升自己博客的SEO,尤其是对搜索引擎:百度.谷歌. head中的meta标签说道提升SEO,必然要提到HTML中的head标签中的met ...
二十四、Struts2中的UI标签
二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) ...
【HTML】处理＜br＞换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决
[HTML]处理换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题解决参考文章: (1)[HTML]处理换行符 ...
JSP页面中使用JSTL标签出现无法解析问题解决办法
JSP页面中使用JSTL标签出现无法解析问题解决办法参考文章: (1)JSP页面中使用JSTL标签出现无法解析问题解决办法 (2)https://www.cnblogs.com/xdp-gacl/p ...
从字符串中删除HTML标签
是否有从Java字符串中删除HTML的好方法? 一个简单的正则表达式 replaceAll("\\<.*?>","") 可以使用,但& 不会 ...
JAVA中的break[标签]continue[标签]用法
原文:JAVA中的break[标签]continue[标签]用法注意:JAVA中的标签必须放在循环之前,且中间不能有其他语句.例如:tag:for或while或do--while; 1.使用brea ...

body中的基本标签

一、文本标签

1、文本标签

1.1普通文本

1.3横线标签<hr />

1.4段落标签<p></p>

1.5实体字符

1.6加粗<b></b>、<i>倾斜</i>、<u>下划线</u>

1.7预编译标签<pre></pre>

1.8换行<br />

1.9中划线<del></del>

1.9字体标签<font></font>

二、多媒体标签

1、图片

2、音视频引用标签

3、全部代码

三、超链接标签

1、什么是超链接

2、超链接标签

3、设置锚点：

四、列表标签

1、无序列表标签

2、有序列表

五、表格标签

1、应用场景：

2、表格中的标签：

3、table中的一些属性：

4、设置文字居中：

5、合并单元格：

六、div标签

body中的基本标签相关推荐

最新文章

热门文章

body中的基本标签

一、 文本标签

1、文本标签

1.1普通文本

1.3横线标签<hr />

1.4段落标签<p></p>

1.5实体字符

1.6加粗<b></b>、<i>倾斜</i>、<u>下划线</u>

1.7预编译标签<pre></pre>

1.8换行<br />

1.9中划线<del></del>​

1.9字体标签<font></font>

二、 多媒体标签

1、图片

2、音视频引用标签

3、全部代码

三、 超链接标签

1、什么是超链接

2、超链接标签

3、设置锚点：

四、 列表标签

1、无序列表标签

2、有序列表

五、 表格标签

1、应用场景：

2、表格中的标签 ：

3、table中的一些属性：

4、设置文字居中：

5、合并单元格：

六、div标签

body中的基本标签相关推荐

最新文章

热门文章

一、文本标签

1.9中划线<del></del>

二、多媒体标签

三、超链接标签

四、列表标签

五、表格标签

2、表格中的标签：