前端 html篇

前端第二篇---前端基础之CSS

前端第二篇---前端基础之CSS 目录一.css介绍二.css语法三.css的几种引入方式四.css选择器五.css属性相关六.盒子模型拓展一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty…

移动前端制作篇之javascript篇

javascript(简称js)语言在移动前端应用很广.可以说必不可少,许多效果都是和js相关的.包括现在移动端的一些框架.jqmobi.jqtouch.sencha touch.jquerymobile等等.这些都是基于js而进行编写的.这篇暂时不讨论这些框架.以后会慢慢介绍其中的一两个框架的具体使用方法.这篇主要讨论一下部分常用的js事件在移动端的使用.举几个例子:1.隐藏地址导航栏:<script type=”text/javascript”>// 该函数由Simon Willison编…

前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明:<!DOCTYPE html><html><head><title>xxx</title><meta http-equiv="Content-type" co…

Vue.js 2.0源码解析之前端渲染篇

一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式版已出,在体积优化(相比1.0减少了50%).性能提升(相比1.0提升60%).API优化等各方面都更上一层楼. 本文是系列文章,主要想通过对于Vue.js 2.0源码的分析,从代码层面解析Vue.js的实现原理,帮助读者能够更深入地理解整个框架的思想.此篇文章主要介绍前端渲染部分. 不足之处还请批…

web前端-基础篇

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

前端初级篇(HTML)

HTML 概述: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它.浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎) HTML文档基本代码如下: <!DOCTYPE html> <html lang="en"> <head> <m…

前端第一篇---前端基础之HTML内容

前端基础之HTML内容阅读目录(Content) 一.HTML初识 1.web服务本质 2.HTML是什么 3.HTML不是什么二.HTML文档结构三.HTML标签格式四.HTML注释五.HTML常用标签 1.<!DOCTYPE> 标签 2.head常用标签 2.1 Meta标签 2.1.1http-equiv属性 2.1.2name属性 3.body内常用的标签 3.1.基本标签 3.2特殊字符 3.3 div标签和span标签 3.4 img标签 3.5 a标签 3.6 列表 3…

大前端JS篇之搞懂【Set】

我认为前端生态很大,犹如一片汪洋大海,很难短时间内窥其全貌,在这里我们不谈其他,只聊聊 Set Set是 es6 新提出的一个对象,也是一种数据结构,为什么es6要提出这样一个新对象呢,无非就是丰富js的对象类型,在遇到具体的业务场景需要一个比较适合的恰当的数据结构来保存和操作数据,接下来就让我们更深刻的认识下Set的一些常用的方法和应用场景首先 Set的一个重要特性就是集合中是不允许添加重复元素的,如何判断重复,如果是基本类型的话根据===操作符,如果是引用类型的话是根据对象的指针是否指向同…

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

每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如它的颜色.背景.边框方面--及这些盒子的位置. 背景会应用于元素内容.内边距.边框三者组成的区域: margin值可以设置为负值,很多情况下会需要使用margin负值:padding没有负数: 浏览器的兼容性:IE5.X 和 6 在怪异模式中使用自己的非标准模型.这些浏览器的 width 属性不是内…

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…

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前端基础篇①

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)-选中图片-储存-…

前端筑基篇(一)->ajax跨域原理以及解决方案

说明跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题前言参考来源什么是跨域 ajax跨域的表现跨域的原理如何解决跨域问题 JSONP方式解决跨域问题 CROS解决跨域问题 CROS请求原理 PHP后台配置 JAVA后台配置 .NET后台配置 FAQ multi value '*,*' 的问题前言强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理参考来源本文参考了以下来源浏览器同源政策及其规避方法(阮一峰) 跨域资源共享 CORS…

前端 html 篇

1 link和@import的区别是? 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS. 区别2:link引用CSS时,在页面载入时同时加载:@import需要页面网页完全载入以后加载. 区别3:link是XHTML标签,无兼容问题:@import是在CSS2.1提出的,低版本的浏览器不支持. 区别4:ink支持使用Javascript控制DOM去改变样式:而@import不支持. 区别5:小型的网站使用lin…

[Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么? 列出display的值,说明他们的作用.position的值, relative和absolute分别是相对于谁进行定位的? CSS中position和display理解 CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制…

[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中

原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 (一)利用绝对定位与transform <div class="parent"> <div class="children"></div> </div> 将父元素定位(relative),子元素如下 .children{ position: absolute; top: 50%; left: 50…

[Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float主要流行与页面布局,然后没有使用后没有清除浮动,就会后患无穷. 知乎上截图: 分析HT…

前端初级篇(CSS)

CSS 简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式引入外部css文件…

web前端笔试篇（一）

[ 题外话 ]:本博主作为一名准毕业生,即将面临毕业就业问题,即将到大四了,不准备考研的我,那么该去干嘛呢?毫无疑问,那就是实习,那么即使是实习,那么在要想进入自己心仪的企业之前,笔试这一关终究是无法避免的!特此,刷刷题也是有必要的哈! [ 第一题 ] var str = 'abc123'; var num = parseInt(str); if (num == NaN) { alert(NaN); }else if (num == 123) { alert(123); }else if (ty…

【前端 html篇】的更多相关文章