浅谈HTML和HTML5新增元素

最新推荐文章于 2024-07-25 11:52:08 发布

Pink_waiting

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量272

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Deluxe_/article/details/115563639

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

HTML
- HTML 重要标签
HTML5新增内容
总结

HTML

定义：HTML也就是超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML 重要标签

HTML中标签数量是非常的庞大，在学习的过程中，我们是很难说把全部的标签都记熟，其实也没这个必要，我们只需要熟悉掌握那些常用标签，剩下的标签只需要做一个大致了解，当遇到不懂的时候，也可以通过菜鸟教程的HTML部分去快速查找标签的使用说明以及属性值解析。
菜鸟HTML教程

meta 标签

我们在写HTML的时候，有没有去注意过在head中有meta这么一个标签呢，就字面上里说是挺好理解的，charset用于定义文档的字符编码，但是meta标签的作用并不仅仅这么的简单，听我给你慢慢道来。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

meta 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

meta 标签的几种常见用法：

实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：
<meta name="author" content="Waiting">

实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">

实例 5 - 定义网页的视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

链接标签

HTML使用标签 < a > 来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，用户点击这些内容来跳转到新的文档或者当前文档中的某个部分。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

a 标签的几个重要属性如下：

属性名	属性说明
id	用于描述锚点位置
href	用于描述跳转链接的地址
target	用于指定链接跳转的方式，默认方式是在当前窗口打开链接，通过_blank值设置为在新窗口跳转链接

base 标签

既然说到了链接标签，那么就不得不说到base标签了，base标签或许也是一个比较罕见的使用标签了，但是确实一个非常有用的标签，值得我们学习一下。

下面就以一行代码来开启base标签的学习：

<head>
<base href="http://www.baidu.com" target="_blank" />
</head>

< base > 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 < base > 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 < a >、< img >、< link >、< form > 标签中的 URL。

< base > 标签的使用还需要注意：

必须写在head，上面的代码就定义了这个html里面默认的超文本链接是http://www.baidu.com，并且默认都是在新页面跳转链接
尽量将base标签写在head的第一个位置，因为这样其他在head的标签也能使用base的默认设置了

link标签

link 标签用于引入外部资源。

属性名	属性说明
href	规定被链接的资源的位置
type	描述被链接的资源的类型
ref	描述被链接的资源与当前文档的关系

<link rel="stylesheet" type="text/css" href="waiting.css" />

其中rel属性是必须的，最常用的值就是stylesheet，表示被引入的资源是当前文档的外部样式表。另外还有 alternate、author，help，icon等其他值，详情可以参阅link标签详情。

input 标签(含HTML5新增)

input 标签用于定义输入框，input标签的使用非常的简单，但是由于输入框的类型过多，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

	<input type="summit" placeholder="summit" autofocus />
	<input type="password" name="" placeholder="密码" autofocus>
	<input type="text" name="" placeholder="文本">
	<input type="text" name="" list="datal" placeholder="list" multiple="multiple">
	<input type="checkbox" name="勾选框" checked="checked">
	<input type="color" name="颜色选择框">
	<input type="date" name="日期选择框">
	<input type="button" name="" placeholder="按钮" value="BUTTON">
	<input type="datetime" name="">
	<input type="datetime-label" name="">
	<input type="email" name="">
	<input type="file" name="文件选择">
	<input type="hidden" name="">
	<input type="image" src="https://img.ivsky.com/img/tupian/pre/202005/30/yuanwei-002.jpg" name="" style="height: 200px"; width="200px";> 
	<input type="month" name="">
	<input type="radio" name="" >
	<input type="range" name="">
	<input type="reset" name="">
	<input type="search" name="">
	<input type="tel" name="">
	<input type="time" name="">
	<input type="url" name="">
	<input type="weak" name="">
	<input type="file" name="" multiple="multiple">

HTML5新增内容

HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

语义化标签

在这里插入图片描述
语义化标签的优点：

代码结构：如上图所示，新增的语义化标签在没有css编写的情况下，就已经能够很好的呈现出内容结构，这也简化了开发者的页面布局。
利于搜索：搜索引擎可根据标签的语义确定上下文和权重问题
方便团队开发和维护：语义化使得代码可读性更高，在团队开发中，其他的开发人员也很容易理解你的html结构，最大程度的降低开发过程中的沟通问题。
无障碍阅读：语义化标签方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

HTML5 多媒体

HTML5的设计目的是为了在移动设备上支持多媒体。

audio

首先学习一下audio 标签的属性以及属性值描述，如下图所示
在这里插入图片描述
实例：
实现一个简单的音频，关键是通过src属性引入音频文件

<audio src="someaudio.wav">

进阶：
audio 标签通常是结合source 标签使用的，在audio标签中插入多个source标签，来引入多种格式的音频文件，浏览器会选择使用第一个兼容的音频文件。

实例：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

在这里插入图片描述

video 标签

video标签的属性以及属性值说明
在这里插入图片描述

video 标签的用法和audio标签的使用基本一致，也是通过嵌入source标签来引入不同格式的视频文件，还可以嵌入track标签来引入视频的字幕文件

实例：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
 <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
您的浏览器不支持Video标签。
</video>

HTML5新增表单元素

datalist

datalist标签规定了输入域的选项列表。datalist标签和input标签结合使用，input标签通过list属性去绑定datalist标签的唯一id，就能够实现一个下拉菜单输入框

实例：

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="选项1">
  <option value="选项2">
  <option value="选项3">
</datalist>
<input type="submit">

在这里插入图片描述

keygen

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

实例：

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

output

output 元素用于不同类型的输出，比如计算或脚本输出

实例：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

总结

HTML5除了新增上述元素之外，也是移除了以下的元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

总之，以上我所提及的都是HTML或者的HTML5新增的一些比较常见和重要的标签，如果想要了解全部HTML5的新增内容，可以点击HTML5最全最元素解析了解更多。

最后感谢您的耐心阅读！如果发现本文有任何问题请在评论区指正！如果觉得这篇文章写的还好的话，麻烦点个赞支持以下噢！

Pink_waiting

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浅谈HTML和HTML5新增元素

大纲HTMLHTML 重要标签meta 标签链接标签base 标签link标签input 标签(含HTML5新增)HTML5新增内容语义化标签HTML5 多媒体audioHTML定义：HTML也就是超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表
复制链接

扫一扫