HTML零基础入门教程（详细）

lerrel1

已于 2023-07-18 20:17:40 修改

阅读量461

点赞数

文章标签： html 前端

于 2023-07-18 13:31:50 首次发布

本文链接：https://blog.csdn.net/lerrel1/article/details/131785057

版权

HTML基础

一. HTML前瞻

1.1 四大内核及五大浏览器

Trident（也称IE内核）、webkit、Blink、Gecko。

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

1.2 页面的构成

结构(Structure):html
表现(Presentation):css
行为(Behavior):javascript(脚本语言，用来给页面添加动态效果和动态交互)

1.3 B/S和C/S

B/S结构（Browser/Server，浏览器/服务器模式）

优点：不用安装专门的软件，常见为各种网页，在电脑上使用浏览器就行，常见的有淘宝，京东，百度

C/S结构（Client/Server，客户端/服务器开发模式）

需要安装专用的客户端，常见为各种软件

1.4 URL

它从左到右由下述部分组成：

协议：http通信协议
服务器地址（host）：指出WWW页所在的服务器域名。
端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号
路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。

与端口一样，路径并非总是需要的。

常见的URL：http 超文本传输协议 https安全超文本传输协议 ftp file

1.5 长度单位

1.5.1绝对长度单位

绝对单位不会因为视口的改变而发生改变，是直接固定下来的一个长度

1.5.2相对字体的长度

em:相对于当前元素的font-size值，font-size值发生改变em最终值也会发生改变
rem: 相对于根元素的font-size值，font-size值发生改变rem最终值也会发生改变

1.5.3百分比长度单位

vw：是可视区宽度单位。1vw等于可视区宽度的百分之一。相对于视口的百分比
vh：和vw单位一样，不同的是vh是相对于可视区的高度。
vmin：值是当前vw和vh中较小的值。
vmax：值是vw和vh中的较大的值。

1.5.4离奇的长度单位

百分比

以百分比为长度单位，是相对于父元素的长度值，如果没有父元素，则参考的是body

二. html标签及属性语法

2.1 标签语法规则

2.1.1 html标签是由尖括号包围的关键词

2.1.2 html标签通常是成对

2.1.3 一对标签中第一个是开始标签，第二个标签是结束标签。HTML元素以开始标签起始，以结束标签终止。

2.1.4某些HTML元素具有空内容

2.1.5大多数HTML元素可拥有属性

2.2 属性语法规则

2.2.1HTML 元素可以设置属性

2.2.2属性可以在元素中添加附加信息

2.2.3属性一般描述于开始标签

2.2.4属性总是以名称/值对的形式出现，比如：name=“value”。

属性	描述
class	为 html 元素定义一个或多个类名（classname）（类名从样式表文件引入）。
id	定义元素的 id，在同一个页面中唯一。
style	规定元素的行内样式（inline style）。
title	描述了元素的额外信息（作为工具条使用）。

2.3 html5的语法变化

2.3.1标签不再区分大小写

2.3.2元素可以省略结束标签

2.3.3允许省略属性值的属性(不是所有属性)

2.3.4允许属性值不使用引号

注意：编写代码时要用小写，标签与符号成对出现，这样也会使代码页面看起来整齐整洁。

不能省略结束标签，不要省略属性值的引号；但是可以省略属性值。

三. HTML标签分类

3.1 head标签

head标签的子标签

base标签：可以指定文档中所有链接的跳转路径慎用！

如果在链接中指定了跳转的路径，就使用指定的路径，否则使用base中定义的路径

link标签：通过link标签可以引入外部样式表，还可以改变浏览器页签的图标
script标签：可以引入外部的js文件，还可以在当前页面编写js脚本
title标签：定义文档的标题，也是head部分唯一必需的元素
meta标签：

指定字符集

页面描述

关键字

meta标签中的content不会显示在页面上，但会被浏览器解析，可以提供给搜索引擎，有利于**SEO**

3.2 html基础标签

1.块级元素

块级元素的特点：独占一行，可以设置宽高

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度

常见的块级元素

div 常用块级容器	h1~h6 标题标签	hr 水平分隔线
ol 有序列表	ul 无序列表	li 列表项
dl 自定义列表	dt 自定义列表项	dd 定义描述
table 表格	p 段落	form 交互表单

h标签：表示标题，h1~h6字号依次减小。标题标签默认有加粗效果，还有间隙。

div元素：可以起容器的作用，本身不具备任何样式效果，可以后期通过css来设置样式

div元素常用于大块元素的布局

2.行内元素

行内元素的特点（有多大占多大，不可以设置宽高）

和其他内联元素从左到右在一行显示标签
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

常见的行内元素

span 常用内联容器，定义文本内区块	a 锚点，超链接	b 加粗
strong 加粗强调	i 斜体	em 斜体强调
del 文档中已被删除的文本	br 强制换行	u 下划线
textarea 多行文本输入框	input 输入框	select 下拉列表
sub 下标 sup 上标	small 小字体文本

span标签：属于行内元素，本身不具备任何特殊样式，可以后期通过css为其设置样式

br标签：在html中如果想让文本换行，直接通过回车是无效的，需要通过br标签来进行换行

一个br标签代表一个换行，多个br标签代表多个换行，在真正的开发过程中，

如果要实现中间的间距效果不推荐直接使用br，可以后期通过css来进行处理

br标签属于单标签

a标签（超链接）

harf属性表示要跳转的链接地址，如果是一个网址，则前面必须加上协议（http:// https:// ）

如果想跳转至本项目中的其他页面，则直接根据路径即可

链接可以是一个图片，也可以是一个邮箱地址（通过mailto:邮箱地址，可以调取本地电子邮箱相关的应用）

属性	值	描述
href	URL	规定链接指向的页面的 URL。
target	-self	target属性的默认值为-self，表示在当前页面中打开新页面
target	-blank	blank表示在新窗口中打开页面，原页面依然保留（典型的应用场景：商品列表中跳转至商品详情页）

锚点定位

方法1：

（1）.在要跳转的目标处进行埋点（a name=“锚点名称”/a）
（2）.在点击的地方添加超链接（a href=“#锚点名称”/a）

方法2：

（1）.在要跳转的目标处进行埋点（<标签 id=“id名称”></标签>）
（2）.在点击的地方添加超链接（a href=“#id名称”/a）

点击链接后，URL会在后面添加#锚点名（id名）

3.行内块元素

行内块元素的特点（有多大占多大，可以设置宽高）

元素排列在一行
宽度默认由内容决定
元素间默认有间距

消除默认间距的几种方法
（1）. 利用浮动
（2）. 将父元素的font-size设置为0
（3）. 利用flex

支持宽高、外边距、内边距的所有样式的设置

常用的行内块元素 img 图片标签

四. HTML图像标签

4.1 绝对路径和相对路径

绝对路径

绝对路径以 Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

相对路径

图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可
img src=“1.jpg” alt=“” 或者 img src=“./1.jpg” alt=“”
图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开.
img src=“img/1.jpg” alt=“”
图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入 …/ ，如果是上两级，则需要使用 …/…/ ，以此类推
img src=“…/1.jpg” alt=“”
图像文件位于网站根目录：在文件名之前加入 /
img src=“/l.jpg” alt=“” 。

/ 开头：代表根目录； ./ 开头：代表当前所在的目录； …/ 开头：代表上一层目录。

4.2 图片标签

在 HTML 中，图像由标签定义。是空标签，它只包含属性，并且没有闭合标签。

img标签属性：

src属性：用来指定图片地址的来源，可以是本地图片，也可以是网络图片来源；

在实际开发中往往使用的是网络路径，可以把图片放在一个单独的服务器中

width和height属性: 用来设置图片宽和高，如果只指定其中一个属性,则图片会进行等比例缩放

单位是px或% (%是相对于父容器)（css替代使用）；

alt属性：用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉

读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

建议在编写页面时，都加上alt属性，也会有助于SEO

title属性：当鼠标移入图片的时候显示的文字内容；

（除了可以使用链接之外，也可以将图片转为base64编码形式）

五. HTML表格标签

5.1 表格结构

5.1.1 在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。

caption：用于定义表格标题。
thead：用于定义表格的头部。一般包含列名、行号等表头信息。
tbody：用于定义表格的主体。一般包含数据内容。
tfoot：用于定义表格的脚注。

5.1.2 定义行和列的标签：

tr：用于定义表格的一行。
td：用于定义表格的单元格。
th：用于定义表头单元格。

5.2 表格属性

属性名	含义	常用属性值	默认值
border	设置表格的边框。	像素值	0，无边框
cellspacing	设置单元格与单元格边框之间的空白间距。	像素值	2px
cellpadding	设置单元格内容与单元格边框之间的空白间距。	像素值	1px
width	设置表格的宽度。	像素值
height	设置表格的高度。	像素值
align	设置表格在网页中的水平对齐方式。

5.3 合并单元格

跨行合并：rowspan；跨列合并：colspan。

合并的顺序：从上到下，自左到右。

5.4 表格示例：

Document

商品信息表

制表:2023/07/13
ID	品类	品名	数量	单价	金额
1	衣服	冬装	1	100	100
2	衣服	夏装	1	100	100
3	饮料	可口可乐	1	100	100
4	饮料	百事可乐	1	100	100
以下为备用物品
5	数码	相机	1	100	100
6	数码	镜头	1	100	100
合计				平均单价	金额合计
合计				100	600

六. HTML表单标签

6.1 表单的用处

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

6.2 表单的基础组成部分

表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框

和文件上传框等。

表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输

入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

6.3 常见的表单元素

text 单行文本框	password 密码框	radio 单选按钮	checkbox 复选框
submit 提交按钮	select 下拉列表	resset 重置按钮	textarea 文本域

6.4 表单的基本语法

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容

我们可以使用标签来创建表单:

… 文本框、按钮等表单元素…

form表单属性：

action 用于指定提交表单数据的请求URL。
method 表单数据发送至服务器的方法，常用的有两种 get(默认)/post。

get和post的区别：
get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。
post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。

注：实际开发中，页面布局一般和table使用。

6.5 表单控件元素

表单输入控件

表单内部可以放各种表单控件

name属性

提交表单的时候，标有name属性的表单控件会将其name属性所对应的值和用户输入内容提交给服务器

格式：name属性的值=value属性的值 value属性可以为文本框赋值（input按钮可以通过value属性值来修改按钮的文字内容）

name属性可以为单选按钮进行分组，在组内的单选按钮只能选择一个

控件名称	type属性值	描述
文本框	text（默认值）	默认。定义一个单行的文本字段（默认宽度为 20 个字符）
密码框	password	定义密码字段 (输入的内容可以显示为密文)
单选按钮	radio	定义单选按钮。(性别等) （单选按钮提交到服务器的值应该是value属性所对应的值）
复选框	checkbox	定义复选框。(爱好等)
提交按钮	submit	定义提交按钮。（在表单中，sumbit点击之后会自动触发提交行为，会向action指定的地址提交，请求方式为methed指定的方式，通常表单提交为post）
重置按钮	reset	定义重置按钮（重置所有的表单值为默认值）。
图片提交按钮	image	定义图像作为提交按钮。
普通按钮	button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）（button默认等价于type=“submit”）
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用（隐藏在页面不可见，但是可以随着表单提交给服务器）
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性规范选取文件的类型， accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple”

6.6 其他表单控件

textarea

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和width 属性。

缩放设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

label

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点

击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表

单控件上。

方式一：

for属性,让标签和指点的input元素建立关联,多数使用在单选或复选

给单选或复选后面的文字加入label标签,for属性值是input的id值

 <input id="man" type="radio" name="sex" value="1"><label for="man">男</label>
 <input id="woman" type="radio" name="sex" value="0"><label for="woman">女</label>

方式二：

将input元素包含在lable标签中

如果将input放置在label标签之间,那么for属性就可以不用

 <label><input type="radio" name="state" value="1">未婚</label>
 <label><input type="radio" name="state" value="2">已婚</label>
 <label><input type="radio" name="state" value="3">离异</label>

注：和单选、复选结合使用，提高用户体验。

fieldset , legend

fieldset 标签可以将表单内的相关元素分组。

fieldset 标签会在相关表单元素周围绘制边框。

legend 元素为 fieldset 元素定义标题。

 <fieldset>
     <legend>我是标题</legend>
     文本输入框<input type="text" name="username">
     密码框<input type="password" name="userpassword">
 </fieldset>

select , option

select 定义了下拉选项列表
option 定义下拉列表中的选项（一个条目）。

size属性用来定义列表中显示的列表项,在select标签设置

multiple属性用来定义是否可以多选

下拉框在提交时，提交的值是option所对应的value值。文本内容是为了显示，value值是为了提交给服务器

selected 属性可以指定下拉框中的默认选中项

<option value=""selected></option>

optgroup : 定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

 <select name="porject" id="">
     <optgroup label="编程语言">
         <option value="1">java</option>
         <option value="2">.net</option>
         <option value="3">php</option>
     </optgroup>
     <optgroup label="建筑系统">
         <option value="4">cad</option>
         <option value="5">3dmax</option>
         <option value="6">maya</option>
     </optgroup>
     <optgroup label="普通学科">
         <option value="7">历史</option>
         <option value="8">地理</option>
         <option value="9">政治</option>
         <option value="10">马哲</option>
     </optgroup>
 </select>

6.7 表单元素的属性

属性	值	描述
type	上述值	type 属性规定要显示的元素的类型。
value	text	指定元素 value 的值。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对type=“image”)
size	number	size 属性规定以字符数计的元素的可见宽度。
readonly	readonly	readonly 属性规定输入字段是只读的。
name	text	name 属性规定元素的名称。
maxlength	number	属性规定元素中允许的最大字符数。(文本框最大能够接收的字符数)
disabled	disabled	disabled 属性规定应该禁用的元素。
checked	checked	checked 属性规定在页面加载时应该被预先选定的元素。 (只针对 type=“checkbox” 或者type=“radio”)
accept	audio/video/image/*MIME-type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
selected	selected	下拉框的默认选中

七. HTML列表标签

7.1 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

定义无序列表，使用 ul表示。

定义列表项，使用li表示一对li表示一个列表项。

给列表的小图标更换样式，使用属性type值：disc(默认值)、circle、square。

 <h3>新人上路指南</h3>
 <ul>
     <li>如何激活会员名？</li>
     <li>如何注册贵美会员？</li>
     <li>注册时密码设置有什么要求？</li>
     <li>贵美认证</li>
 </ul>

7.2 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

定义有序列表，使用ol表示。

给列表的小图标更换样式，使用属性type值：1、a、A、i、I。

有序列表的start属性：定义列表的开始序号。

有序列表的value属性：定义单个列表项的序号。注意：设置之后,该列表项之后的值都随之变化。

 <h3>注册步骤</h3>
 <ol>
     <li>填写信息</li>
     <li>搜电子邮件</li>
     <li>注册成功</li>
 </ol>

7.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd开始。

（提示: 列表项内部可以使用段落、换行符、图片）

<dl>
    <dt><img src="img/1.jpg" alt="抽卡" style="width: 200px; height: 100px;"></dt>
    <dd>十连抽</dd>
    <dd>三紫</dd>
    <dd>俩角色一武器</dd>
</dl>

7.4 嵌套列表

有序列表和无序列表可以相互嵌套使用

 <ul>
     <li>Coffee</li>
     <li>Tea
         <ul>
             <li>Black tea</li>
             <li>Green tea</li>
         </ul>
     </li>
     <li>Milk</li>
 </ul>

八. HTML内嵌框架

通过使用内嵌框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法：

<iframe src="URL"></iframe>   （该URL指向不同的网页）

8.1 为什么用 iframe:

frameset 需要使用多个文件，目录结构复杂；
内嵌较为灵活，可以在网页的任何位置使用；
可以作为模板，在本网站的多个页面复用；

8.2 Iframe - 设置高度与宽度:

height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。当然，我们完全可以使用CSS样式来实现。

8.3 Iframe -移除边框

frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框。

8.4 Iframe -框架命名

name：自定义框架名,规定 iframe 的名称。

<iframe src="head.html" frameborder="0" width="500px"></iframe>
<h3>我是主要内容</h3>
<iframe src="foot.html" frameborder="0" width="500px"></iframe>

<iframe src="thead.html" frameborder="0" width="200px"></iframe>
<h3>我是头部内容</h3>
<a href="10.表格.html">点我跳转</a>

<h3>我是底部部内容</h3>
<a href="4.html">点击跳转</a>

<h4>我是第三个页面</h4>
<a href="7.锚点定位.html">点击跳转</a>

九. HTML文本格式化标签

标签	显示效果
b或 strong	文本以粗体方式显示（推荐使用 strong 代替 b）。
i 或 em	文字以斜体方式显示（推荐使用 em 代替 i）。
s 或 del	文字以加删除线方式显示（推荐使用 del 代替 s）。
u 或 ins	文字以加下划线方式显示（推荐使用 ins 代替 u）。
small	文字以小号字体大小显示。
sup	文字以上标方式显示。
sub	文字以下标方式显示。
pre 或 code	可以定义预格式化的文本，常用来表示计算机的源代码。pre用来显示多行代码；code用来显示一行代码；pre 可以包裹 code元素。

十. 特殊字符

10.1 HTML实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

&entity_name;
或
&#entity_number;

如需显示小于号，我们必须这样写： &lt ;或 &#60 ; 或 &#060 ;

10.2 不间断空格

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会

删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。

10.3 结合音节符

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

10.4 HTML字符实体

字符	实体编号	实体名称	描述
			非间断空格（non-breaking space）
¡	¡	¡	倒置感叹号（inverted exclamation mark）
¢	¢	¢	美分符号（cent）
£	£	£	英镑符号（pound）
¤	¤	¤	货币符号（currency）
¥	¥	¥	人民币/日元符号（yen）
¦	¦	¦	间断的竖杠（broken vertical bar）
§	§	§	小节号（section）
¨	¨	¨	分音符号（spacing diaeresis）
©	©	©	版权所有（copyright）
ª	ª	ª	阴性序数记号（feminine ordinal indicator）
«	«	«	左双角引号（angle quotation mark (left)）
¬	¬	¬	否定符号（negation）
			软连字符（soft hyphen）
®	®	®	注册商标（registered trademark)
¯	¯	¯	长音符号（spacing macron）
°	°	°	度符号（degree）
±	±	±	加减号/正负号（plus-or-minus）
²	²	²	上标 2（superscript 2）
³	³	³	上标 3（superscript 3）
´	´	´	尖音符号（spacing acute）
µ	µ	µ	微米符号（micro）
¶	¶	¶	段落符号（paragraph）
·	·	·	中间点（middle dot）
¸	¸	¸	变音符号（spacing cedilla）
¹	¹	¹	上标 1（superscript 1）
º	º	º	阳性序数记号（masculine ordinal indicator）
»	»	»	右双角引号（angle quotation mark (right)）
¼	¼	¼	1/4 分数（fraction 1/4）
½	½	½	1/2 分数（fraction 1/2）
¾	¾	¾	3/4 分数（fraction 3/4）
¿	¿	¿	倒置问号（inverted question mark）

十一. HTML5新增特性

11.1 HTML5概述

1 什么是HTML5

HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。
HTML5 的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持

2 HTML5是如何起步的

HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application TechnologyWorking Group。

WHATWG 致力于 web 表单和应用程序（Application），而 W3C 专注于 XHTML 2.0。

在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article, footer, header, nav, section

新的表单控件，比如 calendar, date, time, email, url, search

3 HTML5浏览器支持

现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。

Internet Explorer 9 将支持些 HTML5 特性。此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。

正因为如此，你应该教会浏览器处理未知的 HTML 元素。

将HTML5元素定义为块元素

HTML5 定了 8 个新的 HTML **语义（semantic）**元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

为 HTML 添加新元素(自定义标签)

你可以为 HTML 添加新的元素

4 HTML5语义化

在HTML5添加新标签的时候，提出了一个关键词 “语义”。

语义= 意义语义元素 = 有意义的元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

HTML5新标签的优点:

更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的让人明白存放的是什么东西；
对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用
div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
代码更加的简洁；

5 HTML5新语义元素

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置。
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcaption	定义 figure元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
meter	定义度量衡。仅用于已知最大和最小值的度量。
nav	定义导航链接的部分
progress	定义任何类型的任务的进度。
ruby	定义 ruby 注释（中文注音或字符）。
rt	定义字符（中文注音或字符）的解释或发音。
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
section	定义文档中的节（section、区段）。
time	定义日期或时间。
wbr	规定在文本中的何处适合添加换行符。

11.2 HTML5新的布局标签

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tzj5Ri5-1689657264473)(C:\Users\Administrator.DESKTOP-VMP5U7A\Desktop\笔记\HTML基础笔记.assets\屏幕截图 2023-07-17 190325.png)]

优点

一方面程序可读性和维护性加强，
另一方面，可以用下级选择器来写样式，减少了class和id的命名，可以精简网页的结构；
而且语义化结构有条理才能让搜索引擎更加友好。

HTML5 header元素

header元素描述了文档的头部区域。
header元素主要用于定义内容的介绍展示区域。
在页面中你可以使用多个

元素(文档头、独立内容头)。

HTML5 nav元素

nav 标签定义导航链接的部分。
nav 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 nav 元素中!

HTML5 article元素

article 标签定义独立的内容
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。

HTML5 section元素

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块或者说对文章进行段；
一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，
section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素；
如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；
section元素中的内容可以单独存储到数据库中或输出到word文档中。

HTML5 aside元素

aside 标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关。

HTML5 footer元素

footer 元素描述了文档的底部区域.
footer 元素应该包含它的包含元素
文档中你可以使用多个

元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

HTML5 figure和figcaption元素

标签规定独立的流内容（图像、图表、照片、代码等等）。
元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
figcaption标签定义 figure元素的标题.
figcaption元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

11.3 HTML5新的表单元素

HTML5 新的 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验，校验不通过则不允许提交)，
拾色器	color	color 类型用在input字段主要用于选取颜色选择你喜欢的颜色
日期字段	date \| datetime \| datetime-local month week time	定义日期字段：包含年月日\| 定义日期字段：（UTC 时间）(仅opera支持) \|定义日期字段：包含年月日时分（无时区）\|定义日期：年月定义年中的周数定义时间 {在不同浏览器中会存在差异，通常在项目中会利用ui框架进行替代}
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。使用min属性和max属性设置最小和最大值 step设置数字间隔如果输入的内容不合法则提交时会进行提示，并阻止提交
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。鼠标放入文本框上会显示x号，可以清空输入的内容，在移动端会显示一个搜索按钮
电话号码框	tel	定义输入电话号码字段,但是不会进行校验，在移动端会调起数字键盘
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

13.4 HTML5 新的表单控件

HTML5 datalist 元素 (重要)

datalist元素规定输入域的选项列表。
datalist属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
使用 input元素的list属性与 datalist元素绑定。
datalist可以为input提供自动填充的功能，其填充的内容是option中的value值

<form action="">
    <input type="text" name="data" list="dlist">
    <datalist id="dlist">
        <option value="张三">张三</option>
        <option value="李四">李四</option>
        <option value="王五">王五</option>
    </datalist><br>
</form>

13.5 HTML5 新的表单属性

HTML5 的和标签添加了几个新属性.

form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意:autocomplete 适用于标签，以及以下标签：text, search, url, tel,email, password, datepickers, range,color。

autocomplete 表示允许文本进行自动填充（需要检查浏览器设置）默认为开启状态。
autocomplete 可以作用于表单上面，表示所有的文本框都可以自动填充，也可以单独为某个文本指定是否需要进行填充

 <form action="" autocomplete="on">
     <input type="text" name="username" placeholder="用户名"><br>
     <input type="text" name="nickname" placeholder="昵称"><br>
     <input type="submit">
 </form>

form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。（表示表单中输入内容不进行格式化校验即可提交）

<form action="" novalidate>
    <input type="email" name="email" placeholder="邮箱">
    <input type="url" name="url" placeholder="网址">
    <input type="text" name="username" placeholder="用户名">
    <input type="submit">
</form>

input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的标签：text, search, url, tel, email 以及password。

<form action="">
    <input type="email" name="email" placeholder="邮箱">
    <input type="url" name="url" placeholder="网址">
    <input type="text" name="username" placeholder="用户名">
    <input type="submit">
</form>

input required 属性

required 属性规定必须在提交之前填写输入域（表示当前文本框内容不能为空）。

**注意:**required 属性适用于：text, search, url, tel, email, password, datepickers, number, checkbox, radio 以及 file等input标签

<form action="">
    <input type="email" name="email" placeholder="邮箱" required>
    <input type="url" name="url" placeholder="网址" required>
    <input type="text" name="username" placeholder="用户名" required>
    <input type="submit">
</form>

input step 属性

step 属性为输入域规定合法的数字间隔。

**提示：**step 属性可以与 max 和 min 属性创建一个区域值.

**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month,time 和 week.

 <form action="">
     <input type="number" name="number" step="5">
 </form>

input autofocus 属性

autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。

<input type="text" name="username" autofocus>

input form 属性

form 属性规定输入域所属的一个或多个表单。
位于form表单外的 input 字段引用了form (该 input 表单仍然属于form表单的一部分):

**提示:**如需引用一个以上的表单，请使用空格分隔的列表。

 <form action="" novalidate id="form1">
     <input type="email" name="email" placeholder="邮箱" required>
     <input type="url" name="url" placeholder="网址" required>
     <input type="text" name="username" placeholder="用户名" required>
     <input type="submit">
 </form>   
    <input type="text" name="" placeholder="家庭住址" form="form1" required>

input formaction 属性

formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”

 <form action="https://www.taobao.com">
     <input type="text" name="username">
     <input type="password" name="password">
     <input type="submit">
     <input type="submit" formaction="https://www.baidu.com">
 </form>

input formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

input formmethod 属性

formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

input formnovalidate 属性

novalidate 属性是一个 boolean 属性.
novalidate属性描述了元素在表单提交时无需被验证。
formnovalidate 属性会覆盖元素的novalidate属性.

注意: formnovalidate 属性与 type=“submit” 一起使用

input height 和 width 属性

height 和 width 属性规定用于 image 类型的标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的标签。

input list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

input multiple 属性

multiple 属性是一个 boolean 属性.
multiple 属性规定元素中可选择多个值。

注意: multiple 属性适用于以下类型的标签： file

input pattern 属性

pattern 属性描述了一个正则表达式用于验证元素的值。

注意: pattern 属性适用于以下类型的标签: text, search, url, tel, email, 和 password.

**提示：**是用来全局 title 属性描述了模式.

input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的标签：date pickers、number 以及 range。

元素最小值与最大值设置:

13.6 HTML5多媒体标签

HTML5 Video(视频)

video 元素提供了播放、暂停和音量控件来控制视频。
video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。

如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
video 与 /video 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

video元素支持多个source元素. source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

<video src="./video/华丽耀眼的白孔雀.mp4" autoplay controls loop width="300" height="600" poster="img/屏幕截图 2023-07-14 210951.png">
</video>

<video autoplay controls loop width="300" height="600" poster="img/屏幕截图 2023-07-14 210951.png">
    <source src="video/华丽耀眼的白孔雀.mp4">
    <source src="video/华丽耀眼的白孔雀.mp4">
</video>

属性	值	描述
muted	muted	如果出现该属性，视频的音频输出为静音。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。（Edge不太支持）
controls	controls	添加播放控制及音量控制功能栏。
height	Pixels	指定播放器的高度，以pixel为单位。
loop	loop	如果指定，视频将重复播放。
poster	url	指定视频的预览图.
preload	auto metadata none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	url	目标视频的URL.
width	pixels	指定播放器的宽度，以pixel为单位.

HTML5 Audio(音频)

audio元素允许使用多个 source 元素.source元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

<audio src="music/江南.mp3" controls loop>
</audio>

<audio controls loop>
    <source src="music/江南.mp3">
</audio>

属性	属性值	描述
autoplay	autoplay	如果指定, 音频会在准备好后立即播放.
controls	controls	显示播放控制工具栏…
loop	loop	如果指定，则循环播放.
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	url	目标音频的URL.

13.7 其他HTML标签

HTML5文本格式化标签

time 标签定义日期或时间，或者两者;
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 < mark > 标签。
ruby 在文字上方注音，不常用，主流浏览器基本都支持,需要使用rt标签定义注音，

<time>2023-07-18</time><br>
<mark>标签定义带有记号的文本。请在需要突出显示文本时使用mark标签。</mark><br>
<ruby>饕餮<rt>tao tie</rt></ruby>

HTML5度量条

定义已知范围或分数值内的标量测量,计数仪表,也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。

注释： 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用标签。

属性名	属性作用
value	规定计量条当前默认显示值
max	规定范围的最大值,默认值为1
min	规定计量条当前默认显示值0
low	规定被视作低的标准
high	规定被视作高标准
form	规定所属的一个或多个表单
optimum	定义度量条的最佳标准值，最佳必须在低和高之间

 当前内存剩余：<br><br>
 <meter max="" min="" value="0.2"></meter><br><br>
 <meter max="100" min="0" value="45"></meter><br><br>
 低：<meter max="100" min="0" value="10" low="30" high="80"></meter><br><br>
 中：<meter max="100" min="0" value="50" low="30" high="80"></meter><br><br>
 高：<meter max="100" min="0" value="90" low="30" high="80"></meter><br><br>
 最佳：<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br><br>

HTML5进度条

progress标签定义运行中的任务进度（进程）。
请将 progress标签与 JavaScript 一起使用来显示任务的进度。

progress元素的属性

max属性:规定当前进度的最大值
value属性:规定进度条当前默认显示值
form属性:规定进度条所属的一个或多个表单

**注：**max和value属性的值必须是一个类型数值,可以是小数或整数

<progress></progress><br><br>
 <progress value="30" max="100"></progress><br><br>
 <progress value="0.6" max="1"></progress><br><br>
 <progress value="40%" max="100%"></progress><br><br>

HTML5详情标签

“details" 元素用于描述有关文档或文档片段的详细信息。
summary元素应该是 details元素的第一个子元素。可以为details定义标题.标题是可见的,用户点击标题时,会显示details中的内容。

details元素的属性:

open属性:规定在html页面中details是可见的

注:目前还不是所有浏览器都支持，但是之后肯定会都支持的

<details>
    <h3>该商品的月销售量：6000</h3>
    <ul>
        <li>8000以上：爆品<meter max="100" min="0" value="82" high="80" low="30"></meter></li>
        <li>3000-8000：一般<meter max="100" min="0" value="50" high="80" low="30"></meter></li>
        <li>3000以下：滞销商品<meter max="100" min="0" value="20" high="80" low="30"></meter></li>
    </ul>
</details>   
<details>
    <summary>月销售量统计</summary>
    <h3>该商品的月销售量：6000</h3>
    <ul>
        <li>8000以上：爆品<meter max="100" min="0" value="82" high="80" low="30"></meter></li>
        <li>3000-8000：一般<meter max="100" min="0" value="50" high="80" low="30"></meter></li>
        <li>3000以下：滞销商品<meter max="100" min="0" value="20" high="80" low="30"></meter></li>
    </ul>
</details>

lerrel1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML零基础入门教程（详细）

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
复制链接

扫一扫