web前端基础篇①

web前端基础篇⑨

1.web端.app端目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性用原生代码的话根据不同的屏幕尺寸,用@media screen引入不同的值用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据.web和app图不能相同,为了浏览速度最好使用雪碧图. APP端.CSS原生代码写需要注意:①宽高,使用百分比的方式. ②宽的话,使用rem,不能在一套css里面使用两个…

web前端-基础篇

该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小和该背景图片的显示区域,css样式设置如下: e.g. background-image:url(图片的url路径); width:18px;height:18px; 不设置的话,出现的情况就是只有该内容区域有内容时,才会出现背景图片:ps:因为…

web前端基础篇⑧

1.伪类选择器都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {color:yellow} 已访问的链接a:hover {color:green} 将鼠标放在链接上a:active {color:blue} 按住链接的时候hover必须放在link和visited后,才有效.active必须放在hover之后,才有效.2.伪元素选择器也以冒号开始.:first-l…

html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式分为标准模式混杂模式非标准模式-针对IE6or74.标签成对出现,/表示结束5.选中内容 ctrl+/ 即可注释6.<mate charset:“UTF-8”>支持中文显示 ★ps 切图①图片格式为png1.按住shift拖动鼠标建立参考线.2.使用切片工具切出图片3.导出图片:文件-储存为web格式-预设(png-24)-选中图片-储存-…

web前端基础篇⑩

1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版三格式布局(最常用)16列式:每格40px 间距20px 3 3 6 4版四格式布局(较常用)容器:container_x 后面x代表数字.container_12 将页面分成12等份2.使用bootstrap下载后生成css,js,foots三个文件夹,三个文件夹不能修改不能删,缺一不可.min是压缩版,引入时建议引入压缩版.所有的javascrip…

web前端基础篇⑦

1.img src/url后一般接地址信息标题为<h1>-<h6> 字体依次变小预文本格式<pre></pre> 2.a标签实现跳转例:<a href="day1.html">xxx</a>3.锚点(回到顶部.跳到相对应的地方)①创建锚点②指向锚点例:<a href=""name="xxx">打桩</a><a href="#xxx…

web前端基础篇⑥

LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两个文件③启动koala④配置路径⑤输入一部分less-刷新koala⑥生成用less命名的css文件⑦在html里面引入的是css文件(不用建css文件)less里引入文件@important 可引入{less 可变的/css不可变的.变量@变量名:具体的值混合(mixins)只有3类class类/…

web前端基础篇⑤

1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype>解析模式4.CSS中的hack技术(不同的浏览器显示不同的页面内容)5.条件注释6.倒入包opacity-filter(0-100)png背景-导包圆角-导包,图片BFC=200m:1(无限值)IE下触发BFC环境 haslagout技术双倍margin兼容性问题IE下 3PX差距font-size 10…

web前端基础篇④

1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时,也要计算浮动元素它是被触发(被生成)的会触发生成BFC环境的元素:根元素float属性不为noneposition为absolute或fixeddisplay为inline-block,table-cell,table-caption,flex,inline flexoverflow不为visibl…

web前端基础篇③

1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src＝“地址” controls＝“controls” loop autoplay>2.块级元素行内元素独占一行不独占一行设宽高不能设宽高内容不影响边框内容影响元素大小可嵌套块级.行内嵌套会乱 m…

web前端基础篇②

1.要默认选择在radio或checkbox后加checked 2.想实现单选在radio后加上name 两个命名一样即可出现排斥 3.自动聚焦 autofocus readonly只读 4.placeholder 框里提示的文字 5.textarea 文本域或留言版也可使用placeholder 6.select下拉列表 option列表选项 size下拉可见的数目 multiple设置多选 8.form表单 method提交方式只有get和post两种区别为get:会在地址栏显示输入的…

web前端基础知识及快速入门指南

web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口徘徊.不过还好,相比之前一直苦逼不知道如何下手,没人指点的时候,好多了.现在相对来说,知道怎么走了.现在总结一下前端的基础知识,顺便推荐几本书.因为每个知识点都可以拉开架势写几本书都不一定写的全,所以我就不去详细展开了,就大概讲一下前端的一点概念,顺便介绍下前端的基础知识等.如果能给你带来点知识涵养…

进击的Python【第十六章】：Web前端基础之jQuery

进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示: 除此之外,Jquery还提供了大量的插件. 这里有一个jquery操作速…

进击的Python【第十五章】：Web前端基础之DOM

进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 一.查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getE…

进击的Python【第十四章】：Web前端基础之Javascript

进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. 1.javascript的表现形式  <script type"text/javascript" src="JS文件"></scri…

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")…

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签属性: (1) dir:文本的显示方向 (2) Lang:语言信息 (3) Prof…

ASP.NET Web API 基础篇1

ASP.NET Web API 直到我膝盖中了一箭[1]基础篇无题蓦然回首,那些年,我竟然一直很二. 小时候,读武侠小说的时候,看到那些猪脚,常常会产生一种代入感,幻想自己也会遭遇某种奇遇,遇到悬崖跳下去是不是有本“武林秘笈”在等着?长大以后也是一样,多少人梦着醒着都在想,没准哪一天自己也会成为“百万富翁”.打住!你不是“万中无一”,也没那么多没准!当然,有时候还需要一点运气. 生活了二十几年,想做的事不少,狠下心做成的当真没几件,想想并不是资质愚钝,而是缺乏想到做到的劲头.为什么会这样?也…

web前端基础学习路线

1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使用 4.Web前端响应式界面布局:栅格化布局和弹性盒子布局 5.界面优化设计:SEO优化 6.AJAX(异步数据交互):基础学习掌握发送异步请求方法,实现客户端脚本语言更新网页局部内容 7.JSON:javascript对象表示法,创建对象的数组化表示方法 7.动态网页技术:JSP.ASP.PHP基…

web前端基础知识学习网站推介

内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.…

Web前端基础怎么学？ JavaScript、html、css知识架构图

以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临,都在加快前端技术的更新,也在逼促开发者要不停的学习,不能的接受新的技术标准. “学什么”“怎么学”其实是我们要着重解决的问题.所以,今天给你梳理一下前端知识框架,帮你把知识点重新做个遍历,查缺补漏的学习更轻松. 我们先来看什么叫做知识架构? 我们可以把它理解为知识的“目录”或者索引,它能够帮助我们把…