写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解答啦~ display: none;和visibility:hidden;的区别 简单来说: display: none;不会再占据空间,就跟不存在一样. visibility:hidden;则只是将透明度变成0,仍然占据其空间. inline.inline-block.block的区别 首先要明确…

CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体.颜色.大小和间距,将内容分割成多列或者加入动画以及别的装饰型效果. CSS是什么 CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式.布局等. 文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但你依然可以遇见一些其他的标记语言,比如 SVG 或者 XML. CSS如何影响HTML Web浏览器将CSS规则应用于文档以影响它们的显示方式.…

知识内容: 1.计算机网络综述 2.web基础 3.HTML与CSS介绍 4.JavaScript与jQuery介绍 一.计算机网络综述 1.什么是计算机网络 计算机网络是指将地理位置不同.具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在操作系统.软件以及一系列协议的管理和协调下进行资源共享和信息传递的计算机系统,可简称为网络.网络主要由主机.线路.交换.路由.调制解调器等设备组成.作为开发者无需去了解网络的架构及物理设备,可以把网络看出由主机和传输设备组成. 主机主要分为服务器和…

结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到,现在很迷茫,最经在知乎看了很多人都在谈论怎样学习前端的,发现要学习的东西实在是太多了,以自己先在的水平只能是在三线城市中找份工作. 可生活在一线城市的我,找份新工作是辣么的没有竞争力,看了这么多人的前端学习之路,借鉴他们的方法坚持一段时间. 下面是选取的部分文章,完整的请到原站浏览(http://w…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月,从Android转战Web前端的求职之路>.这篇文章讲述了我在转型过程中的亲身经历和感受,不少童鞋私信问我怎么入门前端,于是有了这篇文章. Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下. 一.HTML.CSS基础.JavaScript语法基础.学完基础后,可以仿照电商网站(例…

前端入门系列之HTML 超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言.网页内容可以是:一组段落.一个重点信息列表.也可以含有图片和数据表. HTML是什么 HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言.HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作. 一对标签 (tags)可以为一段文字或者一张图片添加超链接,将文…

为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时代web前端设计的发展,现在只掌握这些已经远远不够了.无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发.Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端设计师才能做好,这方面的专业人才近两年来倍受青睐. W…

Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页 CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中…

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页 3.我们的第一个网页 请身边有电脑的小伙伴和我一起开始,在桌面鼠标…

目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font size="3"> ul {</font></p> <p><font size="3"> MaRGin: 10px;</font></p> <p><font size="…

本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下. 正文-CSS基础 1.结构和语法 首先需要清楚,CSS 职责是控制 HTEM 文档里的文本…

1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/article/details/51472697 (前端性能优化) 1. JavaScript 压缩和模块打包2. 按需加载资源3. 在使用 DOM 操作库时用上 array-ids4. 缓存5. 启用 HTTP/26. 应用性能分析7. 使用负载均衡方案8. 为了更快的启动时间考虑一下同构9. 使用索引加…

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  /* 去除边距 */ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */li {list-style-type:none;}  /* 去除列表的圆点 */a {text-decoration:none;}  /* 去除下划线 */ 2 浏览器前缀 {    t…

初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! 这套「web前端入门教程」将多年的编程经验灌输其中,典型的实践派.既适合初学者入门,也适合程序员进阶(学习底层). 给你学习前端的新手几个建议: 第一: 切记学习前端开发不可以依赖任何人,我做了开发这么久,十年了,见过很多依赖老师的学生,这样的后果就是自己没有解决问题的能力,也没有自主学习的能力,…

前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无数张图片"唰唰唰"的闪出来了.在这个过程中,浏览器会把这个网站的主资源(就是Html文件)拉取回来,然后开始分析网页中的Js,Img之类的标签,然后再去拉取这些图片和资源.可想而且这会多么的消耗内存.对于浏览器来说,他们的请求方式都是发起一个Http请求,经历三次握手. 首先我们来讲讲什么…

  H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值…

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区 别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选…

前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性 二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性 三.转换(transform)(IE10+,-ms-,-webkit-,-…

前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(media query) 1.3 相对字体大小(rem/em) 二.选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级 三.样式重置(reset) 3.1 常用重置 3.2 重置插件(Normalize.css) 四.浏览器前缀 4.1 前缀由来 4.2 解决方案 五.兼容性…

IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div>与<img>写在一行上: hack2:将<img>转为块状元素,给<img>添加声明:display:block; B)dt,li中图片间隙(IE6) hack:将<img>转为块状元素,给<img>添加声明:display:block; img设…

好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽 用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接 使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 <p><font…

JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性是JS中比较容易出错的知识. 1.网页中插入图片会产生图片向下撑大3像素的问题 解决方式:1)display:block;2)vertial-align:top/middle/bottom;3)给图片添加浮动float. 2.用a标签插入的图片在IE浏览器中会出现边框 解决方式:border:non…

CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000…

前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, CoreUI是一套admin的管理模板,提供了高定制化的解决方案来创建控制模板和平台. 这有几种不同的版本帮助你快速的整合最流行的框架,比如, AngularJS, React.jS,Vue.jS等等 React Trend 来自Unsplash的一个react版本的组件,用来方便的创建线图,可以方便的展示…

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ​   特点:       1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠       2.使数据和…

常见css代码 无下划线链接 字体颜色   +   左边距 背景颜色 字体.字体颜色.大小 文本对齐方式[取代了<center>]…

一.nginx是什么 NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. 直译:NGINX是一个免费的.开源的.高性能的HTTP服务器和反向代理,也是一个IMAP/POP3代理服务器. 我自动忽略掉所有的定语后,理解NGINX就是一个HTTP服务器(web服务器),反向代理服务器,或者说邮件服务器. 以前的时候对tom…

一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a.所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 b.不管这个标签藏的多深,都能够被选择上 c.选择的是所有的,而不是某一个.所以是共性,而不是特性 3.ID选择器:#content(匹配ID属性值等于content的元素) 4.类选择器:.list(匹配class属性包含li…

大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣哦. 本次课程也是替换2017年较老的基础视频,刚刚录制完毕. 本次课程主要讲解: 课程的链接地址是:  https://www.bilibili.com/video/av69856262/ 相关练习素材的下载地址是: https://gitee.com/xiaoqiang001/jichubanx…