一个web初学者的笔记总结
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; min-height: 25.0px }
p.p3 { margin: 0.0px 0.0px 10.0px 0.0px; font: 18.0px "PingFang SC" }
p.p4 { margin: 0.0px 0.0px 10.0px 0.0px; text-align: justify; font: 18.0px "PingFang SC" }
p.p5 { margin: 0.0px 0.0px 10.0px 0.0px; text-align: justify; font: 18.0px "PingFang SC"; color: #424242 }
p.p6 { margin: 0.0px 0.0px 10.0px 0.0px; text-indent: 28.0px; font: 18.0px "PingFang SC" }
span.s1 { color: #000000 }
span.s2 { color: #424242 }
一个web初学者的总结
html部分
1. 纯文本语言,javascript、css、java、txt、html,纯文本只有文本内容,无法记录文本样式。
2. html(hyperText Markup Language),超文本标记语言,就是通过标签对,给纯文本添加语义,实际上其实是用文本文本添加语义,并且可以添加图片、链接、视频等,一对对的标签成了标记,所以构成了“超文本标记语言”。
3.文档声明头,任何一个标准的html页面,第一行一定是以
<!DOCTYPE html>,这是文档声明头。
4. 字符集采用meta标签定义,meta表示“元”配置,表示基础的配置项目,charset就是字符集。
5. 常用的两种字符集:utf-8. 全球国际通用,里面涵盖了所以人类语言,一个汉字3个字节,保存尺寸大,加载慢。gb2312. 是国标,是中国的字库,里面仅仅涵盖了汉字和常见的英文,一个汉字2个字节,保存尺寸小,加载快。
6. meta出了可以设置字符集,还可以设置关键字和页面描述,description设置页面描述;keyword关键字,告诉搜索引擎,这个网页做什么的,能提高搜索效率,让别人能快速找到。
7. html对换行不敏感,对tab不敏感,不是依靠缩进来表示嵌套的,就是看标签的包裹关系,但是我们发现良好的缩进,代码更加易读,要求大家正确的缩进标签。
8. html中所以文字,如果有空格,换行,tab都会被折叠成一个空格显示。
9. html的标签有两种类型,容器级和文本级;容器级的标签里面可以存放任何东西,文本级的标签只能放文字,图片,表单元素。
10. 自封闭标签,也称为单标签,因为没有反标签。
11. 链接的target=_blank属性:如果没有在相同的标签打开,如果有,就在新的空白标签中打开,并且跳转的标签页还存在。
css部分
1.列表有三种:无序列表,有序列表,自定义列表。无序列表(unordered list):用来表示一个列表语义,并且每个项目之间不分先后顺序。有序列表(ordered list):一般很少使用有序列表,基本使用无序列表。自定义列表:dl(definition list)定义列表,dd(definition title):定义标题,dd(definition description):定义表述词。
2.div(division)和span是盒子模型最重要的标签之一,div中的所有元素是一块区域,div是容器级的标签;span是文本级标签。
3.html负责结构,css负责样式,js负责行为。
4.标签选择器,使用html中的标签当选择,所有标签都能当选择器,选择的是所有,而不是某一个,是共性,不是特性。
5.类选择器,类就是class属性,任何标签都可以有class属性,class属性可以重复使用,一个标签可以属于多个类,用空格隔开。
6. id选择器,任何标签都可以有id,id命名以字母开头,可以有字母、数字、大小写严格区分;同一个页面不能重复,即使是不一样的标签,也不能有相同的id。在css中尽可能使用class,除非特殊才有id,id是js用的,js通过id属性得到标签。
7. 一个标签可以同时被多种选择器选中,这些选择器可以选上同一个标签,来控制标签的内容(html),动作(js),排版(css)。
8. 后代选择器,是一种共性、特性的平衡,当要把某个部分的所有的内容,进行样式改变,就要想到后代选择器。
9.交集选择器,要满足两个条件,必须都是同一个标签,必须有同一个类选择,可以连续交。
10.并集选择器,用逗号隔开就是并集选择器。
11. 通配符,*代表所有的元素,效率不高,所以使用频率不多。
12.同一个标签有多个类名,有冲突,通过!important提高一个属性 的权重;!important提升的是一个属性,而不是选择器,无法提升继承的权重,不影响就近原则。
13.盒子模型:一个模型主要有5个:width,height,padding(内边距) ,margin(外边距),border。
14.边框的三要素:粗细,线性,颜色;线性.dashed、dotted、solid、double、groove、ridge、inset、outset。
15. html将标签分为容器级和文本级,容器级有div、dt、dd、h、li。文本级有p、b、span、a、em、i、u。css将标签分为块级元素和行内元素,块级元素有div、p、dt、dd、h、li,行内元素有b、span、a、em、u、i。
16. 块级元素:霸占一行,不能与其他任何元素并列;能接受宽高;如果不设置宽度,默认为父亲的100%。行内元素:与其他行内元素并排;不能设置宽高,默认是文字的宽度。
17.Display:”显示模式”,用来修改元素的行内、块级的性质
Inline就是“行内”
一旦给当前一个便签设置 display:inline 这个标签立刻改变为行内元素与span类似没有区别
一旦给当前一个便签设置 display:block 这个标签立刻改变为块级元素与div类似没有区别
18.清除浮动
1. clear:both(表示当前自己内部的元素不受其他盒子的影响)
2. overflow:hidden(超出范围就隐藏)
3.浮动的元素,只能被有高度的盒子高度,如果盒子的 内部有浮动,那么浮动会在一定范围内互相影响(加高法)。
19.css中任何文本都有行高(line-height),行的 高度,必须有元素对应的高度,才能使用。
20.text-indent:2em,首行空两个汉字的格,单位em,indent缩进的意思。
21.font-size(尺寸) line-height(行高) font-family(字体);页面中,中文使用:微软雅黑,宋体,黑体。需要其他字体,需要切图。英文:Arial、Times New Roman。
22.超链接的伪类
:link 表示,用户没有点击过这个链接的样式。是英语“链接”。
:visited 表示,用户访问过这个链接的样式。是英语“访问过”。
:hover 表示,用户鼠标悬停时候的样式,是英语“悬停”。
:active 表示,用户用鼠标点击过这个链接,但不松手,此时的样式。是英语“激活”。
23. z-index,只有定位的元素才有这个属性,不管是绝对定位,还是相对定位,数值大的在上面,float不能使用。
javascript部分
1. html 结构层,从语义上来说,描述页面的结构。
css 样式层,从审美的角度,美化页面
js 行为层,从交互的角度,提升用户体验。
2.布兰登·艾奇(Brendan Eich,1961年~),JavaScript之父JavaScript ,js诞生于1995年。
3. js是弱语言,变量只需要var来声明。
4. js是前台语言,而不是后台语言;后台语言运行在服务器上,前端运行在客户的电脑里面。
5. 程序由上到下依次执行,执行完上面的才执行下面的。
6. javascript对换行、缩进、空格不敏感。注意:每一条语句末尾都要加分号,虽然分号不是必须加的,如果不加分号,压缩过后不能运行。
7. 直接量也叫字面量,数值的直接表达就是直接写上去,不需要任何的符号。字符串一定要加引号。
8. 变量的命名规则:只能由字母、数字、下划线、美元($)符号构成,且不能以数字开头,严格区分大小写,不能使用空格,长度不能超过225个字符,还不能是js的保留字。
9. 连接符和加号,如果加号两边是数值,就是加号,否则就是连接符。
10. 运算符有:数学运算符,逻辑运算符、自增运算符等。
11. Math.pow(乘方),Math.sqrt(开根号)。
12. alert():提示框,prompt():输入框,parseInt():只能保留开头的数字,后面的自动消失,console.log(在控制台输出),document.write():文档打印输出,document文档对象,不可省略。
13. if:选择结构语句,给程序添加多个执行路线,for:循环语句,将结构类似的语句重复执行。
14. js用function来声明函数,函数的命名规则和变量命名规则一样。
15. 常用的事件名
onclck:鼠标单击
ondblclick:鼠标双击
onkeyup:按下并释放键盘上的一个键时触发
onchange: 文本内容或下拉菜单中的选项发生改变
onfocus:获得焦点,表示文本框等获得鼠标光标
onfocus:失去焦点,表示文本框等失去鼠标光标
onmouseover: 鼠标悬停,即鼠标停留在图片等的上方
onmouseout: 鼠标移出,即鼠标离开图片等所在的区域
onload:网页文档加载事件
onunload:关闭网页时
onsubmit: 表单提交事件
onreset: 重置表单
16. 事件三要素:事件源,事件,事件处理程序
17. 隐藏样式
Display: none; display: block ; 显示的意思
Visibility: hidden; visibility: visible 显示的意思
Display 隐藏不占位置
Visibility:hidden 隐藏占有位置 停职留心
Overflow:hidden; 隐藏超出的部分
18. 入口函数
window.onload=function(){
内部放js代码
}
这个函数,当我们的页面加载完成之后,采取执行函数体里面的内容的JS部分。页面的结构样式、节点加载完成之后,执行当前这个函数。
19. js数据类型:数值型(number),利用Number()转换为数值型;布尔型(BOOLean),利用!!转换成布尔类型;字符串(string)利用String
()转换成字符串;NULL(空);Underfined(没有找到)。
一个web初学者的笔记总结的更多相关文章
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- 对于一个WEB前端初学者,学前端应该注意,有什么技巧
web前端经验总结需要注意的地方和技巧如下: 1.编程思维 学习web前端开发核心在于一个“编程思维”,因为每段代码都不一样,都需要分别去看,所以只要你掌握了学习web前端的编程思维,那么写程序对于你 ...
- go语言,golang学习笔记4 用beego跑一个web应用
go语言,golang学习笔记4 用beego跑一个web应用 首页 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/ 更新的命令是加个 -u 参数,g ...
- Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目
Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目 Spring Tool Suite 是一个带有全套的Spring相关支持功能的Eclipse插件包. ...
- Go语言笔记[实现一个Web框架实战]——EzWeb框架(一)
Go语言笔记[实现一个Web框架实战]--EzWeb框架(一) 一.Golang中的net/http标准库如何处理一个请求 func main() { http.HandleFunc("/& ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(二)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(二)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 上一篇文章我们实现了框架的雏形,基本地 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(四)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(四)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 这一篇文章主要实现路由组功能.实现路由 ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(五)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(五)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo5 中间件实现 ...
随机推荐
- qt简单界面更新代码(菜鸟级)(部分代码)
qt简单界面更新代码(菜鸟级)(部分代码)self.timers_1=QtCore.QTimer(self)self.timers_1.timeout.connect(self.min_1)self. ...
- 利用PHPExcel转Excel柱形图
这在附还有一个转柱形图的效果及代码. 原PHP报表效果: 转成Excel后的效果: 附上代码: <? php /** * PHPExcel * * Copyright (C) 2006 - 20 ...
- iOS多线程及其感悟
感觉每天都是匆匆忙忙的,每天似乎都是时间不够用一样,可是等真的想要动手敲代码的时候才发现,原来还有好多好多的知识点不是太熟练,所以,人不可以一直感觉自我良好, 有时间就是那种自我感觉良好的心态毁了自己 ...
- oracle数据库recover和restore的区别
restore just copy the physical file, recover will consistent the database.restore 是还原,文件级的恢复.就是物理文件还 ...
- node 安装express
环境:win7 64位旗舰版 1 安装nodejs 2 安装npm 3 安装express 重点介绍安装express,前提是你已经安装nodejs和npm了. 1 安装express npm ins ...
- 一个很经典的this面试题
!function(){ this.length = 10; var fn = function(){ console.log(this.length); //输出多少? }, arr = [fn, ...
- JavaScript-------寄生组合式继承
组合继承在前面有说过,也是JavaScript中最常用的一个继承模式:不过,它也有自己的不足.组合继承最大的问题就是无论什么情况,都会调用两次构造函数: 那我们来回顾下组合式继承基本模式: funct ...
- alarm函数可以定时
貌似是可以的,不过感觉好像这样用不是很好,最好还是用回timer_settimer一些列函数吧,不过既然开了头,就看下alarm怎么用吧. 1. 所需头文件 #include<unistd.h ...
- 类似QQ侧滑菜单功能实现
之前的那文章简单实现了菜单侧拉功能,但是做不到像QQ那样导航条和tabBar一起移动...之后在网上找资料,有了思路,就自个写了个demo试试水. 先创建QHLMainController控制器,并把 ...
- (转)Java程序利用main函数中args参数实现参数的传递
Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...