HTML5笔记

最新推荐文章于 2023-11-20 11:24:44 发布

杨咩咩yang

最新推荐文章于 2023-11-20 11:24:44 发布

阅读量216

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/yang1393214887/article/details/79360903

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新的网页结构

1.表示页面中的一个内容区块或者整个页面的标题<header><header>

2.导航链接的部分：<nav></nav>

3.<article></article>表示页面中与上下文不相关的独立内容，可以被外部引用

4.<section></section>表示页面中的一块内容区块，比如章节的页眉、页脚等，也可以和h1、h2...等一起使用，标出文档的结构

5.<aside></aside>表示与article元素的内容之外的，和内容相关的辅助信息

6.<footer><footer>页脚

新增的主体结构元素

1.article元素

2.section元素。不建议没有标题（好，和）的块内容使用

3.aside：作为文章主要内容的附属部分，与当前文章有关的名词解释、参考文献；在页面最外，作为全局的附属信息

4.nav：导航：传统导航、点击后跳转到本页面的指定位置、翻页

5.time：表示的时间允许带时差

6.pubdate 属性：可以用在article元素里面的time上面，表示当前文章或网页的发布时间

新增的非主体结构元素

1.header：可以多次出现，陆吾网页标题和文章标题可以同时使用

2.hgroup：是收集一堆标题的，但很少有一大堆h1,h2...的集合扎堆，已经被废除，所以有主标题和副标题时，可以加header

header 也是 HTML5 新增的语义性标签，用来表示头部信息，一般不会被废弃。我们可以这样做：

<header>
<h1 ><a name="toc-5"></a>潜行者m</h1>
<p>关注前端开发热爱简约设计。</p>
</header>

3.footer：

4.address

其他新增元素

1.figure与figcaption

2.details与summary

3.Mark元素

4.progress元素

5.meter元素

optimum的值与 low 和 hight 的值进行比较：

optimum < low:

optimum > height：

low <= optimum <=height：

HTML5废除的元素

1.能使用css代替的元素：basefont、big、center、font、s、strike、tt、u

big：使用css将字体大小加大就可以实现

2.不在使用frame框架

3.只有部分浏览器支持的元素

4.其他被废除元素

A：废除rb元素，使用ruby元素代替

B：废除acronym元素，使用abbr元素代替

HTML5大纲

HTML5新增的拖放功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function allowDrop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            ev.dataTransfer.dropEffect = 'link'
        }

        function drag(ev)
        {
//         使用setData(数据类型，携带的数据)
//         方法将要拖放的数据存入dataTransfer对象
//            ev.clearData();
            ev.effeAllowed = 'all';
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            //使用getData()获取到数据，然后赋值给data
            var data=ev.dataTransfer.getData("Text");
            //使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
    <style>
        #tuo{
            background: #e54d26;
            width: 540px;
            height: 320px;
        }
        #cun{
            width: 540px;
            height: 320px;
            border: 2px solid #D2D2D2;
            box-shadow: 1px 4px 8px #646464;
        }
    </style>
</head>
<body>
<div  id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br/>
<img src="html5.png" id="tuo" draggable="true" οndragstart="drag(event)"  width="500" height="280" / >
</body>
</html>