用于表示盒子的html标记是,1 | 运维开发应该掌握的 HTML 常用标签

。

在一般情况下，一个元素由一对标签表示：开始标签与结束标签。元素如果含有文本内容，就被放在这两个标签之间。

我是段落标签，用来表示一段文字

在开始与结束标签之间也可以嵌套另外的标签元素，包括标签与文本的混合。

这些嵌套的标签是父与子的关系。

6. 标签分类

a. 从书写方式分，标签分为:

自闭合标签

自闭合标签，只有一个大于号和小于号组合而成，后面的反斜线可以有，也可以没有。建议都有。

主动闭合标签

主动闭合标签都是成对儿出现的,并且后面的必须加反斜线 /,以表名此标签内容结束。

主动闭合标签

b. 从元素(标签) 在页面中所占据的位置空间来分，可分为：

块级元素

在整个页面上，无论自己内容的多少，自己都会独占一行。

内联标签，不独占一行，只占据自己宽度大小的空间

标签分类

HTML5 源码

标签分类

我就是霸道，这一行都是我的地盘

左青龙

我最好说话了，是兄弟站在我的两边

右白虎

常见块级标签有：

到

常用的内联标签有：

7. 认识标签的属性

几乎在所有的标签中都可以针对标签的种类，设置自身的属性；如：

这里 class 就是这个 a 标签的属

性名，这个属性叫做类属性。

widget-controls 是属性的值，也就是类的名字，规范要求用双引号包裹起来。

在一个HTML文本中同一个类的名字可给多个标签使用。

具体有哪些属性，下面会针对不同的标签来说明。

二、HTML元素之间的关系结构

了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

My title

Some text content

当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

上述 HTML 对应的 DOM 节点树如下图所示：

image.png

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

三、 标签及其属性详解

先下面从一下几个部分对标签分别进行介绍

结构标签

头部标签

功能标签

文本文字

超链接

多媒体 (html5 中新增)

表单

1. 结构标签

在前面第 1.3 小节 HTML 文档总体结构 中，已经介绍了总体结构标签，这里就不再赘述。

在这里注意是说一下 HTML5 中心增的结构标签，就是有语义化的标签。

也可以是说是一看到标签名称，就知道是啥意思。

结构化标签

示例代码

Document

标题党1

The article element represents a complete, or self-contained,

composition in a document, page, application, or site and that is,

in principle, independently distributable or reusable, e.g.

in syndication. This could be a forum post,

a magazine or newspaper article, a blog entry,

a user-submitted comment, an interactive widget or gadget,

or any other independent item of content.

Each article should be identified, typically by including

a heading (h1–h6 element) as a child of the article element.

标题党2

The article element represents a complete, or self-contained,

composition in a document, page, application, or site and that is,

in principle, independently distributable or reusable, e.g.

in syndication. This could be a forum post,

a magazine or newspaper article, a blog entry,

a user-submitted comment, an interactive widget or gadget,

or any other independent item of content.

Each article should be identified, typically by including

a heading (h1–h6 element) as a child of the article element.

标题党3

The article element represents a complete, or self-contained,

composition in a document, page, application, or site and that is,

in principle, independently distributable or reusable, e.g.

in syndication. This could be a forum post,

a magazine or newspaper article, a blog entry,

a user-submitted comment, an interactive widget or gadget,

or any other independent item of content.

Each article should be identified, typically by including

a heading (h1–h6 element) as a child of the article element.

表示底部，一般放置版权信息等

2. 头部标签及其属性

就是在 标签中定义的标签。

网页标题图标 shark.ico

源数据 meta

3. 功能标签

a. 盒子标签 div

首先它是一个块级元素的标签。

div 标签通常作为一个盒子或者说容器，可以把其他的标签放在里面，在 html5 之前通常用于网页的布局。

网页头部

网页内容

网页底部

现在大部分情况下只是作为一个盒子容器，存放其他功能标签。

姓名

年龄

地址

b. 文本文字

h1 到 h6 块元素，主动封闭，用于书写标题内容， 字体有大变小。

h5 中新增了 hgroup 标签，假如网页上出现了连续的 h 标签，可以把这些标题标签放到 hgroup 中。

标题一

标题二

p 表示文章中的一个段落, 块级元素

段落内容一

段落内容二

span

我也是比较纯洁的标签，没有太多的限制，比较有利于进行CSS的修饰，同时我是内联标签

我是不会换行的，同时我是内联标签

换行标签：

可以在内联标签中或者在一个块标签内换行

其实几乎所有的成对儿出现的标签内都可以写文字内容。

c.多媒体

示例图片

妹子meizi.jpg

img 图片

src 　　 图片文件的本地绝对或者相对路径，通常情况下都是一个 url 地址；

alt 　　假如图片不能显示，则显示这里的文字,跳转功能不受影响；

title 　当鼠标放在这个图片上时，会出现的内容

audio 音频播放， h5 新增

无法播放，浏览器不支持

上面示例中的视频容量稍大，根据网速，需要等待几分钟

src 指定文件地址或 url

controls 显示播放控件

loop 循环播放

video 视频播放， h5 新增

对不起！ 您的浏览器不支持，请升级

autoplay 是自动播放，谷歌浏览器不支持

解决办法同时加上 `muted` 属性，但是默认是静音状态

d. 超链接

a 标签，同时它是一个内联标签

可以设置跳转,就是在页面上点击它，会跳转到目标页面(称为重定向)

或者同页面的另一个标签处(称为锚)

href 指定跳转到地址

targe ="_blank" 是在一个新的标签页面打开跳转到目标页面, 默认是在当前页面跳转。

e. 表单和表单中的元素

重点讲解

form 用于向后台服务端提交数据，比如注册时候的注册信息等。块级元素，使用频率较高，重点掌握。

姓名：

action 把 input 标签的数据提交到哪儿，通常是一个 url

method 把 input 标签的数据提交的方法：

GET 方法, 把提交的内容放到请求的 url 地址后面， 数据被封装在请求头中，后台接收到的数据内会是一个字典的形式

POST 方法,把提交的数据放到请求体中，后台接收到的数据也是一个字典的形式

enctype="mutipart/form-data" 是提交文件或图片专用的属性

form 标签中通常会有如下标签，用于获取用户输入的信息。

input 输入普通文本，内联元素

input 用于设置提交表单数据，用于前端用户和后台交互，这个标签也是内联标签。很重要，必须掌握。

type 定义输入内容的类型

text 是普通的文本输入框

password 密码输入框，输入的内容在输入框中看到的是小圆点

submit 提交按钮

name 定义一个 key

value 可以定义一个默认值值 最终后台接收到的数据应该是这种形式:

{"user_name": "shark"}

input 提交文件

上传文件/图片，一定要在form标签开头出设置属性:enctype="multipart/form-data"

input 单选框

实现方式把 type 属性的值设置为 radio ，并把 name 属性的值设置为相同，就可以实现互斥，这种情况下只能选一个。

单选框

性别：男

女

checked="checked" 设定选中。

value 的值会被提交到后台服务器，比如上例选择了 男 , 后台收到的数据会是： {"gender": "1"}

input 实现多选框,

多选框

千锋云计算好程序员

千锋云计算就业班

千锋网络安全班

select 下拉框

image.png

选择你所在的城市：

北京

上海

郑州

城市，按住ctrl键可多选：

北京

上海

郑州

textarea 提交多行文本

页面上显示一个边框，里面的有默认的内容，鼠标拉动边框的边缘，可以改变其大小

默认内容

input 关于提交到类型

submit 点击后会把 form 便签中的所有以上提到的数据提交到后台。

button 点击后不会通过 form 提交到后台，通常会绑定一个 javascript 事件。

HTML5 中也新增了 input 标签的属性(自修)

姓名:

邮箱:

网址:

日期:

时间:

数字:

搜索:

f. 列表

ul 和 ol 用于在页面中呈现出一个列表，块级元素。

以 点 标识的菜单

菜单一

菜单二

有序列表

菜单一

菜单二

菜单一

菜单二

h. 表格

table 用于呈现一个表格，块级标签，使用频率较高，重点掌握。

表格

序号

主机名

端口号

1

host1.com

80

2

host2.com

80

j. label + input 触发获取焦点

当在页面上用鼠标点击 lanbel标签定义的内容时(这里是：用户名)，输入框就会被自动选中

用户名