HTML5, CSS3, mobile web development - study notes (unfinished)

table of Contents
[A], HTML5
[Two], CSS3
[Three], mobile Web development and his ilk layout

[A], HTML5

---

table of Contents
What is HTML
H5 new semantic tags
H5 new multimedia label
H5 new input form, Form Properties

aims
See what's new H5
H5 grasp new semantic tags
H5 grasp new multimedia label
H5 grasp new input form, Form Properties

First, what is HTML5

---

1. HTML5 Introduction

The core language of the World Wide Web, an application HTML in Standard Generalized Markup Language (HTML) is the fifth major revision. As a new HTML language, with new elements, attributes and behaviors

XHTML Extensible HTML

HTML5

XHTML is a kind of enhanced HTML, its scalability and flexibility to accommodate future network applications more demand. XHTML based learning is

It has a larger set of technologies that allow more diverse and powerful websites and applications. It adds new features: a semantic characteristic, a local storage characteristics, device compatibility characteristics, connection characteristics, web multimedia features, three-dimensional, graphics and special effects properties, performance characteristics and integration, CSS3 characteristics. This set is sometimes referred to HTML5 and its friends (including new css, js), often abbreviated as HTML5

2. Generalized HTML5

• HTML5 is broadly HTML5 + CSS3 + JavaScript itself
• This set is sometimes referred to HTML5 and friends, often abbreviated as HTML5
• While some of the features of HTML5 is still not supported by some browsers, but it is a trend
• HTML5 MDN Introduction: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

Two, H5 new semantic tags

Semantic tags
previously layout, substantially do with div. div for search engines, there is no semantic

\<div class="head"><div>
\<div class="nav"><div>
\<div class="content"><div>
\<div class="footer"><div>

Add semantic tags

• : Head tag
• : Navigation tabs
• : Content tab
• : Block-level tag
• : Sidebar label
• : Tail tag

note:

• This semantic labels mainly for search engines
• The new tab page can be used multiple times
• In IE9, these elements are default inline elements, these elements need to be converted to a block-level element
• In fact, these labels more suitable for mobile end
• HTML5 also adds a lot of other labels, then say

Three, H5 new multimedia label

Display tags comprising two, as follows:

• Audio: <audio>
• Video: <video>

Use them to easily embed audio and video in a page, rather than go behind the use of flash and other browser plug-ins

3.1 <audio> tag Audio

HTML5 without using plug-ins also will play in native file format support for audio, of course, the supported formats are limited

1. Audio format

Current, <audio> element supports three audio formats:

2. <audio> tag syntax audio format

<audio src="文件地址" controls = "controls"></audio>

3. <audio> Audio tab common properties

Attributes	value	description	Remark
autoplay	autoplay	If this attribute is present, the audio playback immediately after the ready	Google browser to disable the autoplay attribute to us (afraid of scaring people)
controls	controls	If this attribute is present, then displayed to the user controls such as play button
loop	loop	If this attribute is present, whenever the end of the audio start playing again
src	url	URL of the audio to be played

Because different browsers support different formats, we have taken the solution is ready for the multiple audio formats

<audio controls="controls">
	<source src="media/happy.mp3" type="audio/mpeg">
	<source src="media/happy.ogg" type="audio/ogg">
	<!-- 如果两个格式都不支持，则显示下面的话 -->
	您的浏览器暂不支持audio标签
</audio>

3.2 <video> tag video

1. Video Format

2. <video> tag syntax Video

<video src="文件地址" controls = "controls"></video>

3. <video> Audio tab common properties

Attributes	value	description	Remark
autoplay	autoplay	Ready video autoplay	Google browser to disable auto-play solution: add silence property
control	control	Display the playback controls to the user
width	pixels (pixel)	Player set width
height	pixels (pixel)	Set the height of the player
loop	loop	Whether the loop finished playing
preload	preload	Whether finished loading, etc. and then play
src	url	Video url address
poster	imgurl	Load picture to wait
muted	muted	Silent Play

Because different browsers support different formats, we have taken the solution is ready for the multiple audio formats

<video controls="controls">
	<source src="media/video.mp3" type="video/mp4">
	<source src="media/video.ogg" type="video/ogg">
	<!-- 如果两个格式都不支持，则显示下面的话 -->
	您的浏览器暂不支持video标签
</video>

3.3 summary

• Audio and video tag label use basically the same
• 浏览器支持情况不同
• 谷歌浏览器把音频和视频自动播放禁止了
• 可以为视频标签添加muted属性使chrome浏览器自动播放，音频不可以
• 视频标签是重点，经常设置自动播放，不使用controls控件，循环和设置大小属性

四、 H5 新增input表单、表单属性

属性	值	说明	备注
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本（占位符）	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	- 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 - 默认已经打开，如autocomplete = " on " ；关闭为 " off " - 需要放在表单内同时加上name属性 - 同时成功提交	常用off
multiple	multiple	可以多选文件提交

【二】、CSS3

目录
CSS3 属性选择器
CSS3 结构伪类选择器
CSS3 伪元素选择器
CSS3 2D转换
CSS3 动画
CSS3 3D转换
浏览器私有前缀

目标

• 掌握CSS3 新增的属性、结构伪类和伪元素选择器
• 掌握CSS3 2D转换、移动、旋转和缩放属性
• 掌握CSS3 3D转换、移动、旋转和缩放属性
• 掌握CSS3 动画属性

一、CSS3 简介

CSS3 现状

• 在CSS2 基础上新增（扩展） 样式
• 移动端支持优于PC端
• 不断改进中
• 应用相对广泛

二、 CSS3 选择器

2.1 CSS3 属性选择器

选择符	简介	备注
E[att]	选择具有att属性的E元素	中间无空格（似交集选择器）
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“var”]	匹配具有att属性、且值以val开头的E元素
E[att$=“val”]	匹配具有att属性、且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性、且值中含有val的E元素

注： 属性选择器、类选择器、伪类选择器，权重为（0，0，1，0）

2.2 CSS3 结构伪类选择器

---

nth-child(n)

• n 可以是数字、关键字和公式
• n 如果是数字，就是选择第几个
• 常见的关键字有：even偶数 odd奇数
• 常见的公式如下（如果n是公式，则从0开始计算）
• 但是 第0个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n + 5	从第5个开始（包含第5个）到最后
-n + 5	前5个（包含第5个）…

2.3 CSS3 伪元素选择器

---

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before 和 after 必须有 content 属性
• before 在内容的前面，after在内容的后面
• before 和 after 创建一个元素，但是属于行内元素
• 因为在 dom 里面看不见刚才创建的元素（即找不到对应的标签），故称其为伪元素
• 伪元素和标签选择器一样，权重为(0,0,0,1)
• 不是真正意义上的元素，但是具有元素的一些特性（如：大小、背景色等）

案例——伪元素字体图标

三、 CSS3 2D转换

---

转换（transform）是CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放：scale

注意：

• transform 属性对于书写单个效果时，后面会覆盖前面

  transform: translate(100px,100px);
  transform: rotate(180deg);
  /* 第一段代码的效果会被覆盖 */
  

• 同时书写多个效果，不会被覆盖，用空格隔开

  transform: translate(100px,100px) rotate(180deg);
  /* 两个效果都会执行 */
  

2.4.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先学习二维坐标系

2.4.2 2D 转换之移动 translate

2D移动是2D转换中的一种功能，可以改变元素在页面中的位置，类似定位

1. 语法

	/* 合并书写 */
	transform: translate(x,y);
	
	/* 分开书写 */
	transform: translateX(n);
	transform: translateY(n);

注意：
扩展：
移动盒子位置的方式有三种（暂时）：

• 定位（会脱标）
• 盒子外边距（影响其他盒子）
• 2D转换移动（不影响其他元素）

2. 重点

• 2D转换中的移动的定义，是指沿着X和Y轴移动元素
• translate 最大的优点是：不会影响到其他元素的位置
• translate 中的百分比单位是基于自身元素
• 行内标签不可用

2.4.3 2D 转换之旋转 rotate

---

2D 旋转指的是让元素在二维平面内顺/逆时针旋转
语法：

transform: rotate(num)

重点：

• rotate 里面值为度数，单位是deg，如 rotate(45deg)
• 角度为正(负)时，顺(逆)时针
• 默认旋转的中心点是元素的中心点

扩展：

• 过渡

1. 过渡写到本身上，谁做动画给谁加
2. 欲实现鼠标放上去开始动画，则是在本身添加，而不是在伪类选择器中添加

   img {
   	width: 100px;
   	border-radius: 50%;
   	border: 5px solid red;
   	/* 过渡写到本身上，谁做动画给谁加 */
   	transition: all 0.3s;
   }
   img:hover {
   	transform: rotate(360deg)
   }
   

案例——三角形

2.4.4 2D 转换中心点transform-origin

可以设置元素转换的中心点
1.语法

transform-origin: x y;

2.重点

• 注意后面的参数x和y用空格隔开
• x y 默认值为元素的中心点（50% 50%）
• 亦可为x y 设置像素或者方位名词（top bottom left right center）

注意：

• 用transform属性处理过的元素，它的中心点不是处理后所的元素的中心点

案例——旋转案例

2.4.5 2D 转换之缩放scale

1.语法

	transform: scale(x,y);

2.注意

• 注意其中的x和y用逗号隔开
• transform: scale(1,1) 宽和高都放大为原来的一倍，相当于不变
• transform: scale(2,2) 宽和高放大为原来的两倍
• transform: scale(2) 只写一个参数，相当于两个参数相同
• transform: scale(0.5,0.5) 缩小
• scale缩放的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

案例——图片放大案例

案例——分页按钮

2.4.6 2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：
   transform: translate() rotate scale()…等
2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
3. 当同时有位移和其他属性的时候，需要将位移放在最前面

案例——2D 转化综合写法

四、 动画

动画（animation）是CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

5.1 动画的基本使用

制作动画分两步：

1. 定义动画
2. 使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
	0%{
		width: 100px;
	}
	100%{
		width: 200px;
	}
}

动画序列

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列
• 在@keyframs中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式、任意多的次数
• 使用百分比来规定变化发生的时间，或用关键词 " from " 和 “ to ”，等同于0%和100%

2.元素使用动画

div {
	width: 200px;
	height: 200px;
	background-color: #bfa;
	margin: 100px auto;
	/* 调用动画 */
	animation-name: 动画名称;
	/* 动画时间 */
	animation-duration: 持续时间;
}

5.2 动画常用属性

5.3 动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画其实或结束的状态

/* 例如 */
animation: move 10s linear 2s infinite alternate;

注意：

• 简写属性里面不包含animation-play-state
• 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用
• 想要动画原动作返回，而不是直接跳回来：anitmation-direction: alertnate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

案例——热点图案例

5.4 速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

案例——奔跑的熊大

五、 3D转换

特点：

• 近大远小
• 物体后面遮挡不可见

6.1 三维坐标系

• x轴：水平向右 注意：x右边是正值，左边是负值
• y轴：垂直向下 注意：y下边是正值，上边是负值
• z轴：垂直屏幕 注意：往外是正值，往内是负值

主要学习的是 3D位移 和 3D旋转

主要知识点：

• 3D位移：translate3d(x,y,z)
• 3D旋转：rotate3d(x,y,z)
• 透视：perspective
• 3D呈现：transfrom-style

6.2 3D移动 translate3d

• transform: translateX(100px) 仅在x轴上移动
• transform: translateY(100px) 仅在y轴上移动
• transform: translateZ(100px) 仅在z轴上移动（z轴上一般只用px作为单位）
• transform: translate3d(x,y,z) 综合写法

6.3 透视 perspective

• 欲在网页产生3d效果，需要透视（理解为3D物体投影在2D平面内）
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视亦可称为视距：视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

透视写在被观察元素的父盒子上面
d：就是视距，驶距就是一个距离人的眼睛到屏幕的距离
z：就是z轴，物体(虚拟的)距离屏幕的距离，z轴越大，屏幕上呈现的物体就越大

6.4 translateZ

6.5 3D 旋转 rotate3d

3D 旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

• transform: rotateX(45deg) 沿着x轴正方向旋转45度
• transform: rotateY(45deg) 沿着y轴正方向旋转45度
• transform: rotateZ(45deg) 沿着z轴正方向旋转45度
• transform: rotate3d(x,y,z,ndeg) 沿着自定义轴旋转 n 度（xyz表示旋转轴的矢量，了解即可）

左手准则
用于判断元素旋转的方向

• 左手拇指指向x/y/z轴的正方向
• 其余手指的弯曲方向就是沿着x/y/z轴旋转的方向

6.6 3D 呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat 子元素不开启3d立体空间（默认）
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写在父级中，但是影响的是子盒子
• 该属性很重要

案例——两面翻转的盒子

案例分析：
HTML结构：

• 父级盒子包含前后两个子盒子
• 翻转的是父级盒子

CSS样式：

• box指定大小，需要添加3d呈现
• back盒子要沿着Y轴翻转180度
• 鼠标经过box时，旋转180度

案例——3D导航栏

案例分析：
HTML结构：

<ul>
	<li>
		<div class="box">
			<div class="front">正面</div>
			<div class="bottom">底面</div>
		</div>
	</li>
	...
	<li>...</li>
</ul>

• li 作导航栏
• .box 是翻转的盒子 front是前面的盒子。bottom是底面的盒子

案例——旋转木马

案例分析：

1.HTML结构

<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>

六、 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器无需添加

1. 私有前缀

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit：代表safari、chrome私有属性
• -o-：代表Opear 私有属性

2.提倡的写法

/* 如：圆角属性 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

七、总结

CSS3：

1. CSS3 新增加的属性、结构伪类、伪元素选择器
2. CSS3 2D 移动、旋转和缩放属性
3. CSS3 动画设置方法
4. CSS3 3D 移动、旋转和缩放属性

【三】、移动WEB开发之流式布局

目标
能够了解移动web的开发现状
能够写出标准的viewport
能够使用移动web的调试方法
能够说出移动端常见的布局方案
能够描述流式布局
能够独立完成京东移动端首页

目录
移动端基础
视口
二倍图
移动端调试
移动端技术解决方案
移动端常见布局
移动端开发之流式布局
京东移动端首页制作

一、移动端基础

1. 浏览器现状

Domestic UC and QQ, mobile browser is based on modified over the webkit core, there is no domestic independent research and development kernel, like the domestic mobile phone operating systems are based on modified Android developed by the same
summary: major browsers compatible mobile terminal, webkit core browser can handle

2. The status of the phone screen

3. Common mobile terminal screen size

4. The method of debugging a mobile terminal

• Chrome DevTools (Google Chrome) debugging of analog phones
• Up a local web server, mobile and server within a LAN, server access through mobile phones
• Use external network server, direct IP or domain names

5. Summary

• End mobile browsers mainly webkit kernel compatible
• Now the development of mobile phones aimed at the end-side development
• Now mobile terminal fragment of serious, large and small screen size and resolution
• Learn to use Google browser interface and debugging analog phones

Second, the viewport

Viewport (viewport) is the browser display screen area of the page content. Viewport can be divided layout viewport, visual viewport and viewport over

1. layout viewport layout viewport

Third, twice map

Fourth, the mobile terminal commissioning

Fifth, mobile end technology solutions

Sixth, the mobile terminal common layout