Html5+CSS3基础知识汇总-html5篇

最新推荐文章于 2024-07-24 21:48:20 发布

qq_27348951

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量889

点赞数 5

分类专栏： html5+CSS3 文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_27348951/article/details/53353542

版权

html5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是我学习html5和Css3的大纲，主要部分为四大块，学习总结于各种教学视频以及各类教学网站，这些内容只是html5和CSS3的一部分基础内容，暂不包括HTML5 应用缓存、HTML5 Web Workers、HTML5 服务器发送事件这些内容。 这里总结的是html5
这里写图片描述

一、html5简介

    html5是html网页标记语言不断更新的产品（动画，视频音频，图像等），目的是为了在移动设备上支持多媒体。总的来说html5在诸多方面得到了改进，在html5之前，如果想要在网页中加入视频音频等内容，需要只用第三方工具，比如flash，而且实现代码也比较繁琐，二html5中实现起来就十分简介，减轻了服务器的负担。除此之外html5还建立了一些新的规则和新特性。

二、最基本的html5的网页骨架

最基本的html5的网页骨架

1.新的网页结构

1.1.Doctype声明

<--html/html4中的Doctype声明格式
    需要定义DTD，这是由于html4是基于SGML的，而html5不基于SGML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<--html5中的Doctype声明格式-->
<!DOCTYPE html>

1.2.网页字符编码

<!--html4格式-->
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8">

<!--html5格式-->
<meta charset="UTF-8" />

2.新增网页结构元素
2.1.新增的主体结构元素

**

article元素
表示页面中的一个内容区域，可被外部引用。
主要运用：论坛帖子、博客文章、新闻故事、评论。

<h2>读者评论(评论与正文部分又进行了区分)</h2>
    <article>
        <header>
            <h3>读者：菜芽儿</h3>
            <p>时间:
            <time pubdate datetime="2016/11/16T11:31">刚刚</time>
            </p>
        </header>
            <p>文章很好</p>
    </article>

section元素
表示页面中的某个内容区域，
主要运用：页面的页眉页脚、章节、头部、底部或者文档的其他区域，也可以和h1~h6一起使用，表示出文档的结构。
使用注意：
1.不要使用section元素设置样式，那是div的作用
2.如果article元素，aside元素，nav元素更适合使用条件，那么尽量不使用section元素
3.不要为没有标题的内容区块使用section元素

    <!--
        如果一块内容相对于比较独立的时候，那么就使用article元素
        如果想将内容划分为几段的话，那么就是用section元素
    -->
    <section>
        <h1>产品</h1>
        <p>产品的种类</p>

        <article>
            <h2>A</h2>
            <p>A的介绍</p>
        </article>
        <article>
            <h2>B</h2>
            <p>B的介绍</p>
        </article>
    </section>

aside元素
表示article元素的内容之外的和内容相关的辅助信息
主要运用：页面的侧边栏内容

    <!--第一种使用在article-->
    <header>
        <h1>大标题：我们</h1>
    </header>
    <article>
        <h2>文章标题：最好的我们</h2>
        <p>文章正文：当时的他是最好的他，后来的我是最好的我。 
                    可是最好的我们之间，隔了一整个青春。 
                    怎么奔跑也跨不过的青春，只好伸出手道别。
        </p>
        <aside>
            <h3>名词解释：最好的我们</h3>
            <dl>
                <dt></dt>
                <dd>最好的我们是八月长安创作的一部优秀的作品。</dd>
            </dl>
        </aside>
    </article>
<!--
  第二种使用在article外：例子为网站的公告(全局站点的附属信息部分)
-->
    <aside>
        <h1>网站公告：</h1>
        <p>元旦放假通知</p>
        <p>春节放假通知</p>
    </aside>

nav元素
用于页面导航的链接部分
主要运用：传统导航条、侧边栏导航、内页导航、翻页操作等
time元素
定义时间或日期，表示的时间可有误差
定义格式：

    <time datatime="2016-11-18">2016年11月18日</time>
    <time datatime="2016-11-18T22：00">2016年11月18日晚上22点</time>   
    <time datatime="2016-11-18T22：00z">UTC标准时间2016年11月18日晚上22点</time>   
    <time datatime="2016-11-18T22：00+8：00">中国时间2016年11月18日晚上22点</time>

pubdate元素
可以用到article元素中的time上，表示当前文章的发布时间，当有多个datetime属性的时候，pubdate可以表示该时间为发布时间。

 <p>发布时间:<time datetime="2016-11-16" pubdate="pubdate">2016年11月16日</time></p>

2.2.新增的非主体结构元素
新增的非主体元素

header元素
定义了文档的头部区域，在一个文档中，可以定义多个header元素。
使用注意：header标签不能被放在footer，address或者另一个header 元素内部。

        <h1>网页标题</h1>
    </header>
    <article>
        <header>
            <h2>文章标题</h2>
        </header>
        <p>文章正文部分</p>
    </article>

hgroup元素
将标题和子标题分组的元素，一般会把h1~h6的元素进行分组，通常情况下文章只有一个标题的时候，是不需要hgroup元素的。
footer元素
可以作为他的上层父级元素或者一个区块的注脚。footer元素和header元素一样没有个数限制，并且可以添加到article或者section元素中。
主要运用：作者、版权信息等。

    <footer>
        <p>
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">版权信息</a>
            <a href="#">站点地图</a>
        </p>
    </footer>
    <!--可以在article或section中使用-->
    <article>
        <h1>article中</h1>
        <footer>文章的脚步注释</footer>
    </article>
    <section>
        <h1>section中</h1>
        <footer>文章的脚步注释</footer>
    </section>

address元素
用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。

3.其他新增的元素

其他新增的元素

4.废除的元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

5.加强版的ol和dl

5.1.ol

    <ol type="A" start="4" reversed="reversed">
        <li>I</li>
        <li>I</li>
        <li>I</li>
        <li>I</li>
        <li>I</li>
    </ol>

5.2.dl
dl元素在HTML5中，每一项包含一条或者多条带名字的dt元素，dt元素后面紧跟一个dd元素，用来表示定义。

<h2>属性解释</h2>
            <dl>
                <dt>HTML5</dt>
                <dd>html5是超文本标记语言</dd>
                <dt>Css3</dt>
                <dd>Css3是层叠式样式表</dd>
            </dl>

6.新的表单控件

7.Canvas

Canvas
7.1.canvas元素

用于图形的绘制，通过脚本 (通常是JavaScript)来完成
实现步骤：
- 1.创建一个canvas画布

<canvas id="canvas" width="500px" height="500px"></canvas>

- 2.引入画布脚本

/*这个是外部引用，内部引用在下面的实例中*/
<script type="text/javascript" src="canvas.js"></script>

- 3.进行绘制

7.2.绘制一个矩形

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
<script type="text/javascript">
/*方法一：使用addEventListener保证DOM节点已经就绪*/
    document.addEventListener("DOMContentLoaded",function(){
        var can=document.getElementById("canvas");//获取canvas元素
        var context=can.getContext('2d');//获取上下文
        context.fillStyle ='#000';//设置为填充
        context.strokeStyle ='#f60';//设置为轮廓
        context.lineWidth=5;//线大小
        context.fillRect(0,0,400,400);//绘制填充图形
        context.strokeRect(100,100,100,100);//绘制边框图形
        context.strokeRect(150,150,100,100);
    });
    </script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

<!--方法2.在body中加入onlode事件-->
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script type="text/javascript">
        function draw(id) {
            /*与第一种方法中的实现相同*/
    }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

<!--方法3.js代码块在body中-->
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="text/javascript">
        /*与方法一中的实现相同*/
    </script>
</body>

<!--方法4.调用外部js文件-->
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

7.3.绘制一个圆形

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function(){
        var can=document.getElementById("canvas");
        //获取canvas元素
        var context=can.getContext('2d');//获取上下文
        context.fillStyle ="#f1f2f3";//设置为填充
        //绘制图形，110，,111两句为设置背景
        for(var i=0;i<10;i++){
        context.beginPath();//开始路径
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        //创建绘制圆形路径
        context.closePath();//关闭路径
        context.fillStyle ="rgba(255,0,0,0.25)";
        //设置颜色透明度
        context.fill();//进行绘制
        context.strokeStyle="red";
        context.stroke();
        }
    });
    </script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

7.4.绘制文字

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function(){
        var canvas=document.getElementById("canvas");
        var content=canvas.getContext('2d');
        content.fillStyle="green";
        content.fillRect(0,0,800,500);
        content.fillStyle ="#fff";
        content.strokeStyle="#fff";
        content.font="bold 40px '楷体','微软雅黑' ";
        content.textBaseline='hanging';
        //content.textAlign="center";
        content.fillText('啦啦啦',70,50);
        content.fillText('哟哟哟',150,120);
        content.strokeText('巴拉巴拉',300,200);
        content.strokeText('巴拉巴拉巴拉拉TOO',0,300,800);
    });
    </script>
</head>
<body>
    <canvas id="canvas" width="800" height="500"></canvas>
</body>

7.5.保存文件

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function(){
        var canvas=document.getElementById("canvas");
        var content=canvas.getContext("2d");
        content.fillStyle="blue";
        content.fillRect(0,0,500,300);
        window.location=canvas.toDataURL("image/jpeg");
        });
    </script>
</head>
<body>
    <canvas id="canvas" width="500" height="300"></canvas>
</body>

8.本地储存

本地储存

9.影音与媒体

9.1.video与audio元素的基础知识

video
在html5中专门用来播放网络上的视频或电影。

<video src="...." controls="controls" width="" height="">您的浏览器不支持</video>

source
元素指定多个播放格式与编码，以保证浏览器可以从中选择一种自己支持的播放格式进行播放。

<source>
    <video></video>
    <video></video>
</source>

audio
在html5中专门用来播放网络上的音频。

<audio src="...." controls="controls">您的浏览器不支持</audio>

9.2.video与audio的属性
video和audio属性

10.Html5拖放API

10.1.拖放步骤

将对象的darggable属性设置为真，a和img元素必须指定href
编写与拖放有关的事件处理程序
DataTransfer对象的属性和方法
拖放时的效果

qq_27348951

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Html5+CSS3基础知识汇总-html5篇

这是我学习html5和Css3的大纲，主要部分为四大块，学习总结于各种教学视频以及各类教学网站，这些内容只是html5和CSS3的一部分基础内容，暂不包括HTML5 应用缓存、HTML5 Web Workers、HTML5 服务器发送事件这些内容。这里总结的是html5，如有错误欢迎纠正。
复制链接

扫一扫