HTML5基础（五）

时间：2016-05-15 21:15:45 阅读：127 评论：0 收藏：0 [点我收藏+]

标签：

加强版的ol与dl

1、ol的start属性和reversed属性

1、可以通过start属性来定义标号的开始值。
2、可以通过reversed属性来进行反向编号。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ol START="4" TYPE="i" REVERSED="reversed">
    <li><a href="index.html">有序列表A</a> </li>
    <li><a href="index.html">有序列表B</a> </li>
    <li><a href="index.html">有序列表C</a> </li>
    <li><a href="index.html">有序列表D</a> </li>
    <li><a href="index.html">有序列表E</a> </li>
    <li><a href="index.html">有序列表F</a> </li>
    <li><a href="index.html">有序列表G</a> </li>
</ol>
</body>
</html>

2、重新定义含义的dl元素

dl元素在HTML4中：
dl元素在HTML4中，是一个专门用来定义术语的列表。
dl元素在HTML5中：
dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义。重定义后的dl列表包含多个带名字的列表项。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>介绍</h3>
<article>
    <h1>《HTML5》</h1>
    <p>《HTML5》主要讲解HTML5的使用方法！</p>
    <aside>
        <h2>术语解释：</h2>
        <dl>
            <dt>HTML5</dt>
            <dd>html5是超文本标记语言</dd>
            <dt>CSS3</dt>
            <dd>CSS3是层叠式样式表</dd>
        </dl>
    </aside>
</article>
</body>
</html>

l<dialog></dialog>定义一段对话

新增标签的低版本兼容

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
document.createElement("leo");
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body{margin:0;}
header{height:100px;background:#9F3; display:block;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative; display:block;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px; display:block;}
section{margin-left:210px;background:#F90;height:300px; display:block;}
footer{ height:100px;background:#C6C; display:block;}
leo{ background:#F03;height:100px; display:block;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>页面底部</footer>
<leo>刘伟是个胖子</leo>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="html5shiv.js"></script>
<style>
body{margin:0;}
header{height:100px;background:#9F3;}
article{ padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;}
aside{width:200px;height:300px;background:#F06; position:absolute;left:10px;top:10px;}
section{margin-left:210px;background:#F90;height:300px;}
footer{ height:100px;background:#C6C;}
</style>
</head>
<body>
<header>页面头部</header>
<article>
<aside>侧边栏</aside>
<section>内容区域</section>
</article>
<footer>页面底部</footer>
</body>
</html>

新增表单控件

<form>

l新的输入型控件

?email : 电子邮箱文本框，跟普通的没什么区别

–当输入不是邮箱的时候，验证通不过

–移动端的键盘会有变化

?tel : 电话号码

?url : 网页的URL

?search : 搜索引擎

–chrome下输入文字后，会多出一个关闭的X

?range : 特定范围内的数值选择器

–min、max、step( 步数 )

–例子 : 用JS来显示当前数值

?number : 只能包含数字的输入框

?color : 颜色选择器

?datetime : 显示完整日期

?datetime-local : 显示完整日期，不含时区

?time : 显示时间，不含时区

?date : 显示日期

?week : 显示周

?month : 显示月

新增表单控件

新的表单特性和函数

?placeholder : 输入框提示信息

–例子 : 微博的密码框提示

?autocomplete : 是否保存用户输入值

–默认为on，关闭提示选择off

?autofocus : 指定表单获取输入焦点

?list和datalist : 为输入框构造一个选择列表

–list值为datalist标签的id

?required : 此项必填，不能为空

?Pattern : 正则验证 pattern="\d{1,5}“

?Formaction 在submit里定义提交地址

表单验证

validity对象：

?通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false

–oText.addEventListener("invalid",fn1,false);

–ev.preventDefault()

–valueMissing : 输入值为空时

–typeMismatch : 控件值与预期类型不匹配

–patternMismatch : 输入值不满足pattern正则

–tooLong : 超过maxLength最大限制

–rangeUnderflow : 验证的range最小值

–rangeOverflow：验证的range最大值

–stepMismatch: 验证range 的当前值是否符合min、max及step的规则

–customError 不符合自定义验证

?setCustomValidity(); 自定义验证

?Invalid事件 : 验证反馈 input.addEventListener(‘invalid‘,fn,false)

–阻止默认验证：ev.preventDefault()

?formnovalidate属性 : 关闭验证

<body>
<form>
    <input type="text" required id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.valid);
    ev.preventDefault();
}
</script>
</body>

<body>
<form>
    <input type="email" id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.typeMismatch);
    ev.preventDefault();
}

//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
</script>
</body>

<body>
<form>
    <input type="text" id="text" pattern="\d{1,5}"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.patternMismatch);
    ev.preventDefault();
}

//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配返回true
</script>
</body>

<body>
<form>
    <input type="email" id="text" maxlength="5"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="123456789";
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.tooLong);
    ev.preventDefault();
}

//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配返回true
//tooLong 当用户输入的长度超出了maxlength的限制返回true
</script>
</body>

<body>
<form>
    <input type="range" value="2" min="1" max="10" step="2" id="text" />
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="2";
alert(oText.value);
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.rangeOverflow);
    ev.preventDefault();
}

<body>
<form>
    <input type="text" id="text" />
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()
{
    if(this.value=="敏感词")
    {
        this.setCustomValidity("请不要输入敏感词");
    }
    else
    {
        this.setCustomValidity("");
    }
};
function fn()
{
    alert(this.validity.customError);
    ev.preventDefault();
}

//valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配返回true
//tooLong 当用户输入的长度超出了maxlength的限制返回true
//customError 不符合在定义验证的时候返回true
</script>
</body>

HTML5基础（五）

标签：

原文地址：http://www.cnblogs.com/binperson/p/5495965.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行