首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(第一版)知识点

(第一版)知识点

作者头像
河湾欢儿
发布2018-09-06 16:52:34
9970
发布2018-09-06 16:52:34
举报
WEB前端开发做什么?
PC端页面
移动端页面
解决用户体验问题

必备条件是什么?
1>会上网,会打字,懂得互联网是什么
2>兴趣
3>肯练习

浏览器和服务器如何信息交互?
通过浏览器如何查看请求报文和响应报文?

浏览器通过输入的地址,将请求报文发送到服务器,服务器从请求报文中得到要请求文件的信息,服务器读取它的信息,然后交给响应报文,浏览器接收响应报文,浏览器将文件内容显示出来。

浏览器在显示内容之前会做一些处理,通过浏览器内核来解析响应回来的内容,才能将页面显示出来。
浏览器内核:
内核(Rendering Engine):可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。
内核的分类:
Trident:ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...
Gecko:Firefox
Webkit:Safari,Chrome
Presto:Opera
不同的内核在渲染同一内容的时候会有差别。

页面的本质:从服务器中响应回来的一段文本通过浏览器内核来解析,解析出来显示到页面上。


http协议:浏览器与服务器交互的约定
http协议:请求报文 响应报文 url      https协议  ftp协议
Url:http://192.168.16.200:8080/index.html 协议名 服务器的ip 端口号 请求文件的名称
DNS域名解析系统  将192.168.16.200----->www.taobao.com 
 
所以建立网站首先要购买 服务器和域名 ,用域名来绑定服务器  
学习那些知识才能做出精美作品?
1>软件(5%的时间)
       浏览器: chrome  IE 火狐 苹果 欧朋
       浏览器插件:F12 
       用来写代码的编辑器(ws、sublime......)
       Photoshop、FW(测量、剪裁、编辑)


2>语言(至少花95%的时间)
     至少要学习: html   css   js这三种基本的语言

HTML 超文本标记语言

语言:和浏览器认识的语言、和浏览器打交道(沟通)
标记、标签:<html>     <html>
标签对:<html></html>
单标签:<meta />  <img />
超:图片、声音、视频超出于文本的范畴

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>hello world</body>
</html>


UTF-8是很有来头的编码,认识世界各个语言,能够正确识别语言,相当于是翻译家,不会出现乱码的现象


Css层叠样式表(给网页做装修的)
width: 100px;
height: 100px;
background: red;

Javascript:脚本语言(是一种可以动的行为)
搭建一个网页相当于搭建一个房子 html css js(冬暖夏凉)

案例:onclick="this.style.width='800px';this.style.height='800px';"
(让页面动起来)


第一章常用标签
Html标签:
作用所有html中标签的一个根节点。
Head标签:
作用:用于存放:
title,meta,base,style,script,link
注意:每个head标签中都必须有一个有title标签,其它的可选。
Body标签:
作用:用于存放所有的html的结构标签:
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title标签:
作用:让页面拥有一个属于自己的标题。
meta 标签:
常用用法:
1.Description:可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。
2.Keywords:关键词,可以用来提高页面的关健词的比重(前升排名的一种方式)
3.字符集(编码格式):charset

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

gbk,utf-8之间的区别:
相同点:都是字符的编码格式。
区别:
utf-8:收录是全世界所有的语言中的文字。
gbk:收录了汉字,片假名。
大小:
utf-8>gbk
性能:
uft-8<gbk
约定:将来我们在整个学习过程中都用utf-8;
utf-8存储一个汉字占3个字节,
gbk存储一个汉字上2个字节
标签的分类:
双标签:有开始有结束,开始和结束之间是存在内容
<h1></h1>,<p></p>
单标签:只有一个标签,自己闭合自己。
<hr /> ,<br /> ,<img/>
标签与标签之间的关系:
 嵌套关系:一个标签包含另外一个标签,他们之间构造父子关系。
 并列关系:两个标签并列,他们构造兄弟关系。
 注意:将来在书写代码的时候如果两个标签之间的关系是嵌套关系,最好通过代码直接反映出来(子元素相对于父元素有一个缩进)。如果是并列关系,最好要有对齐。

h系列的标签(Header):h1,h2,h3,h4,h5,h6
作用:把页面上的文字加上标题的语义。
h1,h2,h3,h4,h5,h6:将文字放大,加粗.并且逐渐变小。(h1标签是最大的。)

p标签(Paragraph):段落标签
作用:给页面的上一段文字加上段落的说语义

hr标签
作用:在页面显示一条横线

br标签
作用:换行

b u i s(没有语义)  strong ins em del
作用:
b:加粗
u: 下划线
i:  倾斜
s: 删除线   
建议在含有语义化情景时尽量不要使用,因为这些标签没有语义。


strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用有语义化的意思

Img标签
作用:在页面显示一张图片
src 图片显示的路径
alt 如果图片加载不出来会显示这个属性中的文字
title   介绍这张图片

a标签(锚)
作用:可以在一个页面跳转到另一个页面。
注意:在a标签之内必须要写上文字,如果没有,那么这个标签在页面上找不到。
1.可以跳转到另外的页面。
2.可以不跳转(跳转到当前页面)href=”#”
3.可以在当前页面进行定位。
      A.设置a标签的href属性为“#id名”,
      B.在页面的指定位置加入一个目标标签(可以是任意标签)
      C.必须给这个标签设置一个id名:<p id=”mubiao”>这是目标</p>
4.在一个页面跳转到指定的页面的指定的位置。
a标签的属性
href    a标签跳转的目标地址
target  _blank:保留原始页面,再进行跳转
_self:在当前页面进行跳转
base    为页面上所有的a标签设置跳转的方式(base标签一般放在titile标签下面)

路径问题:

第一种:绝对路径
    带有盘符的路径:C:\上课内容\01html第一天\4-源代码\1.jpg.
第二种:相对路径
    由页面是一个文件,图片 也是一个文件,而现在需要在页面上输出图片,所以需要得到图片相对于文件的路径.

 a.如果页面与图片在同一目录下面:

<img src=”2.jpg” />
 b.如果页面在图片一上级目录:

  <img src=”image/1.jpg” />
 c.如果图片在页面的上一级目录:   

 <img src=”../2.jpg” />
问题:那么将来我们在实际开发中到底是用绝对路径,还是用相对路径??
只要不出意外情况都是用相对路径:因为相对路径的可移植性要强。

无序列表 ul li
有序列表 ol
自定义列表 dl dt dd

注释 
<!--我是html里面的注释-->
/*我是css里面的注释*/

Photoshop相关的操作(切图、测量、对图片简单的处理)

首先下载ps软件
如何得到一张图片
1>设计师给的ps图片
2>印屏幕:prt scsysrq 


新建画布,放大缩小图片,新建图层,复制图层,吸管使用,渐变,钢笔,打字,图片切图、去除图片上的文字、alt+delete前景颜色、ctrl+delete后景颜色



第二章 css

引入css样式:行间样式 内部样式 外部样式

border样式  (做练习三角)
border: 10px dashed black;
/*复合样式 虚线有兼容问题*/
border: 10px dotted black; 
/*点划线有兼容问题*/
border-top: 10px solid blueviolet;
border-left: 10px solid red;
border-right: 10px solid hotpink;
border-bottom: 10px solid yellow;


background样式(做练习)
background-image: url("a.jpg");
/*默认状态下是平铺的*/
background-repeat: no-repeat;
/*背景不平铺*/
background-color: red;
/*背景图片比背景颜色层级高*/
background-repeat: repeat-x;
/*背景水平平铺*/
background-repeat: repeat-y;
/*背景垂直平铺*/
background-position: 10px 10px;  
/*背景定位*/
第一个参数水平,第二个参数垂直
left、center、right    top、center、bottom

background-attachment: fixed;
/*背景固定*/
background-attachment: scroll;
/*默认样式滚动*/
合写
background: red url("a.jpg") no-repeat center center;

颜色单位
Red(颜色单词)  #333333(16进制模式)  rgb(255,255,255) rgb模式

font(做练习)
         font-size 文字大小
    font-weight 文字加粗(bold加粗/normal正常)
    font-style 文字倾斜(italic倾斜/normal正常)
    line-height 行高 (文字在一行上下居中)
    font-family 字体 
    -------------------------------------
    font:font-weight font-style font-size/line-height font-family;
    font:font-size font-family(必须要写)
        -------------------------------------
         color 文字颜色
    text-indent 首行缩进 (1em=1个文字大小)
    text-align 文本对齐方式(left/center/right)
    text-decoration 文本修饰(underline下划线/line-through 删除/overline 上划线/none)    
         letter-spacing字间距
         word-spacing空格之间的间距,单词与单词之间的间距

写一个盒子模型
   
 可视宽(高)=border+padding+width(height) 

 1> padding内填充(padding在元素的边框以内,内容之外,padding会显示元素的背景)
 Top|right|bottom|left

 2>Margin:(边框以外,不显示元素的背景)
 Top|right|bottom|left

margin叠加的问题(相邻两个元素上下margin是叠加,取最大值显示)
Margin传递问题 (子元素的margin会传递给父级)

Margin-left:auto(注意下距离左侧auto,会把剩下的空余距离全都占掉)
Margin-right同理
Margin:0 auto;居中

常见的选择器

Id选择器(同一页面不能重名)#
类选择器 .
标签选择器 p
包含选择器 .box p
群组选择器 ,
通配符 * 

选择器的优先级
1.选择器优先级一致的情况下,后面的样式会覆盖前面的样式
2.行间样式>id选择器>class选择器>标签选择器>通配符

包含选择器和群组选择器比较:
包含选择器优先级可以叠加(优先级可以相互抵消)
群组选择器优先级不叠加

标签类型
块
  1.独占一行
  2.支持所有样式
  3.不设置宽度的时候,宽度撑满整个一行
内嵌
  1.可以在一行显示
  2.不支持宽高,不支持上下的margin和padding等样式的问题
  3.宽度由内容撑开
  4.代码换行被解析

那如何判断他们是块状还是内联?
div、 ul li 、dl dt dd、 h1 、p 、strong 、a、 em

如何清除默认样式?

块和内嵌的转换?
1.display:block; 显示为块
2.Display:inline;显示为内嵌

块状元素如何在同一行显示?第一种方法解决

Display:inline-block的特征:
1.块在一行显示
2.行内属性标签支持宽高
3.没有宽度的时候内容撑开宽度
4.标签之间的换行被解析(问题)
5.Ie6 7不支持inline-block(问题)

分页的练习

块元素如何在同一行显示?第二种方法解决
浮动
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

float:left | right | none | inherit;





浮动的特征:
         1、块在一排显示
    2、内联支持宽高
    3、默认内容撑开宽度
         4、脱离文档流
    5、提升层级

清除浮动:
1.加高
问题:扩展性不好

2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效

3.inline-block 清浮动方法:
问题:margin左右auto失效;

4.空标签清浮动
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)

5.br清浮动
问题:不符合工作中:结构、样式、行为,三者分离的要求。

6.after伪元素 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{*zoom:1;}

after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放 
        a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
        b、FF 不支持;
7.overflow:hidden 清浮动方法;
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7等一些问题









                    

定位
  
如何让div2移动到图2上面的位置?

定位元素位置控制  top/right/bottom/left  定位元素偏移量。

position:relative;  相对定位
a、不影响元素本身的特性;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、如果没有定位偏移量,对元素本身没有任何影响;
d、提升层级

position:absolute;  绝对定位
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于body发生偏移;
e、相对定位一般都是配合绝对定位元素使用;
f、提升层级


z-index:[number];  定位层级
a、定位元素默认后者层级高于前者;
b、建议在兄弟标签之间比较层级
z-index:[number];  定位层级


position:fixed; 固定定位
与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位;
问题:IE6不支持固定定位;

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;

position:fixed;  固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)


关于层级问题的一些思考。
1.后来居上原则
2.层级优先z-index
3.拼爹原则
4.加上定位之后,继承失效

伪类
:link
伪类将应用于未被访问过的链接,与:visited互斥。
:visited
伪类将应用于已经被访问过的链接,与:link互斥。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
:active
伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

需要注意的是在CSS的定义中,同一个元素的:hover必须位于:link、:visited之后才能生效,:active必须位于:hover之后才能生效。

:focus
伪类将应用于拥有键盘输入焦点的元素。
:first-child
伪类将应用于元素在页面中第一次出现的时候





伪元素
:first-letter
伪元素的样式将应用于元素文本的第一个字(母)。
:first-line
伪元素的样式将应用于元素文本的第一行。
:before
在元素内容的最前面添加新内容。
:after
在元素内容的最后面添加新内容。

伪元素和伪类的区别:
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

表格

表格标签:
    table 表格
    thead 表格头
    tbody 表格主体
    tr 表格行
    th 元素定义表头
    td 元素定义表格单元

表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

colspan  属性规定单元格可横跨的列数。<td colspan="2"></td>
    
rowspan  属性规定单元格可横跨的行数。<td rowspan="2"></td>
       
表单
form   表单
<input type="…… " name="" value="" /> 
text              文本框
password     密码
radio            单选
checkbox     复选
submit         提交
reset            重置
button         按钮
image          图片
file               上传
hidden         隐藏

label  标签为 input 元素定义标注
    <input type="checkbox" name="" id="a"/>
    <label for="a">……</label>

checked  在页面加载时默认选定的 input 元素。
    <input type="checkbox" name="" checked/>

disabled  属性规定应该禁用 input 元素。
    <input type="checkbox" name="" disabled/>


select/option 下拉选框


textarea      文本域
    各个浏览器下的默认滚动条显示不兼容
    css3新增 resize 调整尺寸属性;


常见的实体字符
<!--空格-->
<button>登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
<!--引号-->
<input type="text" value="这是个&quot;引号&quot;"/>
<!--大于小于号-->
<div> 这是个&lt;span标签&gt;</div>
<!--版权所有-->
<div>版权所有&copy;2016</div>
<!--显示&字符-->
<div>空格的实体字符是&amp;nbsp</div>
Css Hack调整兼容性
hack虽然有黑客的意思,但是这里和黑客没有半毛钱关系,这里hack是小技巧的意思。
方式一 条件注释法(较为常用)

只在IE下生效
<!--[if IE]><![endif]-->
只在IE6下生效
<!--[if IE 6]><![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]><![endif]-->
只在IE8上不生效
<!--[if ! IE 8]><![endif]-->
非IE浏览器生效
<!--[if !IE]><![endif]-->

方式二 属性前缀法
*加在属性上 表示该属性只针对IE567生效(最常用的是这个 还有其他的)


\9是支持ie10以及ie10以下
*  +是支持ie7以及ie7以下
_是ie以及ie6以下

 
固定布局的类型  www.jd.com
响应式布局的类型
   流式布局(就像水一样,其实就是按照百分比布局  https://m.jd.com/  http://m.sohu.com/)                                         
   栅格布局(bookstrap栅格布局系统 其实就是改变一个范围做出改变,一格一格的改变 http://www.bootcss.com/)
   瀑布流布局 (随窗口的改变而改变,等宽不等高,就像瀑布一样,蒙德里安风格 错落大方 超现实主义 简洁大气冷抽象 时装 家具)
   圣杯布局  双飞翼布局(中间自适应,两边不改变 www.taobao.com)
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.03.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档