html常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

大熊猫的博客

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量172

点赞数

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

本文链接：https://blog.csdn.net/weixin_42481364/article/details/120278802

版权

HTML5 标签分类表单属性语义标签多媒体支持

关键词由CSDN通过智能技术生成

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言

后缀.html/.htm

标签分类：

围堵标签：开始和结束标签<html></html>。

自闭和标签：<br/>

标签是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个用空格隔开

<属性名称属性名1=”属性值” 属性名2=”属性值”></属性名称>

推荐全部小写。

注释：

常用标签

文本标签：

<p>第一段段落。</p>

<p>第二端段落。</p>

图片标签：

<!--img:显示图片，src:指定图片路径，相对路径:

../上一级目录

title图片标题指针悬浮显示,alt作用与title一样，但有的浏览器不支持

width和height

-->

<!--设置热点区域

每个区域点击显示不同的效果shape:形状

-->

</map>

列表标签：

<!--列表标签

ul-li---无序号

ol-li---有序号

-->

<ul>

</ul>

<ol>

</ol>

定义描述标签：

<!--定义描述

dt:标题只有一个

dd：

-->

<dl>

</dl>

<dl>

</dl>

超链接标签：

<!--blank新链接打开

self当前页面打开（默认）

锚链接：

-->

目的超过一个屏幕<a name="2" href="#1">去锚点</a>

</div>

222

</div>

<a name="1" href="#2">锚点</a>222

</div>

标签分类

块状元素：一般是新起一行，可以容纳行内元素和其他块级元素；

如：h1,p,ol-li,hr,div,dl-dt-dd.

行级元素：只能容纳文本或其他行内元素。

规则表格

</tr>

</tr>

</tr>

</tr>

</table>

不规则表格

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格高级标签

<caption>说明（表格外的文字）</caption>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

表单标签（重要）：

表单的公有元素

Id：元素唯一标识，不重复

Name：表单元素名称，服务器获取数据键

Value：表单项元素值，服务器通过name获取的value

Type：表示表单项元素呈现

Class：表示样式名称

<label for="username">(聚焦到文本输入)用户名:</label><input type="text" id="username" name="username" /><br />

隐藏域:<input type="hidden" name="userId" value="1001"/><br />

性别:<input type="radio" name="gender" value="男" checked="checked"/>男

婚姻状态（单选）:<input type="radio" name="statu" value="已婚" />已婚

爱好（多选）:<input type="checkbox" name="hobby" value="游泳" />游泳

<input type="checkbox" name="hobby" value="跑步" />跑步

头像：<input type="file" name="headImg"/><br />

生日:<input type="datetime-local" name="birthday" />

</select><br />

协议（文本域）:<textarea rows="10" cols="16" readonly="readonly" disabled="disabled">108个梁山好汉</textarea><br />

图片按钮（有提交功能）<input type="image" src="img/1812402310050.jpg" />

</form>

框架iframe：

<p>

<a href="http://www.zhuaiyt.top/" target="content">查询(跳转到target对应的nameifram)</a>

</p>

框架集（frameset）了解htm5移除了：

与body不能共存。

</frameset>

有的浏览器不支持（显示文字）

</noframes>

布局标签组合：

div-ul-li/div-ol-li：常用于导航布局

div-dl-dt-dd:常用于图文混编布局

div-form:常用于表单布局

div-table:常用于局部规则数据展示布局

转义字符：

转义为空格

< 转义为小于号<

≤ 转义为小于等于号≤

> 转义为大于号>

≥ 转义为大于等于号≥

HTML5中已经移除的元素

frame

frameset

Noframes

HTML4与HTML5的区别

概念

HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言第4和第5版

本.HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代,为了在移动设备上支持多媒

体。

HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技

术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互

都进行了规范。

HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页

标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将

劣势转化为优势，整体推动整个移动端网页方面的发展。

指定字符编码语法不同

HTML4:使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)

HTML5:使用对元素直接追加charset属性的方式来指定字符编码。

HTML5中新增的语义标签-了解

标签描述

article 定义页面独立的内容区域。

aside 定义页面的侧边栏内容。

bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。

details 用于描述文档或文档某个部分的细节

dialog 定义对话框，比如提示框

summary 标签包含 details 元素的标题

header 定义了文档的头部区域

footer 定义 section 或 document 的页脚。

nav 定义导航链接的部分。

progress 定义任何类型的任务的进度。

section 定义文档中的节（section、区段）。

time 定义日期或时间。

wbr 规定在文本中的何处适合添加换行符。

HTML5表单

HTML5新的表单属性

form新属性

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

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

注意: autocomplete 适用于 <input> 标签，以及以下类型的 <input> 标签：text, search, url,

telephone, email, password, datepickers, range 以及 color。

12.4.1.1 input 新属性

list属性

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

姓名:<input type="text" name="name"><br>

电话: <input type="text" name="phone"><br>

邮箱: <input type="email" name="email" autocomplete="off"><br>

</form>

测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。

有些浏览器可能不自动支持，需要自己启用。

</datalist>

multiple

multiple 属性是一个 boolean 属性.

multiple 属性规定 <input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file

上传多个文件: <input type="file" name="img" multiple>

placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及

password。

required

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password,

date pickers, number, checkbox, radio 以及 file。

用户名: <input type="text" name="username" required>

HTML5新的表单元素--了解

标签描述

datalist input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

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

output 标签定义不同类型的输出，比如脚本的输出。

HTML5中新的input类型

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

color

date

datetime

datetime-local

month

number

range

tel

time

url

week

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们

了。即使不被支持，仍然可以显示为常规的文本域。

HTML5中新增的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放

的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

您的浏览器不支持 audio 元素。

</audio>

PS：control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

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

目前, <audio> 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

音频格式的MIME类型

Format MIME-type

MP3 audio/mpeg

Ogg audio/ogg

Wav audio/wav

HTML5中新增的视频

您的浏览器不支持Video标签。

</video>

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

Format MIME-type

MP4 video/mp4

Ogg audio/ogg

WebM video/webm

<!DOCTYPE html>

<html>

<head>

</head>

<body>

您的浏览器不支持 audio 元素。

</audio>

您的浏览器不支持Video标签。

</video>

</body>

</html>

大熊猫的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录