前端入门2-HTML标签

声明

本系列文章内容全部梳理自以下四个来源:

《HTML5权威指南》

《JavaScript权威指南》

MDN web docs

Github:smyhvae/web

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

正文-HTML标签

本文接着来学习 HTML 的基本标签,下面是我自己对标签进行的划分,《HTML权威指南》中将标签类别划分成了很多种,比如:内容分组,文档分节,表单七七八八等等。

但我按照自己个人的理解习惯,对总的标签划分成三类:修饰文档结构的标签、修饰文本内容标签、容器类标签。

修饰文档结构的标签大多用于表示一份标准、完整的HTML文档的一些标签,以及可放于 内的一些标签。

修饰文本内容标签,大意是说,这些标签是直接用于标记文本内容,赋予文本内容某些语义行为,比如 赋予超链接语义, 赋予了一级标题语义等等。这个类别有些类似于 Android 中表示某个 View 的标签,通俗来讲,这些标签可直接使用在文本内容上了。

容器类标签,并不是真正意义上的容器,而是说,这类标签主要的作用是用来包含其他标签的,但并不是说,只能用来包含其他标签,也可直接对文本内容标记。如 , 这类表示某一块区域的标签。

我自己个人将其常用的标签划分成三大类,当然不是很准确,书中划分得更细,但结合 Android 中一些共性的概念,我个人觉得划分成这三类后,我较容易理解各个标签用途:

1. 修饰文档结构

首先来看份 HTML 的大体上的基本结构:

所以,这些标签用途基本就是用于构建一份基本的 HTML 文档结构,下面看看具体介绍:

准确的说, 并不是 HTML 标签,它是声明 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

如 H5中用法:

HTML 4 中用法:

每一份 HTML 文档内容的根节点,表示文档内容的开始

文档内容包括两部分:头部声明 和文本内容

HTML 文档的头部声明,用于声明该文档的一些属性,以及一些元数据, 内部的内容是用于给浏览器看的,并不是用于给用户看的,浏览器通过 信息,知晓这份文档引用了哪些外部资源文件,使用的哪些属性。

可在 中使用的标签并不多:

标签用于声明文本内容,该标签内的内容都是用于展示给用户看的,所以基本所有标签都可以在 内,浏览器解析相应的标签,并根据 CSS 作用到每个对象上,生成网页呈现给用户。

以上是 标签的三种用法,指定绝对路径的链接,指定相对路径的链接,指定文档内的链接。

也就是说, 标签既可以用于指定页面间的跳转关联,也可以指定页面内的跳转。

标签设置的基准 url 会影响到相对路径的拼接,默认以当前 HTML 文档的路径作为基准路径。

另外新页面的打开方式也支持多种形式配置,如:

通过 target 属性来声明新页面的打开方式,target可以取值如下:

&

换行标签

:表示将后续内容转移到新行上

:H5 新增的,表示当长度超过当前浏览器窗口的内容适合在此换行。

两者都是换行,前者是强制换行,后者是建议在这里换行,但什么时候换行,由浏览器根据当前窗口大小决定,后者通常用于指定单词的换行。

用法

标签用于表示段落,标签围起来的文本内容表示一个段落。

因为浏览器会忽略所有的空格、缩进、换行,最多只会解析成一个空格,所以,即使文本内容的段落结构很好,但经由浏览器解析出来后的文本内容全部都挤到一堆。

因此,

段落标签还是很有必要的。

可以用此来标记哪些文本内容作为一个段落。

用法见上例。

&

标签用于保留源文档中的格式。

标签用于表示代码块。

由于浏览器会合并空白字符,忽略掉换行,导致如果文档中含有代码块时显示不符合开发工具下的代码格式风格。

此时,可以借助

标签和 一起使用,来阻止浏览器合并空白字符,达到保留代码格式的目的。

用法

&

标签用于表示有序列表,

标签用于表示列表中的每一项。

用法

既然是有序列表项,那么序号的起始以及样式是支持通过属性设定的,如下:

通过 start 属性设置起始的编号,通过 type 属性设置编号的样式,可设置的 type 样式如下 :

如果要实现编号是非连续的,那么可以借助

标签的 value 属性实现 :

注:每个 ol 列表项都是独立存在,编号默认都从 0 开始,如果想实现不同列表项的编号连贯,或者想以跨度 2 或其他数递增,那么只用标签属性实现局限很多。这时,可考虑通过 CSS 的 ::before 选择器实现,具体实现后续再说。

&

标签用于表示无序列表,

标签表示列表里的每一项.

用法

因为是无序列表,所以用法比起有序列表 简单很多,无需使用任何属性,直接用无序标签

包含一系列子项

即可。

至于,每一项前的样式,可通过 CSS 样式,通过 list-style-type 属性实现,以上样式对应的 CSS:

~

标题标签,对应一级到六级标题。

至于每个标题具体字号样式如何,取决于各个浏览器或者网站。

表格标签,但貌似现在不常用了。

HTML 文档做一个表格挺复杂的,涉及的标签很多,如 , , 等等。

但根节点总是

& &

类似于 HTML 文档有一些专门用于表明文档结构的标签,表格同样有一些用于指示表格结构的标签。引入表格结构标签,是为了更好的区分出各个单元格的含义。

比如, 标签用来表示表头类型的单元格,但不管是第一行的表头,还是第一列的表头,用的都是 ,那如果还想继续划分这个表头是属于第一行或者第一列时该怎么做呢?

所以,引入了一些结构性标签有便于对表格各个单元格更加具体的细分,以满足各种复杂场景。

如果 标签不放在 标签内,那么它就需要指定绑定的是哪个 表单,通过 form 属性绑定 form 表单的 id,所以这种场景下,form 表单必须设置 id 属性值。

标签是用于收集用户输入的标签,因此它的形态有各自各样,可通过属性 type 来设置。

另外,它有很多属性,每个属性都有各自的含义,一些基本的属性需要了解一下。

name 属性,用于设置该 的 key 值,value 值就是用户的输入,key 和 value 组合成表单中的一项用于发送给服务端。如 :

表明有两个 控件,一个 key 值为 name,一个 key 值为 city,收集用户输入后组成表单上传。

不同 type 的 作用不同,分别来看下:

type="text"

默认的 的 type 值,在浏览器中呈现一个单行文本输入框。

这种类型下,还可以配合一些属性使用,如

placeholder: 数据提示,类似于 hint 功能

list: 结合 标签使用,用于给出一系列输入提示

其他还有一些属于用于设置 是否可用,是否聚焦,宽度,输入最大长度等等。

示例:

type="password"

这类型的 在浏览器上的呈现跟 type=”text” 类型一致,功能也基本一致,唯一的区别就是这是个密码框,也就是当用户输入数据时,在浏览器上是以掩饰字符替换,如···

type="submit"

type="reset"

type="button"

这三种类型的用途跟 标签一样,所以想要设置按钮,用 也可以,唯一的区别就是, 是虚元素,也就是它没有标记任何文本内容,而 是可以标记文本内容的 。

type="hidden"

该类型 浏览器会将其隐藏,不显示在网页上。通常是用于一些需要传给服务端的数据,但又没有必要让用户知道的场景下的使用。如:

如上,用户只需输入名字信息,但提交给服务端时还需要一个 name_id 信息,这个数据没必要让用户知道,此时可以通过 hidden 来实现。

type="image"

该类型的 其实就是个图片按钮。跟 标签的区别也就是,这个是可点击的, 只是将图片嵌入进来:

当在 form 表单中有 type=”image” 类型的 时,点击这张图片,发送给服务端的信息是点击的坐标点。

type="file"

该类型的 可以让用户选择本地文件:

type="checkbox"

复选框,示例:

type="radio"

多选框,通常配合 一起使用,将同类型的集合管理在一起。当然,不用也可以。

type="number"

type="email"

type="tel"

type="url"

type="color"

...

这类 type 的 ,用途只是用于限定用户的输入格式,比如 number,这个输入框就只能输入数字。

HTML 文档中是可以嵌入其他 HTML 文档的,通过

通过src属性设定目标HTML文档地址,width,height设置区域大小。

基本每个网页都会有图片,在 HTML 中嵌入一张图片用 标签,跟 Android 中的 ImageView 控件很类似,同样需要指定图片来源,区域宽高。

3. 容器类

容器类标签是我自行对其进行的划分,并不是说,这类标签只能用于当容器使用,只能用于包含其他标签,而是说,常见的用法,这类标签基本都是表示具有某种含义的某一块区域,具体这块区域内既可以包含各种标签,也可以直接是文本内容。

&

都是通用标签,没什么具体的语义

: 标签通常用于标记段落中的某块文本内容,然后通过该标签,可以单独为这块文本内容增加 CSS 样式

: 标签一般用于,将屏幕某块区域划分出来后,用该标签标记后可通过选择器作用自定义的 CSS 样式。

标签用于表示文档中的某一节,其实也就是某一块区域,这块区域有自己单独独立的含义。通俗的理解,有些类似于第一节,第二节的概念。

每一节

都是相互独立的,因此方便各节里面独自使用 和 。

&

: 标签表示某一节的首部,像某些网页通常会有一些 Logo 之类的首部信息。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181112G0E0XW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券