前端-01-day

软件主要分两种架构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页面：

-------
-------


-------

网页正文

标签

• HTML中的标记指的是标签。
• HTML使用标记标签来描述网页。
• 结构：
  <标签名>标签内容
  <标签名/>

元素

• 我们还将一个完整的标签成为元素。
• 这里我们可以将元素和标签认为是一个同义词。

一级标题

上边的h1我们就称为元素。

我是一个段落

p也是一个元素，em是p的子元素，p是em的父元素。

-------

内容

• body也是一个元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。

属性

• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以 名称/值对 的形式出现。
• 比如：name=‘balues’
• 有些属性可以是任意值，有些则必须是指定值。

标题

常见属性

• id
  -- id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
• class
  -- class属性用来为标签分组，拥有相同的class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
• title
  -- title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释

• html注释中的内容不会再网页中显示。
• 格式：

• 合理的使用注释可以帮助开发人员理解网页的代码。
• 注释不能嵌套！

乱码解决

• 使用meta标签完成乱码的解决任务：