Juice007
Juice007

HTML5复习笔记

这学期学习了HTML5移动应用开发。虽然是叫做移动应用开发，但是老师并没有讲太多关于怎么用H5开发移动APP。更多的是一些H5的基础知识。趁着考试之际，将本学期课程的重难点以及课后作业做一下总结。

HTML4和CSS2复习

  • 常用标签：
  • 标题

    //注意：h1不一定比h6的字体大
  • 换行
  • 无序列表(unordered list)[有序列表是ol(ordered list)]
    
   
  • apple
    •  //list item
   
  • orange
    •
  • 超链接

    进入Baidu
  • 图片(alt表示图片不能显示时显示的文字)
这是一张图片
  • 表格
  //定义一行
        

    
定义表头
    

    

        定义一个单元格的数据
  • div与span

称为区域标签用于将若干相邻的html元素组合成一个区域块。属于块元素
作用与div类似。主要区别就是一个div独占一行，而span会接着排列。属于内联元素
块元素一般从其他行开始，内联元素一般直接在后面显示
块元素与内联元素之间的转换可以通过css中的display属性值设为block和inline来转换

  • 什么是CSS中的继承和层叠
  • 继承：css中的继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于他的后代。
  • 层叠：层叠允许css的样式进行叠加，优先级高的样式会覆盖优先级低的

层叠规则：ID选择器(id) > 类选择器(class) > 标记选择器(html中的标签)

CSS

  • css常用属性：
  • font-family字体
  • font-size文字大小
  • color文字颜色
  • font-wight文字粗体
  • css边框图像半径和盒子阴影：
  • css3之前边框的属性：
    a. 宽度border-width:2px
    b. 颜色border-color:green
    c. 风格border-style:dashed//dashed表示虚线
  • 代码含义
border-image-slice //设置边框背景图的切割大小为几像素
border-image-width //表示承接图片的的宽度（用于指定使用多厚的边框来承接被裁减后的图像）
border-width //表示普通边框的宽度（当不写border-image-width时由外部的border-width定义）
border-image-repeat :
//stretch:拉伸（拉伸至充满屏幕）  
//repeat：重复（图片可能不完整，超出边界部分被截断）
//round：平铺（图片一定是完整的，动态调整尺寸以铺满屏幕）
border-radius:20px/20px 40px 80px;
//设置圆角边框：四个角的水平半径都为20px，左上的垂直半径为20px,右上和左下的垂直半径为40px，右下垂直半径为80px
border-radius:20px 40px 80px 100px/20px 40px
//左上，右上，右下，左下的水平半径依次为20,40,80,100.左上，右下的垂直半径都为20px，右上，左下的垂直半径都为40px
box-shadow:10px 20px 30px red
//阴影水平偏移10px，阴影垂直偏移20px，阴影模糊值为30px，阴影颜色为红色
  • css文本颜色属性：
  • text-overflow属性的含义：
    设定内容溢出状态下的文本处理方式
    Clip:裁剪
    Ellipsis:显示省略
    必须配合以下两个使用，否则看不到效果：
    Over-flow:hidden（超出部分隐藏）
    White-space:nowrap（禁止换行）
  • text-align属性取值为left和start效果不一定相等（要看语言的种类）
  • text-shadow:3px 4px 5px red //阴影水平偏移值 阴影垂直偏移值 阴影模糊值 阴影的颜色
  • text-stroke-color //文本边框颜色
  • text-fill-color //文本填充颜色
  • word-wrap:break-word //内容在边界内换行
  • color:rgba(0, 0, 255, 0.5) //红，绿，蓝，不透明度（1为不透明，0为全透明）
  • background:HSL(0, 100%, 50%, 0.3) //色调，饱和度，亮度，不透明度
  • color:transparent表示透明颜色（另外还可用opacity）
  • css之2D变形与动画
  • css3中的4种2D变形(transform)：
    a. translate 移动
    b. rotate 旋转
    c. scale 缩放
    d. skew斜切
  • 把一个div块在浏览器的水平和垂直方向都居中(先利用绝对定位将div左顶点居中，再平移50%)
div{
    width:200px;
    height:200px;
    background-color:#090
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);  //以左上角为原点向左移动50%，向上移动50%
}
  • 旋转方法：
    transform:rotate(45 deg); 默认以中心点为中心。
    在div中添加：
    transform.origin:top left； 来修改
  • transformL:scale(0.5, 2);x轴缩放0.5倍，y轴缩放2倍
  • 斜切是指元素沿着一条轴倾斜：
transform: skew(30deg,20deg);
transform:skewX(8deg);
transform:skewY(10deg);

JQuery相关

待补充

HTML5标签

  • 文档类型声明：
//指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染
  • 新增的html5结构化标签
  • 定义一篇文章
  • 定义页面或区域的头部
  • 定义一个区域
  • 定义页面或区域的底部
  • 定义一个对话框
  • 新增的html5多媒体标签
  • 定义一个视频
  • 定义一个音频
  • 定义媒体资源
  • 定义图片（画布）
  • 定义外部可交互的内容或插件（如：flash）
  • html5重新定义的标签
  • 表示小字体
  • 表示重要性（不是强调符号）
  • 标记一个元素的详细元素
    的时候,
    表示 标题列表，
    表示列表内容

HTML5表单

  • html4中常见的表单标签,