(第一版)知识点

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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

CSS布局解决方案(下)

25870
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

12510
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

37150
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET core2.0 ...

25190
来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

35040
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

57190
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

26850
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

39860
来自专栏何俊林

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自 Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http:/...

215100
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

23030

扫码关注云+社区

领取腾讯云代金券