HTML5 新特性

最新推荐文章于 2024-03-17 11:50:58 发布

码农充电站

最新推荐文章于 2024-03-17 11:50:58 发布

阅读量618

点赞数 3

分类专栏： HTML 教程文章标签： HTML5 新特性

本文链接：https://blog.csdn.net/LUAOHAN/article/details/104020363

版权

HTML 教程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下面介绍比较常用的HTML5 新特性。

布局标签

下面这些标签主要用于页面的布局，使得代码结构更加清晰。

现在的要求是，我们能在看其它网页时，见到这些标签能够明白其语义即可，以后我们在写复杂的页面时，就会用到了。

<header></header> 标签，用于定义文档的页眉，也就是页面的头部。
<nav></nav> 标签，用于定义导航栏链接部分。
<footer></footer> 标签，用于定义页面的底部，也叫做页脚。
<article></article> 标签，用于定义文章部分。
<section></section> 标签，用于定义文档的小区块。
<aside></aside> 标签，用于定义文档的侧边。

datalist 标签

datalist 标签与input 标签配合使用，比select 标签更加强大，能够起到输入提示的效果。

例子如下：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>datalist下拉菜单演示</title>
    </head>

    <body>
        你喜欢吃什么：
        <!-- input 中list 属性的值等于datalist 中id 的值，
            其作用是将input 标签与datalist 标签绑定到一起 -->
        <input type="text" value="我喜欢吃" list="food">
        <datalist id="food">
            <option>面条</option>
            <option>面包</option>
            <option>米饭</option>
            <option>米粥</option>
            <option>烧鸡</option>
            <option>烧鸭</option>
        </datalist>
	</body>
</html>

效果如下，输入康的默认值是input 标签的value 属性的值：

输入框中没有内容时，会显示出所有的选项：

当属于一个字时也会有提示效果：

fieldset 标签

fieldset 标签用于将表单内的元素进行分组打包，能起到一个框框的效果，它与legend 标签配合使用。

例子：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>fieldset 标签演示</title>
    </head>

    <body>
        <h3>下面是一个fieldset 标签</h3>
        <fieldset>
           我是一个fieldset 标签
        </fieldset>
	</body>
</html>

效果如下，文字被一个线框包住了：

与legend 标签的搭配如下：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>fieldset 标签演示</title>
    </head>

    <body>
        <h3>下面是一个fieldset 标签</h3>
        <fieldset>
            <legend>效果演示</legend>
            姓名：<input type="text" name=""> <br />
            密码：<input type="password" name="">
        </fieldset>
	</body>
</html>

效果如下，文字“效果演示”出现在了线框上，并且input 标签被包在了线框内：

新增input type 属性值

下面介绍一下新增的nput type 属性值，这些值使得input 标签更加丰富，功能更加强大，使得用户能够输入更加符合规范的内容。

类型****	使用示例****	含义****
email****	<input type="email">	输入邮箱格式
tel****	<input type="tel">	输入手机号码格式
url****	<input type="url">	输入url格式
number****	<input type="number">	输入数字格式
search****	<input type="search">	搜索框（体现语义化）
range****	<input type="range">	自由拖动滑块
time****	<input type="time">	小时分钟
date****	<input type="date">	年月日
datetime****	<input type="datetime">	时间
month****	<input type="month">	月年
week****	<input type="week">	星期年

例子：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>HTML5 input标签新增type 属性值</title>
    </head>

    <body>
        <h3>下面是HTML5 input标签新增的type 属性值</h3>
        <form>
            邮箱：<input type="email" /> <br />
            手机：<input type="tel" /> <br />
            数字：<input type="number" /> <br />
            URL：<input type="url" /> <br />
            搜索：<input type="search" /> <br />
            区域：<input type="range" /> <br />
            时分：<input type="time" /> <br />
            年月日：<input type="date" /> <br />
            年月：<input type="month" /> <br />
            星期：<input type="week" /> <br />
        </form>
	</body>
</html>

效果如下：

新增input 属性

下面是HTML 5新增的常用的input 的属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符，用户锁定输入框时，默认文字不消失，只有当用户输入文字时，默认文字才消失。
autofocus	<input type="text" autofocus>	规定当页面加载时，input 元素不用点击，自动锁定输入框
multiple	<input type="file" multiple>	多文件上传
autocomplete	<form> <input type="text" autocomplete="off" name="xxx" /> <input type="submit" /> </form>	规定表单是否应该启用自动完成功能，当用户点击提交之后，会记录用户的输入历史，方便用户输入。它有2个值，一个是on，一个是off。 on 代表启用这个功能。 off 代表不启用这个功能。使用时要注意两点： 1.autocomplete 首先需要提交按钮 2.这个input 标签必须有name 属性
required	<input type="text" required>	必填项，内容不能为空，可能有浏览器兼容性问题，使用时注意一下就行。
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点/光标/锁定）元素的快捷键采用 alt + s的形式

下面练习一个综合案例-学生档案：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>表单综合案例·学生档案</title>
    </head>

    <body>
        <form action="">
            <fieldset>
                <legend>学生档案</legend>

                <label> 姓名：<input type="text" name="" placeholder="请输入你的名字" /> </label> <br /> <br />
                <label> 手机：<input type="tel" name="" /> </label> <br /> <br />
                <label> 邮箱：<input type="email" name="" /> </label> <br /> <br />
                <label> 学院：<input type="text" name="" placeholder="请选择你的学院" list="college" /> </label>
                <datalist id="college">
                    <option>文学院</option>
                    <option>医学院</option>
                    <option>历史学院</option>
                    <option>美术学院</option>
                    <option>科技学院</option>
                </datalist> <br /> <br />

                <label> 生日：<input type="date" name="" /> </label> <br /> <br />

                <label> 成绩：<input type="number" name="" /> </label> <br /> <br />

                <input type="submit" name="" /> <input type="reset" name="" />

            </fieldset>
        </form>
	</body>
</html>

(本节完。)

码农充电站

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新特性

下面介绍比较常用的HTML5 新特性。布局标签下面这些标签主要用于页面的布局，使得代码结构更加清晰。现在的要求是，我们能在看其它网页时，见到这些标签能够明白其语义即可，以后我们在写复杂的页面时，就会用到了。<header></header> 标签，用于定义文档的页眉，也就是页面的头部。<nav></nav> 标签，用于定义导航栏链...
复制链接

扫一扫

专栏目录