软件主要分两种架构C/S和B/S
我们主要从事B/S软件开发
什么是B/S？
- B/S中的B指的是browsers，是浏览器的意思，S指Server指服务器的意思。
- B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上。
- 这样就降低了对客户端的要求，我们的计算机上只需要安装一个浏览器即可使用。
- 向我们常用的 狗东 、淘宝、12306等网站都是B/S架构软件。
软件开发流程
- PS：网页设计师根据需求设计网页
- HTML5：前端工程师将设计做成静态网页
- python：后台工程师将静态网页修改为动态网页
计师的网页都是图
我们要把它变成一堆代码
现在明白了：
- 我们需要将设计师的设计转换为代码，然后交给后台工程师，再由他们去编写服务器的代码。
- 我们需要和设计师沟通，需要和产品经理沟通，需要和后台工程师沟通。
- 我们编写的网页会在整个项目的最前端由用户查看。
前端技术好学吗？
- 前端技术简单好学？告诉你，不可能。
- 首先，可以肯定，前端不像java那样有较高门槛。他入门很容易。
- でも，刚才说了，前端工程师需要和设计师和后台工程师做衔接，这两方面技术我们都得懂一些。
- 再来，前端虽然入门简单，但是深入起来也不是随便玩玩的。所以学习前端技术必须努力。
我们学习什么内容？
- 根据W3C标准，一个网页主要有三部分组成：结构、表现、行为。
- 结构：HTML用于描述页面的结构。
- 表现：CSS用于控制页面中的元素的样式。
- 行为：JavaScript用于响应用户的操作。
学习使用工具
- 浏览器：火狐、IE、谷歌
- 编辑器：记事本（txt）、NotePad++、Sublime
- 调试工具：FireBug
- 图片工具：Photoshop
万维网联盟（W3C）
- 万维网联盟World Wid Web Consortium。
- W3C专门为了定义网页相关的标准而成立。
- W3C定义了网页中的HTML、CSS、DOM、HTTP、XML等标准。
WHATWG
- 网页超文本应用技术工作小组（WHATWG）
- 是一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
HTML
- HTML （Hypertext Markup Language）超文本标记语言
- 他负责网页的三个要素之中的结构。
- HTML使用标签的形式来标识网页中的不同组成部分。
- 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面：
<!DOCTYPE html>
<html>
<head>
-------<meta charset="UTF-8">
-------<title>网页标题</title>
</head>
<body>
-------<h1>网页正文</h1>
</body>
</html>
标签
- HTML中的标记指的是标签。
- HTML使用标记标签来描述网页。
- 结构：
<标签名>标签内容</标签名>
<标签名/>
元素
- 我们还将一个完整的标签成为元素。
- 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1>
上边的h1我们就称为元素。
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素。
<body>
-------<p><em>内容</em></p>
<body>
- body也是一个元素。
- body是p和em的祖先元素。
- p和em是body的后代元素。
属性
- 可以为HTML标签设置属性。
- 通过属性为HTML元素提供附加信息。
- 属性需要设置在开始标签或自结束标签中。
- 属性总是以 名称/值对 的形式出现。
- 比如：name=‘balues’
- 有些属性可以是任意值，有些则必须是指定值。
<h1 title='我是一个标题'>标题</h1>
<img src='' alt='' />
常见属性
- id
-- id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。 - class
-- class属性用来为标签分组，拥有相同的class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。 - title
-- title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
注释
- html注释中的内容不会再网页中显示。
- 格式：
- 合理的使用注释可以帮助开发人员理解网页的代码。
- 注释不能嵌套！
乱码解决
- 使用meta标签完成乱码的解决任务：
<meta charset='utf-8' />
网友评论