前端基础——html5新增标签

Charming&M

已于 2022-04-13 08:48:05 修改

阅读量6.2k

点赞数 8

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

于 2022-04-09 20:05:54 首次发布

本文链接：https://blog.csdn.net/qq_41721660/article/details/124059012

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、新增表单标签

原始表单标签：input(text、password、radio、checkbox、button)、select、textarea、button、form。 h5增加了很多功能性的表单标签用于pc端和移动端的表单开发。

邮箱：input(type="email")，提交数据时提供了邮箱格式的验证（格式不一定完全正确，因此以后需要通过js来进行调整；
数字输入框：input(type="number")，
网址输入框：input(type="url")，验证输入内容是否为网址，需要完整网址，以http协议开头
搜索输入框：input(type="search")，提供了输入文本清空的控件
选择范围：input(type="range")，有一个选择条
选择颜色：input(type="color") ，有一个颜色选择器
文件上传：input(type="file")，默认只能上传一个，要想上传多个，需要在属性中加入multiple

<input type="file" multiple>

时间控件：input(type="date")，date——年/月/日，month——年/月，year——年，week——年/周，time——14:32
选项列表：<input type="text" list="mylist">

<h3>选项列表</h3>
    <!-- 通过input里面的list属性对指定的id名进行绑定 -->
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value="">小米</option>
        <option value="">小强</option>
        <option value="">小米手机</option>
        <option value="">小米玩偶</option>
        <option value="">小米手表</option>
        <option value="">大米</option>
    </datalist>

必填项：属性required
只读：不可编辑，属性readonly，文本只读，不能更改，可以复制，可以提交
禁用：文本可以复制，不能更改，不可以提交给数据库，属性disabled
自动获取焦点：属性autofocus

二、媒体标签

H5新增了音频和视频的标签

音频标签
- 用于页面中引入音频文件
- 语法：<audio src="file/music.mp3" controls></audio>
  写法二的好处在于当一个音频文件有多个不同的格式时，可以写多个source，从而使得多种浏览器兼容

<body>
    <!-- 
        src:音频文件路径
        controls:控制器，控制音频的播放显示
        autoplay:自动播放
        loop:循环播放
        muted:静音播放
     -->
    <audio src="file/music.mp3" controls></audio>
    <!-- 
        不同浏览器对不同的音频文件兼容，
        所以同一个音频需要引入不同的文件格式
        比如音频中的mp3、ogg等，采用audio标签中放入
        source标签来完成
     -->
     <audio>
         <source src="file/music.mp3" type="audio/mp3">
         <source src="file/music.ogg" type="audio/ogg">
     </audio>
</body>

在这里插入图片描述

视频标签
语法格式与音频格式类似，标签为<video src="file/play.mp4" controls loop></video>

<video src="file/play.mp4" controls loop></video>
     <!-- 
         也可以引入多种文件格式
      -->
      <video controls>
          <source src="file/test.MP4">
      </video>

三、语义化标签

概念：
能够通过标签名很好的合理正确地表达标签内容的意思，语义化标签具有可读性
优点：
- 易于用户阅读，样式丢失的时候，可以让页面呈现清晰的代码结构
- 有利于SEO优化，搜索引擎根据标签来确定上下文的各个标签的关键字的关系以及权重
  （seo一般指搜索引擎优化。 SEO（Search Engine Optimization））
- 方便其他设备进行解析，比如盲人阅读器
- 有利于开发和维护
使用

<body>
    <!-- 头部区域 -->
    <header>
        <!-- 导航区域 -->
        <nav>
            <ul>
                <li>
                    <a href=""></a>
                </li>
            </ul>
        </nav>
    </header>
    <!-- 文章的主体部分 -->
    <main>
        <!-- 代表网页的侧栏 -->
        <aside></aside>
        <!-- 代表网页主体的一个独立区域 -->
        <article>
            <!-- 网页中的独立模块 -->
            <section></section>
            <section></section>
        </article>
    </main>
    <!-- 网页的尾部区域 -->
    <footer>
        <table>
            <!-- 表格的头部 -->
            <thead>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </thead>
            <!-- 表格的主体内容 -->
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <!-- 表格的尾部 -->
            <tfoot>
                
            </tfoot>
        </table>
    </footer>
</body>

标签的选择
- 最外层的标签尽量使用HTML5的语义化标签，比如header、main、footer等；
- 标题尽量使用标题标签，主要是为了seo优化；
- 对于网页的内容的框架，重复出现的使用section标签，大体的内容区域可以使用article标签；
- 具体内容该什么标签就使用什么标签；
语义化标签的样式渲染
直接把语义化标签当成普通的div标签进行样式的设置，语义化标签的设置只是增加可读性

额外涨知识

使用i标签在导航中插入雪碧图做小图标
(1) 在a标签中，加一个i标签，设置类选择器，表示该标签显示的东西在a标签中位于后面的文字前方。
(2) i标签仅作为选择器，标签之间不放任何东西。（注意：i标签本身是斜体标签）
(3) 给i标签设置背景图片，插入小图标

<li>
    <div class="title">前端</div>
    <a href="">
        <i class="icon-web"></i>
        web前端工程师</a>
    <a href="">
        <i class="icon-weixin"></i>
        微信小程序</a>
</li>

效果图如下：
在这里插入图片描述

这里需要注意的点是，如果一张雪碧图放了很多小图标，对小图标设置公共样式可以采用选择器[class *=icon]表示以icon开头的类选择器

header .container nav ul li .nav2 ul li a [class *=icon]{
    width: 14px;
    height: 14px;
    /* border: 1px solid red; */
    vertical-align: middle;
}

i标签还可以用于插入字体图标

<li>
    <a href="" >
        <i class="fa fa-edit"></i>在线编辑器
    </a>
</li>

Charming&M

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
前端基础——html5新增标签

新增表单标签原始表单标签：input(text、password、radio、checkbox、button)、select、textarea、button、form。 h5增加了很多功能性的表单标签用于pc端和移动端的表单开发。邮箱：input(type="email")，提交数据时提供了邮箱格式的验证（格式不一定完全正确，因此以后需要通过js来进行调整；数字输入框：input(type="number")，网址输入框：input(type="url")，验证输入内容是否为网址，需要完整网址，以
复制链接

扫一扫

专栏目录