>

html4与html5的区别及html5的一些新特性,html新增结

- 编辑:www.bifa688.com -

html4与html5的区别及html5的一些新特性,html新增结

区别

本文主要帮助理解HTML5新增结构元素article、section、aside、nav、time微格式。

1.html5语法的改变

新增非结构元素header、footer、address、figure。

HTML5简化了很多细微的语法,例如:

新增表单元素的属性form、formaction、formmethod、formenctype、formtarget、required、autofocus、placeholder、list、autocomplete、pattern、indeterminate。

  • section表示页面上的区域,主要的目的是给文章分段等,section里必须包含标题。
<section>
    <h1>标题</h1>
    <article>内容</article>
</section>
  • article表示页面上独立的区域,和section相比,article更注重自身的独立性。
<article>
    <section>
        <h1>标题</h1>
        <p>内容</p>
    </section>
</article>
  • aside表示页面的附加内容,可以是文章的含义,链接等
<article>
    <section>
        <h1>标题</h1>
         <p>内容</p>
    </section>
</article> 

<aside>
    <h1>评论</h1>
    <section>
        <h2>张</h2>
        <p>好听</p>
    </section>
</aside>    
  • nav表示页面的导航,主要包括页面的主导航,侧边栏导航,页内导航和分页导航。
<nav>
    <ul>
        <li><a href="#">111</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">333</a></li>
    </ul>
</nav>
  • time用datatime属性表示一个时间戳。T代表分隔符,Z代表格林威治标准时间, 代表时区,pubdata表示发布时间。
<time datatime="2017-01-09T13:02" pubdate>2017-01-09</time>
<time datatime="2017-01-10Z">2017-01-10</time>
<time datatime="2017-01-11 9:00">2017-01-11</time>
  • header标签用于页面的头部、文章的页眉等。<font color="red">页面中可以出现多个header标签。</font>
<header>
  <h1>这是标题</h1>
</header>
<article>
  <header>
    <h2>这是文章标题</h2>
  </header>
</article>
  • footer标签用于页面的注脚、文章的页脚等。<font color="red">页面中可以出现多个footer标签。</font>
<article>
  <footer>
    <h2>这是文章页脚</h2>
  </footer>
</article>
<footer>
  <h1>这是注脚</h1>
</footer>
  • address标签用于表示文档的作者,联系地址,用在body里表示文档的作者,用在article里表示文章的作者,通常和footer搭配使用。
<address>
  <ul>
    <li>姓名</li>
    <li>地址</li>
  </ul>
</address>
  • figure标签表示独立的内容,figcaption表示figure的标题。figcaption标签赢始终置于figure的第一位或最后一位
<figure>
  <figcaption>这是内容</figcaption>
  <p>这里是文字</p>
</figure>
  • 新增属性form表示输入域所属的一个或多个表单。
<form id="userInfo">
地址:<input  type="text" />
<input type="submit" />
</form>
姓名: <input from="userInfo" type="text" />
  • formaction可以重写表单action属性
<form id="userInfo" action="index.jsp">
姓名: <input name="name" type="text" />
地址:<input name="address" type="text" />
<input type="submit" formaction="userInfo.jsp" />
</form>
  • formenctype可以重写表单enctype属性
<form id="userInfo" enctype="text/plain">
姓名: <input name="name" type="text" />
地址:<input name="address" type="text" />
<input type="submit" formenctype="multipart/form-data" />
</form>
  • formmethod可以重写表单method属性。name属性为key,value属性为value
<form id="userInfo" method="post">
姓名: <input name="name" type="text" />
地址:<input name="address" type="text" />
<input type="submit" formmethod="get" />
</form>
  • formtarget可以重写表单target属性。
<form id="userInfo" target="_self">
姓名: <input name="name" type="text" />
地址:<input name="address" type="text" />
<input type="submit" formtarget="_block" />
</form>

以上属性只适用于type="submit"

  • required属性规定是必填字段。不符合规则的会弹出提示。
<form id="userInfo">
姓名: <input name="name" type="text" required />
地址:<input name="address" type="text" />
<input type="submit" />
</form>
  • autofocus规定当页面加载完成时自动获得焦点。
<form id="userInfo">
姓名: <input name="name" type="text" required autofocus/>
地址:<input name="address" type="text" />
<input type="submit" />
</form>
  • placeholder规定文本框未获取焦点时的文本内容。
<form id="userInfo">
姓名: <input name="name" type="text" placeholder="请输入用户名"/>
地址:<input name="address" type="text" />
<input type="submit" />
</form>
  • list属性可以使单行文本框获得焦点时显示一个菜单可供选择,允许自行输入内容。
<form id="userInfo">
姓名: <input name="name" type="text" />
地址:<input name="address" type="text" list="citys" />
            <datalist id="citys">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </datalist>
<input type="submit" />
</form>
  • autocomplete属性可使浏览器根据用户已输入的内容显示用户过去输入过的内容。
<form id="userInfo">
姓名: <input name="name" type="text" autocomplete="on" />
地址:<input name="address" type="text" />
<input type="submit" />
</form>
  • pattern属性规定本字段的验证模式。不符合规则的会弹出提示。
<form id="userInfo">
姓名: <input name="name" pattern="[a-z]{1,5}" type="text" />
地址:<input name="address" type="text" />
<input type="submit" />
</form>
  • indeterminate属性是checked复选框的第三种状态:模糊状态。单独用在html里不会起作用。
<body>
  <form id="userInfo">
    <input type="checkbox" id="check" name="vehicle" value="Bike" /> I have a bike
  </form>
</body>
<script>
  var check = document.getElementById("check");
  check.indeterminate = true;
</script>

1.1doctype的声明;

html4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         

"http://www.w3.org/TR/html4/loose.dtd">

html5:

<!DOCUTYPE html>

1.2字符编码:

html4:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

html5:

<meta charset="utf-8" />

 HTML5的语法兼容HTML4和XHTML1,但不兼容SGML(标准通用标记语言)。html5有向下兼容 

的特性,他可以完整的显示html4的内容;

1.3元素标记

不允许写结束标记的元素:br、embed、hr、img、input、link、meta、param。正确格式:<元素/>

<br/>

 

1.4具有boolean值的属性

<!--只写属性不写属性值,属性为true-->
<input type="checkbox" checked /><br/>
<!--不写属性,属性为false-->
<input type="checkbox" /><br/>
<!--属性值=属性名,属性为true-->
<input type="checkbox" checked="checked" /><br/>
<!--属性值=空字符串,属性为true-->
<input type="checkbox" checked="" />

1.5省略引号

<input type=button value=点击>

  

新特性

2.全局属性(所有标签都可以使用的属性)

1.contentEditable属性.允许用户对文本进行编辑,是布尔值类型,true为可编辑,false为不可编辑,默认为true
2.designMode属性.规定页面是否可编辑,值为on/off,on为页面可编辑,off页面不可被编辑,必须在javascript中使用
3.hidden属性
4.spellcheck属性.针对input和textarea标签的文本拼写语法检查,拼写错误会提示
5.tabindex属性.规定按tab键之后的选择顺序,默认按tab键对链接元素和form表单有用,
通过tabindex属性可以使其他标签也可以按Tab键获取焦点,值为-1不会获取焦点

 

3.HTML5新增元素

3.1 新增的主体结构元素:artical,aside,section,nav,time,pubdate元素

artical标签通常表示文档,页面中独立的部分,一篇博客,文章或其他独立的部分,通常可以用来表示插件,可嵌套

图片 1图片 2

<!--artical标签通常表示文档,页面中独立的部分,一篇博客,文章或其他独立的部分,通常可以用来表示插件,可嵌套-->
    <article>
        <header>
            <h1>这里是标题</h1>
            <p>文本段落</p>
        </header>
        <artical>

            <h3>这里是评论区域</h3>
            <p>正文在这里</p>
        </artical>
        <footer>底部文本</footer>
    </article>

artical

aside标签通常表示当前页面或文章的附属信息,侧边栏,广告弹出框等,一个独立的部分

图片 3图片 4

<!--aside标签通常表示当前页面或文章的附属信息,侧边栏,广告弹出框等,一个独立的部分-->
<aside>
    <nav>
        <h3>评论</h3>
        <ul>
            <li>好好学习</li>
            <li>天天向上</li>
        </ul>
    </nav>
</aside>

aside

 section内有标题有内容,强调分块或分段

图片 5图片 6

<!--section内有标题有内容,强调分块或分段,artical元素强调独立性-->
<section>
    <h1>标题</h1>
    <p>内容</p>
</section>

section

 nav主要用来做页面导航

图片 7图片 8

<nav>
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
    </ul>
</nav>

nav

 time元素表示时间

图片 9图片 10

<time datetime="2017-2-4">2017-2-4</time>
<!--T表示时间-->
<time datetime="2017-2-4T17:00">2017-2-4</time>
<!--Z国际标准UTC时间-->
<time datetime="2017-2-4T17:00Z">2017-2-4</time>
<!-- 表示时差-->
<time datetime="2017-2-4T17:00 06:00">2017-2-4</time>

time

 pubdate表示发布时间

<!--pubdate表示发布时间-->
<time datetime="2017-2-24" pubdate>2017-2-24</time>

3.2 新增的非主体结构元素:address、header、hgroup、footer元素

address元素用来在文档中呈示联系信息,包括联系人,联系地址,邮箱,电话等联系信息

header元素(一个页面可以有多个):

图片 11图片 12

<header>
   <nav>
     <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
     </ul>
  </nav>
</header>

hrader

hgroup标签用于归类同一个标题下的子标题

图片 13图片 14

<header>
    <hgroup>
        <h1>大标题</h1>
        <h2>小标题</h2>
    </hgroup>
    <p>这是正文</p>
</header>

hgroup

footer元素:

图片 15图片 16

<footer>
    <ul>
        <li><a href="#">版权信息</a></li>
        <li><a href="#">站点地图</a></li>
        <li><a href="#">联系方式</a></li>
    </ul>
</footer>

footer

网页排版:

图片 17图片 18

<body>
<header>
    <h1>大标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </nav>
</header>
<article>
    <hgroup>
        <h1>大标题</h1>
        <h2>小标题</h2>
    </hgroup>
    <p>文本正文</p>
    <section>
        <div>
            <article>
                <h3>评论标题</h3>
                <p>评论内容</p>
            </article>
        </div>
    </section>
</article>
<footer>
    <small>版权内容...</small>
</footer>
</body>

View Code

4.HTML5新增表单元素与属性

form属性:

图片 19图片 20

<!--从属form表单的标签脱离form标签,添加css样式更方便-->
<form id="testform">
    <input type="text">
</form>
<textarea form="testform"></textarea>

form属性

formaction属性:

图片 21图片 22

<!--HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面,
在HTML5中可以为所有的提交按钮增加不同的formaction属性,使单击不同按钮可以将表单提交到不同页面-->
<form>
    <input type="submit" name="n1" value="v1" formaction="../3/address.html">按钮1</input>
    <input type="submit" name="n1" value="v2" formaction="../3/hgroup.html">按钮2</input>
    <input type="submit" name="n1" value="v3" formaction="../3/paiban.html">按钮3</input>

formaction属性

formmethod属性:

图片 23图片 24

<form id="testform">
    <!--formmethod属性对每一个表单元素分别指定不同的提交方法-->
    <input type="submit" value="v1" name="n1" formmethod="post" formaction="../3/address.html">
    <input type="submit" value="v2" name="n2" formmethod="get" formaction="../3/footer.html">
</form>

formmethod属性

formtarget属性:

图片 25图片 26

<form>
    <input type="submit" name="n1" value="v1" formtarget="_blank" formaction="../3/address.html">按钮1</input>
    <input type="submit" name="n1" value="v2" formtarget="_self" formaction="../3/hgroup.html">按钮2</input>
    <input type="submit" name="n1" value="v3" formtarget="_parent" formaction="../3/paiban.html">按钮3</input>
    <input type="submit" name="n1" value="v3" formtarget="_top" formaction="../3/paiban.html">按钮4</input>
    <input type="submit" name="n1" value="v3" formtarget="framename" formaction="../3/paiban.html">按钮5</input>
</form>

formtarget属性

formenctype属性:

图片 27图片 28

<form>
    <!--formmethod属性对表单元素分别指定不同的编码方式-->
    <input type="text" formenctype="text/plain">
    <input type="text" formenctype="multipart/form-data">
    <input type="text" formenctype="application/x-www-form-urlencoded">
</form>

formenctype属性

autofocus属性:

图片 29图片 30

<form>
    <!--文本框,选择框,按钮空间加上autofocus属性,当页面打开时,该控件自动获得焦点-->
    <input type="text">
    <input type="text" autofocus>
</form>

autofocus属性

required属性:

图片 31图片 32

<form>
    <!--required属性,如果输入框内为空,就不能提交,会提示必须输入字段-->
    <input type="text" required="required">
    <button type="submit">提交</button>
</form>

required属性

list元素:

图片 33图片 34

<!--list属性类似于选择框,当用户想要设定的值不在选择列表内可自行输入,属性值为某个datalist元素的id-->
<input type="text" list="greetings">
<datalist id="greetings">
    <option value="html学习">html学习</option>
    <option value="css学习">css学习</option>
    <option value="ios学习">ios学习</option>
</datalist>

list属性

下拉菜单:

图片 35图片 36

        <select name="" id="">
            <option value="">html5</option>
            <option value="">css3</option>
            <option value="">javascript</option>
        </select>

View Code

 control属性:

图片 37图片 38

<head>
    <meta charset="UTF-8">
    <title>control属性</title>
    <script>
        //h5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素;
        function setValue() {
            var label=document.getElementById("label");
            var textbox=label.control
            textbox.value="100100"
        }
    </script>
</head>
<body>
<form>
    <label id="label">
        邮编:
        <input id="input_text" type="text" maxlength="6">
        <small>请输入六位邮编</small>
    </label>
    <input type="button" value="默认邮编" onclick="setValue()">
</form>
</body>

control属性

创建节点:

图片 39图片 40

<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
    function myFunction()
    {
        var newItem=document.createElement("LI")
        var textnode=document.createTextNode("Water")
        newItem.appendChild(textnode)

        var list=document.getElementById("myList")
        list.insertBefore(newItem,list.childNodes[0]);
    }
</script>
<p><b>注释:</b><br>首先请创建一个 LI 节点,<br>然后创建一个文本节点,<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>
</body>

View Code

labels节点:

图片 41图片 42

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels节点</title>
    <script>
        function validate(){
            var name=document.getElementById("name");
            var button=document.getElementById("button");
            var form=document.getElementById("form");
            if(name.value.trim()==""){
                 var label=document.createElement("label");
                label.setAttribute("for","name");
                form.insertBefore(label,button);
                name.labels[1].innerHTML="请输入姓名";
                name.labels[1].setAttribute("style","color:red;font-size:8px;padding:10px;");
            }
        }
    </script>
</head>
<body>
<form id="form">
    <label id="label" for="name">姓名</label>
    <input id="name" type="text">
    <input type="button" value="验证" onclick="validate()" id="button">
</form>
</body>
</html>

View Code

placeholder属性:

<input type="text" placeholder="请输入...">

autocomplete标签:

图片 43图片 44

<body>
<!--autocomplete 属性规定表单是否应该启用自动完成功能。
autocomplete属性值为on/off/空,默认空为on
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。-->
<input type="text" list="greetings" autocomplete="off">
<datalist id="greetings">
    <option value="html学习">html学习</option>
    <option value="css学习">css学习</option>
    <option value="ios学习">ios学习</option>
</datalist>
<p><b>注释:</b>autocomplete 属性适用于 &lt;form&gt;,以及下面的 &lt;input&gt; 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。</p>
</body>

View Code

image标签的宽高属性:

图片 45图片 46

<form>
    <label>姓名</label>
    <input type="text">
    <input type="image" src="../image/1.jpg" width="40px" alt="图片">
</form>

View Code

checkbox属性:

图片 47图片 48

<body>
<!--checkbox有三种状态,选中,未选中,及不明选中状态(indeterminate)-->
<input type="checkbox" id="input" indeterminate>选中测试
<script>
    var input=document.getElementById("input");
    input.indeterminate=true;
</script>
</body>

View Code

pattern正则表达式:

图片 49图片 50

    <form action="">
        <!--pattern正则表达式-->
        请输入<input type="text" pattern="[a-v]{4}">
        <input type="submit" value="提交">
    </form>

View Code

selectionDirection属性:

图片 51图片 52

<body>
    <form>
        <input type="text" name="text">
        <input value="点击" type="button" onclick="clickBtn()">
    </form>
    <script>
        /*selectionDirection属性获取用户选中文本的方向*/
        function clickBtn(){
            var text=document.forms[0]["text"];
            direction=text.selectionDirection;
            alert(direction)
        }
    </script>
</body>

View Code

 5、HTML5 改良的 input 元素的种类

5.1表单验证

图片 53图片 54

<body>
    <form id="testform" onsubmit="test_submit()">
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email">
        <input type="submit" value="提交">
    </form>
    <script>
        function test_submit() {
            var email=document.getElementById("email");
            if (email.value==""){
                alert("请输入邮箱地址");
                return false;
            }
            // 调用checkValidity()方法执行输入校验
            else if(!email.checkValidity()){
                alert("请输入正确的邮箱地址");
                return false;
            }
        }
    </script>
</body>

checkValidity()方法执行输入校验

5.2 type类型

图片 55图片 56

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <!--url类型-->
        <input type="url" name="url" value="http://www.baidu.com">
        <input type="submit" value="提交">
    </form><br/>
    <form>
        <!--email类型-->
        <input type="email" name="email" value="956600450@qq.com">
        <input type="submit" value="提交">
    </form><br/>
    <!--date类型-->
    <label for="meeting">培训日期:</label><input id="meeting" type="date" value="2017-02-24"/><br/><br/>
    <!--time类型-->
    <input type="time" name="time" value="10:00"><br/><br/>
    <!--datetime类型(UTC国际标准时间)-->
    <input type="datetime" name="datetime" value="10:00"><br/><br/>
    <!--datetime-local类型(本地日期时间)-->
    <input type="datetime-local" name="datetime-local"><br/><br/>
    <!--month类型-->
    <input type="month" name="month" value="2017-02-06"><br/><br/>
    <!--week元素-->
    <input type="week" name="week"><br/><br/>
    <!--number元素-->
    <input type="number" name="number" value="10" min="10" max="30" step="10"><br/><br/>
    <!--计算器(valueAsNumber),valueAsNumber属性很轻松地设置和读取该元素中的数值-->
    <input type="number" id="num1"> 
    <input type="number" id="num2">=
    <input type="number" id="result" readonly>
    <input type="button" id="button" onclick="bun()" value="计算">
<script>
    function bun() {
        var num1=document.getElementById("num1");
        var num2=document.getElementById("num2");
        var result=document.getElementById("result");
        result.valueAsNumber=num1.valueAsNumber num2.valueAsNumber;
    }
</script>
    <!--range属性只允许输入一定范围内的数值,可设置最大最小及每次拖动步数-->
    <br/><br/>
    <input type="range" name="range" step="5" min="0" max="100" value="20"><br/><br/>
    <!--search类型-->
    <input type="search"><br/><br/>
    <!--tel类型-->
    <input type="tel"><br/><br/>
    <!--color类型-->
    <input type="color" number="color" onchange="document.body.style.backgroundColor=document.getElementById('colorContent').textContent=this.value;">

    <br/><br/>
    <!--output元素的追加-->
    <input type="range" value="15" min="0" max="100" step="5" id="range1" onchange="value_change()">
    <output id="output1">15</output>
    <script>
        function value_change() {
            var range1=document.getElementById("range1");
            document.getElementById("output1").value=range1.value
        }
    </script>
</body>
</html>

type

5.3计算器

图片 57图片 58

<body>
<!--计算器2-->
<input type="number" id="num1"> 
<input type="number" id="num2">=
<input type="number" id="result" readonly>
<input type="button" id="button" onclick="bun()" value="计算">
<script>
    function bun() {
        var num1=document.getElementById("num1");
        var num2=document.getElementById("num2");
        var result=document.getElementById("result");

        result.valueAsNumber=add(num1.valueAsNumber,num2.valueAsNumber);
    }
    function add(a,b) {
        return a b;
    }
</script>
</body>

计算器

5.4 radio单选按钮的使用

图片 59图片 60

    <form>
        <!--radio单选按钮必须有个相同的name才能算一组-->
        你是男生还是女生?
        <br/>女生<input type="radio" name="sex"x>
        男生<input type="radio" name="sex">
    </form>

View Code

6、新增的页面元素

6.1 cite元素

    <!--cite元素主要表示作品,一本书,一部电影,一首歌等的标题,可在页面中详细引用也可提一下-->
    <h3>cite元素</h3>
    <p>我最近想看电影<cite>功夫瑜伽</cite></p>

6.2 small元素

    <!--small元素标识小字印刷体版权等相关法律信息-->
    <small>这里可以写版权等</small>

6.3 details元素和summary元素

图片 61图片 62

<body>
    <!--details元素和summary元素(details元素表示该元素有内部元素可被展开隐藏显示,有个布尔值属性open)
    summary元素是details元素的从属元素-->
    <details id="detail" onclick="detail_on()">
        <summary>好看是电影在这里</summary>
        <p id="p1">我就是好看的电影</p>
    </details>

    <script>
        function detail_on() {
            var p=document.getElementById("p1");
            if(detail.open){
                p.style.visibility="hidden";
            }else{
                p.style.visibility="visible";
            }
        }
    </script>
</body>

View Code

6.4 figure元素

图片 63图片 64

<body>
    <!--figure元素是一种组合元素,带有其标题,表示网页上独立的内容,可表示图片,统计图,代码示例,音频,视频插件等
    figcaption元素是figure的标题,一个figure只能有一个figcaption标题元素-->
    <figure>
        <img src="../image/1.jpg" alt="图片">
        <img src="../image/2.jpg" alt="图片">
        <img src="../image/3.jpg" alt="图片">
        <figcaption>图片</figcaption>
    </figure>
</body>

View Code

6.5 mark元素

    <!--mark元素表示突出高亮显示的内容-->
    <p>谁比较突出,就是<mark>我</mark></p>

6.6progress元素

图片 65图片 66

<body>
    <!--progress元素代表任务完成的进度等-->
    <section>
        <h3>progress进度</h3>
        <p>完成的百分比<progress id="pro" value="0" max="100"></progress></p>
        <input type="button" value="点击" onclick="btn()">
    </section>
    <script>
        function btn() {
            var i=0;
            function open(){
                if(i<100){
                    i  ;
                    newPogress(i);
                }
            }
            //setInterval定时器
            setInterval(open,200);
        }
        function newPogress(value_p) {
            var pro=document.getElementById("pro");
            pro.value=value_p;
        }
    </script>
</body>

View Code

7.列表的使用

ul无序列表:

图片 67图片 68

<!--ul type类型有disc(实心圆,默认),circle(空心圆,嵌套二级默认),square(实方块)-->
<ul type="">
    <li>html5</li>
    <li>css3</li>
    <li>javascript</li>
</ul>

View Code

ol有序列表:

图片 69图片 70

<!--ol有序列表type类型有A、a、I、i,默认为数字,start属性表示从哪个数字开始,reversed倒数-->
<ol start="5">
    <li>html5</li>
    <li>css3</li>
    <li>javascript</li>
</ol>

View Code

ol li ul嵌套列表:

图片 71图片 72

<!--ol li ul嵌套-->
<ol>
    <li>动物
        <ul>
            <li>猫</li>
            <li>狗</li>
        </ul>
    </li>
    <li>植物
        <ul>
            <li>花</li>
            <li>草</li>
        </ul>
    </li>
    <li>生物
        <ul>
            <li>鱼</li>
            <li>大树</li>
        </ul>
    </li>
</ol>

View Code

dl自定义列表:

图片 73图片 74

<!--dl dt dd列表-->
<dl>
    <dt>标题</dt>
    <dd>注释</dd>
    <dt>标题</dt>
    <dd>注释</dd>
</dl>

View Code

8.table表格

图片 75图片 76

<!--cellpadding内容距单元格边框间距
        cellspacing单元格间距
        align对齐方式
        colspan跨列
        rowspan跨行-->
    <table border="1" bgcolor="#f0f8ff" cellpadding="10" cellspacing="0" align="center" style="text-align: center">
        <caption>标题</caption>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        <tr>
            <td colspan="2">单元格1</td>
            <td>单元格1</td>
            <td>单元格1</td>
        </tr>
        <tr>
            <td>单元格2</td>
            <td>单元格2</td>
            <td rowspan="3">单元格2</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格3</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格4</td>
            <td>单元格4</td>
        </tr>
    </table>

View Code

9.内联框架

iframe元素:

<!--iframe 元素会创建包含另外一个文档的内联框架(即行内框架-->
<iframe src="test.html" frameborder="0" width="400px" height="400px"></iframe>

10.实体

带有特殊字符的标签不能被展现出来,要通过html实体的方式表达,如:

&lt;html&gt;表示<html>

11.audio音频元素

图片 77图片 78

<audio src="../../audio/1.mp3" controls="controls">您的浏览器暂不支持播放</audio>
<br/><br/><br/>
<!--方法2,自定义界面显示-->
<audio id="audio" src="../../audio/2.mp3">您的浏览器暂不支持播放</audio>
<button onclick="clickA()">暂停/播放</button>
<script>
    var audio=document.getElementById("audio")
    function clickA() {
        //pased:暂停状态
        if(audio.paused){
            audio.play();
        }else{
            //pase():暂停方法
            audio.pause();
        }
    }
</script>

View Code

12.video视频元素

图片 79图片 80

<body>
<video controls="controls">您的浏览器暂不支持播放
    <source  src="../../audio/1.mp4">
    <source  src="../../audio/1.ogg">
</video>
<br/><br/><br/>
<!--方法2,自定义界面显示-->
<video id="audio" src="../../audio/1.mp4">您的浏览器暂不支持播放</video>
<button onclick="clickA()">暂停/播放</button>
<script>
    var audio=document.getElementById("audio")
    function clickA() {
        //pased:暂停状态
        if(audio.paused){
            audio.play();
        }else{
            //pase():暂停方法
            audio.pause();
        }
    }
</script>
</body>

View Code

13.拖放

图片 81图片 82

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:300px; height:300px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>

<p>请把图片拖放到矩形中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="../../image/1.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>

View Code

 14.web存储

之前,都是由cookie完成数据存储的,但是,cookie不适合大量数据的存储,因为它们由每一个对服务器请求来传递,使得cookie速度很慢且效率不高。

14.1localStorage数据存储

图片 83图片 84

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web存储1</title>
    <script>
        //1.localStorage数据存储,刷新浏览器数据依然存在
        // 特点:localStorage存储的数据没有时间限制,无论多久之后依然可用,浏览器退出数据依然还在;
        var inp;
        var btn;
        window.onload=function(){
            inp=document.getElementById("inp");
            //如果localStorage.text不为空,则输出它本身;
            if(localStorage.text){
                inp.value=localStorage.text;
            }
            btn=document.getElementById("btn");
            btn.onclick=function(){
                //alert(inp.value);
                //点击按钮则将输入框中内容作为本地存储内容输出;
                localStorage.text=inp.value;
            }
        }
    </script>
</head>
<body>
    <!--input输入框中输入内容,点击save按钮,自动保存当前输入框中内容为本地存储,-->
    <input type="text" id="inp">
    <button type="button" id="btn">save</button>
</body>
</html>

View Code

14.2 sessionStorage数据存储

图片 85图片 86

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web存储2</title>
    <script src="sessionStorage.js">
        //2.sessionStorage数据存储,刷新浏览器数据依然存在
        // 特点:浏览器退出数据清除
        var num=0;
        var span;
        var btn1;
        window.onload=function () {
            span=document.getElementById("span");
            if (sessionStorage.num){
                num=sessionStorage.num;
            }else{
                num=0;
            }
            btn1=document.getElementById("btn1");
            btn1.onclick=function(){
                num  ;
                sessionStorage.num=num;
                showNumber();
            };
        };
        function showNumber(){
            span.innerHTML=num;
        }
    </script>
</head>
<body>
    0
    <button type="button" id="btn1">add</button>
</body>
</html>

View Code

 15.canvas图形绘制标签

<canvas> 标签只是图形容器,必须使用脚本来绘制图形。

<!DOCTYPE HTML>
<html>
<body>
<!--通过 canvas 元素来显示一个红色的矩形:-->
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

 

15.HTML5废除的元素

废除basefont、big、center、font、s、tt、u等元素,

不再使用frame框架

本文由必发88官网发布,转载请注明来源:html4与html5的区别及html5的一些新特性,html新增结