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

网页的主体标记body 

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

主体标记 以开始，以结尾

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

 

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

1、注释

HTML中注释格式：

 

2、文本信息

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

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

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

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

   半大角的空白     一个代表半个汉字空
   全角大的空白      一个代表一个汉字空
   不断行的空白格    一个代表一个汉字空间
>    大于符号
<    小于符号
≥    大于等于符号
≤    小于等于符号
&   &
"  "
©  © 版权符号
®   ® 注册商标
× 代表乘号× 
÷   代表除号÷  

 

3、加粗、斜体

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

在HTML中使用:

和 都可以完成文本内容的加粗,

 和  都可以完成文本的倾斜,

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

 

4、P标签，为段落标签

内容

，它的作用在于给页面文本，进行段落分配。

 

5、上下标签

^内容  为上标标签

_内容  为下标标签

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

 

6、换行

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

 

7、分割线

---

用于定义文本分割线

 

8、内容标题定义

到

主要用来定义文本内容标题的主体标记，

级别最高，

级别最低，HTML中，作为标题来讲，每个标题的重要性有大有小，所以它认为

所定义的标题最重要，其他的依次递减

 

9、排序列表

如果HTML中，需要对文件或者图片进行排序的，我们可以使用无序列表

，有序列表
两种方案

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

 

1）无序列表：

    
    
JAVA
    
c系语言
        

            
c++
            
java
        
    
    
c++
    
c#
    
php
    
.net

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

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

 

2）有序

    
    
    
JAVA
    
c系语言
        

            
c++
            
java
        
    
    
c++
    
c#
    
php
    
.net

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

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

 

3）自定义列表

   
计算机
   
用来计算的仪器 ... ...
   
显示器
   
以视觉方式显示信息的装置 ... ...

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

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

 

10、网页中图片

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

支持最多的是GIF,JPEG

 

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

 

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

 

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

格式：

src	图像地址
alt	图像的替代文字
title	鼠标悬停提示文字
width	图像宽度
height	图像高度
例子	alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

 

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

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

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

 

11、address标签

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

    联系人：胡歌
    

    联系方式：1339871223
    

    个人网站：胡帅的个人网站

 

 

12、高亮显示

用于将文字高亮显示

 

13、切换文字方向标签

或用于定义与其他文本不同的方向

例：

    HTML5 提供的新元素可以构建更好的文档结构

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

  HTML5 提供的新元素可以构建更好的文档结构

Rtl表示从右至左

 

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

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

用于引用一些名句，主要用于一大段语句的引用

 

15、预定格式标签

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

 

16、删除线和下线标签

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

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

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

 

17、u标签（下划线）

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

 

18、字体简写

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

例子：

进博会

 

19、超链接

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

 

1）页面间链接

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

 

例子：

无漂白薄皮核桃

 

2）锚链接

锚链接：

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

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

 

创建步骤：

1.创建跳转标记

乙位置

2.创建跳转链接

甲位置

 

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

然后设定跳转连接：

index网页的习大大

 

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

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

 

3）功能性链接

如：QQ、邮箱、MSN

联系我们

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

 

文件下载

下载Excel文档

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

 

20、表格

标签用于制作表格

表格标签

表格

描述

定义表格 定义表格标题。 定义表格的表头。 定义表格的行。 定义表格单元。 定义表格的页眉。 定义表格的主体。 定义表格的页脚。 定义用于表格列的属性。 定义表格列的组。   caption 元素定义表格标题。 caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。   1）基本语法：              < th>第一列表头                  ……                                       ……                                       ……      第二列表头 第1个单元格的内容 第2个单元格的内容 第1个单元格的内容 第2个单元格的内容 table表示表格标签，th表示表头，tr表示行标签，td表示单元格标签 table属性：使用width和border设置表格的宽度和边框；cellpadding创建单元格内容与其边框之间的空白、cellspacing增加单元格之间的距离， bgcolor设置整个表格的背景，更多属性上网查看   2）对齐方式： 表格对齐方式： 默认对齐、居中对齐、左对齐、右对齐 单元格对齐方式： 水平对齐方式、垂直对齐方式 属性 值 说明 align 水平对齐方式 left 左对齐 center 居中对齐 right 右对齐 valign 垂直对齐方式 top 顶端对齐 middle 居中对齐 bottom 底端对齐 baseline 基线对齐   3）合并单元格 跨列：                         ......       ...... 单元格内容 单元格内容 colspan="n"：所跨的列数   跨行：                            rowspan="n"：所跨的行数   21、form表单 定义： 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。   总的来说： 表单主要用于数据的提交获取 HTML 表单用于收集用户输入   注释： form 元素是块级元素，其前后会产生折行。 目前所有主流浏览器都不支持 标签 1）基本语法：      名字：        密码：                         method：规定如何发送表单数据，值有：（GET POST PUT DELETE HEADER OPTION ），常用值：get  | post action：表示向何处发送表单数据 在实际网页开发中通常采用post方式提交表单数据   2）表单元素： 元素标签 属性 说明 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时，指定按钮是否是被选中   文本框 text：表示文本框  name：指定文本框名称 value：指定文本框初始值  size：指定文本框长度 maxlength：指定文本框可输入最大字符   密码框 password：表示密码框  name：指定密码框名称 size：指定密码框长度   单选按钮 男 女 type=”readio”表示单选按钮框   name：多个readio单选按钮指定的值必须相同，才能添加进同一组，进行单选 checked：表示目前单选按钮选中的状态，及是否默认被选中 value：指定单选按钮的值，这个值不显示，后面在外的”男”和”女”供用户观看   复选框 运动 聊天 玩游戏 checkbox：表示复选框 name：多个checkbox复选框指定的值必须相同，才能添加进同一组，进行复选 checked：表示目前复选框选中的状态，及是否默认被选中 value：指定复选框的值，这个值不显示，后面在外的”运动”和”聊天”和”玩游戏”供用户观看   按钮 resert：重置按钮 submit：提交按钮 button：普通按钮，如果定义在表单之外的按钮，直接用button image：以图片作为按钮 value：按钮上显示的值 src：图片路径   文件域       file表示文件，是一个文件按钮，点击就可以选择文件，name是在按钮上显示的文本   隐藏域 hidden表示隐藏域，主要是隐藏不可见，当满足我们设定条件的时候可改变它的类型让它可见   只读和禁用 readonly表示只读，disabled表示禁用   ------表单元素标注 定义： 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。   使用标签的for属性与表单元素的id属性相结合控制单击该标签时，对应的表单元素自动获得焦点或者被选中 如： <label for="male">Malelabel> <input type="radio" name="sex" id="male" /><br /> <label for="female">Femalelabel> <input type="radio" name="sex" id="female" /><br/> for表示连接到的表单元素id，id是设置表单元素的id；这两行代码相当于点击lable的内容就会和radio单选按钮相关联，radio单选按钮就会相应的选中   元素标签（下拉框） 表示下拉框 语法： 大专 本科 硕士 博士 Size：表示下拉框默认显示的行数，多余的利用下拉查看 selected：表示是否被选中 disabled 只能看不能摸 multiple="multiple" 表示该选择框支持多选，ctrl+鼠标点击可实现多选 更多属性参见网络，属性需要什么选什么   元素标签（文本域）</u></u></u></span></p> <p style="margin-left:0pt;">表示文本域</p> <p style="margin-left:0pt;">语法：</p> <pre class="has"><code class="hljs language-html"><textarea name=”userDesc” rows=”5” cols=”30” maxlength=”150”>文本内容 cols显示的列数，rows显示的行数，maxlength表示最多显示字数   3）给表单添加围栏 介绍： fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 标签没有必需的或唯一的属性。 标签为 fieldset 元素定义标题。   语法：         健康信息     身高：     体重：    要配合 使用，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 的浏览器。 如：直接在ifram中显示内容 在本窗口显示h5.html这个页面   还可以让超链接内容在ifram中显示 如： 第一步：给ifram设置名字属性 第二部：个超链接添加target属性 百度   new : HTML5 中的新属性。 属性 值 描述 align left right top middle bottom 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 frameborder 1 0 规定是否显示框架周围的边框。 height pixels % 规定 iframe 的高度。 longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。 marginheight pixels 定义 iframe 的顶部和底部的边距。 marginwidth pixels 定义 iframe 的左侧和右侧的边距。 name frame_name 规定 iframe 的名称。 sandbox  （5新特性） "" allow-forms allow-same-origin allow-scripts allow-top-navigation 启用一系列对