目录
1、B/S软件的结构
2、前端的开发流程
1)网页设计师根据需求设计网页
2)前端工程师将设计做成静态网页
3)后台工程师将静态网页做成动态网页
3、网页的组成部分
1)内容(结构)
在页面中可以看到的数据。
一般使用HTML技术来展现。
2)表现
内容在页面上的展示形式。例如:布局、颜色、大小等。
一般使用CSS技术实现。
3)行为
页面中元素与输入设备交互的响应。
一般使用JavaScript技术实现。
4、HTML简介
Hyper Text Markup Language,超文本标记语言。
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容,例如:文字如何处理、画面如何安排、图片如何显示等。
5、创建HTML页面
1)创建一个Web工程(静态的Web工程)
2)在工程下创建HTML页面
3)选择浏览器执行页面
6、HTML的书写规范
<html> <!--表示整个html页面的开始-->
<head> <!--头信息-->
<title>标题</title> <!--标题-->
</head>
<body> <!--body是页面的主体内容-->
主体内容
</body>
</html> <!--表示整个html页面的结束-->
html的代码注释:<!-- 这是html注释,可以在页面右键查看源代码中看到 -->【注释快捷键:Ctrl + Shift + /】
7、HTML标签的介绍
8、HTML标签的语法
1)标签不能交叉嵌套
正确:<div><span>早安,尚硅谷</span></div>
错误:<div><span>早安,尚硅谷</div></span>
2)标签必须正确关闭(闭合)
正确:<div>早安,尚硅谷</div>
错误:<div>早安,尚硅谷
正确:<br/>
错误:<br>
3)属性必须有值,属性值必须加引号
正确:<font color="blue">早安,尚硅谷</font>
错误:<font color>早安,尚硅谷</font>
错误:<font color=blue>早安,尚硅谷</font>
4)注释不能嵌套
9、font标签
10、特殊字符
常用的特殊字符
1)< ----- <
2)> ----- >
3)空格 -----  
11、标题标签h1-h6
12、超链接标签
13、无序列表
14、img标签
15、table标签
16、表格的跨行跨列
17、iframe标签介绍
18、表单显示
19、表单格式化
20、表单提交的细节
21、其他标签div、span、p
22、CSS介绍
CSS是层叠样式表单,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
23、CSS语法介绍
p{
color: blue;
font-size: 80px;
}
其中,p是选择器,font-size是属性,80px是值。
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性(property):是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)。
多个声明:如果要定义不止一个声明,则需要用分号将每个声明隔开。最后一条声明的末尾可以不加分号,但尽量在每条声明的末尾都加上分号。
注:一般每行只描述一个属性。
CSS注释:/* 注释内容 */
24、CSS与HTML结合使用的三种方式
25、标签名选择器
26、id选择器
27、class类型选择器
28、组合选择器
29、CSS常用样式
字体颜色:color
字体大小:font-size
边框:border
宽度:width
高度:height
背景颜色:background-color
块居中:margin-left:auto;
margin-right:auto;
文本居中:text-align:center;
超链接去下划线:text-decoration:none;
表格边框合并:border-collapse:collapse;
列表去除修饰:list-style:none;