html5基础开发文档,HTML5-基础篇 ( 一 )-HTML5基础概述

一 : 科普一分钟

//其实我有很多奇思妙想的点子,被困在脑海中,往往这就是学习的动力

开发的时候有很多好看绚丽的页面是由HTM5构成,我个人来说看着很激动,脑袋中有着种种奇妙的想法,想去完成它,仿佛进入了魔幻世界一样,但是好的设计师的基础通常也是很不错的,能够熟练掌握基础才能完成你脑海中更完美的画面.下面简单分析一下基本H5的基本组成和简单操作.

二 : HTML代码基础

HTML 有着各种各样的标签, 其中大部分标签都是对应的 ,后一对通常 加上 / 表示结束.

我们简单来了解一下

内容标签

类似

好玩的东西一点点,快乐的东西一点点

我们还可以给这个 标签添加一些属性方便我们区分

好玩的东西一点点,快乐的东西一点点

当然 标签之内不可能只有一个属性还会有很多属性

好玩的东西一点点,快乐的东西一点点

非内容标签

不是每个标签都是都对应的 / 不对应的我们叫它 非内容标签 或者 空标签 对于这种标签通常只有起始标签 没有结束标签

常见的非内容标签有
, img , hr , , , 等等

根元素

整个网页的根元素 : html

我们常常添加的是 lang 和 manifest 属性

a : lang属性是网页的语言声明

b : manifest离线缓存

一旦设置后浏览器将需要缓存的文件保存至本地,这样下一次访问时,即使是在没有网络连接的情况下也能够正常显示页面内容

文档元数据

head 元素应该是HTML文档中所有元数据metadata 的集合之处

head 包含五部分 : title , link,style,base,meta元素

title --> 为标题,在浏览器标题栏显示.

link --> 定义了文档与外部资源的关系

```

`base`用于标记文档的基础URL 地址

`base` 还可以被用于设置全局的浏览器打方式,页面中所有的连接均在新窗口中打开

`` 元素是head中种类最为丰富的一类元素.

`` 元素虽然包含了多种多样的元数据,但它也被规定了必须包含 `name` , `http-equiv` 和 `charset` 其中一种

`内核渲染` --> `renderer` 这一属性

急速内核

引擎渲染

搜索引擎优化

当我们不希望页面被抓取公开时 用robots 的 meta 标记

如果希望文件和连接都能够被检索和查询

不希望显示拨号超链接

避免自动识别邮箱

对老式的手持设备优化

刷新页面

在页面0 秒以后 调到百度主页

设置超过缓存时间,用户访问页面时再次向服务器发送更新请求

不需要转码优化

区块元素

HTML5的主题 是body 元素 有不同的区块构成,html5 之前有多个div 标签组成 很难清晰看出结构,下面我们现在看看新的区块何如把内容页面排布的.

a : 我们创建header元素 对应头部区域 以 h1 的形式放置了整个页面的标题

我是标题大人

b : 导航 nav 元素来对应导航信息,页面的主菜单 代码

页面标题

栏目1栏目2栏目3栏目4

c : section元素

在HTML5中,我们可以用新的section 元素对应不同的内容板块,section 还可以是某一章或者某一部分.

社会内容

体育新闻

为每个section板块元素添加文章 artcle元素

社会内容

沈阳小吃又添新菜

沈阳小吃又添新菜,让我们一起看看....

环保问题

环保问题越来越被重视....

体育新闻

勇士夺得总冠军

杜兰特终于捧起奖杯.....

每篇文章 article 也可以有自己的header footer 或者section 元素

今天是我们工作室的第一天

今天很开心,我们工作室成立的第一天,我们是一个快乐,向上的集体,追逐淡淡的阳光,还要淡淡的自己

其实没有工作室,是我自己瞎编的了

d : aside 侧边栏

相关连接

包小姐,参加中国好女孩

f : aside 元素 也可以加入一些相关文章推荐

今天是我们工作室的第一天

今天很开心,我们工作室成立的第一天,我们是一个快乐,向上的集体,追逐淡淡的阳光,还要淡淡的自己

工作室相关连接

其实没有工作室,是我自己瞎编的了

分组内容元素

a : p

b : div 使用元素是比较高的,可以看做是一种容器,本身不代表任何意义

在HTML5 语义化大背景下,div看看做是一种最后的解决方案.

第一段文字

第二段文字

first sentense

second sentense

c : 列表元素 常用的分组元素(无序)

• one
• two
• three

d : 如果想让上述有序展示 ol标签

1. one
2. two
3. three

设置为小写字母展示

1. one
2. two
3. three

e : dl dt dd

dl是最外围元素 ,代表了一项内容的集合,存在多种类型的内容,每一项内容标题是用 dt来加以指定 具体内容则以 dd 指定

一班

小红

二班

小绿

三班

小刚

f : figure 元素 展示于 插图,图表,照片,代码等

一个阳光帅气的男孩

g : main 元素 内容分组元素,每一张页面最多只能有一个main 元素.

这是一篇文章

这篇文章是关于....一个男孩的故事

这是第二篇篇文章

这篇文章是关于....一个女孩的故事

文本元素

a : 连接

my home

在窗口中打开上述连接

href = "home.html" target = "_bank">my home

a 标签的嵌套

大家好

我是TZ

b : span 元素 常常被用来组合文本, 结合了class 和 id 属性

我很 帅 也很酷

c : em 和 strong 元素 语气加强,强调

今天是个好日子

今天是个好日子

d : big small 放大缩小元素

也许生活有挫折

也不要忘记微笑

f : q cite 元素 q 默认在头和尾加上双引号 cite 默认为斜体

g : br元素

你像一座孤傲的岛,有自己的城堡

我是上不了岸的潮水,也只能将你围绕

表单 form

method属性 ->方式

action属性 - >动作

a : input

姓名 :

电话

电话 :

邮箱

邮箱 :

日期

时间 :

单选

男

女

勾选

规章制度

下拉菜单项

请选择帅哥

大宝

二宝

三宝

提交按钮

提交表单

表格 学生成绩表

小红	100
小王	60

当我们要横跨整行合并单元格用 clospan 属性

成绩单
小红	100
小王	60

caption元素添加标题

成绩单

小红	100
小王	60

th 强调表头

姓名	年龄
小红	100
小王	60

表格颜色

姓名	年龄
小红	100
小王	60

三 : CSS基础

css声明

background : #FFF000;

color : #445;

多个属性可以用空格分开

article{

border : 1px solid : #000;

}

.block{

border-width : 5px;

}

我们要按照上右下左的顺序

.block{

border-with: 5px 50px 1px 20px;

}

继承性

每个diV或其他的标签都可能继承上一个的父级的标签属性,子级别没有定义同款属性,则使用父级属性

选择器

a : 标签选择器

h1{

font-size : 30px;

}

b : 类选择器

.red{

color : #F00;

}

组合

h1.red{

color : #F00;

}

c : id 选择器

#label {

font-size : 30px;

}

d : 附加选择器

经过连接时候 背景为红色

a : hover{

background : #FF0;

}

使得已经访问过的链接文字显示为红色

a : visited{

color : #FF0;

}

常用属性

a : 文字颜色

h1{

color : #F00;

}

b : 文本缩进

p{

text-indent :2em

}

c : 行高属性

h1{

color : #F00;

background : #ECF0F1;

height : 60px;

line - height : 60px;

}

d : 字体属性

h1{

font-family : "Courier New";

}

e: 设置原角属性

h1{

border : 10px solid #FF;

border - radius :50%;

}

f : 左边框

p{

border-left : 5px splid #27AE60;

background : #ECF0F1;

padding : 5px 10px;

}

g : 块元素 和行内元素

分块

h1,p{

display : inline

}

行内

h1,p{

display : block

}

浮动

h1,p{

float : left

}

相对定位 relative

默认情况下区块元素采用 relative 的定位方式

绝对定位 absolute

盒子模型

a : 内间距 padding 外间距 margin

b : box - sizing 属性

当我们设置 box - sizing属性值为border-box时候 则设置的宽高包含内间距和外间距

当我们设置的属性值为 content-box时候 则设置的宽高不包含内间距和外间距.

列表

Link 1Link 2Link 3Link 4

设置列表颜色 和图片

li{

background:#c0392b;/*red*/

color:#fff;

list-style:none;

padding:15px;

margin:5px 0;

text-indent:35px;

background:#C0392B url(check.png) no-repeat 10px 10%;

box-sizing:border-box;

width:200px;

float:left;

margin-right:10px;

/*用比例来写*/

margin-right:4%;

width:22%;

min-width:120px;

}

常用效果

文字阴影

h1{

text-shadow: 0 8px 5px rgba(0,0,0,.5);

text-shadow: 1px 1px 0 rgba(255,255,255,.7);

text-shadow: -1px -1px 0 rgba(0,0,0,.7);

}

在 X Y 上的阴影位移,阴影的模糊程度,阴影的颜色.

优先级

id 选择器 优先于 类选择器 优先于 标签选择器

四 : JS基础

非常简单,简单介绍一下语法

a : 创建变量

var i = 3;

b : 运算符

console.log(1+1);

console.log(2*3);

console.log("1"+2) ; //12

console.log(1 > 2) ; //false

console.log(1 === 2) ; //false 全等运算符 要求数值和类型都相同才返回true

c : 条件语句

var answer = "a";

if (answer == "A"){

console.log("回答正确");//输出回答正确

}

switch (answer){

case "A" :

console.log("1");

break;

case "b" :

console.log("2");

break;

case "c" :

console.log("3");

break;

}

d : 循环语句

for( var i = o; i < 4; i++ ){

console.log(i);

}

e : 数组

var arr = new Array();

arr = ["a","b","c"];

在末尾插入元素

arr.push("d");

//在开头插入元素

arr.unshift("e");

//删除开头数组

arr.shift();

//删除最后一个元素

arr.pop();

//删除某个位置函数

arr.splice(1,1);

从第一个数组元素之后开始删除一个数组元素

//插入元素到某个位置

arr.splice(1,0,"b");//在第一个元素后面插入元素 `b`

//将两个数组内容相连创建新的数组

var arr1 = [1,2,3];

var arr2 = [4,5,6];

var arr3 = arr1.concat(arr2);

//数组元素倒叙

var arr1 = [1,2,3];

arr1.reverse();

//数组中数据类型可以为不同

var arr = ["a" , 123, false];

//存储对象

var arr = [{name : "A" ,age:25},

{name : "B",age:26 }];

f : 日期和时间

//包含时分秒,年月日,时区

var now = new Date();

console.log(now);

//只要时分秒,年月日

console.log(now.toDateString());

//获得部分信息,获得小时信息

console.log(now.getHours());

//获得 月份 0-11 0代表 一月份

console.log(now.getMonth());

//获得天数 星期日输出 0

console.log(now.getDay);

//获取世界时间

console.log(now.getUICHours);

//参数创建时间

var date = new Date(2017,7,19,20,10);

//对日期进行修改

date.setHours(10);

//日期转化为毫秒

var date = "Fri Sep 19 2016";

Date.parse(date);

函数

function TZFunction(){

console.log("hellow world");

}

TZFunction();

//加参数

function TZFunction(id){

console.log(id);

}

TZFunction(3);

//赋值表达式定义函数 感觉像是OC 里的block

var testID = function(id){

console.log(id);

}

testID(111);

对象

var student{

name : `xiaoming`,

age : 22,

job : `student`

}

var faculty = new object();//Obeject 构造函数

faculty.name = "小明";

faculty.age = 20;

faculty.job = "student";

DOM操作

a : dom事件处理

sunbmit

var submit = document.getElementById("submit");

submit.onclick = function(){

console.log("tzZZZZ");

}

>

鼠标滑过button 上方时候输出"TZzzz"

function domove(){

console.log("TZzzz");

};

submit.onmouseover = domove;

页面加载完毕输出 TianTianbaby

function loadOver(){

console.log("TianTianbaby");

}

this.onload = loadOver;

this 相当于 OC 中的self

拖动效果

var logo = document.getElementById("logo");

logo.draggable = true;

/*去除事件的默认行为*/

var box = document.getElementById("box");

box.ondragover = function(event){

event.preventDefault();

};

/*把logo放入box 中*/

box.ondrop = function(event){

box.appendChild(logo);

};

body{

poisition:relative;

}

#logo{

width : 300px;

height:200px;

background:url(corn.png) center 50% no-repeat;

position:absolute;

left:0;

}

#box{

width : 300px;

height : 200px;

background:#d4efdf;

border-radius:10px;

border:5px dashed #27ae60;

position:absolute;

right:0;

}

五 : 总结

为了能得到更唯美的画面,为了更好能实现更好看的构想,那么请牢记语法和css 样式,那样才能把我们的idea更完美的展示出来,其实HTML5并不难,把它当成一个艺术品去完成,会有更好的收获.