css框架

今天跟大家说一下HTML CSS整理笔记吧 一起来学习复习下吧，一起加油吧！ 小常说一下： 只为成功想办法,不为失败找理由 从这里往下是分类整理，一下子可能总结不完成，我会连续总结完的，那么接下来跟小常一起学习吧！ 1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号： 给定宽度(width:100px)、 超出隐藏（overflow:hidden）、 强制在同一行显示（white-space: nowrap）、 省略号（text-overflow:ellipsis） ——常见字体单位—— 1.em 移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 3.vh vh就是当前屏幕可见高度的1%，即 height:100vh == height:100%; 它的好处是当元素没有内容时候，设置height:100%该元素不会被撑开， 但设置height:100vh，该元素会被撑开屏幕高度一致

1.简述一下你对HTML语义化的理解？并写出一段语义化的HTML？ 语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。 用正确的标签做正确的事情 html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 HTML5增加了许多语义化标签如:header footer nav article …… 语义化HTML示例： <!-- 这是开放的 --> <header> <h1>header</h1> </header> <section class="main"> main </section> <aside>aside</aside> <footer> footer </footer> 2. HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念： 它是一个新版本的HTML语言，具有新的元素，属性和行为， 它有更大的技术集

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的 前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。 目录 1.面试注意 2.HTML 2.1 Doctype作用？标准模式与兼容模式各有什区别？ 2.2 HTML5 为什么只需要写 !DOCTYPE HTML？ 2.3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 2.4 页面导入样式时，使用link和@import有什么区别？ 2.5 介绍一下你对浏览器内核的理解？ 2.6 常见的浏览器内核有哪些？ 2.7 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 2.8 简述一下你对HTML语义化的理解？ 2.9 HTML5的离线储存怎么使用，工作原理能不能解释一下？ 2.10 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ 2

HTML、CSS部分 要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发 技术等 Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ （1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素： 鲜为人知的是： CSS的盒子模型？ （1）两种， IE 盒子模型、标准 W3C 盒子模型；IE

原文地址： A Unified Styling Language 原文作者：本文已获原作者 Mark Dalgleish 授权 译文出自： 掘金翻译计划 译者： ZhangFe 校对者： JackGit , yifili09 , sunshine940326 , sunui 统一样式语言 在过去几年中，我们见证了 CSS-in-JS 的兴起，尤其是在 React 社区。但它也饱含争议，很多人，尤其是那些已经精通 CSS 的人，对此持怀疑态度。 "为什么有人要在 JS 中写 CSS？ 这简直是一个可怕的想法！ 但愿他们学过 CSS !" 如果这是你听到 CSS-in-JS 时的反应，那么请阅读下去。我们来看看为什么在 JavaScript 中编写样式并不是一个可怕的想法，以及为什么我认为你应该长期关注这个快速发展的领域。 相互误解的社区 React 社区经常被 CSS 社区误解，反之亦然。对我来说这很有趣，因为我同时混迹于这两个社区。 我从九十年代后期开始学习 HTML，并且从基于表格布局的黑暗时代就开始专职于 CSS。受 CSS 禅意花园 启发，我是最早一批将现有代码向 语义化标签 和层叠样式表迁移的开发者。不久后我开始痴迷于 HTML 和 JavaScript 的分离工作，在服务器渲染出来的页面中使用 非侵入式 JavaScript 同客户端交互。围绕这些实践

前端普适性规范 黄金定律 不论有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 永远一致同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果您发现本规范中有任何错误，敬请在问题中指正。 前端普适性规范 项目命名 项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。例如：my-project-name 文件命名 文件命名参照项目命名规则。示例：error-report.html 有复数结构时，要采用复数命名法，例如：脚本，样式，图像，数据模型 文件名中只规范小写英文字母az，排序数字09或间隔符-组成，禁止包含特殊符号，某些空格，$等 为了醒目，某些说明文件的文件名，可以使用大写字母，例如：README，LICENSE 为更好的表达语义，文件名使用英文名词命名，或英文简写。 永久命名带有广告等英文的单词，例如ad，adv，adver，advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。 文件常用命名： index.shtml引导页＆首页 main.shtml主页 download.shtml下载页面 act.html活动列表页面 video.html视频 cdkey.html CDKEY页面 base.css基本样式 layout.css框架布局 module.css模块样式 global.css局部样式 font

开篇 很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏惧，让它真正成为你的得力助手！ 本文从下面几个课题来实现 课题 1： 初探 webpack？探究 webpack 打包原理 课题 2： 搭建开发环境跟生产环境 课题 3： 基础配置之loader 课时 4： webpack性能优化 课时 5： 手写loader实现可选链 课时 6： webpack编译优化 课时 7： 多页面配置 课时 8： 手写一个webpack插件 课时 9： 构建 ssr 项目地址 github.com/luoxue-vict… 我把每一课都切成了不同的分支，大家可以根据课时一步步学习 脚手架 npm i -g webpack-box 复制代码 使用 webpack-box dev # 开发环境 webpack-box build # 生产环境 webpack-box dll # 编译差分包 webpack-box dev index # 指定页面编译（多页面） webpack-box build index # 指定页面编译（多页面） webpack-box

前言 本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 一、什么是webpack，为什么使用它？ 1.1 什么是webpack？ 简单来说，它其实就是一个 模块打包器 。 1.2 为什么使用它？ 如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。 Webpack就是为处理这些问题而生的，它就是把你的项目当成一个整体，通过一个入口主文件（如：index.js）,从这个文件开始找到你的项目所有的依赖文件并处理它们，最后打包成一个（或多个）浏览器可识别的JavaScript文件。 二、一个简单的打包例子 2.1 准备工作 首先新建一个空文件夹，用于创建项目，在终端中进入文件夹，如下我在桌面建了一个名为webpack-project的文件夹，使用终端进入文件夹后（如果对命令行不太熟悉，可参考我的博客： 前端常用命令行 ），使用 npm init 命令创建一个package.json文件。 npm init 输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息

使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量 入门实例 一、demo目录结构 注解： master.html为模板内容，被index.html，account.html引用 二、各文件代码 2.1、master.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Master</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .page-header{ 12 height: 48px; 13 background-color: aqua; 14 } 15 .page-content{ 16 height: 300px; 17 background-color: bisque; 18 } 19 .page-footer{ 20 height: 30px; 21 background-color: aqua; 22 } 23 </style> 24 25 </head> 26 <body> 27 <div class="page-header"></div> 28 <div class="page-content"> 29 <!-- 自定义的内容，命名并占位--> 30 {% block

面试题更新中~ 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型： Undefined、Null、Boolean、Number、String 值类型：数值、布尔值、 null、undefined。 引用类型：对象、数组、函数。 堆栈数据结构：是一种支持后进先出 (LIFO)的集合,即后被插入的数据,先被取出! js数组中提供了以下几个方法可以让我们很方便实现堆栈： shift:从数组中把第一个元素删除，并返回这个元素的值。 unshift: 在数组的开头添加一个或更多元素，并返回新的长度 push:在数组的中末尾添加元素，并返回新的长度 pop:从数组中把最后一个元素删除，并返回这个元素的值。 2.判断数据类型? typeof返回的类型都是字符串形式，可以判断function的类型；在判断除Object类型的对象时比较方便。 判断已知对象类型的方法： instanceof，后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。 3.异步编程？ 方法 1：回调函数，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。 方法 2：时间监听，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以“去耦合”（Decoupling）