今天学习了HTML5的基础知识：
http://www.maiziedu.com/course/web/228-2651/
一、HTML5是什么
HTML5是超文本标注语言，主要用来网页的制作。目前移动端的浏览器内核对HTML5的支持度很高，所以在移动端H5有很好的应用空间。
二、HTML5的基本结构
1. 开头是<!DOCTYPE html>
2. 一对<html>包裹所有代码
3. 最前方一对<head>部分，按照我的理解，是用来存贮字符类型设置、引入脚本，设置内容的格式等等
4. 一对<body>部分，是文章的正文，可以放内容，放导航，放侧边栏
三、HTML5的元素
学习了很多元素，不太确定都是干嘛的：
1.<article>，主要用来放一段正文内容
2.<scetion> 用于分块用的
3.<aside> 用于写注释用的
4.<footer>用于写尾注用的
5.<time> 用于写时间用的 <time datetime=“”></time>
6.<p><p>用于写普通文本用的
7.<address>用于写地址用的
8.<dl>用于写一些术语名词的列表用的
9.<dt>用于放一个具体的名词术语
10.<dd>用于解释一个名词术语，写一段话。
11.<details>与<summary> 只有chrome和opera支持。用来写一个可以收缩的文字。
12.<mark>元素，用来高亮
13.<progress> IE不行。用来写一个进度条 <progress value="" max="" min="" optinum=""></progress>
14.<meter>同上，可以写成<meter value="" max="" min="" high="" low="" optinum=""></progress>
四、插入
插入图片： <img src="">
插入链接: <a href="">
五、设定文字格式
在<head>部分里：
body{
font-family:微软雅黑;
text-align:center;
body{
color:#60;
text-decoration:none;
}
hgroup{
margin-bottom:10px;
}
nav{
background:#f60;
height:48px
}
nav li{
float:left;
background #000000;
border-radius:5px
padding:5px 10px;
margin:10px;
li-style:none;
}
上面是一些格式的用法，最终效果会给文字链接加上底色，圆框，对齐，比较好看。
六、使用canvas画图
需要使用js配合html来画图
1. 创建画布 <body οnlοad="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
2. 要引入js文件
在head部分<script type="text/javascript" src="canvas.js"></script>
3. 使用getElement方法 ，获得画画的那个对象。
3. js写法
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.strokeStyle ="#fff";
context.lineWidth = 5;
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
context.stokeRect(110,110,180,120);
}
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
