web前端

web前端入门到实战:css基础-float浮动

試著忘記壹切 提交于 2020-04-03 23:12:29
float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> body{ font-family: '微软雅黑'; } .per{ width: 400px; border: 1px solid #CCC; padding: 5px; } .red{ width: 100px; height: 100px; background: red; margin: 10px; float:left; } </style> </head> <body> <div class="per"> <div class="red"></div>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 </div> </body> </html> 清除浮动的方法一: 在浮动元素后面使用一个空元素 专门建立的学习Q-q-u

Web 前端之HTML和CSS

拟墨画扇 提交于 2020-04-03 23:01:33
Web 前端之HTML 和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页 CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中. 以上为官方说法.通俗来说,HTML负责的是显示内容,CSS负责的是样式.他俩在一起就像是我买了房子以后需要装修一样. HTML 中的小细节 HTML的入门简单,基础知识浅显易懂. 首先,HTML中常用字符集有GBK,GB2312和UTF-8. <meta name="keywords">用于显示网页的关键字 行级元素inline:不能设置宽和高,它的宽和高是内容撑开的.eg.<a><span> 块级元素 block:可以设置宽和高.默认情况下,它的宽和高由父元素决定.eg.<p><div><h1-h6><table><o><ul> 严格来说,image既不属于行级元素,又不属于块级元素,但通常人们都将他归类为行级元素,属于一个过渡元素.这是后话. 看过了基础的知识

web前端:html基本操作

牧云@^-^@ 提交于 2020-04-03 20:52:46
1. HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。 浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎) 总结: HTML其实就是一套规则,一套浏览器能够识别的规则; 2. 准备须知 这里使用pycharm编辑器编写html: 1)打开pycharm,新建html文件; 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <title>Title< / title> < / head> <body> < / body> < / html> 2)html效果查看: 编写html代码后,点击选择pycharm中html文件右上角显示的浏览器图标,查看效果展示; 找到html文件路径,直接点击打开或者选择浏览器打开查看效果; 3. Doctype标准 Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档; 有和无的区别 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式

web前端入门到实战:css选择器和css文本样式相关

荒凉一梦 提交于 2020-04-02 22:00:10
【文章来源微信公众号:每天学编程】--- 关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没有关系,取决于哪个样式离需要引用样式的元素最近就用哪个,所以div里的文字颜色是“橘色“ 选择器权值: 标签选择器:1 类和伪类选择器:10 id选择器:100 通配符选择器:0 行内样式:1000 !important:优先级最最高 权值不同时,根据权值判断样式;权值相同时,根据就近原则判断样式 常用选择器: input:focus p:first-letter p元素的首字母 p:first-line p元素的首行 serif字体和sans-serif字体的区别: sans-serif有修饰 sans-serif无修饰 font-style:normal/italic/oblique 正常 斜体 倾斜 font简写顺序: font-style font

蜗牛学院分析:Web前端开发的就业前景怎么样,薪资待遇如何?

时间秒杀一切 提交于 2020-04-02 07:35:01
信息技术的迅速发展,使IT技术者们赶上了一个百年难遇的好机会,尤其是国家出台了“互联网+”的政策后,更是催生了IT行业的就业空间,使其呈现爆发性增长。 如今,微信逐渐成为了大家主要的交流工具,随着各种小程序游戏风靡朋友圈之后,其从业人员Web前端开发工程师的薪资可谓是一路高涨。细心观察下大家不难发现,就目前来看,Web前端作为移动互联网时代的前沿技术,不仅在电脑端,而且在手机端也得到了广泛的应用。据预测,Web前端开发在未来5—10年,将会成为移动互联网领域的主宰者。 当然,很多外行人对于“Web前端开发”的了解还只是皮毛,今天小编就为大家详细解释一下Web前端到底是什么。 1、什么是Web前端? 早期互联网时代,电脑端的网站页面主要以静态为主,相对来说也没那么复杂。而现在随着网络信息逐渐丰富,网页发生了很大的变化,企业更加注重用户交互,各种产品层出不穷,好产品想要长久发展,用户体验就变得尤为重要,特别是移动端产品。 Web前端技术主要包括HTML5、CSS3、Less、Sass、响应式布局、移动端开发、以及Ps设计等,更高级的前端开发人员还需要掌握JavaScript 语言、Mysql、Mongodb数据库开发、vue.js、webpack、elementui等前端框架技术。 2、Web前端开发可以从事哪些工作? 学完Web前端开发后,可以从事网站前端工程师、网页制作工程师

疯狂农场模式系统开发

十年热恋 提交于 2020-04-01 00:38:10
那么web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多。那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么?小白到高手需要多久?小编帮大家分析 1、如何学习web前端知识 第一阶段,你要从最基础的HTML/CSS开始,简单地说,HTML就是一堆非常简单的标签,而CSS则是把你画画的流程用英语按一定的格式写出来。然后你需要理解常用HTML标签的意思,学会各种CSS的属性,还有CSS的盒模型、优先级、选择器…… 第二阶段,JavaScript学习,你要是想在网页上实现交互效果,比如轮播图、点击按钮后播放动画等等,那么就必须学会JavaScript。JavaScript是一门完整、强大、热门的编程语言,浏览器的各种交互效果都由它来做到的。你先要了解一些基础的JavaScript概念(变量、函数、基本类型)后,然后学习jQuery(JavaScript代码库的一种),并且通过jQuery继续使用CSS的选择器。 2、转职成为web前端 专精HTML/CSS的前端从业人员也就是前端重构。这里要提一下,有一个职业对于这块很有优势,那就是设计师。不管是UI设计师,还是平面设计师,在页面上如何写页面,也知道怎么做得更好,并且更加理解Web世界,做出更“系统化”的设计。关于CSS的知识,你需要理解文档流

【Web开发前端知识】- Web2.0(1)

北战南征 提交于 2020-03-31 08:22:31
Web1.0 Web 1.0,指的是万维网发展的第一阶段,时间大约从1991年到2004年。“在Web 1.0中,内容创作者很少,绝大多数用户只是内容的消费者。”(在Web 1.0时代,人们只能被动地浏览内容。)。 Web2.0 Web2.0介绍 Web 2.0是一种新的互联网方式(第二代互联网),通过网络应用(Web Applications)促进网络上人与人间的信息交换和协同合作,其模式 更加以用户为中心 。 Web 2.0的核心概念是互动、分享与关系,所有的网络行为,都可用“互动、分享、关系”的概念来作诠释。 2.0是软件版本,这里指一系列web技术的升级,计算机工业的商业革命。 Web2.0特点 将Web作为平台 驾驭集体智能 数据将变成未来的"Intel Inside" 软件不断发行与升级的循环将会被终结 轻量型程序设计模型 通过内容和服务的联合使轻量的业务模型可行 软件运行将跨越单一设备 丰富的用户体验 分享和参与的架构所驱动的网络效应 通过带动分散的、独立的开发者把各个系统和网站组合形成大汇集的改革 快速的反应与功能新增 Web2.0服务方式 1.双向消息协议: REST(RepresentationalStateTransfer)表示了一种Web服务, 客户端传送所有的事务的状态; SOAP(SimpleObjectAccessProtocol

web前端开发工具之sublime

牧云@^-^@ 提交于 2020-03-30 04:19:35
Sublime text3是一款非常好用的编辑器,package control和emmet是不可或缺的插件。 安装package control: 1、通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2、粘贴以下代码后回车 import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()) 使用package control安装emmet: 快捷键 Ctrl+Shift+P,输入 install 选中Install Package并回车,输入emmet回车就安装了。 来源: https://www.cnblogs.com/timeyo/p/4171550.html

1——web前端HTML基础

北慕城南 提交于 2020-03-29 05:20:00
HTML 什么是HTML:超文本标记语言(HyperText Markup Language,简称HTML) HTML基本内容分为头部(head)和身体(body)两部分 HTML基本模板 <!DOCTYPE html>标签:作用:在html文件最前面进行声明,定义文档类型,告知浏览器用html何种规范去解析文档 常用的标签 由尖括号包裹单词构成,eg:<html>,所以标签不可能以数字开头 标签使用样式: 1.开始标签<a>标签体</a>结束标签 2.自闭和标签,eg:<br>,<hr>,<input>,<img> 块级标签和内联标签: 块级标签:<p>、<h1>、<table>、<ol>、<ul>、<form>、<div> 内联标签:<a>、<input>、<img>、<sub>、<sup>、<textarea>、<span> 块级元素的特点:   总在新的一行上开始   高度,行高以及外边距和内边距都可以控制   它可以容纳内联元素和其它块元素 内联元素特点:   和其他元素在同一行上   高,行高以及外边距和内边距不可改变   宽度就是其文字或图片宽度不可改变   内联元素只能容纳文本或者其它内联元素 常用标签之块级标签 标题标签: 一般用于文章的标题,有h1~h6 段落标签: 会把HTML文档分割成若干段落 列表标签: 列表标签分为:无序列表和有序列表以及定义列表

web前端开发入门,学习路径以及具体的学习内容

拥有回忆 提交于 2020-03-27 15:28:09
前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性。这个部分内容非常简单,而且非常容易掌握。相信你也更愿意学习这个部分,毕竟他可以让你最直观的感受到前端的魅力。为了锻炼大家写代码,可以根据你喜欢的站点去实现效果。这一阶段是非常重要的基础阶段,所谓基础就是可能这个阶段我们的学习的内容,可以让我们开发出来绚丽网站站点,但是功能丰富却暂时做不到。 为了完成更绚丽的站点,我们需要掌握常见特效的实现,利用 css3 和 h5 的新特性实现动画,布局,雪碧图,滑动门,tab 切换等特效。并且掌握基础的站点优化内容。例如 sprite 等。虽然我们还不能完成更多交互内容,但是我们会学习到很多的知识模型和理论,而这些知识模型和理论是我们后期工作和学习的基石。扎实的基础有了,我们才能走的更稳更快。 注:本阶段不涉及到编程,主要是熟悉 HTML5 各种标签用法、CSS3 各种属性的用法。 2.JavaScript 基础与深入解析 JavaScript 语言非常重要,可以说学习前端本质就是学习“JavaScript”编程。后面学全部都是基于JavaScript 的。JavaScript 语言可以让网页元素具备动态效果,让体验度更加流畅。这在目前流行的 B/S 架构体系下,是极端重要的事情。这也是为什么前端工程师大行其道