前端学习概要


tags: 前端概要


前端学习

  1. 从B/S模型说起: 从C/S模型发展而来 在客户端统一成浏览器,不用每一个都在电脑上安装一个客户端(智能手机好像又不一样)
  2. web的组成:
    1. ①Web服务器:监听客户端连接请求、接收请求,返回响应内容。软件: Httpd(httpd是Apache早期的软件初衷 早期的apache小组,现在已经成为一个拥有巨大力量的apache基金会。 他们把起家的apache更名为httpd,也更符合其http server的特性。而apache现在成为 apache基金会下几十种开源项目的标识。 )
    2. ②web客户端:各种浏览器
    3. ③传输协议:http协议(定义Web服务器和客户端的通讯细节)

HTML

HTML(Hyper Text Markup Language) 超文本标记语言

从名字说起:

  1. 内容-->文本,超文本(图片,音频,超链接等)
  2. 标记——>可以用浏览器解释的的格式 一共52个标记
  3. 语言 -->既然是语言就有语法 ——--标签之间的关系和标签的类型及属性

1.关于内容

有时候文本的内容可能是标签的关键字或空格(&nbsp) 这时就需要转义字符了

2.关于标签

标签的初衷是设计为用于定义文档内容 如:
<h>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息 但也有<font> <b> 这样用于改变文本的属性(颜色,大小等) 不推存使用(css代替)

详细学习--w3school

标签的类型

 •区块元素(block):必须处于独立的一行中  如:<div> 会换行
 •内联元素(inline):可以与其他内容处在一行中

标签的属性

不同的标签具有不同的属性,所有的标签都具备下列四个属性:

    •id:整个文档每个标签可以声明一个唯一的id号
    •style:为元素指定CSS样式
    •class:指定元素所属的类型
    •title:指定标签的弹出式提示语

重点的标签

有一些标签需要交互(和服务器)

  • <form> 表单为block元素 其中的incline元素有<input> 等 详细见
  • <ul><ol> 列表也为block元素 详见

3.页面的布局

•TABLE布局:过时
•DIV+CSS:当前主流,表达的语义不清
•HTML5布局标签:未来趋势

CSS(Cascading Style Sheets)

CSS(Cascading Style Sheets)层叠样式表
样式从 HTML 4.0开始使用 (XTHML1.0加强规范),为了解决内容与表现分离的问题

还是从名字说起:这个可能比W3C上的好一点

  1. 样式:

     - 浏览器缺省设置样式 //其实不属于样式
     - 外部样式表        //推存使用(不要太多)<link rel="stylesheet" href="*.css" />
     - 内部样式表(位于 <head> 标签内部) //<head><style type=”text/css”>...</style></head页面统一的样式最好放在这
     - 内联样式(在 HTML 元素内部) //<div style=””></div>推存少用 因为本质上没有解决内容与表现分离的问题
    
  2. 层叠:样式表允许以多种方式规定样式信息。样式可以规定在单个的 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吸收了很多用起来方便的东西(还省去了这些东西繁琐的语法) 但好像没有严格的语法 但语言说到底还是为了解决问题 有不有严格的语言在应用方面就不要讨论了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,999评论 19 139
  • 序 有时,总会想着独自一人,去那青山之巅,去那隐秘之处,赏日月之美景,观高山之...
    雪源不懂悲伤阅读 239评论 0 0
  • 昨晚又和哥哥煲电话粥。 以前没有过这样的深谈,只是聊聊平常事,都已经觉得满足。大多时候,他问起我,我会向他抱怨周围...
    子瑜曰阅读 206评论 0 0
  • 歌词的变迁,爱情价值观的转型 十几年前小虎队“爱”的歌词: 想带你一起看大海说声我爱你 给你最亮的星星说声我想你 ...
    慵慵哈阅读 131评论 0 0