HTML 5 基础（一）

img.jpg

1.前端认知

前端开发到底是做什么的？

  • 我们是做什么的？

    IT系统工程
    负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设

  • 在公司中一个项目的开发流程是什么样子的？

    1. 产品需求
    产品经理 需求文档
    Product Manager
    1.1 第一次例会 去掉不合理的需求
    2. 项目设计
    视觉设计师 各种PSD文件
    交互设计师
    2.1 第二次例会 排工期
    3. 前端开发
    前端开发工程师（HTML 5 IOS Android Unity-3D）
    4. 后台开发
    后台开发工程师 配合处理
    5. 测试
    暴力测试 疯狂点击
    打桩测试 给固定数值测试某一功能
    6. 上线运营
    公司运营人员

  • 我们需要学会什么？

    1. 软件（2%）
    浏览器 编译器 PS 各种浏览器插件
    2. 语言（98%）
    HTML CSS JavaScript 其他一些语言（Ajax PHP Node.js）

2.前端开发核心语言

结构 样式 行为
HTML CSS JavaScript

3. HTML

HTML基本结构.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!-- 注释 -->
<!-- Ctrl + / -->
<!-- 
	注释主要是为了开发人员书写方便，让你在后期从新回顾代码的时候，可以快速回想起来当时是如何处理的 
	总结就一句话：注释是给人看的
-->
<!-- 保存：Ctrl + s  -->
<!-- 新建：Ctrl + n  -->
<!-- 文档头（类型）声明 -->
<!-- 代表的是 HTML 5 的标准 -->
<!-- 文档头声明 不是标签 （面试） -->
<!DOCTYPE html>
<!-- 定义 HTML 的根元素 -->
<!-- 所有的 HTML 代码全部是书写在根元素当中的 -->
<html>
	
	<!-- 头部 -->
	<!-- 
		里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展示
	 -->
	<head>
		<!-- 
			title:双标签  用于定于页面标题
		 -->
		<title>Hello World！</title>
		<!-- 
			meta：单标签  用于定义页面的元数据
			属性：charset 针对搜索引擎和解析格式的属性
		 -->
		<meta charset="utf-8">
	</head>
	<!-- 
		里面包含的绝大部分在页面中都是可见的，主要用于搭建 HTML 结构
	 -->
	<body>
		
		<!-- 历史上最最最常用的标签 -->
		<div></div>
		<!-- 
			div：双标签  无意义
		 -->
	</body>
</html>
<!-- 
	div 是 body 的子元素
	body 是 div 的父元素
	div 和 body 就是父子关系
	head 和 body 是兄弟关系
	如果是父子关系，一定要使用 tab 去进行标记
	可以使用 Ctrl + [   左移
	         Ctrl + ]   右移
 -->

CSS的引入方式.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
	<head>
		<title>css的引入方式</title>
		<meta charset = "utf-8">
		<!-- 
			内部样式表 
			优点：相对于内联样式表代码少、省略一些
				  速度快，而且没有服务器的请求压力
			缺点：不易改版和维护
				  造成单个界面文件过大
				  代码较乱，不易前后端交互
			使用场景：一般用在大型网站的首页
		-->
		<style type="text/css">
			/* 
			CSS 选择器存在优先级问题
				内联样式表     1000
				ID 选择器      100
				类选择器       10
				标签名选择器   1
			*/
			/*1.标签名选择器*/
			/*作用范围：直接针对当前这个标签进行设置*/
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			/*CSS的注释方式*/
			/*2.类选择器*/
			/* 
			使用注意：使用的时候，必须要在对应的标签内部有一个相同的 class 名称，这样才能一一对应
			作用范围：具有对应的 class 名称的标签
			特殊之处：在一个页面中，可以存在多次，因为它选择的是一类内容
			*/
			.div_class{
				width: 300px;
				height: 300px;
				background-color: green;
			}
			/*3. ID 选择器*/
			/*
			作用范围：具有对应的 id 名称的标签
			特殊之处：在一个页面中，只能使用一次
			*/
			#div_id{
				width: 500px;
				height: 500px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 第一种方式 -->
		<!-- 
			修改样式：width            用于设置宽度
					  height           用于设置高度
					  background-color 用于设置背景颜色
			px 像素（长度单位）
			属性名称 ：属性数值 ；
		 -->
		<!-- <div style="width: 100px;height: 100px;background-color: red;"></div> -->
		<!-- 
			内联样式表（直接写在标签内部的这种方式，叫做内联样式表） 
			缺点：冗余代码多、维护起来非常困难
			优点：优先级非常高
			使用场景：确定了的，不会在修改的单个样式
		-->
		<div class="div_class" id="div_id"></div>
	</body>
</html>

外部样式表.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
	<!-- 
		外部样式表
		优点：利于维护和改版
			  一个CSS文件控制多个页面
			  减少代码量，代码简洁，利于分工
		缺点：相对于单个界面，有垃圾数据
			  会造成服务器的请求压力
		使用场景：用于大型网站的二三级页面
	 -->
    <!-- 
		link:
				专门用于引入外部文件的标签
				属性：
					rel   当前引入文件和本身文件的关系
					type  当前引入文件的类型、编码格式
					href  用于书写引入外部样式所处位置
	-->
</head>
<body>
	<div></div>
</body>
</html>

style.css

1
2
3
4
5
div{
	width: 500px;
	height: 500px;
	background-color: yellow;
	}

引入方式的优先级差别.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			background-color: red;
		}
	/*
		引入方式的优先级：
						内联>内部和外部
						内部和外部谁生效   如果选择器优先级相同 ，谁后引入谁生效
										   如果选择器优先级不同，选择器优先级高的生效
	*/
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
	</style>
</head>
<body>
	<div></div>
</body>
</html>

4. 小练习

test1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<style type="text/css">
		.div_class{
			width: 300px;
			height: 300px;
			background-color: blue;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="CSS/test1.css">
</head>
<body>
	<!-- .div_$*3 -->
	<div style="width:100px;height:100px;background-color:red;"></div>
	<div class="div_class"></div>
	<div id="div_id"></div>
</body>
</html>

test1.css

1
2
3
4
5
#div_id{
	width: 500px;
	height: 500px;
	background-color: green;
}

test1预览效果

test2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习2</title>
	<link rel="stylesheet" type="text/css" href="CSS/test2.css">
</head>
<body>
	<div id="p1">
		<div id="p2">
			<div id="p3">
				<div id="p4">
					<div id="p5">
						<div id="p6">
							<div id="p7"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

test2.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#p1{
	width: 700px;
	height: 700px;
	background-color: red;
}
#p2{
	width: 600px;
	height: 600px;
	background-color: orange;
}
#p3{
	width: 500px;
	height: 500px;
	background-color: yellow;
}
#p4{
	width: 400px;
	height: 400px;
	background-color: green;
}
#p5{
	width: 300px;
	height: 300px;
	background-color: cyan;
}
#p6{
	width: 200px;
	height: 200px;
	background-color: blue;
}
#p7{
	width: 100px;
	height: 100px;
	background-color: purple;
}

test1预览效果

本文标题:HTML 5 基础（一）

文章作者:Nick

发布时间:2015-03-28, 00:00:00

最后更新:2017-05-20, 17:19:40

原始链接:http://yoursite.com/2015/03/28/HTML-5-基础/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 1.前端认知
    1. 1.1. 前端开发到底是做什么的？
      1. 1.1.1. 我们是做什么的？
        1. 1.1.1.1. IT系统工程
        2. 1.1.1.2. 负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设
      2. 1.1.2. 在公司中一个项目的开发流程是什么样子的？
        1. 1.1.2.1. 1. 产品需求
          1. 1.1.2.1.1. 产品经理 需求文档
          2. 1.1.2.1.2. Product Manager
          3. 1.1.2.1.3. 1.1 第一次例会 去掉不合理的需求
        2. 1.1.2.2. 2. 项目设计
          1. 1.1.2.2.1. 视觉设计师 各种PSD文件
          2. 1.1.2.2.2. 交互设计师
          3. 1.1.2.2.3. 2.1 第二次例会 排工期
        3. 1.1.2.3. 3. 前端开发
          1. 1.1.2.3.1. 前端开发工程师（HTML 5 IOS Android Unity-3D）
        4. 1.1.2.4. 4. 后台开发
          1. 1.1.2.4.1. 后台开发工程师 配合处理
        5. 1.1.2.5. 5. 测试
          1. 1.1.2.5.1. 暴力测试 疯狂点击
          2. 1.1.2.5.2. 打桩测试 给固定数值测试某一功能
        6. 1.1.2.6. 6. 上线运营
          1. 1.1.2.6.1. 公司运营人员
      3. 1.1.3. 我们需要学会什么？
        1. 1.1.3.1. 1. 软件（2%）
          1. 1.1.3.1.1. 浏览器 编译器 PS 各种浏览器插件
        2. 1.1.3.2. 2. 语言（98%）
          1. 1.1.3.2.1. HTML CSS JavaScript 其他一些语言（Ajax PHP Node.js）
  2. 2. 2.前端开发核心语言
  3. 3. 3. HTML
    1. 3.1. HTML基本结构.html
    2. 3.2. CSS的引入方式.html
    3. 3.3. 外部样式表.html
      1. 3.3.1. style.css
    4. 3.4. 引入方式的优先级差别.html
  4. 4. 4. 小练习
    1. 4.1. test1.html
    2. 4.2. test1.css
    3. 4.3. test2.html
    4. 4.4. test2.css
|