css框架

HTML/CSS 学习笔记(整理)

╄→гoц情女王★ 提交于 2019-11-28 17:31:28
<html> <head> <title>网页标题</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />元数据标签(编码格式,关键字和内容描述) </head> <body> <h1></h1>文章标题 <p></p>段落 <hr/>水平线 <br/>换行 <strong>内容加粗</strong> <em>内容倾斜</em> <img src="图片地址" title="鼠标悬停显示内容" alt="地址错误显示内容" width="宽" height="高"/> </body> </html> 标签分类: <标签名>内容</标签名> <标签名 属性名="属性值" 属性名="属性值"/> 规范要求: 标签名小写,属性名小写,属性值加引号,(属性和属性,标签名之间有空格) 必须有闭合标签,正确嵌套,子标签注意缩进 注意 :所有符号必须是英文环境下的符号 特殊符号: &文字; 空格 :  > : > < : < 版权符号 :© 引号 :" ----------------------------------------------------- 相对路径: 相对于当前html页面所在地址 例如: c:/demo/first.html中<img src="pic.jpg"/>

为什么要用webpack

给你一囗甜甜゛ 提交于 2019-11-28 15:54:35
简单讲讲我与前端的故事吧。 刚接触前端时,所有静态资源CSS、图片和JS都是手动引入HTML页面中,这并没有什么不好,想要什么就引入什么嘛。另外,所见即所得,开发好的项目文件直接就可以上传服务器,很方便,因此这样的开发方式一直持续到前不久,也就是开始正式使用Webpack之前。 渐渐地,我开始感觉到jQuery虽然很好用,但是维护起来不是很方便,就是所谓的开发一时爽,维护起来真要命。杂乱无章的代码混在一个文件中,想要寻找某个功能的代码很是困难,要是分开成多个文件引入,又会造成HTTP请求数过多的问题。 于是,我后来选择了Vue。 使用Vue之后的一个好处就是,我不再需要手动去操作DOM了,直接可以将JS变量放到HTML页面中,数据会自动绑定,这对于开发者来说非常方便,我们只需要把重点放到对数据的处理上就可以了,这样代码也精简了很多。 再后来,我发现有些代码在很多地方都要用到,同一个项目中,JS我可以通过定义方法来复用,CSS可以通过定义类名来复用,可是对于HTML,我却无能为力,只能通过复制粘贴的方式…… 所以,我选择了Vue组件。 但是问题接着又来了,我发现Vue组件虽然解决了HTML的复用问题,但实际上只不过是将HTML和JS组合在了一起,CSS依然游离在外,在同一项目中确实都实现了复用,但是当其他项目要使用它时,还得把游离在外的CSS代码复制粘贴过去

FIS 插件机制

南笙酒味 提交于 2019-11-28 15:14:57
FIS 插件机制 author: @TiffanysBear 当我们使用 FIS 插件的时候,有没有想过自己也开发一个基于 FIS 的插件,参与 FIS 打包编译的整个流程;那么问题就来了: FIS 的编译过程运行原理是怎样的呢? FIS 编译打包的过程有哪些? 怎么参与FIS 的打包编译过程? 怎么实现一个基于FIS的插件? FIS 是怎么引入自定义插件的? 基于以下的问题,从原理再进行慢慢分析,了解 FIS 编译的基本流程和原理,以及如何自己自定义一个 FIS 插件。 编译过程运行原理 fis的编译过程可以分为两个阶段: 单文件编译 和 打包。处理流程如下图,图片来自 FIS 官网: [图片上传失败...(image-e08187-1566795911500)] 单文件编译过程 从图上可以看出,单文件编译过程都是通过pipe管道进行的,并且在最初都建立有缓存,以提升编译效率,在单文件的处理过程中,又主要分为了以下的几个步骤: parser(编译器):将其他语言编译为标准js、css,比如将前端模板、coffee-> script编译为js,将less、sass编译为css。 preprocessor(标准预处理器):在fis进行标准化处理之前进行某些修改,比如 支持image-set语法的预处理插件 standard(标准化处理):前面两项处理会将文件处理为标准的js、css

Bootstrap框架

社会主义新天地 提交于 2019-11-28 15:06:35
Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局,并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap? 在Bootstrap出现之前: 命名:重复、复杂、无意义(想个名字费劲) 样式:重复、冗余、不规范、不和谐 页面:错乱、不规范、不和谐 在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。 Bootstrap下载 官方地址:https://getbootstrap.com 中文地址:http://www.bootcss.com/ 我们使用V3版本的Bootstrap,我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 目录结构: bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap

纯css 实现大白

丶灬走出姿态 提交于 2019-11-28 14:43:10
首先是用html 语言来搭建框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bymax</title> <link rel="stylesheet" href="dabai.css"> </head> <body> <div class="baymax"> <!-- 定义头部 --> <div class="head"> <div class="eye"></div> <div class="eye2"></div> <div class="mouth"></div> </div> <!-- 定义驱干 --> <div class="torso"> <div class="heart"> </div> </div> <!-- 心脏 --> <div class="belly"> <div class="cover" =""></div> </div> <!-- 胳膊 --> <div class="left-arm"> <div class="l-bigfinger"></div> <div class="l-smallfinger"></div> </div> <div class="right-arm"> <div class="r-bigfinger" ></div> <div

HTML&&css面试题

本小妞迷上赌 提交于 2019-11-28 14:06:08
1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套。 XHTML元素必须被关闭 标签名必须用小写字母 XHTMl文档必须拥有根元素 2.什么是语义化的HTML? 直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! HTML语义化就是让页面的内容结构化,便于对浏览器,搜索引擎解析; 在没有样式css情况下也以一种文档格式显示,并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。 在阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 2(1)、简述一下你对HTML语义化的理解? 1、用正确的标签做正确的事情。 2、html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析; 3、即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的; 4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重,利用SEO; 5、使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 3.常见的浏览器内核有哪些? Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML] Gecko内核:Netscape6及以上版本,FF,MozillaSuite

前端基础(国税)

拈花ヽ惹草 提交于 2019-11-28 13:59:36
一、前端概要 web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成。 HTML - 结构 CSS - 表现 JavaScript - 行为 IDEA整合Tomcat与操作技巧 二、HTML5 2.1、什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 2.2、HTML是什么样的 简单地来说,HTML的语法就是给文本加上表明文本含义的 标签(Tag),让用户(人或程序)能对文本得到更好的理解。 下面是一个最简单的HTML文档: <html> <head> <title>第一个Html文档</title> </head> <body> 欢迎访问<a href=

Web前端基础知识总结

感情迁移 提交于 2019-11-28 13:14:04
一、HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么 ? IE: trident 内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit, Google与Opera Software共同开发 ) 每个 HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面) Quirks 模式是什么?它和Standards模式有什么区别 从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢? 在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能

前端一到三年最全面试题(一)

我的梦境 提交于 2019-11-28 12:22:43
原文: http://blog.gqylpy.com/gqy/431 置顶:来自一名75后老程序员的武林秘籍——必读 (博主推荐) 来,先呈上武林秘籍链接: http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我会画原理图,会画 PCB,会模拟,会数字!玩过 PLC,玩过单片机,会用汇编,会用 C!玩过 ARM,比如 PLC,STM32,和时下正在起飞的 NXP RT1052!搞过 DSP,比如 TMS320F28335!搞过 FPGA,不管 Xilinx 还是 Altera,也不管是 Verilog 还是 VHDL,或者直接画数字电路图!我懂嵌入式系统,比如 uCOS 和 Linux!我懂开源的硬件,比如 Arduino 和树莓派!我也搞软件,学了一堆上位机的语言C#,JAVA,Python,Kotlin,Swift!会写爬虫工具,又自学写APP,不管Android 还是 IOS! 可是这一切有什么用呢?土鸡瓦狗!不值一提!干技术的永远就是最苦逼的那个人! 我相信看到这里的你,应该是个 IT

重学前端

走远了吗. 提交于 2019-11-28 10:54:11
先来看个大纲 整个系列包含三个部分,即构建Web应用程序或页面要用的最基本的三部分: HTML 、 CSS 和 JavaScript 。 HTML部分 HTML语义:只用 div 和 span 是不是就够了? HTML语义:一篇wiki文章究竟会用到哪些语义元素? 文档元信息:你知道 head 里一共能写哪几种标签吗? 链接:除了 a 标签,还有标签叫链接? 嵌入型元素:怎么 link 一个CSS要用 href ,而引入JS要用 src 呢? HTML标签:标签总结 HTML语言: dtd 到底是什么? ARIA:可访问性不止是给盲人用户的特性 初看了一下提纲中的八个部分。细思了一下,原本自以为相对了解HTML的我,有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。 HTML语义化 早期的前端开发者都会比较在意和注重这方面。随着时代的迁移,其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到 div 这样的标签元素。但事实上,像 div 和 span 这样的标签元素是没有任何语义化的,他们仅仅是只被运用于布局上。而且在任何浏览器中,都无法使用键盘让其获得焦点,另外也可访问性API也无法进行任何通信。事实上,构建一个具有语义化的页面或应用程序,我们除了使用具有语义化的HTML标签之外,还需要在结构做一些考量,比如说, header 、 footer 、