更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

Web前端开发知识之HTML5常用标签简介

  • 发布:Web前端培训
  • 来源:Web职场
  • 时间:2020-11-12 16:10

今天小编要跟大家分享的文章是关于Web前端开发知识点之HTML5常用标签简介。正在从事Web前端工作和学习的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。

Web前端开发知识之HTML5常用标签简介

HTML5常用标签

HTML5的标签有很多很多,如果全部学完很难,我在这里介绍一些比较常用的标签,我把它们大致分成7类:文件标签、文本标签、图片标签、列表标签、链接标签、表格标签和表单标签。

一、文件标签

文件标签是构成HTML最基本的标签。我在这里讲解四个最基本的文件标签。

①html标签

html标签是HTML文档的根标签,用来告知浏览器其自身是一个HTML文档,<html>与</html>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

②head标签

head标签是头标签,它用于定义文档的头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等,它描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。

③title标签

title标签是标题标签,它可定义文档的标题。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

④body标签

body标签是体标签,它定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等)。

二、文本标签

文本标签就是和文本有关的标签,我在这里简单介绍几种文本标签。

①注释标签

注释标签(<!--...-->)用于在源代码中插入注释。注释不会显示在浏览器中。可以使用注释对代码进行解释,这样做有助于在以后的时间对代码的编辑。当编写了大量代码时尤其有用。

②h1~h6标签

h1~h6标签是标题标签,它可以定义标题,从h1到h6字体不断变小。

③p标签

p标签是段落标签,它可以定义段落。它会自动在其前后创建一些空白。浏览器会自动添加这些空间,也可以在样式表中规定。

④br标签

br标签是换行标签,它可以插入一个简单的换行符。br标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。

⑤hr标签

hr标签是分隔线,它可以在HTML页面中创建一条水平线,可以在视觉上将文档分隔成各个部分。

⑥b、i标签

b、i标签分别是加粗、斜体标签。

三、图片标签

图片标签比较简单,只有一个img标签,我来说一下img标签常用的属性。

src属性:规定显示图像的URL。

alt属性:规定图像的替代文本。当图像加载失败时就会显示该文本。

align属性:规定图像的对齐方式。

width属性:设置图像的宽度。

height属性:设置图像的高度。

四、列表标签

列表标签也比较常用,它包括有序列表和无序列表。

①有序列表

ol标签用来定义有序列表。

li标签用来定义列表项。

type属性规定在列表中使用的标记类型。属性值包括1、A、a等。

②无序列表

ul标签用来定义无序列表。

li标签用来定义列表项。

type属性规定在列表中使用的标记类型。属性值包括disc、square、circle。

五、链接标签

链接标签也比较简单,只有一个a标签,它可以定义超链接,用于从一张页面链接到另一张页面。下面介绍一些属性。

href属性:这是超链接最重要的属性,它规定链接指向的页面的URL。

target属性:规定在何处打开链接文档。

· _self属性值(默认):在当前页面打开;

· _blank属性值:在空白页面打开。

六、表格标签

HTML表格需要使用table标签来定义。

简单的HTML表格由table元素以及一个或多个tr、th 或td元素组成。tr元素定义表格行,th元素定义表头,td元素定义表格单元。

更复杂的HTML表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。

表格的常用属性比较多,下面列举几个:

align属性:规定表格相对周围元素的对齐方式。

bgcolor属性:规定表格的背景颜色。

border属性:规定表格边框的宽度。

cellpadding属性:规定单元边沿与其内容之间的空白。

cellspacing属性:规定单元格之间的空白。

width属性:规定表格的宽度。

七、表单标签

表单是用于采集用户输入的数据的,用于和服务器进行交互。form标签用于为用户输入创建HTML表单。表单标签有两个常用的属性:

action属性:规定当提交表单时向何处发送表单数据。

method属性:规定用于发送form-data的HTTP方法。包括两个属性值:

get属性值:请求的参数会在地址栏显示;参数大小有限制;不太安全。

post属性值:请求参数封装在请求体中;参数大小没有限制,较为安全。

表单标签中通常会带有表单项标签,比如input、select、textarea等。

①input标签

input标签用于搜集用户信息。根据不同的 type属性值,输入字段拥有很多种形式。

· text属性值(默认):定义单行的输入字段,用户可在其中输入文本。

· password属性值:定义密码字段。该字段中的字符被掩码。

· radio属性值:定义单选按钮。注意同一组选项中name属性值必须一致。

· checkbox属性值:定义复选框。

· file属性值:定义输入字段和 "浏览"按钮,供文件上传。

· hidden属性值:定义隐藏的输入字段。

· submit属性值:定义提交按钮。提交按钮会把表单数据发送到服务器。

· image属性值:定义图像形式的提交按钮。

· button属性值:定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。

②select标签

select标签可以创建单选或多选菜单。option标签用于定义列表中的可用选项。select标签的常用属性有:

· name属性:规定下拉列表的名称。

· size属性:规定下拉列表中可见选项的数目。

· required属性:规定文本区域是必填的。

· multiple属性:规定可选择多个选项。

③textarea标签

textarea标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,可以通过cols和rows属性来规定textarea的尺寸,不过更好的办法是使用CSS的height和width属性。

以上就是小编今天为大家分享的关于Web前端开发知识之HTML5常用标签简介的文章,希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮助,想要了解更多Web前端知识记得关注达内Web培训官网,最后祝愿小伙伴们工作顺利,学习成功,成为一名优秀的Web前端程序员。

文章来源:原创 凯哥的故事

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:Web前端开发知识点之HTML5概述
下一篇:Web前端开发知识之CSS3概述

Web前端工程师必备的工作技能有哪些

Web前端的主流框架有哪些

零基础小白该如何高效的学习Web前端技术

Web初学者要了解的Web前端小知识

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省