web前端学习_web前端学习路线 - CSDN
精华内容
参与话题
  • 给你一份完整的Web前端学习路线图

    万次阅读 多人点赞 2019-04-12 21:31:57
    随着Web2.0思想的日益普及,...Web前端学习路线图,希望对初学者有帮助。 1.Javascript 语言 全栈开发中,用的编程语言就是 javascript 2.HTML5 标签和 DOM 这是前端最核心技术,为之后学习各种开发框架,打下...

    随着Web2.0思想的日益普及,让企业都慢慢认识到前端的重要性。前端开发人员的地位也日益提高,相应的技术要求要是越来越高,那么现在想成为一名合格的Web前端工程师应该怎样学习呢

    Web前端学习路线图,希望对初学者有帮助。

    1.Javascript 语言

    全栈开发中,用的编程语言就是 javascript

    2.HTML5 标签和 DOM

    这是前端最核心技术,为之后学习各种开发框架,打下坚实基础。

    3.CSS3

    学习通过 css 开发网页和各种可视 UI 组件。

    4.SASS

    利用 sass 语言,开发复杂的页面 css

    5.Node.js

    掌握Node.js 核心 API ,具备后端开发能力。

    6.Express 5.x 框架

    掌握 Express 框架,从而具备快速开发后端程序的能力。

    7.socket.io 库

    让前后端通过 websocket协议通信,是web 开发游戏、聊天等程序必备技术。

    8.Mongoose 框架

    可以让程序具备文档数据储存能力

    9.Git 命令与 github

    可以对项目进行版本管理,从而能团队开发项目。

    10.Gulp 构建工具实战

    通过 gulp 工具,灵活对项目进行构建。

    11.Webpack

    可以用和 Node.js 后端模块化方式,开发前端程序,从而能开发大型系统。

    12.Jasmine & Karma

    可以利用 Jasmine & Karma 轻松实现,多种浏览器同时进行单元测试,而不必切换界面。

    13.前端相关框架

    JQuery / Bootstrap / Vue.js /React / Angular通过框架帮我我们快速开发程序

    14.移动端与桌面程序开发工具

    phonegap / react-native / electron / 微信小程序开发

    这套工具,基本上只是打包工具,和提供了一些特定平台 API ,开发还是使用之前的 Web 技术。

    如果通过这套学习路线图学完,那么就业是毫无压力的,但是做为有志向的码奴,我们还需要展望未来和扩展眼界。

    一提到扩展眼界,有些人就会,疯狂的拿来一本永远不用技术的书,啃起来,比如你是用 html5 写前端界面的,永远用不上 QT 写界面,你买本QT 津津有味的学起来,如果你感觉不错,那就学吧。

    写在最后

    其实,很多想学习技术的同学都一方面是兴趣使然一方面是想找一份满意的工作,如果你学的技术对企业没有实际价值,那么也白瞎,(除非你是理论计算机学家),就目前在“互联网+”趋势的引导下,Web前端工程师的需求只会越来越大。

    展开全文
  • 下面,我给大家分享一份Web前端学习路线图,希望对初学者有所帮助。 Web前端行业的发展,让前端人员能完成比以前更多的职责范围,所以未来前端可以宽口径就业,前景非常好。除此之外,目前Web前端工程师日均岗位缺口...

    随着移动互联网的发展,Web前端逐渐受到企业的重视,前端开发人员的薪资也水涨船高,越来越多的人看好前端行业的发展,想要转行加入。下面,我给大家分享一份Web前端学习路线图,希望对初学者有所帮助。

    Web前端行业的发展,让前端人员能完成比以前更多的职责范围,所以未来前端可以宽口径就业,前景非常好。除此之外,目前Web前端工程师日均岗位缺口超50000,平均薪资10820元/月。
    在这里插入图片描述
    对于零基础的人而言,要怎么学习Web前端呢?

    1、前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局,可实现响应式布局,一套代码适配 PC 端、移动端、平板设备等。

    2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具,如 git、gulp、Webpack 等,搭建项目及开发项目。

    3、Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据,实现复杂数据展示类项目,能够独立完成前后台相关功能,胜任HTML5全栈开发工程师职位。

    很多学习Web前端的朋友都希望在学成后能找到一份满意的工作,所以我们在学习过程中一定要注意实战经验的积累,如果你所学的东西对企业没有用,那你所做的一切都是无用功。

    展开全文
  • 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进制代码前面必须有#号
    • 如果一个属性有多个值,值与值之间用空格分隔
    • 如果指定多个方向值,则按照上右下左(顺时针方向)的顺序依次排列

     

    展开全文
  • 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>。

     

     

     

     

     

    展开全文
  • 第一阶段:HTML网页开发这里还是要推荐下小编的web前端学习群:606加721加798,不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份2最新的web前端资料和0基础入门教程,欢迎初学和进阶中的...
  • Web前端初学者必学的6个知识点!

    千次阅读 2018-06-16 14:21:42
    互联网的高速生长,促使互联网企业对付网站等页面的用户体验要求也越来越高,导致网站开举事度越来越大,于是一个新兴职业应运而生——web前端工程师。由于互联网时代的高速生长,公司企业的孔殷需求web前端工程师,...
  • “工欲善其事,必先利其器”,学习WEB前端开发也是一样。 一、前端视频教程-51自学网 我要自学网是由佛山市丰智胜教育咨询服务有限公司倾力打造的在线实用技能学习平台。该平台成立于2007年6月7日,是一家专业...
  • web前端零基础该怎么学习呢?

    万次阅读 多人点赞 2018-10-28 17:29:16
    由于前端开发的火热和一些IT巨头公司对 web前端开发人员的需求旺盛,让越来越多的人转入前端。前端开发领域是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底该怎么学~ ...
  • 送给大家一套完整的web前端开发学习路线

    万次阅读 多人点赞 2018-11-21 15:19:58
    web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你。     好的...
  • 本套课程是非常完整的Web前端学习课程,对与想学习Web前端的同学推荐学习本套课程! 下载地址:百度网盘 下载地址:百度网盘
  • 零基础学习web前端需要多久时间

    万次阅读 2018-09-07 12:14:31
    当下学习WEB前端技术是很不错的选择,不少人也渐渐认识到了WEB前端技术是非常有前景的,一些没基础的朋友,也想学好这门技术,但是又不知道零基础学完WEB前端要多久? 1:要想知道学这门技术的周期是多长, 那么就...
  • 各浏览器中自定义滚动条的样式

    千次阅读 2016-11-09 16:40:07
    webkit浏览器css设置滚动条: 1 2 3 4 5 6 7 ::-webkit-scrollbar ... //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。... /
  • 2019年小白学习web前端路线图及学习攻略

    千次阅读 多人点赞 2019-08-22 15:45:46
    但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白学习的web前端学习路线图。 第一:基础的重要性 ...
  • web前端学习路线思维导图

    千次阅读 2018-03-23 11:30:11
    分享一张web前端思维导图,先收藏图太大不好展示,看不清楚可以进入以下链接查看——web前端学习路线思维导图在线版
  • 最近想学习一下Web前端知识,本着理论 + 实践的学习路径,找了一些学习资源和开源项目练一下手。 2、学习资源 菜鸟教程(里面有很多基础的教程和示例,通俗易懂,适合初学者) Web前端入门和进阶学习笔记 React ...
  • WEB学习路线2020完整版(附视频教程+学习资料)

    万次阅读 多人点赞 2020-04-08 13:56:07
    下面小编专门为广大web前端学习爱好者汇总了一条完整的自学线路:WEB学习路线2019完整版(附视频教程+网盘下载地址)。适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利、高薪水的...
  • 前端招聘方面也在紧跟技术发展的节奏,相比前几年人才市场的繁华热闹,2017年的前端市场回归理性,企业提高了前端的门槛,大量“滥竽充数”的速成开发者开始失去市场,而优秀的前端在市场上的议价能力却越来越强。...
  • web前端开发和岗位职责

    万次阅读 2018-11-08 14:56:59
    什么是web前端开发和岗位职责? web前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面设计交互 创建Web页面或app等前端界面呈现给用户的过程。系统的页面...
  • 想学web前端需要学什么知识?htmlcss,css3,javascript,jQuery,easyUI,html5……首先学这些基本的吧!学习顺序就是HTML DIV_CSS javascript ,如果你没有学过其它编程语言,javascript自学就比较难了。HTML ,DIV_...
  • 1.妙味WEB前端开发全套视频教程  链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu  2.极客学院前端教程(html5 Bootstrap Nodejs)  链接: http://pan.baidu.com/s/1eQFcHoe 密码: iem6  3.前端...
1 2 3 4 5 ... 20
收藏数 164,642
精华内容 65,856
关键字:

web前端学习