初识HTML5-CSDN博客

1 HTML5简介

HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代丰富有Web内容的相关技术的总称。其中最重要的三项技术是HTML5核心规范、CSS和JavaScript。 HTML5核心规范定义用以标记内容的元素，明确其含义。（实现页面结构） CSS用来控制标记过的内容呈现在用户面前的外貌。（完成页面的表现与风格） JavaScript可以用来操纵HTML文档的内容以及相应用户的操作。（实现一些客户端的功能和业务）

2 HTML5的目的

它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（RIA），并且提供更多能有效增强网络应用的API。

3 初探HTML

3.1元素

空元素：没有内容的元素称为空元素。

Hello <code></code>world!

自闭合标签：空元素可以更简洁地使用标签表示。

Hello <code/>world!

虚元素：使用一个标签表示，在其中放置任何内容都不符合HTML规范。

Hello <code/>world!

<hr>

3.2元素属性

一个元素应用一个或者多个属性

I like <a href="/fitness.html" class="link"></a>

布尔属性：这种属性不需要设定一个值，只需将属性名添加到元素即可。

Enter your name:<input disabled>

自定义属性：用户可以自定义属性，这种属性必须以data-开头。

Enter your name:<input data-name="darcy">

3.3 HTML文档

外层结构：HTML文档的外层结构由两个元素确定，DOCTYPE和html。

<!DOCTYPE html>
<html>
</html>
复制代码

DOCTYPE作用：告诉浏览器用什么文档类型规范去解析你的文档。

元数据：元数据包含在head元素内部。

内容：放在body元素中。

3.4 HTML实体

3.5 HTML5全局属性

accesskey属性: 设定一个或几个用来选择页面上的元素的快捷键。

<form action="">
    username:<input type="text" name="username" accesskey="u">
    password:<input type="text" name="password" accesskey="p">
</form>
复制代码

当按下Alt+p将焦点转移到password的输入框中。

class属性: 将元素归类。一般是为了找出文档中的某一类元素或者为某一类元素应用CSS样式。

contentditable属性 : HTML5新增的的属性，其用途是让用户能够修改页面上的内容。

<p contenteditable="true">you will succeess</p>

dir属性：规定元素元素文字的方向。

<p dir="rtl">right</p>
<p dir="ltr">left</p>
复制代码

draggable和 dropzone：拖放操作的属性。

hidden属性：布尔属性，用来隐藏相关元素。

id属性：给元素分配一个唯一的标识符。通常用来将样式应用到元素上或者在JavaScript程序中用来选择元素。

lang属性：说明元素内容使用的语言（比较复杂）。

spellcheck属性：表明浏览器是否应该对元素的内容进行拼写检查，这个属性用在可以编辑的元素上才有意义。

<textarea spellcheck="true">This is some mispelled</textarea>

style属性：用来直接在元素身上定义CSS样式（内联样式）。

tabindex属性：可以用来改变Tab键在元素间切换默认的转移顺序，从1开始。

title属性：提供元素的额外信息。

4 初探CSS

4.1 定义和应用样式

CSS样式由一条或者多条以分号隔开的样式声明组成。

4.11 元素内嵌

<p style="background-color: #ccc;font-size: 16px;"></p>

4.12 文档内嵌

p { background-color: #ccc; font-size: 16px; }

4.13外部样式表

<link rel="stylesheet" href="style.css">

@import url

link和import的区别：两者都是外部引用CSS的方式，但是存在一定的区别：

区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。

区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。

区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。

区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

4.2 样式的层叠和继承

4.21 浏览器样式/用户代理样式

元素尚未设置样式时浏览器应用到它身上的默认样式。（常见的是浏览器应用于链接的样式）

4.22 用户样式

用户在样式表中添加的样式

4.23 样式层叠次序

(1)元素内嵌样式

(2)文档内嵌样式

(3)外部样式

(4)用户样式

(5)用户代理样式

注：可以在样式声明后附上 !Import，提高样式的优先级。

4.24 根据具体程度和定义次序解决同级样式冲突

具体程度特征：

1.样式的选择器id值的数目

2.选择器红其他属性和伪类的数目

3.选择器中元素名和伪元素的数目

评定具体程度时按照a-b-c的形式

例如：

    <style type="text/css">
        a{
            font-size: 12px;
        }
        a.myclass{
            font-size: 14px;
        }
    </style>
    <a href="http://w3c.org">w3c</a>
    <a href="http://w3c.org" class="myclass">w3c school</a>
复制代码

a.myclass含有一个class属性，样式具体程度值为0-1-0（0个id值，1个其他属性，0个元素名），另一条样式的具体程度值为0-0-0，则含有myclass属性值的a标签应用a.myclass样式，第一个a标签应用a样式。

所有都相同，应用位置靠后的样式

4.25继承

如果浏览器在直接相关的样式中找不到某一个属性的值，就会使用父元素的这个样式属性值。与元素外观（文字，颜色，字体）的相关属性的样式被继承，与元素在页面上的布局相关的样式（margin，padding，border，height，width）不会被继承。

4.3 CSS中的颜色

简单颜色：十六进制 #XXXXXX

复杂颜色：rgb(r,g,b)、rgba(r,g,b,a)透明度、hsl(h,s,l)、hsla(h,s,l,a)

4.4 CSS中的长度

绝对长度

(1)in 英寸

(2)cm厘米

(3)mm 毫米

(4)pt 磅(1pt = 1/72in)

(5)pc pica(1pica = 12 pt)

相对长度

(1)em 与元素字号挂钩

(2)ex 与元素字体的“x的高度”挂钩

(3)rem 与根元素的字号挂钩

(4)px CSS像素

(5)% 另一属性的值的百分比

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。根元素字体大小乘以你 rem 值。

详情见综合指南: 何时使用 Em 与 Rem

webdesign.tutsplus.com/zh-hans/tut…

4.5 CSS角度

CSS角度单位

(1)deg 度（0deg-360deg）

(2)grad 百分度(0-grad-400grad)

(3)rad 弧度(0rad-6.28rad)

(4)turn 圆周(1turn = 360deg)

4.6 CSS时间

CSS时间单位

(1) s 秒

(2) ms 毫秒

5 初探JavaScript

5.1定义和使用函数

     function myFunc(){//声明函数
            console.log("hello world!");
        }
     myFunc();//调用函数
复制代码

5.2使用变量和类型

    var globalVar = "darcy";//全局变量
    function myFunc(){
        var localVar = "colines"//局部变量
    }
复制代码

5.3 使用基本类型

    var stringVar = "hello darcy";//字符串类型
    var boolVar = true;//布尔类型
    //数值类型
    var intVar = 6;//整数
    var floatVar = 3.14//浮点数
复制代码

5.4创建对象

    var myData = new Object();//创建对象
    myData.name = "darcy";//增加属性并赋值
    
    var myData2 = {//使用对象字面量
        name:"colines",
        hobby:"fitness",
        printMsg:function(){//为对象添加方法 
            console.log("hello" + this.name);
            console.log("you like" + this.hobby);
        }
    }
复制代码

5.5使用对象

     var myData3 = {
            name:"darcy",
            hobby:"fitness"
        }
        
    //修改属性值
    myData3.name = colines;
    myData3["hobby"] = "woman";
    
    //读取属性值
    console.log(myData3.name + " "+myData3["hobby"]);
    
    //为对象添加新属性
    myData3.age = 21;
    
    //为对象添加新方法
    myData3.printMsg = function(){
        console.log(myData3.name + " "+myData3["hobby"]);
    }
    
    //枚举对象属性
    for(var prop in myData3){
        console.log("name: "+prop+ " value: "+myData3[prop]);
    }
    
    //检查对象是否有某个属性
    var hasName = "name" in myData3;//true
复制代码

5.5使用JavaScript运算符

(1)++ -- 自增和自减

(2)+ - * / % 加、减、乘、求余

(3)< <= > >= 小于、小于等于、大于、大于等于

(4)== != 相等和不相等

(5)=== !== 等同和不等同

(6)&& || 逻辑与、逻辑或

(7)= 赋值

(8)+ 字符串连接

(9)？: 三元条件句

5.51相等和等同运算符

    //相等运算符：JavaScript将两个操作数转换为同一类型再进行比较
    //等同运算符：不会进行类型转换
    //基本类型的比较
    var val = 6;
    var strVal = "6";
    console.log(val == strVal)//true
    console.log(val === strVal)//false

    //基本类型比较的是值，而对象比较的是引用的比较
    var myData = {
        name:"darcy",
        hobby:"fitness"
    }

    var myData2 = {
        name:"darcy",
        hobby:"fitness"
    }
    var myData3 = myData2;
    console.log(myData == myData2);//false
    console.log(myData3 == myData2);//true
    console.log(myData === myData2);//false
    console.log(myData3 === myData2);//true
复制代码

5.52显式类型转换

    var num = 5 + 5;//10
    var str = 5 + "5";//55
    //Number.toString方法十进制表示数值
    //Number.toString(2)、Number.toString(8)、Number.toString(16) *进制表示数值
    var str2 =(5).toString + String(5);//55
    // 字符串到数值的转换,其中后两个比较灵活，忽略数字字符后面的非数字字符
    // Number(<str>);
    // parseInt(<str>);
    // parseFloat(<str>);
复制代码

5.6 使用数组

    //创建和填充数组
    var array = new Array();//创建空数组并赋值给array,不用声明数组元素个数和所包含的数组类型
    array[0] = "darcy";
    array[1] = 21;
    array[2] = true;
    
    //使用数组字面量
    var array2 = ["darcy",21,true];

    //读取和修改数组内容
    console.log(array[0]);//darcy
    array[2] = false;

    //枚举数组内容
    for(const i = 0, l=array.length; i < l; i++){
        console.log(array[i]);
    }
复制代码

5.7数组内置方法

(1)concat(array) 合并返回数组

(2)join(separator) 各元素内容用参数指定的字符分隔返回字符串

(3)pop() 出栈返回最后一个元素

(4)push() 入栈(尾插) 返回void

(5)reverse() 反转返回数组

(6)shift() 出栈返回数组第一个元素

(7)slice(start，end) 返回一个子数组

(8)sort() 排序返回数组

(9)unshift() 入栈(头插) 返回void

5.8错误处理

try...catch...finally

5.9 undefined 和null值

undefined：未定义的属性的值

null:表示已经赋了一个值但该值不是一个有效的object、string、number或boolean。

区分null和undefined

如果使用同等运算符(==)比较的话会做类型转换再比较，所以只能用等同运算符(===)区分

    var firstVal = null;
    var secondVal;
    console.log(firstVal == secondVal);//true
    console.log(firstVal === secondVal);//false
复制代码

6小提示

1.把css放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

2.把js放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件，所以就把js放在页面底部最后加载。

3.JavaScript 依次执行，可以不使用分号结尾，不过为了看起来清晰，推荐使用";"结尾。

4.JavaScript 区分大小写

5.+号，作为字符串连接符号的优先级高于作为数字运算的加号

哈哈哈，第一次写文章，确实蛮花时间的，以上笔记来自《HTML5权威指南》，记录自己的学习点滴，因为本人记性是真的不好，老忘，也比较粗心，做的不好或者写错的地方希望大佬指正，嘻嘻，请给小弟鼓励点赞。