前端笔记_前端开发笔记 - CSDN
精华内容
参与话题
  • 大佬的前端学习笔记

    2020-07-30 23:31:49
    大佬发布在github的笔记,下载慢,所以我放到csdn上面了 源地址:https://github.com/overcomputer/JavaScript
  • ( (有条理、完整详细)前端笔记
  • web前端学习笔记(一)

    万次阅读 多人点赞 2018-08-27 10:56:01
    web前端的定义:是面向用户(浏览者)的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。 Web前端的分类:前端设计和前端架构。 HTML结构语言:超文本标记语言。 通过...

    web前端的定义:是面向用户(浏览者)的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。

    Web前端的分类:前端设计和前端架构。

    1. HTML结构语言:超文本标记语言。

    通过各种标记符号(标签)来代表网页中的内容元素、将网页中的内容结构化。

    特点:通过浏览器来解析、文件名为html或htm。

         2.  CSS样式语言(样式表):实现表现与结构分离的样式设计语言。

    控制网页的视觉表现及简单交互。通过浏览器来解析,文件名为css。

         3.  DW编码软件(dreamwaver)

    两大主要功能:网页编程和管理网站。推荐版本:CS6/CC。

    相关资源:1.HTML参考手册+CSS参考手册  2.DW软件安装  3.多款浏览器

    网站的结构

    • 网站是存放在服务器上的一个文件夹(根目录),是网站所有文件的集合。
    • 网站中的各种文件按照文件类型或功用分门别类的整理存放。

    文件的命名规则

    • 网站中的所有文件命名全部用英文字母、数字、下划线、连字符的组合,其中不得包含汉字、空格和特殊字符。
    • 尽量采用语义明确简单地英文单词命名。

    常见命名

    文件/文件夹 常见命名
    静态首页文件 index/default
    图片文件夹 img/images
    样式表文件夹 css/styles
    脚本文件夹 js/scripts
    字体文件夹 fonts
    模板文件夹 templets
    媒体文件夹 medias

    DW:建站/管理网站

    1.文件面板  

    2.新建(关联)站点

    新建web文件

    • html静态网页文件(类型为HTML5)
    • CSS样式表文件

    编码视图

    • 使用代码视图敲代码
    • 使用真实浏览器查看页面效果
    • 通过代码的缩进/凸出排版
    • 通过标签选择区查看层级关系

    html语言的注释方法

    <!--注释内容-->

    HTML文档基础结构

    <!--html语言中的注释-->
    <!doctype html><!--html文档的文档类型声明:这是一个html的文档,版本是5-->
    <html><!--html标签:html文档正式开始-->
    <head><!--html文档的头部区域开始,主要是用来说明html文档的一些相关属性或者设置-->
    	<meta charset="utf-8"><!--meta标签:元信息标签,用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
    	<!--常见的编码:国际化——utf-8,中文编码——GBK-->
    	<title>无标题文档</title><!--title标签:设定此网页的标题-->
    </head><!--html文档的头部区域结束-->
    
    <body><!--body标签:表示html文档的主体区域开始,对应浏览器的对应呈现窗口-->
    </body><!--body标签:表示html文档的主体区域结束-->
    </html><!--html标签:html文档正式结束-->
    

    HTML语法结构

    1种符号:<>  所有的HTML语言diamante都必须被括在其中

    2种标签格式:

    • 双标签:成对出现。<标签名>开始,</标签名>结束。如:<title>无标题文档</title>  通常用于包含内容的元素。

    • 单标签:只存在开始标签,不需要结束。如:<meta charset="utf-8">  表示无内容元素。

    3个组成部分:标签、属性、值:     

    • 语法结构:<标签名 属性=“值” 属性=“值”>...</标签名>   如:<meta charset="utf-8"> 

    • 标签可以拥有属性,属性和值都卸载开始标签的尖括号中。
    • 标签和属性之间用空格分割,多个属性之间也用空格分隔。
    • 如果属性有对应的值,则属性和值之间是等式关系,且值需要写在英文引导中。

    HTML编写规范

    1. 标签名和属性都使用小写
    2. 属性的值用双引号括起来
    3. 标签的使用符合嵌套规则

    为网页添加css样式的三种引用方式:

    1. 行间样式:通过标签的style属性来设定css样式,css代码位于html标签的标记中。css样式仅对当前使用的标签有效。
    2. 内联样式:将css放在页面的head区域中,使用<style>标签进行调用。css样式仅对当前页面有效,不能跨页面使用。
      <style type="text/css">
          h1{font-size:12px; color:#000fff;}
      </style>
    3. 外链样式:单独创建css样式文件(.css),在网页的head区域通过<link>标签关联css文件。<link>标签的rel属性指定为stylesheet,href属性指定css文件的路径。外链样式实现了html结构与css样式完全分离,多个网页可以调用1个样式文件表,以实现代码的最大限度重用及网站文件的最优化配置。

    <link rel="sytlesheet" href="css文件的路径">

    Q:如果三种引用方式同时存在并作用于一个html标签对象的时候,哪种被优先使用呢?

    A:相同级别情况下,离被设置元素越近优先级别越高。(就近原则)

          行间样式(标签内部)>内嵌样式(当前文件中)>外链样式(外部文件)。(因为习惯于先写外部链接,再写内部链接)

    CSS基础语法结构

    组成部分:对象{样式声明}

    基本格式:选择符{ 属性:值;}

    1. 选择符即CSS样式要作用的html对象
    2. 样式声明必须被括在花括号{}当中
    3. 样式声明由样式属性和对应值两部分组成
    4. 样式声明的属性和值之间用冒号:分隔
    5. 样式表明用分号;结束
    • 选择符(对象):以html标签作为附件CSS的对象,有多种对象类型:标签本身(标签名称,如div等)、标签的特定属性(id或class)、标签的某种状态(伪类)。

    <!doctype html>
    <html>
    
    <head>
    	<title>无标题文档</title>
    	<link href="css/style.css" rel="stylesheet">
    	<style>
    	#first-p { background:#FF0000;}<!--用#号后面表示的是id的名字-->
    	.text-2em{text-indent:2em;}<!--用.后面是个类别的名字-->
    	</style>
    </head>
    
    <body>
    	<div><!--新闻标题-->
    		<p id="first-p" class="text-2em">第一个10年 金砖合作怎么样?</p>
    		<p class="text-2em">金砖机制的诞生和发展,是世界经济变迁和国际格局演变的产物。</p>
    	</div>
    </body>
    </html>
    
    • 属性(样式声明):根据不同的视觉表现方式进行分类,如文本的设定、尺寸的设定、色彩的设定。
    • 值(样式声明):根据样式声明的属性的不同类型,有对应的取值及单位,如色彩的值、尺寸的单位、方向的值。

    CSS常用选择符

         1. 标签选择符:标签名称

    直接以html标签的标签名作为选择符对象;如h1{ font-size:20px;};主要用于对网页文档中的基础标签进行统一的标准化设定。

         2. id选择符:#id名

    以html标签的唯一标识符id属性的值作为对象。html语言中:id属性是html标签的通用属性,但id值的命名是唯一的,不允许重复。在css语言中,#代表后面的名称是id值,id选择符主要用于针对具有唯一性的html对象。

    HTML部分 CSS部分
    给标签添加id属性 用#号+id值作为选择符对象
    <h1 id="newstitle">...</h1> #newstitle {...}

          3. class类选择符:.class名

    将一组css样式归纳成为一个类,作为css应用的对象。html语言中:class属性是html标签的通用属性,可以定义多个类,类名之间用空格分隔。css语言中:class选择符主要用于需要调用相同css样式的多个html对象。

    HTML部分 CSS部分
    给标签添加class属性 用.号+class值作为选择符对象
    <h1 class="red-text">...</h1> .red-text {...}

          优先级关系:id选择符>class选择符>标签选择符

          id和class的命名规则:

    1. id属性和class属性的值命名都为自定义

    2. 不允许用数字开头,不允许使用特殊字符

    3. 命名最好具有语义化,可使用-或者_来连接词组(主流使用-)

    CSS组合选择符

           1. 通配选择符:*

    适配文档中的所有html对象;用于定义html文档中所有对象的基础样式(消除浏览器默认设置的基础样式);根据就近原则,要放在css代码的首行;最常见的用法:*{margin:0;padding:0;}  /*消除所有html标签默认存在的内外边距*/

           2. 包含选择符:父级对象a 子级对象b

    根据html对象的嵌套关系,指定某个父级元素的子级元素样式;选择符对象可以是多重包含,即一层层的包含下去,样式仅作用于最后的内部对象。元素对象之间用空格分隔。

    如:div p { color : red ;}  /*div对象中的所有p对象被指定了红色的样式*/

    #box p a { color : blue ; }  /*id为box的对象中的p对象中的a对象被指定蓝色样式*/

           3. 群组选择符:对象a,对象b,对象c......

    将同样的样式用于多个选择符对象,选择符对象之间用逗号隔开。这里的对象并不一定得是标签,可以是class,id等

            4. 指定选择符:标签名.class类名

    将class类选择符和标签选择符结合在一起使用。主要适用于在使用了某个class类的所有html对象中特别指定某一类标签。如:<h1>和某个<p>标签调用了important这个类,但是只想给调用了important的p对象添加样式时使用。

    CSS属性和值

    《CSS参考手册》,其中绿色的属性需要掌握。

    常见的取值:

    • 数值单位——px(像素)/em(倍数)/%(百分比)
    • 方向——top(上)/right(右)/bottom(下)/left(左)/center(中间)
    • 色彩——16进制代码(#RRGGBB或#RGB)/基本色彩单词(如红色:red)
    • 引用路径——格式为:url(文件路径)

    值的一些写法规则:

    • 表示长宽高的数值必须带上单位
    • 表示色彩的16进制代码前面必须有#号
    • 如果一个属性有多个值,值与值之间用空格分隔
    • 如果指定多个方向值,则按照上右下左(顺时针方向)的顺序依次排列

     

    展开全文
  • 前端笔记

    2020-06-24 12:41:36
    var img = document.getElementById(‘img’); var cas = document.createElement(‘canvas’); var ctx = cas.getContext(‘2d’); cas.width = 100, cas.height = 100; ctx.fillStyle = ‘pink’;...

    var img = document.getElementById(‘img’);
    var cas = document.createElement(‘canvas’);
    var ctx = cas.getContext(‘2d’);

    cas.width = 100,
    cas.height = 100;
    ctx.fillStyle = ‘pink’;
    ctx.fillRect(0, 0, 100, 100);

    // 把画布的内容转换为base64编码格式的图片
    var data = cas.toDataURL(‘image/png’, 1); //1表示质量(无损压缩)
    img.src = data;

    // 把画布的内容转换为base64编码格式的图片
    console.log(cvs.toDataURL(‘image/png’));

    /*·

    • base64编码图片的应用:
    • 如果一个网站中有少量的小图片,可以考虑直接使用base64编码。

    */

    var keyword=Me.GetParams(‘keyword’);
    if (keyword) {
    sqlWhere += ’ and (case_NO like ? or licenseno like ?)’ ;
    params.push(’%’ + keyword + ‘%’);
    params.push(’%’ + keyword + ‘%’);
    }

    vue中某个值不存在时,给一个默认值的写法 {{curDate.username | ‘游客’}}

    typeof(imgData) === “string”

    if (typeof JSON !== “object”) {
    JSON = {};
    }

    展开全文
  • 自己web前端的学习笔记,超详细,对于初学者用处很大,对于专业的前端开发来说,不建议下载,适用于后端开发参阅
  • web前端学习笔记(三)

    千次阅读 多人点赞 2018-08-28 15:12:47
    ...所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型,默认显示为块状元素。 通用的布局标签:&lt;div&gt;...语义:无明确的含义,通常就是代表“盒子”;应用:根据布局的需要,可以...

    HTML5:布局类标签

    HTML是具有语义化的语言,针对网页的布局,有一类标签代表各种意义的“布局盒子”。所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型,默认显示为块状元素。

    通用的布局标签:<div>。语义:无明确的含义,通常就是代表“盒子”;应用:根据布局的需要,可以使用到任何地方,可以用id和class来对<div>进行定义或区分。

    HTML5版本新增的常用布局标签:

    标签 语义
    <header> 页面或区域的头部
    <footer> 页面或区域的底部
    <nav> 导航
    <section> 文档中的章节、区段、板块等(类似div,但主要针对文档类区域)
    <aside> 侧边栏
    <article> 文章/文档

    HTML5布局的优势:页面代码更加简单、高效;新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义,增强了对搜索引擎的友好型,提升SEO价值。

    HTML5布局的缺点:老版本的浏览器不支持HTML5这类布局标签,如IE8或更早的版本。从兼容角度出发,目前多数站点扔使用<div>标签构建传统布局。

    CSS:float浮动属性

    作用:将页面元素浮动起来,使其能够向左或者向右排列;应用:实现页面中布局的左右排版,实现图文环绕的版式效果。

    说明
    left 元素本身向左浮动
    right 元素本身向右浮动
    none 元素不浮动(默认值)

    原理:浮动元素将脱离默认的文档流,漂浮在默认文档流之上。浮动的元素会向左或向右移动,直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。

    特点:1. 对齐方式(不管元素如何浮动,始终以父级容器或它前面同层次并列的元素作为参考进行对齐。)

               2. 一旦元素浮动起来,就可以直接适用CSS盒子模型属性。(行间元素脱离默认文档流的行间限制。

               3. 对内容的影响(尽管浮动元素脱离了默认文档流,但仍然会影响到默认文档流中的盒子里面装的“内容”(图文),这些“内容”会给浮动元素留出占位。盒子还是那么大,但是内容给浮动元素让出了位置。内容为王。)

    CSS:clear清除浮动

    作用:规定某个元素的某一侧不允许存在浮动元素。

    应用 :清除其他浮动元素对其产生的影响。

    原理:设置了clear的元素将不再像前一个浮动元素对齐,换行重新开始。

    说明
    both 两侧都不允许存在浮动元素
    left 清除元素左侧的浮动元素
    right 清除元素右侧的浮动元素
    none 无清除效果(默认值)
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	#box-a {width:200px; height:200px; background:red;}
    	#box-b {width:300px; height:300px; background:yellow;}
    	#box-c {width:800px; height:100px; background:blue;}
    	
    	#box-a {float:left;}
    	#box-b {float:right;}
    	
    	#box-c {clear:both;}/*清除box-a和box-b的浮动对box-c的影响*/
    </style>
    </head>
    
    <body>
    <div id="box-a">box a</div>
    <div id="box-b">box b</div>
    <div id="box-c">box c</div>
    </body>
    </html>
    

    效果图:

    Q:什么是“塌陷”?

    A:如果父元素只包含浮动元素,那么在未设置高度的同时,则父元素高度坍塌为零。

    解决“塌陷”的办法:

    step 1. 创建一个用来清除浮动的CSS样式类(.clearfix)

    step 2. 针对包裹的全是浮动元素的父级容器使用(.clearfix)

    如下:相当于在父元素中补一个内容,然后再做清除。

    	.clearfix { 
    		zoom:1; /*zoom属性:IE浏览器的专用属性。这一句是专门针对老版本的IE浏览器所写的,为了兼容。*/
    	} 
    	.clearfix:after {/*:after伪对象选择符——在这个对象被浏览器渲染后添加一定的内容*/
    		content:"."; /*content属性添加的内容写在这里属性的值里面,这个属性是专门配合伪对象,必须写*/
    		display:block; /*将添加进去的内容转换为块状元素*/
    		visibility:hidden; /*visibility:可视化属性,控制元素是否可见。无论是否可见,都保留其物理空间。*/
    		height:0; 
    		clear:both;/*将添加进去的内容作为清除浮动的对象,实现外围容器中有内容存在,因此可以自动判定高度,解决塌陷。*/
    	}

    常见布局总结

    主流布局的类型:

    1.静态布局(static)

    静态布局是针对PC段的传统Web设计。设计一个居中布局,一般具有固定的宽度,当浏览器窗口缩小时,页面内容会被遮挡,呈现横竖向滚动条。

    2.响应式布局(responsive)

    针对越来越多的移动端设备,一个web设计能够兼容多个终端。通过CSS3中的Media Query(媒介查询),采用栅格化方式,分别为不同的屏幕分辨率定义布局。

    3.弹性布局(flexbox)

    响应式布局中的一种,为了实现响应式布局,CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。

    PC站常见布局

    1. 一列布局(静态布局):一列自适应居中

    2. 两列布局:一列固定宽+一列自适应

    3. 三列布局(双飞翼布局):中间列自适应宽+左右列固定宽

    一列布局:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>一列布局:一列自适应居中</title>
    <style>
    	* {
    		margin:0;
    		padding:0;
    	}
    	html,body {
    		height:100%;
    	}
    	.container {
    		width:600px;
    		height:100%;
    		margin:0 auto;
    		background:gray;
    		border:1px red solid;
    	}
    </style>
    </head>
    
    <body>
    	<div class="container"> 页面</div>
    </body>
    </html>
    

    两列布局:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>两列布局:一列固定宽,一列自适应</title>
    
    <style>
    	* {
    		margin:0;
    		padding:0;
    	}
    	html,body {
    		height:100%;
    	}
    	aside, .main {
    		height:100%;
    		border:1px red solid;
    	}
    	aside {
    		background:#0FF;
    		float:left;
    		width:200px;
    	}
    	.main {
    		margin-left:210px;
    		background:#CC3;
    	}
    </style>
    </head>
    
    <body>
    <aside>边栏导航</aside>
    <div class="main">主体box</div>
    </body>
    </html>
    

    双飞翼布局:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    	* {
    		margin:0;
    		padding:0;
    	}
    	html, body {
    		height:100%;
    	}
    	.main,.left,.right {
    		height:100%;
    		float:left;
    	}
    	.main {
    		width:100%;
    		padding-left:200px;
    		padding-right:300px;
    		box-sizing:border-box;
    		background:#CCC;	
    	}	
    	.left {
    		margin-left:-100%;
    		width:200px;
    		background:#0CF;
    	}
    	.right {
    		margin-left:-300px;
    		width:300px;
    		background:#F63;
    	}
    	
    	
    </style>
    </head>
    
    <body>
    <div class="main">中中中中中间</div>
    <div class="left">左边左边左边左边</div>
    <div class="right">右边</div>
    </body>
    </html>
    

    CSS:文本样式

    属性 说明
    text-align 设置文本的水平对齐方式
    text-decoration 设置文本的修饰方式
    text-indent 设置文本的首行缩进
    text-transform 设置文本的转换(针对英文)
    text-shadow 设置文本的阴影效果
    line-height 设置文本行高
    overflow 设置文本(容器内部内容)溢出的控制方式
    letter-spacing 设置字符之间的间距
    word-spacing 设置词语之间的间距
    word-break 设置文本自动换行的方法

    1. text-align:必须用于块状元素,如<p>,<div>。定义内部文本及内联元素如何横向对齐。默认值是start,取决于html文档的direction属性设置(默认都是从左至右,所以等同于left)。

    2. text-decoration:主要用来对文本添加线条修饰。通常为了美观,会消除超级链接默认的下划线修饰:a { text-decoration:none;}

    3. text-indent:作用于块状元素,用来在块状元素的内容第一行添加一定的空格, 以达到首行缩进的效果。和font-size属性一样,对于首行缩进,你也可以使用px,em或者%。

    一般使用相对单位em,以元素本身字体尺寸为参考基数。中文网页中段落的首行缩进通常是2个文字的距离,常用代码:p {text-indent:2em;}。可以使用负值,产生一些特殊效果,如“悬挂缩进”。

    4. text-transform:用于转换文本中的大小写方式(忽略源文档中的大小写),对中文无效。

    5. text-shadow:用来设置文本的阴影效果,是CSS3的新增属性。实现一种阴影效果需要设定一组值而非一个值,并按照顺序来书写值。可以通过添加多组值来设定多重阴影,达到特殊效果,多组值之间用逗号隔开。部分老浏览器版本不支持该属性(IE9及以下),但这并不产生大的影响。

    按顺序书写4个值:水平阴影距离>垂直阴影距离>模糊程度>阴影颜色

    text-shadow:3px 3px 3px red;
    text-shadow:3px 3px 3px red, 10px 10px 10px black;/*多组阴影*/

    6. line-height:用来设置行的高度,是一个简单又复杂的属性。可以将行高看成是以文字内容本身为中线,上下垂直延伸形成空隙而成。即:将行距的值(行高-字号)/2,分别增加到内容区域的上下两边。

    通常使用相对单位来设定行高,因为行高是以文本的字号为参考基准。默认情况下,浏览器将行高呈现为字体尺寸的1到1.2倍左右,通常将行高设置我字号的150%到180%之间。

    典型应用:单行文本在容器中垂直居中。实现办法:让容器行高等于容器高度。

    7. overflow:设置对象处理溢出内容的控制方式,针对的是容器内部的内容,不仅仅是单纯文本。此属性适用于块状元素。内容的溢出可能是横向或纵向的,因此延展开来,可以细分为x轴和y轴。

    属性 说明
    overflow 包括横向和纵向的内容溢出控制
    overflow-x 仅处理横向的内容溢出
    overflow-y 进处理纵向的内容溢出

    常用的值:

    说明
    visible 内容可见,溢出到容器外部。(默认值)
    hidden 溢出的内容被隐藏,无法查看

    scroll

    无论内容是否溢出,容器都被添加滚动条。(溢出才激活)
    auto 当内容溢出时,容器边缘(纵向)出现滚动条。

    8. letter-spacing:设置单个字符之间的间距。指定的间距将被添加到字符之后,通常以字号为参考,使用相对单位来控制间距。可以使用负值。

    9. word-spacing:设置单个词语之间的间距。判断单词或词语的依据是文本间的“空格”,指定的间距将被添加到单词或词语之后,但最后一个词除外。通常以字号为参考,使用相对单位来控制间距。可以使用负值。

    10. word-break:设定容器中文本字内换行的行为。主要针对数字或英文的排版,防止出现连续无意义的长字符打破布局。常用布局:word-break:break-all;

    说明
    break-all 允许文本在到达容器边缘时,可以任意位置断开,不受词语的限制
    keep-all 不允许词语断开,智能在出现词语分割的空格或连字符时才能换行

    web图片的格式

    1. JPG格式

    后缀名为.jpg或者.jpeg。色彩丰富,过渡平滑,适用于照片类型。有压缩比,压缩比越高,图片质量越低,但文件越小;无法保存透明度,不能呈现动画效果。

    2. PNG图片

    后缀名为.png,有8位、24位、32位三种形式。兼具JPG和GIF的色彩模式,压缩比高,生成文件体积小。png-8位可以实现全透明/不透明的效果。png-24(32)位可以实现半透明的效果。不能实现动画。

    3. GIF图片

    后缀名为.gif,只包含256种色彩,适用于简单和单纯的图像。可以实现全透明/不透明的效果,可以包含多帧画面,实现小动画。

    实际应用:

    1. 照片或色彩丰富的图片:jpg

    2. 透明效果:png

    3. 色彩单纯的小图:png

    4. 小动画:gif

    web图片的应用

    1. 内容图片(作为网页的内容数据,HTML进行结构化)。写在HTML网页结构中,以<img>标签的形式关联图片文件。

    2. 背景图片(作为网页的修饰效果,CSS进行表现)。写在css样式表中,如使用background属性来定义背景图。

    区别:

    1. 内容图片是网页内容数据的一部分,在页面中有占位。如果加在出现问题或失败,则会出现占位标记,影响页面的排版或布局。

    2. 背景图片进用来修饰和没画网页,在页面中没有占位,如果加在失败,对页面的排版没有影响。

    判断使用内容图or背景图:

    1. 内容图片一般具有内容意义,属于文档内容,应该使用HTML<img>元素。

    2. 背景图片不具备内容涵义,作为修饰html元素的存在,即便不可用也不会影响网页的可用性。

    HTML:内容图片(img图片

    Dreamweaver 插入图片快捷键(ctrl+alt+I)

    图像标签<img>:单标签;行间元素,单默认表现inline-block效果,可以直接使用盒模型属性;<img>标签不是直接在网页中插入图像,而是指定一个连接图像文件的地址。因此,<img>标签创建的是被引用图像的占位空间。

    	<img src="../img/db.jpeg" width="550" height="310" alt=""/>

    <img>的属性:

    alt属性和title属性的区别:alt属性是必须的,即使alt=""。title属性则可以根据需要来设置。

    width和height属性的应用:

    1. widht和height的值不需要带有单位(默认单位都是px)

    2. 如果图像指定了width和height(通常都是图片本身的尺寸),页面加载时会保留指定的尺寸

    CSS:背景图片(background)

    background基本属性:

    1. background-color:设定html元素的背景色彩,只能定义为纯色。大多数html元素默认的背景色是透明的:{background-color:transparent;}。同时设定背景色和背景图时,背景图会呈现在背景色之上。

    2. background-image:通过图片URL路径,为元素添加背景图片。图片的表现行为(重复渲染、定位、大小等)由其他背景属性定义,background-image只能用来定义使用哪张图片。默认情况下,背景图像从html元素左上角开始显示毛病在水平和垂直方向上重复排列。

    3. background-repeat:设置是否重复背景图像及如何重复背景图像。

    4. background-attachment:设置背景图像的固定方式(针对不同的参照物)。这个属性与background-position容易冲突,因此在实际应用中并不多见。

    5. background-position:设置背景图像的起始(原点)位置,默认是html元素的左上角。其值应该有2个,一次为:1.横向坐标值 2.纵向坐标值。如果只指定了一个值,那么该值为横向坐标值,第二个纵向坐标值默认为50%(center)。值的写法可以用3种形式:像素值px或百分比%或范围值。允许负值的存在。

    如果background-attachment为fixed,那么background-position会无法正常工作。

    6. background复合属性:一个生命中设置所有北京属性。值的声明顺序为:background-color background-image background-repeat background-attachment background-position。以上属性无需全部使用。建议使用复合属性进行背景定义,不仅代码高效,针对老版本浏览器兼容性更好。

    HTML超级链接(hyperlinks)

    超级链接是HTML的最基本元素,web的设计初衷就是想把一组文档彼此练级起来构成信息分享网络。超级链接是网页的主要交互方式:通过点击链接,可以在文档之间来回浏览。超链接可以是一个字、词,也可以是一幅图像或者其他的HTML元素。

    标签<a>:双标签,行间元素。

    href属性: 是其最重要的属性,用来定义链接的目标地址,实现超级链接的功能。如果没有href属性,<a>标签仅仅是超链接的一个占位符。

    <a href="url">链接文本或元素</a>

    链接的常见形式:

    1.锚点(anchor),用来跳转到页面中的特定位置。

    通过设置href属性的值为#+id名,就可以定位到具有特定id属性的HTML元素所在位置。

    <a href="#title" />可以链接到当前页面中的<div id="title"></div>元素。  

    2.相对路径(Relative Path)URL,用来在网站内部跳转。

    相对路径主要用于同一个站点内的不同页面或文件跳转,相对指的是相对于当前页面本身。相对URL的概念基于网站服务器上的文件目录结构,每个网站都有一个文档根目录,相对URL就是基于这个根目录的HTML文件路径。相对路径中的斜杠/代表文件夹的分割,../表示的是上一级的文件夹。

    <p>这里是<a href="phone.jpg">图片链接</a></p>

    3.绝对路径(Absolute Path)URL,通常用来在不同网站页面之间进行跳转。

    绝对URL主要用来在不同网站资源之间进行跳转。实际上就是在上述URL之前添加网站域名(或IP)以及访问协议。一个完整的绝对URL包含3个部分:协议http://  域名domain.com  文件件路径/hello.html

    <a href="https://www.baidu.com/img/bd_logo1.png?where=super">百度logo</a>

    4.空链接。(#)用#号代替未指定的具体URL,通常在页面制作和调试的阶段用到。

    <a href="#">空链接</a>

    5.邮箱链接。当用户点击邮箱链接时,会启动电脑上的邮件客户端程序,向指定的邮箱地址发送邮件。如果用户的电脑上未安装邮件客户端程序,那么邮箱链接将无法工作。

    <a href="mailto:501751420@qq.com">发送邮件</a>

    target属性:规定在何处打开啊链接文档。

    如果需要页面中所有超级链接都在新窗口打开,可以直接在页面的<head>区域加上:

    <base target="_blank">

    CSS伪类

    1. 未被点击的状态(默认状态):link

    2. 已被访问过的状态  :visited

    3. 鼠标悬停的状态(鼠标移动到链接之上):hover

    4. 激活状态(鼠标点击时):active

    使用CSS的伪类选择符可以设定超级链接的各种交互状态效果。

    什么是伪类?一种动态的类选择符,不是预先创建而是动态形成。当html元素具有不同的状态或特征时,伪类可以设定该元素不同状态或特征下的样式效果。

    伪类的写法:在常用选择符后面追加一个冒号“:”,然后加上伪类的名称。

    常用的伪类:

    超级链接的伪类应用:

    1. 直接设定<a>标签,等同于同时设定了<a>的4种伪类状态。

    2. 如果要分开描述<a>的4种状态,需按顺序来编写,否则容易失效。:link>:visited>:hover>:active。

    3. 实际应用中,通常都是直接设定<a>标签对象,再单独设置:hover一种状态即可。

    列表:html列表结构

    什么是列表?列表是一种由具有一定规律顺序,排列而成的数据项的集合。

    列表常见应用:列表呈现的信息蒸汽只管,适用于有规律可循的区域或栏目板块。

    列表的结构:外围的列表区+内部的列表项

    列表的类型:1. 无序列表 <ul>+<li>

                          2. 有序列表 <ol>+<li>

                          3. 定义列表 <dl>+<dt>+<dd>

    列表标签:

    有序列表<ol>的特殊属性:因为有序列表是带有顺序的排列,有设定排列顺序和起始序号的需求。

    列表的特点:

    1. 列表是具有固定嵌套关系的标签组合,如<ul>+<li>

    2. 有序和无序列表的区别在于“语义”不同,项目符号的呈现方式也不同

    3. 有序和无序列表都只有一种列表项,定义列表有两种

    4. 所有的列表标签都是双标签,块状元素,是装载内容元素的“盒子”

    5. 列表可以多重嵌套,通过多重嵌套可以实现复杂的栏目排版

    CSS列表样式

    列表专有属性:list-style(是针对列表的项目符号进行样式设置的专有属性)

    1. list-style-type

    设定列表的项目符号类型。常见的值:disc:实心小圆点(无序列表的默认值);decimal:数字(有序列表的默认值);none:无(去除默认存在的项目符号)。

    2. list-style-image

    设定列表的项目符号的自定义图像。作用:当项目符号类型不能满足设计需要时,可通过该属性自定义引入图片作为项目符号表现。值:url(图片路径)。弊端:无法精确定位图片的位置。

    3. list-style-position

    设定列表的项目符号的位置。项目符号隶属于每一个列表项,所以list-style-position只能定义项目符号的位置是放置于列表项里面还是外面,无法精确控制定位距离。

    4. list-style

    复合属性,通过一个声明来设置所有的列表专有属性。值的声明顺序:类型>定位>图像。list-style-type>list-style-position>list-style-image。声明的时候可以忽略其中某个值的设定。如果同时定义了类型和图像,则图像优先。

    实际应用原则:

    1. 使用盒子模型属性来精确控制列表

    2. 使用列表项的背景属性来模拟项目符号.由于list-style主要设置项目符号且无法精确控制,所以实际应用中并不建议使用list-style去实现样式效果。

    实际应用技巧:

    step1:消除默认的列表区域中的边距。  <ul>和<ol>默认存在padding,<dd>默认存在margin。

    step2:消除默认的列表项目符号。    项目符号设置基于列表区域和列表项,<ul>和<ol>默认存在项目符号,<dl>没有。

    step3:使用背景属性模拟项目符号效果。    项目符号隶属于列表项,而背景属性需要附加给<li>、<dt>、<dd>。

     

     

     

     

     

    展开全文
  • 前端笔记列表

    千次阅读 2018-07-18 18:46:46
    前端常见面试题 前端自适应—-单位rem node.js 获取url中的各个参数 nodejs之url模块 nodejs之querystring模块 如何写出优美的 JavaScript 代码? 获取某个数内的质数 github page搭建自己的...

    下载

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    基础知识

    1. 神奇的position:sticky
    2. 双飞翼布局的原理
    3. 圣杯布局的原理
    4. Browser 对象(一、history)
    5. JS获取当前网址信息
    6. 前端常见面试题
    7. 前端自适应—-单位rem
    8. node.js 获取url中的各个参数
    9. nodejs之url模块
    10. nodejs之querystring模块
    11. 如何写出优美的 JavaScript 代码?
    12. 获取某个数内的质数
    13. github page搭建自己的页面
    14. git常用命令
    15. js实现返回页面顶部
    16. jsonp获取json数据
    17. getTime()方法在苹果系统的bug
    18. 打乱数组顺序的三种方法
    19. 正则表达式验证手机号码是否正确
    20. 星号替换手机号码的中间四位数
    21. 火狐浏览器安装插件步骤

    百度地图

    1. 百度地图—-浏览器定位API
    2. 百度地图—-解析经纬度
    3. 百度地图—-浏览器定位获得详细地址

    ARRAY部分方法实现

    1. Array对象的方法实现(1)—-Array.prototype.push和Array.prototype.concat(实现常规参数的功能)
    2. Array对象的方法实现(2)—-Array.prototype.every和Array.prototype.fill(实现常规参数的功能)
    3. Array对象的方法实现(3)—-Array.prototype.filter和Array.prototype.find(实现常规参数的功能)
    4. Array对象的方法实现(4)—-Array.prototype.findIndex和Array.prototype.forEach(实现常规参数的功能)
    5. Array对象的方法实现(5)—-Array.prototype.includes(实现常规参数的功能)
    6. Array对象的方法实现(6)—-Array.prototype.indexOf(实现常规参数的功能)
    7. Array 数组去重 总结10方法(7)

    ES6学习

    1. ES6学习之路1—-变量的声明
    2. ES6学习之路2—-变量的解构赋值
    3. ES6学习之路3—-rest参数与扩展运算符
    4. ES6学习之路4—-字符串模版
    5. ES6学习之路5—-数组方法
    6. ES6学习之路6—-箭头函数
    7. ES6学习之路7—-set数据结构
    8. ES6学习之路8—-WeakSet数据结构
    9. ES6学习之路9—-Map数据结构
    10. ES6学习之路10—-Symbol

    DEMO

    1. 双飞翼布局—-利用float和margin实现双飞翼布局
    2. Markdown在线编辑器
    3. 使用showdown.js将Markdown文档转换为HTML
    4. UEditor富文本编辑器的简单入门
    5. MUI导航栏透明渐变—-原生JS实现
    6. 在【商品列表页面】分享【商品详情】—-网易手推公众号效果
    7. 用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)
    8. 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
    9. 用QRCode.js制作二维码解析器(qrcode.decode方法解析二维码)
    10. 利用canvas的getImageData()方法制作《在线取色器》
    11. 图片上传预览插件制作—-URL.createObjectURL()
    12. 侧边栏导航(移动端商品–评论–详情)随楼层滑动高亮显示
    13. 滚动条滑动到指定位置
    14. js实现:仿京东搜索栏随滑动透明度渐变
    15. jquery分页插件pagination.js的使用
    16. 微信分享等设置 – 缩略图等
    17. 移动端滚动加载—–jQuery 和 原生JS
    18. artTemplate源码
    19. 图片在线转换base64

    报错处理

    1. xxx.forEach is not a function(DOM集合–类数组对象转化为数组)
    2. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as
    3. 关于字体图标在firefox上本地访问无法显示的问题分析
    4. this request has been blocked;the content must be served over https
    5. Uncaught SyntaxError: Unexpected token :
    6. 微信config:invalid signature
    7. 如何在HTTPS 网页中引入HTTP资源: Mixed Content?

    编辑器

    HBuilder

    1. HBuilder扩展代码块功能
    2. hbuilder外置服务器设置(局域网移动端调试)
    3. hbuilder打包APP
    4. hbuilder检测不到夜神模拟器 – 解决办法
    5. hbuilder与夜神模拟器的链接

    webstorm(10.0.2)

    1. webstorm(10.0.2)的端口号修改
    2. webstorm(10.0.2)设置测试服务器 – 局域网内其他设备访问
    3. webstorm相关设置

    VSCode

    1. VSCode编辑器前端常用插件

    生活

    1. 道破人性
    2. 三十秒的小习惯,一辈子的大影响
    3. 一个比较有趣的题:推算今天星期几
    展开全文
  • Web前端学习笔记

    2019-12-27 22:05:36
    什么是HTML HTML(HyperText Mark-up Language)即超文本标记语言,是构成网页文档的主要语言。 HTML是解释执行语言,由浏览器解释执行。 HTML语言主要由HTML标签组成。 HTML标签可以描述文字、图像、动画、声音... ......
  • 前端笔记(一)

    2017-12-22 13:30:32
    公司学习记录前端1.element UI 首先需要搭建前端框架vue.js,百度搜索一堆,这里借鉴该博客搭建https://www.cnblogs.com/ganmy/p/6029774.html http://element-cn.eleme.io/#/zh-CN/component/installation 该网址为...
  • HTML+CSS+JS知识点汇总

    千次阅读 多人点赞 2017-10-24 21:47:10
    CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 ...练习表- -JS开发小游戏项目:老虎机游戏 js练习表回顾 HTML(2)- -传智前端课程系列笔记 HTML(3)- -传智前端课程系列笔记 ...CSS(1)- -传智前端课程系列笔记
  • 余光的前端进阶笔记(持续更新)

    万次阅读 多人点赞 2020-07-17 14:57:53
    前端summary 传送门
  • 1、说明 最近想学习一下Web前端知识,本着理论 + 实践的学习... Web前端入门和进阶学习笔记 React 学习资料总结 HTML Reference type CSS Reference type 3、开源项目 js项目练习 前端小白入门学习javascript...
  • HTML mailto 语法和示例

    千次阅读 2013-12-11 16:08:06
    大家知道,mailto 是网页设计制作中的一个非常实用的 html 标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下由 mailto 组成的超级连接后,就能自动...
  • U3D前后端开发知识体系

    千次阅读 2016-06-21 11:31:17
    U3D前后端开发知识体系一、知识体系:二、学习总结: 游戏研发团队及岗位职责 ... U3D基础知识学习笔记 NGUI基础学习笔记 常用API学习笔记 常用设计模式 C#基础学习笔记 C#高级语法 计算机图形学-GPU渲
  • 前端时间格式转换

    千次阅读 2018-05-30 17:17:13
    自己经常忘记 ,以此做个笔记,转载的,直接贴地址https://www.cnblogs.com/mr-wuxiansheng/p/6296646.html
  • 学习笔记---个人觉得很好用的网站

    千次阅读 2018-07-15 10:28:01
    从2015年上大学开始就一直学习前端啦,从一开始的小白,到现在的入门,真的说前端要学习的东西真的还有很多。在这里分享一下我常用的小网站或者我在学习的时候看到别人推荐的网站。1.http://www.bootcss.com/基本...
  • 前端学习-前言

    千次阅读 2019-01-28 22:10:10
    已经有很久没有认真得写博客了,都是在自己得印象笔记里记录知识点。主要是因为前端时间CSDN样式频繁变动,文字编辑器实在不敢恭维。就不怎么使用了。当然今天使用了下,还是趋于稳定得,给点时间,还是可以做好得。...
  • 适用人群:零基础Web前端开发 课程内容 获取方式 关注下方微信后,回复【002】即可获取。 如果觉得有用,欢迎关注我的微信,一起学习,共同进步,不定期推出赠书活动~ 最近搜集到传智播客 201...
  • 前端很火,想学习前端的人也多。作为过来人,知道自学的辛苦。所以制作这份学习路线图的初心,就是让想自学前端的小伙伴们有... 这份资源包含:学习路线图、配套视频+源码+笔记前端工具篇、前端经验篇、前端面试篇等
  • 2018黑马39期WEB前端视频教程

    千次阅读 热门讨论 2019-01-17 14:37:19
    本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频! 本教程是实战派课程!为传智最新web前端39期,挑战全网最全视频,没有之一.课程由教学视频+...
1 2 3 4 5 ... 20
收藏数 75,561
精华内容 30,224
关键字:

前端笔记