html5.docx
《html5.docx》由会员分享,可在线阅读,更多相关《html5.docx(94页珍藏版)》请在冰豆网上搜索。
![html5.docx](https://file1.bdocx.com/fileroot1/2023-2/7/9addb0d4-b89e-4b8a-a465-7c0f5d8c1a98/9addb0d4-b89e-4b8a-a465-7c0f5d8c1a981.gif)
html5
目录
安装配置1
安装dreamwaevercs62
设计2
HTML5与HTML4比较2
CSS2和CSS33
制作一个漂亮的视频播放器8
Canvas图形绘制基础10
在线画板10
国内的JqueryCDN免费服务12
全局属性及事件的用法15
Video标签详解18
HTML5中的音频19
神奇的拖放功能19
HTML5内联SVG21
HTML5地理定位22
LocalStorage(本地存储)27
HTML5WebSQLDatabase29
PhoneGap32
jQueryMobile入门33
JavaScript回顾133
JavaScript回顾235
JavaScript回顾337
JavaScript回顾445
JavaScript回顾547
JavaScript回顾652
JavaScript回顾755
jqMobi基础57
jQuery中的选择器59
jQuery中的过滤器详解64
安装配置
安装dreamwaevercs6
出现翻译器为装载,重装,安装目录为只读,修改
设计
HTML5与HTML4比较
HTML5的声明:
[html]viewplaincopy
print?
在CODE上查看代码片派生到我的代码片
DOCTYPEhtml>
在HTML5中变的更简单:
从上面可以看出HTML5在以前浏览器发展的基础上对标签进行了简化。
另外HTML5中对标签从语法上也进行了分类:
(1)不允许写结束符的标签:
area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
(2)可以省略结束符的标签:
li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
(3)可以完全省略的标签:
html、head、body、colgroup、tbody
新增:
标记定义一篇文章
标记定义一个命令按钮
标记定义一个元素的详细内容
标记定义一组媒体内容以及它们的标题
标记定义文件中一个区块的相关信息
标记定义表单里一个生成的键值
标记定义有标记的文本
标记定义measurementwithinapredefinedrange
标记定义rubyannotations.
标记定义媒体资源
制作网页头部导航的代码如下
HomeAbout在HTML5中用独立的标签代表特定的功能,比如表示头部,
CSS2和CSS3
HTML5要具备CSS的知识,在页面设计的时候HTML5知识页面的布局与结构,要实现一个很绚丽漂亮的界面就需要借助CSS。
下面我们先来回顾一下css2的基本用法,再来看看和css3的关系与区别。
1、css是什么?
cascadingstylesheet(级联样式表),为网页提供表现形式。
按照w3c规范,设计一个网页,应该将网页的数据与结构写在html文件里,网页的外观写在css文件里,而网页的行为写在.js文件里。
这样做的目的是将网页的数据,外观,行为分离,方便代码的维护。
2、css选择器:
(1)标记选择器(简单选择器)
(2)class选择器
.s1{
属性名:
属性
}
还有一种有名字的class选择器,如下:
div.s1{
font-size;120px;
}
(3)id选择器
#d1{
font-size:
italic;
font-weight:
900;
}
(4)选择器分组
h1,h2,h3{//用逗号隔开
pre">color:
bllue;
}
(5)选择器的派生
#d2p{
pre">color:
red;
font-size:
300;
}
CSS中的注释
/**/
样式的优先级:
外部样式,将样式写在.css文件里
内部样式,将样式写在.html文件里
内联样式,将样式写在style=""里面
发生冲突时:
外部样式<内部样式<内联样式。
CSS中的两个关键属性:
(1)display属性
有三个值:
block按块标记的方式显示该标记
inline按行内标记的方式显示该标记
none不显示
--display属性-->
#d1{
width:
200px;
height:
100px;
background-color:
red;
color:
white;
font-size:
40px;
display:
inline;
--改为行内标记-->
}
#d2{
width:
200px;
height:
100px;
background-color:
blue;
color:
white;
font-size:
40px;
display:
inline;
--改为行内标记-->
}
hello1