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

列表测试代码：

<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