tags: 前端概要
前端学习
- 从B/S模型说起： 从C/S模型发展而来 在客户端统一成浏览器，不用每一个都在电脑上安装一个客户端（智能手机好像又不一样）
- web的组成：
- ①Web服务器：监听客户端连接请求、接收请求，返回响应内容。软件： Httpd（httpd是Apache早期的软件初衷 早期的apache小组，现在已经成为一个拥有巨大力量的apache基金会。 他们把起家的apache更名为httpd，也更符合其http server的特性。而apache现在成为 apache基金会下几十种开源项目的标识。 ）
- ②web客户端：各种浏览器
- ③传输协议：http协议（定义Web服务器和客户端的通讯细节）
HTML
HTML(Hyper Text Markup Language) 超文本标记语言
从名字说起：
- 内容-->文本，超文本（图片，音频，超链接等）
- 标记——>可以用浏览器解释的的格式 一共52个标记
- 语言 -->既然是语言就有语法 ——--标签之间的关系和标签的类型及属性
1.关于内容
有时候文本的内容可能是标签的关键字或空格（ ） 这时就需要转义字符了
2.关于标签
标签的初衷是设计为用于定义文档内容 如：
<h>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息 但也有<font> <b> 这样用于改变文本的属性（颜色，大小等） 不推存使用（css代替）
标签的类型
•区块元素(block)：必须处于独立的一行中 如：<div> 会换行
•内联元素(inline)：可以与其他内容处在一行中
标签的属性
不同的标签具有不同的属性，所有的标签都具备下列四个属性：
•id：整个文档每个标签可以声明一个唯一的id号
•style：为元素指定CSS样式
•class：指定元素所属的类型
•title：指定标签的弹出式提示语
重点的标签
有一些标签需要交互（和服务器）
3.页面的布局
•TABLE布局：过时
•DIV+CSS：当前主流，表达的语义不清
•HTML5布局标签：未来趋势
CSS(Cascading Style Sheets)
CSS(Cascading Style Sheets)层叠样式表
样式从 HTML 4.0开始使用 （XTHML1.0加强规范），为了解决内容与表现分离的问题
还是从名字说起：这个可能比W3C上的好一点
-
样式：
- 浏览器缺省设置样式 //其实不属于样式 - 外部样式表 //推存使用（不要太多）<link rel="stylesheet" href="*.css" /> - 内部样式表（位于 <head> 标签内部） //<head><style type=”text/css”>...</style></head页面统一的样式最好放在这 - 内联样式（在 HTML 元素内部） //<div style=””></div>推存少用 因为本质上没有解决内容与表现分离的问题 层叠：样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表
格式：
选择器{属性1:值1+单位;属性2：值2+单位；}
1.选择器
给不同的标签添加样式 详细选择器见
(1)通用选择器： *{...} 选择页面中的所有元素
(2)元素选择器：标签名{...} 选择指定的元素 如 div{...}
(3)ID选择器：#ID值{...} 仅选择具有指定ID的元素 如 #p2{...}
(4)类别选择器（加强版ID选择器）： .类名{...}选择具有指定class的所有元素 如 .mark{}
//下面选择器有嵌套（上面提到的单个选择器的嵌套）
(6)子元素选择器（加空格）：选择器1 选择器2{...} 选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素 如 div span{...} .product .mark{...}
(7)直接子元素选择器 选择器1>选择器2{...} 选中选择器1中的直接子元素中可被选择器2选中的 如div > span{...} IE6不支持
(8)多选/群组选择器：选择器1,选择器2,...选择器n{...} 选择可被任何一个选择器选中的元素 h2,#main,.mark{...}
(9)伪类选择器： :伪类名{...} //用于有动作的选择器（有交互性）
选择器的优先级：
!important > 内联样式（style属性） > #ID选择器（id属性） > 类选择器/伪类选择器（class属性） > 元素选择器（标签） > 浏览器预定义样式
2.css中的属性
css是用于显示样式 所以其中的所有属性都仅仅是改变外观（使其赏心悦目） 属性按照改变谁的外观（文本，文本周围）可以分为两种 用盒子模型可以较好的描述出来
与元素（element）有关
定位（Positioning）
颜色（color）
背景（background）
字体（font）
等等 ......
与元素周围有关
padding
border
margin
等等 .......
当然和HTML一样列表（list）和表格（table）用的较多，所以单独有属性
3.css中的单位（value）
布局是一个和考验技术和耐心的活 可能你花了很长的时间但看到的页面布局并不是你想要的效果，并且里面的不同属性可以显示相同的效果 --》解决办法:多积累，不然还能怎么办
Javascript
学习路线：js【 一门语言 很神奇 没有class 但可以创建对象,在客户端使用 服务器也行Node.js（但我没看到过 php做了）】 ――>ajax【异步刷新--请求服务器却不重新加载页面】――>jquery【类库--很多方法 也有人说框架但觉得还是有区别】
JS在浏览器端负责“行为” ，所以他可以和css一样嵌入html之中。
通常说的javascript包含三个层次：
•核心——由ECMAScript（最新版ecmascript6）标准制定，可以运行在任何js引擎中，不光可以编写客户端脚本，还可以编写服务器端脚本(NodeJS)、编写桌面应用程序、网络程序
•DOM——将JS嵌入在网页中操作HTML标签
•BOM——使用JS与浏览器进行交互
由于以前学过c，c++，java等语言所以学习其他 的语言时都是从找和以前学过的语言不同时入手 总的来说JS吸收了很多用起来方便的东西（还省去了这些东西繁琐的语法） 但好像没有严格的语法 但语言说到底还是为了解决问题 有不有严格的语言在应用方面就不要讨论了
