html5学习笔记(2)

效果图

以下为源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ol start="5" reversed="8">
    <li>nihao</li>
    <li>nihao</li>
    <li>nihao</li>
    <li>nihao</li>
    </ol>
<dl>
    <dt>nihao</dt>
    <dd>beijing</dd>
    <dd>shenzhen</dd>
    <dt>huijia</dt>
    <dd><small>beijing</small></dd>
    <dd><cite>shenzhen</cite></dd>
</dl>
<input type="text" autocomplete="on" list="test">
<datalist id="test">
    <option>nihao</option>
    <option>huanying</option>
    <option>qingdao</option>
</datalist>
<script>
    function yrdyd()
    {
        var control=document.getElementById("test");
        var direction=control.selectionDirection;
        alert(direction);
    }
</script>
<form>
<input type="text" pattern="[A-Z]{3}" name="pattern">
<input type="submit">

    <input type="text" name="pattern" id="test">
    <input type="button" value="dianjiwo" onclick="yrdyd()">
</form>
</body>
</html>

其中control.selectionDirection不起作用，即每次alert(direction),都弹出提示underfine（用的是谷歌浏览器和火狐浏览器）,估计可能浏览器对该属性支持还不完善.

时间： 2024-10-25 17:25:46

html5学习笔记(2)的相关文章

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

Html5学习笔记1 元素标签属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

html5学习笔记2

css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引用例如:p[name]{}//仅引用带有name属性的p标签 p[name="my"]{}//仅引用带有name属性等于"my"的p标签还可以使用正则表达式p[name^="my"]{} p[name$="my"]{} 5.通

HTML5 学习笔记（一）——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

[html5] 学习笔记-表单新增的元素与属性（续）

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

HTML5学习笔记（四）：H5中表单新增元素及改良

方便布局表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: 1 <form id="test" action="test.php" method="get"> 2 <input form="test" type="text" name="name"/> 3 </f

HTML5 学习笔记--------》HTML5概要与新增标签！

html5学习笔记——html保留标签（三）

列表和表格这次也是复习. 列表: 列表分为无序列表.有序列表.标题列表很简单,看代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 列表 <br/> 无序列表 <ul>a</ul> <ul>b</ul> &l

html5学习笔记(4)

XHTML可扩展的超文本标记语言文档声明: DTD: html5与html4的区别 html5新增的元素: 结构元素:section ,article, aside, header,hgroup,footer, nav, figure 其他元素: video,audio, canvas, input,元素类型:Email, 全局属性: contentEditable disignMode hidden spellcheck tabindex <!DOCTYPE html> <html&