文档章节

html4与html5的区别及html5的一些新特性

Akillua
 Akillua
发布于 2017/07/27 10:51
字数 4472
阅读 7
收藏 0
区别

1.html5语法的改变

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

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

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

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

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

 nav主要用来做页面导航

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

 time元素表示时间

<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元素(一个页面可以有多个):

<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标签用于归类同一个标题下的子标题
<header>
    <hgroup>
        <h1>大标题</h1>
        <h2>小标题</h2>
    </hgroup>
    <p>这是正文</p>
</header>
hgroup

footer元素:

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

网页排版:

<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属性:

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

formaction属性:

<!--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属性:

<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属性:

<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属性:

<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属性:

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

required属性:

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

list元素:

<!--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属性

下拉菜单:

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

 control属性:

<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属性

创建节点:

<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节点:

<!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标签:

<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标签的宽高属性:

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

checkbox属性:

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

pattern正则表达式:

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

selectionDirection属性:

<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表单验证

<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类型

<!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;">
    <span id="colorContent"></span>
    <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计算器

<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单选按钮的使用

<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元素

<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元素

<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元素

<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无序列表:

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

ol有序列表:

<!--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嵌套列表:

<!--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自定义列表:

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

8.table表格

<!--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音频元素

<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视频元素

<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.拖放

<!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数据存储

<!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数据存储

<!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>
    <span id="span">0</span>
    <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框架

© 著作权归作者所有

Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
全新改进的 HTML5 表单创建

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有...

小卒过河
2011/07/23
4.1K
16
HTML4和HTML5之间的10个主要不同

本文是从 10 Essential Differences Between HTML4 and HTML5 这篇文章翻译而来。 HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感...

红薯
2011/11/17
2.6K
4
知识普及:天煞的HTML5到底是个什么东西

HTML5开始大热标志性的事件是苹果前CEO Steve Jobs 公开炮轰Adobe Flash,并指出Flash在移动终端的不利因素,而且HTML5将获得胜利。顿时IT界、数字营销界、数字媒体界等相关领域的人开始一窝...

张金富
2011/12/28
4.5K
8
W3C 接连推出 7 个 HTML 草案

最近 W3C 一口气推出 7 个 HTML 工作草案,涵盖了 HTML5,HTML RDF,HTML Microdata,HTML Canvas, HTML Bidi 等标准。这些草案多数与 HTML5 有关,虽然 HTML5 标准的真正发布与实现还有很远...

红薯
2010/03/10
438
0
HTML4 和 HTML5 的10个关键区别

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话 ,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆...

虫虫
2011/10/13
89.7K
14

没有更多内容

加载失败,请刷新页面

加载更多

在优麒麟中运行英雄联盟LOL

sudo apt install wine-stable sudo add-apt-repository ppa:lutris-team/lutris sudo apt install lutris 在lutris官网的game分类里找到英雄联盟这个游戏,然后进去那个页面, https://lutr......

gugudu
20分钟前
3
0
Mysql主从

一、mysql主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的,MySQL主从基于binlog,主上须开启b...

wxy丶
24分钟前
2
0
商品SKU规格算法

思想 定义规格属性数据格式 定义生成SKU数据格式 完成点击多选框后生成的数据源 根据数据源生成SKU数据 根据生成的SKU数据做展示 代码示例 <!DOCTYPE html><html><head> <!-- 页面met...

chinahufei
32分钟前
0
0
面试点:Java 中 hashCode() 和 equals() 的关系

Java 中 hashCode() 和 equals() 的关系是面试中的常考点,如果没有深入思考过两者设计的初衷,这个问题将很难回答。除了应付面试,理解二者的关系更有助于我们写出高质量且准确的代码。 一....

爱码仕i
33分钟前
3
0
传智播客JNI第七讲 – JNI中的全局引用/局部引用/弱全局引用、缓存jfieldID和jmethodID的两种方式

讲解JNI中的全局引用/局部引用/弱全局引用、缓存jfieldID和jmethodID的两种方式,并编写两种缓存方式的示例代码。 1.从Java虚拟机创建的对象传到本地C/C++代码时会产生引用,根据Java的垃圾回...

shzwork
44分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部