HTML5入门汇总

前端菜小牛

已于 2022-07-18 17:01:40 修改

阅读量331

点赞数

文章标签：前端 html

于 2022-07-18 14:57:17 首次发布

本文链接：https://blog.csdn.net/nyh126/article/details/125844778

版权

网页组成

HTML5草案的前身名为web Applications1.0,是作为下一代互联网标准，用于取代HTML4与xhtml的新一代标准版本，所以叫HTML5，它增加了新的标签和属性，加强了网页的标准，语义化与web表现性能，同时还增加了本地数据库等web应用的功能。

分类	标签名称	描述
文档声明	<!DOCTYPE>	用于告诉浏览器此文档的类型是什么处于`<html>`标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是`<!DOCTYPE html>`，表示声明一个 HTML5 文档。它不属于 HTML 标签，而是一条指令
文档结构标签	html，head，title，body	（1）html 标签：每创建一个 HTML 文件，都需要创建 html 标签对。除了声明文档类型的代码，其他的所有内容都存放在 html 标签对中；（2） head 标签：定义文档的头部，用来包含网页的配置（例如网页的标题 title，网页的基础配置 meta 都放在 head 中）；（3）title 标签：定义网页的标题，标题内容会显示在浏览器的标签栏上（4）body 标签：定义网页的主体，例如：网页中的图片、文字等
功能标签	meta	元标签，用来表示网页的基础配置

块级元素可独占一行，默认自上而下顺序排列，可以设置宽和高

标签名称	描述
h1~h6	一级标题～六级标题
p	段落标签，描述网页中段落内容
div	页面区域的划分。类似容器用来放某个区域的内容
ul，ol	有序列表，无序列表
li	列表项，同ul，ol配合使用
dt，dd	定义列表中的项目，描述列表中的项目
figure	定义一段独立的内容（不常用）
figcaption	定义 figure 元素的标题（不常用）
form	表单标签，里面包含很多搜集信息的表单元素，如输入框，复选框等
table，canvas	定义 HTML 表格，通过脚本（通常是 JavaScript）来绘制图形

html5 新增语义化标签

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

标签名称	描述
a	超链接标签，用于从一张页面链接到另一张页面
span	用来组合文档中的行内元素，一般用来包裹文字
label	为 input 元素定义标注（标记）label 可设置 for 属性
b，u	字体加粗标签，下划线文本标签（不常用）
i，strong	斜体文本标签，用于强调文本的标签字体会加粗（不常用）
em	用于强调文本的标签，字体变成斜体（不常用）
mark	突出显示文本的标签，字体会有背景颜色，默认的是黄色（不常用）
datalist	标签/控件，需要结合 option 标签使用（不常用）

可设置宽和高，但是不独占一行

标签吗名称	描述
img	图片标签，用于网页中嵌入图片
audio	音频标签，用于页面中引入音频
video	视频标签，用于在页面中引入视频
input	定义用户可输入数据的输入字段。例如登录页面的用户名和密码框，都是使用 input 标签
select	定义下拉列表
option	定义下拉列表项，需要与 select 配合使用（块元素，写在这里是因为它需要跟 select 标签一起使用）
textarea	定义多行文本框，常用于留言框、备注框等

属性名称	描述
type	用来定义表单元素的类型。属性值如下：（1）text：单行文本输入框（2）radio：单选按钮（3）checkbox：复选框（4）password：密码框（5）button：普通按钮，也可以直接写成 button 按钮，例如：`<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	表示必填字段，约束某项内容是必填项，比如规定”用户名“项，是必填项

关注