HTML基础之新增语义标签和属性

小猪弟

于 2022-03-14 14:19:30 发布

阅读量1.3k

点赞数

分类专栏： HTML 文章标签： html HTML5 表单新属性新语义标签

本文链接：https://blog.csdn.net/u011863822/article/details/123477539

版权

HTML 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等。

这些新的特性都有兼容问题，基本都是很需要IE9+以上的版本的浏览器才能支持，不过目前浏览器都是是高级版本了，所以使用问题不到，不想几年前那样了。当然也不会列出很多，而是简单列出常用的一些标签。

简单的说一下HTML5的新特性有什么？

用户媒介回访的video和audio元素。
新的特殊内容元素，比如article,footer,header,nav,section等
新的表单控件，比如：calendar,date,time,email,url,search等
2D/3D绘图和效果
支持对本地离线缓存

文档声明

声明必须位于HTML5文档中的第一行，非常简单：

<!DOCTYPE html>

新语义元素1

HTML5新增的8个语义标签其中由header，section，footer，aside，nav,main，article，figure，所有的这些元素都是块级元素。主页标签其中有些几乎没有展现效果，如果有的话也是需要配合CSS进行实现，的但是为什么要有的呢，因为这个就是对浏览器来说是一种友好的提示，比如header就是告诉浏览器这个是导航栏等。

所以看一新语义标签常用位置

在这里插入图片描述

其实这八个标签说实话有什么效果作用吗？其实不然，就是将不同部分的布局进行一些语言化的定义，下面依次演示。

header标签

header标签定义文档的头部区域,它是作为网页头部介绍内容或者是导航链接栏的容器。在一个文档中可以定位多个header标签，但是一般最后用一个

演示（对比div一起看）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
     header{
         background-color: #d10000;
     }
     div{
          background-color:#4a90e2;
     }
    </style>
</head>
<body>
<header>
    <a href="#">header1</a>
    <a href="#">header2</a>
    <a href="#">header3</a>
    <a href="#">header4</a>
</header>
<hr>
<div>

    <a href="#">div1</a>
    <a href="#">div2</a>
    <a href="#">div3</a>
    <a href="#">div4</a>
</div>
</body>
</html>

在这里插入图片描述

可以看出其具体效果和div没有什么区别，就是一个对浏览器友好的标签，其实这个标签就是一个将以前的这样定义div，

<div class="header">
    <a href="#">div1</a>
    <a href="#">div2</a>
    <a href="#">div3</a>
    <a href="#">div4</a>
</div>

所以不如直接提炼出这个标签header出来。

nav 标签

nav标签定导航栏的部分。其实这个标签的诞生也是和因为之前很多前端开发人员如下写：

<div class="nav">
    <a href="#">div1</a>
    <a href="#">div2</a>
    <a href="#">div3</a>
    <a href="#">div4</a>
</div>

所以为了方便，那直接来一个这样的标签得了。所以这个大家如果猜测的话，很容易得到答案，那就是效果和div没有什么区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
     nav{
         background-color: #d10000;
     }
     div{
          background-color:#4a90e2;
     }
    </style>
</head>
<body>
<nav>
    <a href="#">nav1</a>
    <a href="#">nav2</a>
    <a href="#">nav3</a>
    <a href="#">nav4</a>
</nav>
<hr>
<div class="nav">

    <a href="#">div1</a>
    <a href="#">div2</a>
    <a href="#">div3</a>
    <a href="#">div4</a>
</div>
</body>
</html>

在这里插入图片描述

main 标签

标签规定文档主要内容，一个文档中只有一个main标签

其实这个标签也是衍生出来的，具体效果也是没有什么特别的地方，就是告诉浏览器这一部分是网页主题内容。这个也是语义标签的最大意义，那就是告诉浏览器这个标签内内容的具体是干什么的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
     main{
         background-color: #d10000;
     }
     div{
          background-color:#4a90e2;
     }
    </style>
</head>
<body>
<main>
    <a href="#">main1</a>
    <a href="#">main2</a>
    <a href="#">mai3</a>
    <a href="#">main4</a>
</main>
<hr>
<div class="main">

    <a href="#">div1</a>
    <a href="#">div2</a>
    <a href="#">div3</a>
    <a href="#">div4</a>
</div>

</body>
</html>

在这里插入图片描述

article

定义页面的独立内容，必须独立于文档的，里面可以包含头，尾主题等一脸血内容，在比较大的页面中回适用到，比如博文的列表。

section

类似div，不过比div更有意义，他是对内容进行分块。具体呈现的效果也是没有的。

aside

aside标签定义了article标签以外的内容，aside内容应该于父级的内容相关，具体看最上面的截图。

figure

figure标签规定独立的内容（图像，图标，照片。代码等）其内容应该与主内容有关（但是一般都放广告了）同时元素的位置相对于主内容是独立的。如果被删除，不应该对文档流产生影响。

footer

定义文档或者文档一部分区域的页脚，该元素回包含文档的版权，联系方式等。当然一个文档里面可以使用多个footer。

新语义元素2

mark

这个是高亮文档标签，其实有点强调的作用。

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
从前有一座<mark>山</mark>，山上有个庙。
</body>
</html>

在这里插入图片描述

progress

用来显示一个任务的完成进度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
<progress value="60" max="100"  >60%</progress>
</body>
</html>

在这里插入图片描述

adress

一般显示地址的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
<address>北京朝阳一号院</address>
</body>
</html>

在这里插入图片描述

当然标签还有很多，只是简单的说一下常用的。

新的input类型

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

类型	描述
color	取色
date	日期选择器
datetime	选择器UTC时间
datetime-local	选择一个日期和时间
month	选择月份
week	选择周和年
url	输入包含URL地址
email	提交表单的时候，会自动检查一下是否满足基本的邮件条件
number	只能输入值
search	搜索域
range	包含一定范围内的输入值输入域
tel	输入电话号码的字段

这些不再演示，自己可以测试一下即可，目前一些常用的类型，还有有些局限性，很多还是集合这js进行实现的。

新增的表单属性

还新增了一些表单属性，现在看一下：

属性	值	描述
required	required	表单拥有该属性表示内容不能为空，必须必填。
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完毕后自动聚焦到指定的表单
autocomplete	off/on	当云过户在字段开始输入的时候，浏览器基于之前输入过的值，显示出在字段中填写的提示。默认是on，前提是：需要放在表单内，同时加上name属性，同时成功提交。一般不会用，会数据不安全。
multiple	multiple	可以多选文件提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>输入用户名 <input type="text" required="required"></li>
    <li>搜索 <input type="search" placeholder="请输入搜索内容"></li>
    <li>加载成功鼠标会自动放在这里 <input type="email" autofocus></li>
    <li>会提示输入 <input type="email" autocomplete="" name="email"></li>
    <li>只能提交一个文件  <input type="file"></li>
    <li>只能提交多个个文件  <input type="file" multiple="multiple"></li>
</ul>
</form>
</body>
</html>

如果修改placeholder的颜色可以通过伪元素修改：

input::placeholder{
    
}

小猪弟

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML基础之新增语义标签和属性

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等。这些新的特性都有兼容问题，基本都是很需要IE9+以上的版本的浏览器才能支持，不过目前浏览器都是是高级版本了，所以使用问题不到，不想几年前那样了。当然也不会列出很多，而是简单列出常用的一些标签。简单的说一下HTML5的新特性有什么？用户媒介回访的video和audio元素。新的特殊内容元素，比如article,footer,header,nav,section等新的表单控件，比如：calendar,date,t
复制链接

扫一扫