html5学习笔记

最新推荐文章于 2023-02-04 20:54:59 发布

绿叶清风

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量669

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45704517

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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>