百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

赶紧收藏,头条超详细Web前端入门到精通必学的标签及属性大全

myzbx 2025-02-15 16:36 54 浏览

Web前端入门到精通必会的标签及属性,这是老师花时间总结了图片上的内容,做成了网页版,以便查询使用 ,如果对你学习有帮助,记得收藏点赞评论关注支持一下哦!

文档声明,文档结构标签,功能标签

文档声明:

文档结构标签:html,head,head,body

功能标签:mete

单词表

分类

单词

描述

文档声明

用于文档的声明

声明位于文档中的最前面的位置,处于 标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是 ,表示声明一个HTML5文档。

注意它不属于HTML标签,而是一条指令

文档结构标签

html

每创建一个HTML文件,都需要创建html标签对。除了声明文档类型的代码,其他的所有内容都存放在html标签对中

head

定义文档的头部,用来包含网页的配置(例如网页的标题title,网页的基础配置meta都放在head中)

title

定义网页的标题,标题内容会显示在浏览器的标签栏上

body

定义网页的主体,例如:网页中的图片、文字等

功能标签

meta

元标签,用来表示网页的基础配置(如设置页面关键字和描述,字符编码的声明)


块级元素:

块级元素可以独占一行,可以设置宽高。有关块级元素以及后面的内联元素,在学习了后面的css相关课程之后会有所了解

包含标签:h1~h6,p,div,ul li,ol li,dl dt dd,figure,figcaption,form

单词表

单词

描述

h1

一级标题

h2

二级标题

h3

三级标题

h4

四级标题

h5

五级标题

h6

六级标题

p

段落标签,用来描述网页中的段落内容

例如:一篇文章,每一个段落都可以使用一个p标签;或者一段比较长的文本,也可以使用p标签

div

用于页面区域的划分。它就像一个容器,用来放某一个区域的内容

例如:整个网页分成头部、主体和尾部,那么头部、主体、尾部的内容,要分别放在一个单独的div中

ul

定义无序列表

ol

定义有序列表

li

定义列表项,与ul或者ol配合使用。示例:

  • 列表项一
  • 列表项二

dl

定义列表标签,配合dt和dd一起使用。示例:

dt

定义列表中的项目

dd

描述列表中的项目

figure

定义一段独立的内容(不常用,了解即可)

figcaption

定义figure元素的标题(不常用,了解即可)

form

表单标签,里面包含很多搜集信息的表单元素,如输入框,复选框等


内联元素:

内联元素不会自占一行,与其他内联元素在同一行显示,且宽高由内容撑起。

包含标签:a,span,b,u,i,strong,em,mark,label,datalist

单词表

单词

描述

a

超链接标签,用于从一张页面链接到另一张页面

span

用来组合文档中的行内元素,一般用来包裹文字

b

字体加粗标签(不常用,了解即可)

u

下划线文本标签(不常用,了解即可)

i

斜体文本标签(不常用,了解即可)

strong

用于强调文本的标签,字体会加粗(不常用,了解即可)

em

用于强调文本的标签,字体变成斜体(不常用,了解即可)

mark

突出显示文本的标签,字体会有背景颜色,默认的是黄色(不常用,了解即可)

label

为 input 元素定义标注(标记)。label可设置for属性,用于把 label 绑定到另外一个元素。即让label的for属性值与input的id属性值相同时(id属性在后面会学到,暂时了解)。当点击label 元素时,浏览器就会自动将焦点转到和标签相关的input元素上。示例:

(上面的例子建议练习并在浏览器中测试,能更直观的查看效果)

datalist

标签/控件,需要结合option标签使用(不常用,了解即可)


特殊的内联元素:

可以设置宽高,但不独占一行

包含标签:img,audio,video,input,select,option,textarea

单词表

分类

单词

描述

特殊的内联元素

(可以设置宽高,但不独占一行)

img

图片标签,用于在网页中嵌入图片

audio

音频标签,用于在页面中引入音频

video

视频标签,用于在页面中引入视频

input

定义用户可输入数据的输入字段。例如登录页面的用户名和密码框,都是使用input标签

select

定义下拉列表

option

(块元素,写在这里是因为它需要跟select标签一起使用)

定义下拉列表项,需要与select配合使用。option标签中,可以设置value值。示例:

textarea

定义多行文本框,常用于留言框、备注框等

标签中的属性

lang

html标签的属性,用来标记网页的语言;常见属性值有:"en"和"zh";en代表英语, zh代表中文

charset

meta标签的属性,声明页面文档使用的字符编码类型

常用的属性值有:UTF-8和GB2312

type

修改无序列表与有序列表默认的前导样式(已被废弃,了解即可)

1、type属性写在无序列表中,属性值有:

(1)disc:默认值,实心圆样式

(2)circle: 空心圆样式

(3)square:实心方块样式

2、type属性写在无序列表中,属性值有:

(1)1:默认值,数字编号

(2)A:大写英文编号

(3)i:小写罗马数字编号

(4)I:大写罗马数字编号

(5)a:小写英文编号

start

有序列表的属性,指定列表编号的起始值,能修改有序列表标签默认的前导样式(不常用,了解即可)

reversed

有序列表的属性,指定列表中的条目是否倒序排列的(不常用,了解即可)

src

(1)img标签的属性,指定图片的路径

(2)audio标签和video标签也可以设置src属性,指定音频、视频的路径

alt

img标签的属性,用来对引入的图片进行文本描述

width

规定元素的宽度。此属性不常用,了解即可。后续学习css课程,会使用css样式设置元素宽度

height

规定元素的高度。此属性不常用,了解即可。后续学习css课程,会使用css样式设置元素高度。注意,height或者width如果省略其中一个属性,则按照图片原始比例缩放图片

href

a标签属性,规定该链接要跳转到目标页面的地址

title

a标签属性,设置鼠标悬停的文本

target

a标签属性,规定在何处打开链接文档;如果属性值为blank或_blank,会打开新的标签页

controls

audio/video的属性,用于显示播放控件

autoplay

audio/video的属性,设置音频/视频自动播放

loop

audio/video的属性,设置音频/视频可以循环播放

class

所有标签都可以使用这个属性,用来定义元素的类名(后续学习css课程,会有详细的讲解)

action

form标签的属性,用来设置form表单的数据要提交到哪个地址。提交到哪个地址,后端开发会告诉我们(不常用,了解一下。提交数据常用ajax,后面会学习到的)

method

form标签的属性,用来设置表单的提交方式,常用的方式有get或post(不常用,了解即可)

rows

textarea标签属性,设置多行文本框有多少列

cols

textarea标签属性,设置多行文本框有多少行

list

datalist控件的属性,二者结合,可以与输入框绑定,为输入框设置备选项(不常用,了解即可)

border

边框属性,可为table添加边框

border-collapse

css样式,通常给表格设置border-collapse:collapse;让表格边框合并,成为单线表格;

table{

border-collapse: collapse;

}

colspan

表格标签的属性,实现跨列合并的效果,用来设置td或th跨列合并

rowspan

表格标签的属性,实现跨列合并的效果,用来设置td或th跨行合并

cellspacing

设置表格单元格内容与边框之间的间隙(不常用,了解即可)

cellpadding

设置两个单元格之间的间隙(不常用,了解即可)

转义字符:


单词表

分类

单词

描述

转义字符

表示空格符号

`<`

表示小于号“<”

`>`

表示大于号“>”

`?`

表示版权符号“?”

区块标签:

html5新增的语义化标签

包含标签:header,nav,main,aside,article,section,footer

单词表

分类

单词

描述

区块标签

(html5新增的语义化标签)

header

定义页头

nav

定义导航

main

定义页面的主体区域

aside

可用作文章的侧栏

article

可用作文章的内容

section

可用作文档的区域块,类似于div

footer

定义页脚

input元素中的属性:

包含标签:type,value,name,checked,placeholder,disabled,max,min,require

单词表

分类

单词

描述

input元素中的属性

type

用来定义表单元素的类型。属性值如下:

(1)text:单行文本输入框

(2)radio:单选按钮

(3)checkbox:复选框

(4)password:密码框

(5)button:普通按钮,也可以直接写成button按钮,例如:

(6)submit:提交按钮

(7)reset:重置按钮

(8)color:颜色控件(不常用,了解即可)

(9)date:日期控件

(10)time:时间控件

(11)email:电子邮件输入控件

(12)file:文件选择控件,需要上传本地文件时,可以使用它

(13)number:表示数字输入控件

(14)range:表示拖拽条(不常用,了解即可)

(15)search:t表示搜索框(不常用,了解即可)

(16)url:表示网址输入控件

value

用于为input 元素设定值,value值一般是给后端发送数据时使用,后续学习了相关课程就会了解

name

规定 input 元素的名称

checked

用来设置单选按钮、多选按钮的默认选中项

placeholder

表示提示文本,用来设置输入框的提示信息,告诉用户该输入框需要输入什么内容

disabled

用于禁用input元素,表示只读

max

max表示最大值,表示数字输入控件(即type="number"的input元素)允许输入的最大值

min

min表示最小值,最小值,表示数字输入控件(即type="number"的input元素)允许输入的最小值

require

表示必填字段,约束某项内容是必填项,比如规定”用户名“项,是必填项

表格标签:

包含标签:table,tr,td,th,thead,tbody,tfoot,caption

单词表

分类

单词

描述

表格标签

table

表格标签

tr

表格行

td

表格列

th

标签,可替代td标签,用来设置表格的标题

thead

定义表格头部

tbody

定义表格主体内容

tfoot

定义表格尾部

caption

设置表格的标题

内联文本语义标签

单词表

分类

单词

描述

联文本语义标签

abbr

HTML Abbreviation 元素 () 表示,title属性为缩写提供扩展或描述。
用法: WHO 成立于1948年。

mark

HTML 标记文本元素 () 表示由于标记的段落在封闭上下文中的相关性或重要性而被标记或突出显示以供引用或注释的文本。
用法:

arry老师是最帅的 ^_^

cite

HTML Citation 元素 () 用于描述对所引用创意作品的引用,并且必须包含该作品的标题
用法:

Mona Lisa Painting by Leonardo da Vinci

small

独立于其风格表示,HTML 元素代表旁注和小字,例如版权和法律材料。默认情况下,它会将其中的文本呈现小一种字体大小,例如从小到 x-small。
用法:

A very small piece of text.

time

HTML

The library can be visited from to from monday to friday.

接下来我会和大家分享更多前端的学习总结知识体系,希望大家喜欢!记得点赞收藏哦!

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 &quot;小贱贱&quot;韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...