html5学习笔记
来源:互联网 发布:淘宝网天猫女冬皮鞋 编辑:程序博客网 时间:2024/06/16 03:44
html5:
html5新特性:
1,用于绘图的canvas标签
2,用于媒介回放的video和audio元素
3,对本地离线存储的更好支持
4,新的特殊内容元素:如article,footer,header,nav,section
5,新的表单控件;如:calendar date time eamil url search
6,浏览器的支持,safai,chrome,firfox....
html5开发环境:intellij idea
html5元素属性和格式化使用方法:
hmtl元素:从开始标签到结束标签所有代码
常用列表标签:
ol:有序列列表 (会自动在前面显示1,2,...) 属性:A a l i start
ul:无序列表 属性:disc circle square
li:列表项
dl:列表
dt:列表项
dd:列表项的描述
嵌套列表:ul ol li
自定义列表:dl dt dd
html中的div示例布局:
form
html5新特性:
1,用于绘图的canvas标签
2,用于媒介回放的video和audio元素
3,对本地离线存储的更好支持
4,新的特殊内容元素:如article,footer,header,nav,section
5,新的表单控件;如:calendar date time eamil url search
6,浏览器的支持,safai,chrome,firfox....
html5开发环境:intellij idea
html5元素属性和格式化使用方法:
hmtl元素:从开始标签到结束标签所有代码
常用列表标签:
ol:有序列列表 (会自动在前面显示1,2,...) 属性:A a l i start
ul:无序列表 属性:disc circle square
li:列表项
dl:列表
dt:列表项
dd:列表项的描述
嵌套列表:ul ol li
自定义列表:dl dt dd
列表测试代码:
<body><!-- ol:有序列列表 (会自动在前面显示1,2,...) 属性:A a l i start ul:无序列表 属性:disc circle square li:列表项 dl:列表 dt:列表项 dd:列表项的描述--><!--创建列表--> <ul> <li>苹果</li> <li>香蕉</li> </ul> <ol> <li>苹果</li> <li>香蕉</li> </ol> <ul type="circle"><!--disc 实体贺 circle 空心圆 square方块--> <li>ios</li> <li>android</li> <li>html</li> </ul> <ol type="i"><!-- A 大写的A开头 a 小写的a开头 l 从1开始 i 以罗马数据开头 start 从多少开始--> <li>ios</li> <li>andriod</li> <li>html</li> </ol> <!--无序嵌套列表--> <ul> <li>人</li> <ul> <li>男</li> <li>女</li> </ul> <li>动物</li> <ul> <li>鱼</li> <li>狗</li> </ul> <li>植物</li> </ul><!--有序嵌套列表--> <ol> <li>人</li> <ol> <li>男</li> <li>女</li> </ol> <li>动物</li> <ol> <li>鱼</li> <li>狗</li> </ol> <li>植物</li> </ol> <!--自定义列表(前面没有标识)--> <dl> <dt>hellowrold</dt> <dd>每一种语言都是从hellowrld开始</dd> <dt>hellowrold</dt> <dd>每一种语言都是从hellowrld开始</dd> <dt>hellowrold</dt> <dd>每一种语言都是从hellowrld开始</dd> </dl></body>
块元素:
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{color: aqua;} #divid p{color: #fff342;} /*--div 中p标签的样式--*/ </style></head><body> <!-- 块元素相关知识: 1,html块元素在显示时,通常会以新行开始,如hl p ul 2,html内联元素通常不会以新行开始,如 b a img 3,div元素也被称为块元素,其主要是组合html元素的容器 4,span元素是内联元素,可作为文本的容器 --> <p>hello!</p> <b>这是一个加重标签</b> <a>这是一个超链接</a> <div id="divid"> <p>hello,晚上好!</p> <a>点我一下</a> </div> <div id="divspan"> <p><span>这是一个测试效果</span>span是一个啥样</p> </div></body></html>
html中的div示例布局:
<head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{margin: 0px;} div#container{ width: 100%; height: 950px; background-color: darkgrey; } div#heading{ width: 100%; height: 10%; /*相对于container的10%*/ background-color: aqua; } div#content_menu{ width: 30%; height: 80%; float: left;; background-color: aquamarine; } div#content_body{ width:70%; height:80%; float: left;; background-color: blueviolet; } div#foot{ width:100%; height:10%; background-color: black; clear:both; } </style></head><body><!-- 布局方法: 1,div 2 ,table--><div id="container"> <div id="heading">头部</div> <div id="content_menu">内容菜单</div> <div id="content_body">内容主体</div> <div id="foot"></div></div></body>2,table布局示例
<body style="margin: 0px;"> <table width="100%" height="950px;" style="background-color: #fff342"> <tr> <td colspan="2" width="100%" height="10%"></td> </tr> <tr> <td width="30%" height="80%" style="background-color: greenyellow"> <ul> <li>ios</li> <li>android</li> </ul> </td> <td width="70%" height="80%" style="background-color: darkgoldenrod">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="2" style="background-color: red">这是底部</td> </tr> </table></body>
form
<body><!-- 表单标签: form input radio label fieldset(定义域) legend(域的标签) optgruop --><form> <input type="text">....</form></body>
<body><!-- frame:框架集标签定义如何将窗口分割为框架 每一个frameset定义一第列行或列 rows/cols的值规定了每行或每列占据屏幕的面积 常用标签: noresize:固定框架大小 cols:列 rows:行 内联框架:iframe
--><!--<frameset rows="20%,30%,50%">--> <!--<frame src="framea.html"></frame>--> <!--<frame src="frameb.html"></frame>--> <!--<frame src="framec.html"></frame>--><!--</frameset>--><a href="http://www.baidu.com" target="_parent">baidu</a><!--内联框架 frameborder去掉边框 ;iframe配合a标签使用时 href中的target为:_self:在自己的页面打开,_parent:在父级页面打开 ,top:在顶级页面打开(最外面的页面打开)--><iframe src="framec.html" frameborder="0" width="400" height="400"></iframe>
</body>
b:
<body bgcolor="#adff2f">frameb<iframe src="framec.html" width="400px" height="400px;"></iframe></body>
<body bgcolor="yellow">frameb<iframe src="framea.html" width="400px" height="400px;"></iframe></body>
<body> <!--如果要在页面上显示<html>? 可以通过实体来代替,如 < 表示右尖括号,> 为左尖括号 需要的时候可以直接百度:html实体 -->abcd<html ><!-- xhtml(代码的完整性和良好性) xhtml与html4.0几乎是相同的 xhtml更严格更纯净的html版本 xhtml是以xml应用的方式定义html--></body>
<head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background-color: greenyellow;background-image: url("aa.img");} p{background-color:yellow;padding: 10px; }/*padding可以加宽*/ </style></head><body><!--css3允许应用纯色作为背景,也允许使用背景图片做为背景background-image:url();background-position:设置背景图片的起始位置 right:代表right(当前图片所在视图的位置)和center(图片显示的位置) right top:右上显示 right left: center center: 100px 100px:background-repeat:设置图片是否可以重复 (默认允许重复) no-repeat:不允许重复 repeat-x:x重复 repeat-y:y重复backgroud-attachment:设置背景图片是否滚动backgroud-size:规定背景图片的尺寸backgroud-origin:规定背景图片的定位区域backgroud-clip:规定背景的绘制区域--> <p>测试一下背景是否可以继承(不能继承)</p></body>
0 0
- HTML5学习笔记 HTML5基础教程
- HTML5学习笔记
- HTML5学习笔记
- html5标签学习笔记
- html5学习笔记之一
- html5 学习笔记
- html5 视频学习笔记。。。
- 学习HTML5笔记
- html5学习笔记一
- html5学习笔记二
- html5学习笔记三
- html5学习笔记四
- HTML5-WebStorage学习笔记
- HTML5学习笔记二
- html5 canvas 学习笔记
- HTML5学习笔记
- HTML5学习笔记二
- HTML5学习笔记
- MySql+Memcached架构的问题
- POJ 2409 ploya定理
- nginx、php-fpm默认配置与性能–TCP socket还是unix domain socket
- UIApplication sharedApplication 的常用使用方法
- POJ 3070 矩阵快速幂
- html5学习笔记
- 手机连接wifi 访问本地服务器网站
- 音频播放
- 部署memcached环境及PHP扩展
- Windows安装配置php+memcached的方法
- 判断sqlserver对象是否存在
- MySQL管理数据表
- POJ 2367 topo
- 为现代JavaScript开发做好准备