HTML5基础总结

作者: 不二曾经 | 来源:发表于2018-01-01 21:36 被阅读0次

HTML5页面设计

DTD的写法

<!DOCTYPE html>

页面结构

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>  
    </body>
</html>

超链接标签<a>的完整写法

<a href = “http://www.163.com “> 请点击</a>

有序列表和无序列表的写法

无序列表

<ul>
        <li>Python</li>
        <li>HTML5</li>
        <li>Java</li>
        <li><a href="https://www.google.com.hk/?hl=zh-cn">谷歌</a></li>
</ul>

有序列表

<ol>
        <li>Python</li>
        <li>HTML5</li>
        <li>Java</li>
        <li><a href="https://www.google.com.hk/?hl=zh-cn">谷歌</a></li>
</ol>

img标签的用法

<img src="image/logo.gif" alt="请上淘宝网"/>

form表单的action、method、enctype属性
1. action属性：
  
  用户填入表单的信息总是需要程序来进行处理，这个属性指明表单数据要发送到的页面或程序，如果这个属性是空的或未写，那么当前的文档URL将被使用。
2. method属性：
  
  有两个值:
  
  get:它是默认值，使用这种方法表单中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送,空格转换为”+”，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISO Latin-1）值。
  
  例如：
```
http://www.test.com/1.htm?keyword=asp.net+ajax
```
使用这种方式传输的数据量小，由于受到URL长度的限制，最多只能传递1024字节（1KB），它在HTTP头部传递。

post：这种方法传递的数据量大，可以达到2M，它把数据作为http请求的内容，数据不会附加在url之后。
1. enctype属性
  
  有两个值：

application/x-www-form-urlencoded

窗体数据被编码为名称/值对。这是标准的编码格式，缺省值；

multipart/form-data

form表单中需要上传文件时需修改成这个值。

input标签的required、placeholder属性的使用，type属性的各种变化
1. placeholder
  
  用户还没有输入值时，输入型控件向用户显示提示信息。
2. required
  
  用于实现输入智能提示
  
  input标签加入required属性
3. type
  1. 简单文本框 text
  2. 密码框 password
  3. 数字框 number
  4. 复选框 checkbox
  5. 单选框 radio
  6. 日期选择 date
  7. 上传文件 file
  8. 普通按钮 button
  9. 图片按钮 image
  10. 提交表单数据按钮 submit
  11. 清除表单数据按钮 reset
  12. 颜色选择框 color
  13. 日期+时间输入 datetime-local
  14. 周数选择 week
  15. 月份选择 month
  16. 时间输入 time
  17. Email输入框 email
  18. 电话输入框 tel
  19. 网址输入框 url
  20. 搜索框 sesrch
  21. 滑块 range
  22. 隐藏域 hidden
  23. select 下拉框标签
```
<select name="水果" size="5" multiple>
        <option value="1">苹果</option>
        <option value="2">橘子</option>
        <option value="3">栗子</option>
        <option value="4">香蕉</option>
</select>
```
在form表单中name属性的重要性

name：定义input元素的名称。
HTML5提供了哪些新特性？
1. canvas
2. 音频与视频
3. GeoLoction
4. WebGL
5. WebSocket
6. 本地存储
7. 离线应用程序

CSS

css的语法格式

p{
    color:red;
    text-align:center;
}

id选择器和class选择器的使用

id选择器：

<p id=“intro”>测试文本</p>
#intro {font-weight:bold;}

class选择器：

<p class =“intro”>测试1</p>
<p class =“intro”>测试2</p>
.intro{font-weight:bold;}

css样式的权重、!important的使用

标签选择器，权重为1；

class选择器，权重为10；

id选择器，权重为100；

在html标签中直接使用style属性，这里的style属性的权重为1000；

权重一样时，会采用“层叠原则” 后定义的会被应用，可以使用!important提升样式的优先级
css的前缀问题

-moz-对应 Firefox

-webkit-对应 Safari and Chrome

-o- for Opera

-ms- for Internet Explorer
浮动属性的使用

float:left;
float:right;
clear:right/left/both;

相对定位与绝对定位

position：元素定位方式

position:relative;//相对定位下，元素的位置相对于它本来该出现的位置的偏移，但原有的空位还留着
position:absolute；//在绝对定位下，元素的位置相对于最近的已定位的祖先元素，若没有，则相对于body
position:fixed;//固定定位，以浏览器窗口作为参照物。不管浏览器滚动条如何滚动或浏览器窗口大小如何变化，始终显示在固定的位置。

z-index:控制多个元素重叠时的次序，值越大越在上面显示

使用圆角的属性

border-radius

使用动画效果的CSS规则写法

@keyframes

使用网络字体的css属性

@font-face

实现响应式布局的手段？重点是viewport的用法，@media、rem布局
1. 使用viewport
  
  在开发应用于移动设备的网站时，常在<head>标签中加入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

content中的属性含义：

width：设置内容的宽度，为一个正整数或”device-width”

initial-scale：初始放大比例，为1个数字，可用小数

minimum-scale：最小缩放值，可用小数

maximum-scale：最大缩放值，可用小数

user-scalable：是否允许用户进行缩放，值为"no"或"yes"

不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素

不要使用：width:xxpx;

要使用：width:xx%; 或width:auto;
相对大小rem

尺寸和字体的大小都可以使用，相对于根元素<html>来设置字体大小的

<html style="font-size: 19.2px;"></html>

例如：width: 9.3rem;//实际大小是179px

font-size: 1.5rem;//实际大小是29px

流动布局

各个区块的位置都是浮动的，不是固定不变的,例如：
```
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
```
@media规则

针对不同的媒体类型和屏幕尺寸，还有不同的大小和高度实现响应式布局，重新渲染页面

针对不同的屏幕尺寸设置不同的样式

@media only screen and (media feature) {
                CSS-Code;
}

针对不同的媒体使用不同的.css文件：

<link rel="stylesheet" media="only screen  and (media feature)"    href="mystylesheet.css">

BootStrp框架
比较流行的一套前端开发框架,使用它可以轻松搭建响应式布局页面

JavaScript

JavaScript在页面中的书写
1. 嵌入网页形式，在网页任意处正确嵌套
```
<script type="text/javascript">
        //javascript程序
</script>
```
1. 单独的.js文件形式，尽量放在body结束前底部
```
<script src="js/test01.js"></script>
```
声明变量的关键字

var

6种类型：undefined，null，boolean，number，string，object
parseInt和parseFloat的使用

parseInt方法和parseFloat方法，这两个方法只能对string类型调用，其他的全部返回NaN

parseInt方法首先检查位置0处的字符，判断它是否是个有效数字，若有效，再往下检查，直到发现非数字，并返回前面的检查结果。
例：

var num1 = parseInt(“1234”); //得到1234

==与===的区别；
1. ==
  为确定两个变量是否相等时，两个变量都会
  进行类型转换

alert(“5”==5);//输出true

===
除了比较数值的相等，还要比较数据类型

alert(“5”===5);//输出false

定义数组

var array=[];

定义object对象

var obj={};

jQuery的查找器符号”$”的使用

$(选择器符号字符串)

$(“#mybtn”)

标准DOM的查找方法
1. getElementsByTagName：返回一个页面
  上所有包含tagName（标签名）等于某个指定值的
  元素节点对象集合
2. getElementById：根据标签的id属性返回
  一个节点对象
3. getElementsByClassName：返回所有
  class属性为指定值的节点对象集合
4. querySelector和querySelectorAll:使用CSS选择器查找，不同的是前者只返回符合条件第1个节点对象，后者则是所有对象集合。

var oInput1=document.getElementById("mybutton1");
oInput1.onclick=function(){
                alert("hello world");
     }

使用function关键字定义类以及使用prototype属性添加方法

function Car(color,speed){
    this.color = color;
    this.speed = speed;
}
Car.prototype.showInfo = function(){
    console.log(this.color+" "+this.speed);
}
var car = new Car("red",22);
car.showInfo();

setTimeout实现暂停

setInterval定义间隔

音频与视频

audio和video
1. audio

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <audio>
            <source src=“media/a.ogg”  type="audio/ogg">
            <source src=“media/a.mp3” type="audio/mp3">
            您的浏览器不支持audio，少年你该升级了！
    </audio>
    </body>
</html>

video

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <video controls="controls" poster="media/poster.jpg">
            <source src="media/mov_bbb.ogg" type="video/ogg"></source>
            <source src="media/mov_bbb.mp4" type="video/mp4"></source>
            <track src="media/video_ch.vtt" srclang="zh_cn" kind="subtitles" label="中文" default/>
            <track src="media/video_en.vtt" srclang="en" kind="subtitles" label="英文"/>
            您的浏览器不支持video，少年你该升级了！
        </video>
    </body>
</html>

几个属性的使用loop、controls、preload
- loop——如果出现该属性，则每当音频结束时重新开始播放。
- autoplay——如果出现该属性，则音频在就绪后马上播放。
- controls——如果出现该属性，则向用户显示控件，比如播放按钮。
- preload——如果出现该属性，则音频在页面加载时进行加载，并预备播放。
  如果使用 "autoplay"，则忽略该属性。

Canvas

canvas的坐标体系特点
左上角为原点坐标，只有正坐标，无负坐标
常用的一些api

var cxt = document.getElementById("mycanvas").getContext("2d");

绘制图片drawImage方法的使用

var img=new Image()
img.onload=function(){
    ctx.drawImage(…);
};
img.src=“test.jpg”;

drawImage(image,x,y)

image:将要绘制的图像引用

x,y：图像放在Canvas中的坐标
drawImage(image,x,y,width,height)

width与height:绘制的图像最终宽度与高度
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,width,height)

sx,sy:裁剪区域左上角坐标

sWidth,sHeight:裁剪区域宽度和高度

dx,dy:图像放在Canvas中的坐标

width,height:绘制的图像最终宽度与高度
处理getImageData方法得到的像素的数组
1.getImageData(x,y,width,height)

x,y:所取区域的左上角坐标；

width和height:所取区域的宽度与高度

该方法返回ImageData 对象，这个对象有3个属性width、height、data，其中data是个数组，对于每个像素都存储4个信息，即 RGBA 值：

R - 红色 (0-255)、G - 绿色 (0-255)、B - 蓝色 (0-255)，A-Alpha（0-255,0是不透明，255是全透明）
1. putImageData(imgData,x,y)
  
  用于修改或更新某个区域中的像素信息
2. createImageData(width,height)
  
  建立一个空白的像素区域

WebSocket

WebSocket对象的生成语法
常用的API有哪些

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul id="chatlist">  
        </ul>
        <input type="text" id="txtMessage" />
        <input type="button" value="send" id="btnSend" />
        <script src="js/jquery-2.1.0.js"></script>
        <script>
            if(window.WebSocket){
                //alert("support");
                var ws=new WebSocket("ws://127.0.0.1:2734");
                ws.onopen=function(){
                    alert("open");
                };
                ws.onclose=function(){
                    alert("close");
                };
                ws.onerror=function(){
                    alert("error");
                };
                //接收消息
                ws.onmessage=function(msg){
                    alert("received");
                    var data=msg.data;
                    $("<li></li>").text(data).appendTo($("#chatlist"));
                };
                $("#btnSend").click(function(){
                    var msg=$("#txtMessage").val();
                    //alert(msg);
                    if(ws){
                        ws.send(msg);                       
                        $("#txtMessage").val("");
                    }
                });
            }
        </script>
    </body>
</html>

本地存储技术

localStorage和sessionStorage的区别

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了（相当于session的使用）

localStorage生命周期是永久，这意味着除非用户主动清除存储的信息，否则这些信息将永远存在。

HTML5基础总结

HTML5页面设计

CSS

JavaScript

音频与视频

Canvas

WebSocket

本地存储技术

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读