您的位置：首页 > Web前端 > HTML5

No1 HTML5+CSS

2015-11-14 11:57 399 查看

一 HTML5前言

为什么要用HTML5

1> 跨平台

利用HTML5编写的UI界面能运行在所有拥有浏览器的平台

2> HTML5的运行平台：浏览器

3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册….

如何使用HTML5

1> 自己编写大量的HTML5代码

2> 使用现成的HTML5框架

sencha-touch

phoneGap

jQuery mobile

bootStrap

手机APP的开发模式

1> 原生（纯OC）

2> 纯HTML5

3> 原生+HTML5

二 HTML

【网页的组成】一个有具体功能的完整的网页，一般由3部分组成

HTML

网页的具体内容和结构

CSS

网页的样式（美化网页最重要的一块）

JavaScript(掌握)

网页的交互效果，比如对用户鼠标事件做出响应

什么是HTML

HTML的全称是HyperText Markup Language，超文本标记语言

其实它就是文本，由浏览器负责将它解析成具体的网页内容

HTML的组成

跟XML类似，HTML由N个标签（节点、元素、标记）组成

常见的HTML标签

标题：h1、h2、h3、h4、h5….

段落：p

换行：br

容器：div、span（用来容纳其他标签）

表格：table、tr、td

列表：ul、ol、li

图片：img

表单：input

链接：a

HTML5新增标签

HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签

1.结构性标签

负责Web上下文结构的定义，确保HTML文档，包括：

article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)

header 标记头部区域内容

footer 标记脚部区域内容

section 区域章节表述

nav 菜单导航,链接导航

2.块级性标签

完成Web页面区域的划分，确保内容的有效分隔，包括：

aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容

figure 对多个元素组合并展示的元素,常与figcaption联合使用

code 表示一段代码块

dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）

3.行内语义性标签

完成Web页面具体内容的引用和表述，丰富展示内容，包括：

meter 特定范围内的数值，如工资、数量、百分比

time 时间值

progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听

video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式

audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

4.交互性标签

功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：

details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示

datagrid 控制客户端数据与显示，可用于动态脚本及时更新

menu 用于交互菜单

command 用来处理命令按钮

三 CSS

什么是CSS

CSS的全称是Cascading Style Sheets，层叠样式表

它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如

color: red;
background-color: blue;
font-size: 20px;
// 冒号:左边的是属性名，冒号:右边的属性值

CSS有3种书写形式

// 行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">

// 页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>

// 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">

css 遵循的规律：

1>就近原则

2>叠加原则

四 CSS选择器

CSS的两大重点

属性

通过属性的复杂叠加才能做出漂亮的网页

选择器

通过选择器找到对应的标签设置样式

CSS选择器 – 标签选择器

选择器的作用

选择对应的标签，为之添加样式

标签选择器

根据标签名找到标签

CSS选择器 – 类选择器

类选择器的格式

.类名

CSS选择器 – id选择器

id选择器的格式

#id

CSS选择器 – 并列选择器

见图

CSS选择器 – 复合选择器

见图

CSS选择器 – 后代选择器

见图

CSS选择器 – 直接后代选择器

见图

CSS选择器 – 相邻兄弟选择器

找到 div，与 div 相邻

CSS选择器 – 属性选择器

见图

其他写法

div[name][age]

div[name=”jack”]

CSS选择器 – 伪类

伪类可以给对应标签后面添加如下属性

CSS选择器 – 伪元素

：first-letter用的比较多

CSS选择器 – 选择器优先级

选择器的针对性越强，它的优先级就越高

选择器的权值

通配选择符（*）：0

标签： 1

类： 10

属性： 10

伪类： 10

伪元素： 1

id： 100

important： 1000

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

优先级排序：important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

五 HTML标签类型

HTML有N多标签，根据显示的类型，主要可以分为3大类

块级标签

独占一行的标签

能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

行内标签（内联标签）

多个行内标签能同时显示在一行

宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）

多个行内-块级标签可以显示在同一行

能随时设置宽度和高度（比如input、button）

CSS中有个display属性，能修改标签的显示类型

none：隐藏标签（类似于 remove）

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

六 CSS属性

CSS有N多属性，根据继承性，主要可以分为2大类

可继承属性

父标签的属性值会传递给子标签

一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签

一般是区块控制属性

CSS属性 – 可继承属性（红色表示常用）

CSS属性 – 不可继承属性（红色表示常用）

七盒子模型

网页上的每一个标签都是一个盒子

每个盒子都有四个属性

内容（content）

盒子里装的东西

网页中通常是指文字和图片

填充（padding，内边距）

怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料

边框（border）：盒子本身

边界（margin，外边距）

盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

标准盒子模型

IE盒子模型

内容（content） – 属性

填充（padding，内边距） – 属性

上右下左边距设置

边框（border） – 属性

border 简写属性在一个声明设置所有的边框属性

可以按顺序设置如下属性：

border-width

border-style

border-color

设置边框圆角

border-radius

// 设置4个边框的样式：
p {
border：5px solid red；
}

边界（margin，外边距） – 属性

CSS3新增特性

RGBA透明度

RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值

块阴影与圆角阴影

box-shadow text-shadow

圆角

border-radius

边框图片

border-image

形变

transform: none | <transform-function>[<transform-fuction>]

八标签水平居中和垂直居中

标签的水平居中:

块级标签: margin: 0 auto;

行内标签/行内-块级标签: text-align: center;

垂直居中:

块级标签 :布局 position结合 top left 平移`1

行内标签/行内-块级标签 line-height 高度 == height

注意：

vertical-align: middle;

用于图片

九 CSS 布局

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

脱离标准流的方法有

float属性

position属性和 left、right、top、bottom属性

float属性的常用取值有

left：脱离标准流，浮动在父标签的最左边

right：脱离标准流，浮动在父标签的最右边

CSS布局 – position属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航