html学习笔记
前端笨鸟
这个作者很懒,什么都没留下…
展开
-
js-运算符
运算符运算符也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:● 算术运算符● 递增和递减运算符● 比较运算符● 逻辑运算符● 赋值运算符运算符描述+加-减*乘/除%取余数注意:浮点数 算数运算里面会有问题,且不能直接拿浮点数进行比较 是否相等表达式和返回值表达式:是...原创 2019-11-13 23:11:02 · 140 阅读 · 0 评论 -
js-数据类型简介
为什么需要数据类型在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型变量的数据类型变量用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。js的...原创 2019-11-13 17:21:48 · 112 阅读 · 0 评论 -
JS-变量概述
什么是变量白话:变量是一个装东西的盒子通俗:变量是用于存放数据的容器。我们通过变量名获取数据,或修改数据变量在内存中的存储本质:变量是程序在内存中申请的一块用来存放数据的空间变量的使用变量在使用时分为俩步:1、声明变量 2、赋值1、声明变量//声明变量var age; //声明一个名称为age的变量● var 是一个js关键字,用来声明变量(variable变量的意思)。...原创 2019-11-12 18:49:48 · 280 阅读 · 0 评论 -
Bootstrap前端开发框架
Bootstrap 使用Bootstrap使用四部曲:1、创建文件夹结构2、创建html骨架结构3、引入相关样式文件4、书写内容创建html骨架结构<!--要求当前网页使用IE浏览器最高版本的内核来渲染--> <meta http-equiv="X-UA-Compatible" content="ie=edge">引入相关样式文件<link...原创 2019-11-11 18:36:47 · 155 阅读 · 0 评论 -
@import和link的区别
@import 导入的意思,可以吧一个样式文件导入到另一个样式文件里面link 是把一个样式文件引入到html页面里面区别:@import 是文件之间的导入link只能把文件引入到html...原创 2019-11-08 20:46:26 · 118 阅读 · 0 评论 -
移动端常见布局rem+less+媒体查询—设置公共common.less
1、新建common.less,设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小2、常用尺寸有:320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px3、确定将页面划分为多少份。例:15份4、由于PC端也可以打开移动端首页,默认html大小为750/15=50px,注意由于代码的层叠性需要将其写在最上面...原创 2019-11-08 17:46:05 · 583 阅读 · 1 评论 -
移动端常见布局-rem适配方案
rem实际开发适配方案①按照设计搞与设备宽度的比例,动态计算并设置html跟标签的font-size大小;(媒体查询)②CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值。rem适配方案技术使用(市场主流)方案一● less● 媒体查询● rem方案二(推荐,更简单)● flexible.js● remrem实际开发适配方案一设计稿常见尺寸宽度...原创 2019-11-08 17:22:57 · 323 阅读 · 0 评论 -
移动端常见布局-Less
维护css的弊端css是一门非程序语言,没有变量、函数、SCOPE(作用域)等概念● css需要书写大量看似没有逻辑的代码,css冗余度比较高● 不方便维护及拓展,不利于复用● css没有很好的计算能力Less介绍Less是一门css扩展语言,也称为CSS预处理器作为CSS的一种形式的扩展,并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序语言的特性在CSS的语法基...原创 2019-11-07 22:37:42 · 502 阅读 · 0 评论 -
移动端常见布局(二)——rem基础
rem单位rem(root em)是一个相对单位,类似em,em相对于父元素的字体大小来说的,而rem相对于html元素 字体大小来说的不同的是rem的基准是相对于html元素的字体大小例:根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制媒...原创 2019-11-07 11:45:16 · 139 阅读 · 0 评论 -
常用初始化样式
body{ max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei; color: #000; background: #fff;}...原创 2019-11-06 21:18:56 · 735 阅读 · 0 评论 -
移动端常见布局(一)
1、单独制作移动端页面(主流)● 流式布局(百分比布局)例:京东● flex弹性布局(强烈推荐)例:携程● less+rem+媒体查询布局● 混合布局流式布局● 流式布局,就是百分比布局,也称非固定像素布局● 通过合资的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向俩侧填充● 流式布局方式是移动web开发使用的比较常见的布局方式● max-width最大宽...原创 2019-11-06 21:08:22 · 564 阅读 · 0 评论 -
移动端技术解决方案
css初始化normalize.css移动端css初始化推荐使用normalize.css● Normalize.css:保护了有价值的默认值● Normalize.css:修复了浏览器的bug● Normalize.css:是模块化的● Normalize.css:拥有详细的文档css盒模型 box-sizing● 传统模式宽度计算:盒子宽度=CSS中设置的width+bo...原创 2019-11-05 23:03:43 · 234 阅读 · 1 评论 -
Flex伸缩布局-视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口布局视口 layout viewport● 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。● IOS,Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。视觉...原创 2019-11-05 21:30:03 · 277 阅读 · 0 评论 -
css3-动画
动画(animation)可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以试想更多变化,更多控制,连续自动播放等效果相较于js,js实现的是帧动画,而css3实现的是补间动画动画的基本使用制作动画分为俩步:1、定义动画2、调用动画用keyframes定义动画(类似定义类选择器)@keyframes动画名称{ 0%{ width:100...原创 2019-11-03 23:18:16 · 84 阅读 · 0 评论 -
css3-2D转换
转换(transform)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果转换(transform)可简单理解为变形● 移动:translate● 旋转:rotate● 缩放:scale二维坐标系2D转换之移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。语法:transform:transl(x,y);tra...原创 2019-11-03 22:47:30 · 252 阅读 · 0 评论 -
3D转换
三维坐标系三维坐标系是指立体空间,立体空间是由3个轴共同组成的● X轴:水平向右 注意:X右边是正值,左边是负值● Y轴: 垂直向下 注意:Y下面是正值,上面是负值● Z轴 垂直屏幕 注意:Z往外面是正值,往里面是负值3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向● transform:translateX(100p...原创 2019-11-02 22:13:13 · 352 阅读 · 0 评论 -
css3-选择器
属性选择器选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性值等于val的E元素E[att^=“val”]匹配具有att属性、且值以val开头的E元素E[att$=“val”]匹配具有att属性、且值以val结尾的E元素E[att*=“val”]匹配具有att属性、且值中含有val的E元素类选择器...原创 2019-11-01 16:58:05 · 103 阅读 · 0 评论 -
H5新增标签
新增语义化标签header:头部标签nav:导航标签section:块级标签aside:侧边栏标签footer:尾部标签注意:● 这种语义化标准主要针对搜索引擎● 这些标签页面中可以使用多次的● 在IE9中,需要把这些元素转换为块级元素● 主要适用于移动端新增多媒体标签audio:音频video:视频新增input表单、表单属性属性值说明type=...原创 2019-10-31 22:55:12 · 105 阅读 · 0 评论 -
css-清除浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-31 16:39:15 · 82 阅读 · 0 评论 -
css-左三角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-31 11:58:45 · 828 阅读 · 0 评论 -
img去除图片底侧空白缝隙
原因:图片或者表单等行内块元素,底线和父级盒子的基线对齐。导致图片底测会有一个空白缝隙解决的方法:给img vertical-center:middle | top | bottom等,让图片不要和基线对齐将img由行内块改成块img{display:block}...原创 2019-10-29 23:02:24 · 239 阅读 · 0 评论 -
css属性书写顺序
1、布局定位属性:display/position/float/clear/visibility/overflow等建议display第一个写,原因关系到是什么模式(块、行内、行内块)2、自身属性:width/height/margin/padding/border/background等3、文本属性:color/font/text-decoration/text-align/vertica...原创 2019-10-29 18:34:46 · 209 阅读 · 0 评论 -
css的三种机制
css提供了3中机制来设置盒子的摆放位置,分别是:普通流、浮动和定位其中:1、普通流(标准流)块级元素特点:会独占一行,从上向下顺序排列常用元素:div、hr、p、h1-h6、ul、ol、dl、from、table行内元素特点:会按照顺序,从左到右顺序排列,碰到父元素边缘会自动换行常用元素:span、a、i、em等2、浮动让盒子从普通流中浮起来,主要作用让多个会计盒子一行显示...原创 2019-10-29 18:27:17 · 186 阅读 · 0 评论 -
CSS的三大特性
css层叠性(就近原则)css继承性子元素可以继承父元素的样式(text-、font-、line-、color)css优先级(权重)继承或者* 0,0,0,0(无权重)每个元素(标签选择器)0,0,0,1每个类-伪类 0,0,1,0每个ID 0,1,0,0每个行内样式style="" 1,0,0,0!important重要的 ∞无穷大...原创 2019-10-29 18:22:23 · 151 阅读 · 0 评论 -
css定位详解
定位也是用来布局的,它有俩部分组成:定位=定位模式+边偏移边偏移简单说,我们定位的盒子,是通过边偏移来移动位置的。在CSS中,通过top、bottom、left和right属性定义元素的边偏移top:顶端偏移量,定义元素相对于其父元素上边线的距离bottom:底部偏移量,定义元素相对于其父元素下边线的距离left:左侧偏移量,定义元素相对于其父元素左边线的距离right:右侧偏移量...原创 2019-10-29 17:29:31 · 143 阅读 · 0 评论 -
HTML基础知识
web标准构成①结构(HTML)②表现(CSS)③行为(JS)DOCTYPE文档类型lang 页面语言en定义语言为英语zh-cn定义语言为中文character set 字符集UTF-8是目前最常用的字符编码方式HTML标签的语义化白话:指标签的含义解释:在合适的地方给一个最合理的标签,让结构更清晰优点:①方便代码的阅读和维护②同事让浏览器或使网络爬虫可以很好地解析...原创 2019-10-29 12:13:01 · 179 阅读 · 0 评论 -
js基础-Tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding...原创 2019-03-21 17:21:32 · 129 阅读 · 0 评论 -
前端之基础乘法口诀表
![document.write(&quot;&amp;lt;table&amp;gt;&quot;)for(var i=1;i&amp;lt;=9;i++){ for(var j=1;j&amp;lt;=i;j++){ document.write(&quot;&amp;lt;td style='border:1px solid #ddd'&原创 2019-02-28 21:23:17 · 474 阅读 · 0 评论