HTML中的body及可以再body中出现的标签

最新推荐文章于 2024-09-18 09:49:54 发布

IT_CREATE

最新推荐文章于 2024-09-18 09:49:54 发布

阅读量1w

点赞数 17

分类专栏： JavaWeb之HTML 文章标签： HTML中body HTML标签

本文链接：https://blog.csdn.net/it_create/article/details/83928915

版权

JavaWeb之HTML 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

网页的主体标记body

需要显示的浏览器网页模块的内容，都必须要定义在body中，<body> 标签，可以说是HTML文件中，最为重要的一块内容。

主体标记以<body>开始，以</body>结尾

注意：在构建HTML文件时，请不要将标记交叉使用，否则将会出现一些莫名其妙的错误

能够出现在主体标记中的内容

1、注释

HTML中注释格式：

<!-- 被注释的内容 -->

2、文本信息

文本信息，可以分为2大类：普通文本，一些特殊字符文本

1）普通文本：汉字，英文或者在键盘上我们可以输出的字符。

2）特殊字符文本：特殊字符文本以&开头，使用；结束。例如：大小括号……

在HTML中，特殊字符文本有：

&ensp;  半大角的空白     一个代表半个汉字空
&emsp;  全角大的空白      一个代表一个汉字空
&nbsp;  不断行的空白格    一个代表一个汉字空间
&gt;    大于符号
&lt;    小于符号
&ge;    大于等于符号
&le;    小于等于符号
&amp;   &
&quot;  "
&copy;  © 版权符号
&reg;   ® 注册商标
&times; 代表乘号× 
&divide;   代表除号÷

3、加粗、斜体

在文档中，经常会出现一些比较重要的文本：加粗，倾斜，上标，下标

在HTML中使用:

<b></b> 和<strong></strong> 都可以完成文本内容的加粗,

<em></em> 和 <i></i> 都可以完成文本的倾斜,

上述的标记进行重点标记。

4、P标签，为段落标签

<p>内容</p>，它的作用在于给页面文本，进行段落分配。

5、上下标签

<sup>内容</sup> 为上标标签

<sub>内容</sub> 为下标标签

sup 可以X的N次方，sub可以H2O,把2向下

6、换行

在浏览器中，浏览器在显示网页时，完全采用HTML标记来进行解释的，会自动忽略多余的空格以及空行！在HTML文件中，无论你输入多少空格，都只能识别1个空格。在HTML中如果需要换行，请使用<br/>,如果需要添加空格，请你输入&emsp;

7、分割线

<hr/> 用于定义文本分割线

8、内容标题定义

<h1></h1> 到 <h6></h6>主要用来定义文本内容标题的主体标记，<h1>级别最高，<h6>级别最低，HTML中，作为标题来讲，每个标题的重要性有大有小，所以它认为<h1></h1>所定义的标题最重要，其他的依次递减

9、排序列表

如果HTML中，需要对文件或者图片进行排序的，我们可以使用无序列表<ul>，有序列表<ol>两种方案

说明：有序和无序可以交叉使用

1）无序列表：

    <ul type=”square”>
    <li>JAVA</li>
    <li>c系语言
        <ul>
            <li>c++</li>
            <li>java</li>
        </ul>
    </li>
    <li>c++</li>
    <li>c<sup>#</sup></li>
    <li>php</li>
    <li>.net</li>
</ul>

ul声明无序列表，li声明列表项

Type类型取值
disc	项目符号显示为实体圆心,默认值
square	项目符号显示为实体方心
circle	项目符号显示为空心圆

2）有序

    <!-- 有序列表 Ordered List -->
    <ol type=”A”>
    <li>JAVA</li>
    <li>c系语言
        <ol>
            <li>c++</li>
            <li>java</li>
        </ol>
    </li>
    <li>c++</li>
    <li>c<sup>#</sup></li>
    <li>php</li>
    <li>.net</li>
</ol>

ol声明有序列表，li声明列表项；属性start：start="c" 表示从哪个数字或者字母开始定义列表项，这里从意思是c开始

Type类型取值
取值	说明
1	使用数字作为项目符号
A/a	使用大写/小写字母作为项目符号
I/i	使用大写/小写罗马数字作为项目符号

3）自定义列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

dl声明定义列表，dt声明列表项，dd定义列表项内容

三种列表对比
无序列表	以<ul>标签来实现以<li>标签表示列表项	通过type属性设置项目符号 disc（默认）、square和circle
有序列表	以<ol>标签来实现以<li>标签表示列表项	通过type属性设置项目顺序 1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）
定义类表	以<dl>标签是实现以<dt>标签定义列表项以<dd>标签定义内容	无项目符号和显示顺序

*10、网页中图片***

HTML中，除了可以添加文字之外，还可以添加图片，当然添加图片，需要使用标记是<img/>，在浏览器，可以支持的图片格式，非常的多：GIF,JPEG,BMP,PNG,TIFF

支持最多的是GIF,JPEG

GIF格式最多只能使用256色的图像，图片大小都非常的小，下载速度比较快，帧数比较低它是采用多张低帧数图片组合完成动画效果。JPEG图片格式，是目前互联网上最受欢迎的图片格式，JPEG可支持16M颜色，它展现的效果非常高清，但是它也支持压缩，但是它的压缩，是以牺牲图片的质量为代价的，压缩比例越高，图片越模糊。

HTML在使用图片时，我们不是直接把图片存入到HTML中，而是在HTML中使用某些属性，指向图片所在目录位置

定位一个资源文件的路径，有两种方式：1、绝对路径，2、相对路径

格式：

<img src="path" alt="text" title="text" width="x" height="y" />
src	图像地址
alt	图像的替代文字
title	鼠标悬停提示文字
width	图像宽度
height	图像高度
例子	<img src="image/hetao.jpg" width="160" height="160" alt="薄皮核桃" title="薄皮核桃"/>

1）绝对路径，是以盘符为参照点，来进行寻址

   <img src="d:/HTML/imgs/1.jpg" alt="比较好吃的水果！"  width="300px" height="50px"/>

2）相对路径，是以当前文件来作为参照点，进行寻址

<img src="../../imgs/2.jpg" alt="比较好吃的水果！">

*推荐大家，使用相对路径

*11、address标签***

该标签的作用：就是用来定义网站联系人的相关信息

<!-- address标签制定在body之内， 它一般表示该网站的作者|联系人等一些联系信息默认就是倾斜-->

<address>
    联系人：张某
    <br/>
    联系方式：1339879999
    <br/>
    个人网站：<a href="http://www.baidu.com">张某的个人网站</a>
</address>

12、高亮显示

<mark></mark>用于将文字高亮显示

13、切换文字方向标签

<bdo></bdo>或<bdi></bdi>用于定义与其他文本不同的方向

例：

<bdo dir="ltr">
    HTML5 提供的新元素可以构建更好的文档结构
</bdo>

bdo 切换文字显示方向的标签，默认就是：ltr，表示从左至右

<bdo dir="rtl">
  HTML5 提供的新元素可以构建更好的文档结构
</bdo>

Rtl表示从右至左

14、引用名人名句规范标签

<q></q>标签通常用于引用一些名人名句的短用语，它会自动在文本上加上双引号

<blockquote></blockquote>用于引用一些名句，主要用于一大段语句的引用

15、预定格式标签

<pre></pre>标签，预定义格式标签，可以按照你在标签中指定的格式显示，也就是你怎么写的它就怎么显示

16、删除线和下线标签

<del><del>标签为删除线标签，一般代表文本已经过时了，现在已经不使用了

<ins><del>标签为下划线标签，一般代表文本正在使用，由标签中的文本内容替换了过时的内容

这两个标签一般是成对使用，一个代表过时内容，不使用；一个代表替代内容，正在使用。

17、u标签（下划线）

<u></u>标签表示下划线，可以给文本添加下划线，但容易和超链接混淆

18、字体简写

<abbr></abbr>标签用于对文本进行简化显示，效果：当鼠标指向简化字是会自动提醒

例子：

<!-- 页面会显示“进博会”，当我们用鼠标指向“进博会”时，会浮现显示“中国国际进口博览会”-->

<abbr title=”中国国际进口博览会”>进博会</abbr>

19、超链接

<a></a>标签表示超链接，可以跳转到指定网页和位置

1）页面间链接

<a href="path" target="目标窗口位置">链接文本或图像</a>
href	链接路径，如果不想让跳转界面，在它的值设为”#”
target	链接在哪个窗口打开
目标窗口位置	常用属性： _blank 在新窗口去显示 _self 跟a标签，位于同一个窗口显示，及本窗口显示 _parent 表示在上一级窗口显示内容 _top 在浏览器的最上级去显示内容，忽略任何框架
链接文本或图像	就是在页面显示的字体或图像，点击这个字体或图像就会跳转到指定页面或位置

例子：

<a  href="hetao.html"  target="_blank">薄皮核桃</a>

<a  href="hetao.html"  target="_blank"><img src="image/hetao.jpg" alt="薄皮核桃" title="薄皮核桃"/></a>

2）锚链接

锚链接：

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

创建步骤：

1.创建跳转标记

<a name="marker">乙位置</a>

2.创建跳转链接

<a href="#marker">甲位置</a>

一般情况下我们都用id属性来指定跳转位置，充当跳转标记，比如：

<img id="xdd" src="imgs/3.jpg" alt="巍峨的高山" border="5px" width="250px">

然后设定跳转连接：

<a href="index.html?#xdd" target="_top">index巍峨的高山</a>

跳转到本页面的指定位置，直接在在href的值中用“#跳转标记名”进行跳转

跳转到另外一个页面的指定位置，在href的值中用“页面名称?#跳转标记名”进行跳转

3）功能性链接

如：QQ、邮箱、MSN

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

发送邮件到某一个邮箱中去，但是要依赖微软组件：outlook

文件下载

<a href="res/学生资料.xlsx">下载Excel文档</a>

文件下载：条件是浏览器，无法识别的文件，它最终都会以下载的方式来体现

20、表格

<table></table>标签用于制作表格

表格标签

表格标签	说明
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

1）基本语法：

<table>
    <tr>
        < th>第一列表头</th>
        <th>第二列表头</th>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

table表示表格标签，th表示表头，tr表示行标签，td表示单元格标签

table属性：使用width和border设置表格的宽度和边框；cellpadding创建单元格内容与其边框之间的空白、cellspacing增加单元格之间的距离， bgcolor设置整个表格的背景，更多属性上网查看

2）对齐方式

表格对齐方式：默认对齐、居中对齐、左对齐、右对齐

单元格对齐方式：水平对齐方式、垂直对齐方式

标签属性	标签值	说明
align 水平对齐方式	left	左对齐
	center	居中对齐
	right	右对齐
valign 垂直对齐方式	top	顶端对齐
	middle	居中对齐
	bottom	底端对齐
	baseline	基线对齐

3）合并单元格

跨列：

<table>
  <tr>
    <td colspan="n">单元格内容</td>
  </tr>
  <tr>
    <td>单元格内容</td>
     ......
  </tr>
   ......
</table>

colspan="n"：所跨的列数

跨行：

<table >
  <tr>
    <td rowspan="n"> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>

rowspan="n"：所跨的行数

21、form表单

定义：<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

总的来说：

<form></form>表单主要用于数据的提交获取

HTML 表单用于收集用户输入

注释：

form 元素是块级元素，其前后会产生折行。

目前所有主流浏览器都不支持 <menu> 标签

1）基本语法

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交">
      <input type="reset" name="Reset" value="重填">
   </p>
</form>

method：规定如何发送表单数据，值有：（GET POST PUT DELETE HEADER OPTION ），常用值：get | post

action：表示向何处发送表单数据

在实际网页开发中通常采用post方式提交表单数据

2）表单元素

<input>元素标签

<input  type="text"  name="fname" value="text">

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称。
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" >

text：表示文本框 name：指定文本框名称 value：指定文本框初始值 size：指定文本框长度 maxlength：指定文本框可输入最大字符

密码框

<input  type="password "  name="pass"  size="20" >

password：表示密码框 name：指定密码框名称 size：指定密码框长度

单选按钮

<input name="gen" type="radio" value="男"  checked="checked" >男
<input name="gen" type="radio" value="女" >女

type=”readio”表示单选按钮框

name：多个readio单选按钮指定的值必须相同，才能添加进同一组，进行单选

checked：表示目前单选按钮选中的状态，及是否默认被选中

value：指定单选按钮的值，这个值不显示，后面在<input>外的”男”和”女”供用户观看

复选框

<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戏

checkbox：表示复选框

name：多个checkbox复选框指定的值必须相同，才能添加进同一组，进行复选

checked：表示目前复选框选中的状态，及是否默认被选中

value：指定复选框的值，这个值不显示，后面在<input>外的”运动”和”聊天”和”玩游戏”供用户观看

按钮

<input  type="reset" name="butReset" value="reset按钮">
<input  type="submit" name="butSubmit" value="submit按钮">
<input  type="button" name="butButton" value="button按钮"/>
<input  type="image"  src="images/login.gif" />

resert：重置按钮

submit：提交按钮

button：普通按钮，如果定义在表单之外的按钮，直接用button

image：以图片作为按钮

value：按钮上显示的值

src：图片路径

文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

file表示文件，是一个文件按钮，点击就可以选择文件，name是在按钮上显示的文本

隐藏域

<input type="hidden" value="666" name="userid">

hidden表示隐藏域，主要是隐藏不可见，当满足我们设定条件的时候可改变它的类型让它可见

只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly">
<input type="submit "  disabled="disabled"  value="保存" >

readonly表示只读，disabled表示禁用

------表单元素标注<lable>

定义：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

使用<label>标签的for属性与表单元素的id属性相结合控制单击该标签时，对应的表单元素自动获得焦点或者被选中

如：

<label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" /><br/>

for表示连接到的表单元素id，id是设置表单元素的id；这两行代码相当于点击lable的内容就会和radio单选按钮相关联，radio单选按钮就会相应的选中

<select>元素标签（下拉框）

表示下拉框

语法：

<select name="列表名称" size="行数">
    <option value = “1”>大专</option>
    <option value = “2”>本科</option>
    <option value = “3” selected="selected”>硕士</option>
    <option value = “4”>博士</option>
</select>

size：表示下拉框默认显示的行数，多余的利用下拉查看

selected：表示是否被选中

disabled 只能看不能摸

multiple="multiple" 表示该选择框支持多选，ctrl+鼠标点击可实现多选

更多属性参见网络，属性需要什么选什么

<textarea>元素标签（文本域）

表示文本域

语法：

<textarea name=”userDesc” rows=”5” cols=”30” maxlength=”150”>文本内容 </textarea >

cols显示的列数，rows显示的行数，maxlength表示最多显示字数

3）给表单添加围栏

介绍：

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

语法：

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<fieldset>要配合<legend>使用，legend表示外框显示的内容

22、块级元素和行内元素

区别：

1）块级元素不能和其他元素共享1行,每一个块级元素都必须要从新行中开始,而行内元素可以与其他元素共享一行

2)块级元素的高度，宽度，内边距，外边距这些东西可以设置，而行内元素不可以设置

3)块级元素的高宽，不设置的情况下，默认与根父容器保持一致（占父容器宽度的100%），除非就是设置了宽度，而行内元素宽度跟内容相关，内容有多大，宽度就有多大。

块级元素一览

标签名	作用	是否换行
H1-h6	文字加粗大小	是
Pre	预格式化	是
p	段落标签	是
ol	有序列表	是
Ul	无序列表	是
Li	有序无序必用	是
Dd	定义列表描述	是
Table	表格	是
Form	表单	是
Fieldset	分区	是
Legend	分区提示	是
Marquee	滚动	是
Blockquote	引用块	是
address	设置联系人	是

行内元素标签一览

标签名	作用	是否换行
Span	范围标签	否
a	超链接、快速定位	否
Strong\b	字体加粗	否
Em\i	字体倾斜	否
Sup	上标	否
Sub	下标	否
Textarea	多行文本域	否
Select	下拉列表	否
Option	下拉列表选项	否
Code	用于存放源代码	否

行内块级元素

标签名	作用	换行否
Img	图像	否
Input	输入框	否

23、内嵌框架（iframe标签）

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

如：直接在ifram中显示内容

<iframe src="h5.html" width="100%" height="300px"></iframe>

在本窗口显示h5.html这个页面

还可以让超链接内容在ifram中显示

如：

第一步：给ifram设置名字属性

<iframe width="100%" height="300px" name="myIfram"></iframe>

第二部：个超链接添加target属性

<a href="http://www.baidu.com" target="myIfram">百度</a>

标签属性	标签值	属性描述
align	left right top middle bottom	(一般用css样式代替，不填建议直接使用) 对齐方式，规定周围的元素如何对齐iframe
frameborder	1 0	是否显示框架周围的边框。
height	pixels %	iframe 的高度。
longdesc	URL	对iframe指向的页面的较长描述（主流浏览器都不支持）。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	对 <iframe> 中内容的一些额外限制。""空值表示启用所有限制，其他的表示分别关闭一些限制
scrolling	yes no auto	是否在 iframe 中显示滚动条。
seamless	seamless	设置ifram像页面的一部分（无边框或滚动条）。
src	URL	设置嵌入·iframe中的路径URL。
srcdoc	HTML_code	设置在iframe中的html内容，会替换掉url的引入的内容
width	pixels %	iframe 的宽度。

24、嵌入代码块

25、块元素div标签

定义：

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法：

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      border: 1px solid;
      border-color: blue;
    }
    .div01 {
      background-color: red;
      width: 200px;
      height: 200px;
    }
    .div02 {
      background-color: green;
      width: 300px;
      height: 250px;
    }
    .div03 {
      background-color: gray;
      width: 250px;
      height: 280px;
    }
  </style>
</head>
<body>
<div>
  <div class="div div01">asdfasdfasdfasdf</div>
  <div class="div div02">asdfasdfasdfasdf</div>
  <div class="div div03">asdfasdfasdfasdf</div>
</div>
</body>
</html>

从上述代码中我们可以看出，在body中定义了div块元素，在head中通过style可以对div的样式进行设置， .div03 就是对body中相对应的块进行样式设置（记住要加上“ . ”），div 则是对所有div块元素统一设置样式，但它的优先级比不上单独的加了“.”的优先级。