一、软件主要分两种架构C/S和B/S
- B/S中的B指的是browsers,是浏览器的意思,S值Server指服务器的意思。
- B/S架构的软件一般都是通过访问一个网页的形式来使用的,而将一些运算等操作放到远端的服务器上。
二、软件开发流程:
1、 网页设计师根据需求设计网页;
2、 前端工程师将设计做成静态网页;
3、后台工程师将静态网页修改为动态网页。
三、网页由三部分组成:
1、结构:HTML:用于描述页面的结构;
2、 表现 :CSS:用于控制页面中元素的样式;
3、行为:JavaScript:用于响应用户的操作。**
万维网联盟(W3C):万维网联盟World Wid Web Consortium,W3C专门为了定义网页相关的标准而成立 。
四、HTML(Hypertext Markup Language)超文本标记语言。
- HTML使用标签的的形式来标识网页中的不同组成部分。
超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
HTML中的标记指的就是标签。结构:<标签名>标签内容</标签名>
我们还将一个完整的标签称为元素。
1. 可以为HTML标签设置属性,通过属性为HTML元素提供附加信息。属性需要设置在开始标签或自结束标签中。属性总是以名称/值对的形式出现。比如:name=“value”
1、id:id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值;
2、class:用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class;
3、title:title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。
2. 注释:< !-- 注释内容 -->;注释不能嵌套!
3.meta的用法:
1、设置页面的字符集:– <meta charset="utf-8">;
2、设置网页的描述:– <meta name="description" content="">;
3、设置网页的关键字:– <meta name="keywords" content="">;
4、请求的重定向:– <meta http-equiv="refresh" content="5;url=地址"/>。
4.<html>:用于告诉浏览器这个文档中包含的信息是用HTML编写的。一个页面中html标签只能有一个。
5.<head>:– <head>标签用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。一个网页中只能有一个head。
6.<title>:表示网页的标题,一般会在网页的标题栏上显示。
7.<body>:用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。
8.<h1> ~ <h6>:h1 ~ h6都是网页中的标题标签,用来表示网页中的一个标题,不同的是,从h1~h6重要性越来越低。
9.<p>:<p>标签表示网页中的一个段落。一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行。
10.<br />:<br />标签表示一个换行标签,使用br标签可以使br标签后的内容另起一行。
11.<hr />:<hr />标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。
12.<img />:< img />标签是图片标签,可以用来向页面中引入一张外部的图片;– src:指向一个外部的图片的路径;– alt:图片的描述
13.<a>:<a>标签是超链接标签,通过a标签,可以快速跳转到其他页面;– href:指向一个链接地址;– target:设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口
14.字符实体:
1.小于号 <:– & lt;
2.大于号>:– & gt;
3.空格:– & nbsp;
4.和符号&:– & amp;
5.版权©:– & copy;
6.引号”:– & quot;
7.注册商标®:– & reg;
8.商标™:– & trade;**
五、 CSS:层叠样式表 (Cascading Style Sheets)所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。
CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。
语法:– 选择器 {样式名:样式值;样式名:样式值 ; }
– p {color:red ; font-size:12px;}
行内样式:
<p style="color: red;font-size: 30px"></p>(不推荐使用)
内部样式:可以直接将样式写到<style>标签中
<style>
p{color:red; font-size: 30px;}
<style>
外部样式:可以将所有的样式保存到一个外部的css文件中,然后通过<link>标签将样式表引入到文件中。
<style>
<link rel="stylesheet" type="text/css"href="style.css">
<style>
网友评论