前端_框架前端 - CSDN
前端 订阅
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。 [1] 展开全文
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。 [1]
信息
职    业
网站/小程序/WebAPP开发 [1]
核心技术
HTML、CSS、JavaScript,Typescript
中文名
前端
外文名
Front-end
前端网站前端
前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。
收起全文
  • 凡是购买本套课程的学员,可以加QQ群: 152364681,专业讲师进行在线答疑与指导,学不懂有疑问,随时问,永久服务,并赠送海量web前端练习素材,名师一路陪伴,让学员真正成为一名优秀的web前端工程师。
  • 课程为零基础学习开发的学员而准备,无需任何基础,无任何专业限制,通通从零开始,由浅入深学习开发,每个知识点均有对应案例...新型前端开发大部分回归原始开发,核心编程能力非常重要,本课程教会你如何玩转前端
  • 本课程讲解了VUE技术栈中的各种... 通过本课程的学习,大家可以学习到VUE技术栈中的各种技术,并且可以完整的掌握从发出请求,到前端处理数据,再到模拟后台数据等整个web前端的开发流程。 课堂手绘图(部分) 
  • 2020年大前端发展趋势

    2019-12-12 13:56:40
    迅速发展的前端开发,在每⼀年,都为开发者带来了新的关键词。2019 年已步⼊尾声,2020 年前端发展的关键词⼜将有哪些呢?发展的方向又会是什么呢?参考2019年大前端的发展,不出意外,前端依旧会围绕⼩程序、超级...

    迅速发展的前端开发,在每⼀年,都为开发者带来了新的关键词。2019 年已步⼊尾声,2020 年前端发展的关键词⼜将有哪些呢?发展的方向又会是什么呢?参考2019年大前端的发展,不出意外,前端依旧会围绕⼩程序、超级APP、跨端开发、前端⼯程化以及新技术运用等几个方面进行展开(可以参考2019年大前端技术趋势深度解读)。

    小程序

    在⼩程序⽅⾯,今年仍然是⼩程序突⻜猛进的⼀年,各⼤主流的 App 都上线了⼩程序能⼒的⽀持,各前端团队也都有了专⻔的⼩程序开发团队,以适应更快的⼩程序开发需求。同时App 中很多关键的功能都被⼩程序所替代,甚⾄有些 App 已经变成 Native ⼩程序壳,上层的应⽤实现全部是⼩程序。

    在微信小程序出现以前,大家在谈 Hybird、ReactNative,但终归只是技术层面的狂欢,始终没有业务属性的注入。小程序的出现,一方面告诉业界在当前设备上 Webview 也没差到哪去,另外一方面告诉业界如何让有能力的商家在超级 APP上进行私域运营。

    另一方面,从技术角度说,在上层 DSL 的严格限制下,超级 APP 就可定义符合自己诉求的 Web 标准,弥补当前 Web 标准的不足,最后和客户端配合,结合离线、预加载、定制Webview 能产出类似于 NSR 等各种酷炫的技术模型,让 Web 在端内低成本达到 Native 版的体验,端外也不会像 Weex 一样有点小别扭。

    不过由于需要依赖超级APP(微信、支付宝、百度、美团、头条等),由于各家平台采用的具体方案的差异,造成目前小程序的落地方案也不一样,有时候需要开发多套代码。

    跨端开发

    跨端开发⽅⾯,RN ⽣态已经⾮常成熟,或者说看不到太多发展前景,因为目前还停留在0.61版本,似乎1.0版本仍然遥遥无期。因此,今年很多团队转战⾕歌⽣态的 Flutter,特别是 Flutter for Web 的第⼀个 Release,⼜让 Web 前端重燃希望、跃跃欲试。

    同时,苹果公司也发布了全新的 UI 系统——SwiftUI,同时,开源社区中 SwiftUI for Web已经在路上了,SwiftUI for Android 还会远吗?

    跨端开发⽅⾯,Flutter 仍会快速发展,并且会有更多的开发者,Flutter on JS、SwiftUIfor Web&Android 也将是开源⽣态值得期待的事情,毕竟跨端仍没有⼀个完美的解决⽅案。

    前端工程化

    在前端⼯程化⽅⾯,开发者最重要的基本素养就是通过⼯具提升效率,⽽前端开发者在这⽅⾯会持续迭代和优化。

    曾经我们谈 Yoman,谈 CLI 等系列构建工具,但在团队大了之后始终觉得差点什么。反观 Java 同学,从没听说过 Spring Boot 配置工程师。今年很多团队都在建设完整的前端 DevOps 流程⼯具集,⼀些团队之间也开始协作共建,不管是 Web 还是⼩程序项⽬,从新建项⽬、开发、联调(tiao)、部署、测试、发布、运维到监控统计,都有完善的⼯具做保障和提效,今后前端⼯程也会越⾛越标准化。

    展望2020年前端的发展,前端工程体系一定会更加闭环,不再是一个脚手架这么简单,而是会结合 IDE,打通业务属性,从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。

    Serverless

    Serverless 的⽕爆⼏乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js,使⽤ Serverless 帮助前端开发者解决了使⽤Node.js 过程中的诸多问题。

    当前的前端工程师大多都是科班出身,虽不能和正宗的服务端开发同学比,但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层,来满足这部分诉求,但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地,BFF 这层的代码会摆脱运维、机器分配等复杂的问题,同时大概率会由前端同学写这部分代码,服务端同学专注中台系统的实现。从业务上说,业务的试错成本也会大幅度降低。

    随着 Node.js 成为前端开发者必备技能之后,云计算的不断普及会让Serverless 触⼿可及。当越来越多的开发者尝到研发⾼效的甜头之后,Serverless 必将对前端的研发模式产⽣变⾰。

    同时,使用Serverless的同学一定会使用 TS。这也意味着,2020 不写 TS 可能真的就 Out 了。

    WebAssembly

    WebAssembly 是一种新的字节码格式,目前主流浏览器都已经支WebAssembly。 和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似,可以快速装载运行,因此性能相对于 JS 解释执行而言有了极大的提升。 也就是说WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

    有了 WebAssembly,在浏览器上可以跑任何语言。从 Coffee 到 TypeScript,到 Babel,这些都是需要转译为 js 才能被执行的,而 WebAssembly 是在浏览器里嵌入 vm,直接执行,不需要转译,执行效率自然高得多。

    举个例子,AutoCAD 软件是由美国欧特克有限公司(Autodesk)出品的一款自动计算机辅助设计软件,可以用于绘制二维制图和基本三维设计。使用它时,无需懂得编程,即可自动制图,因此它在全球被广泛应用于土木建筑、装饰装潢、工业制图、工程制图、电子工业、服装加工等诸多领域。

    AutoCAD 是由大量 C++ 代码编写的软件,经历了非常多的技术变革,从桌面到移动端再到 web。之前,InfoQ 上有一个演讲,题目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》,即通过 WebAssembly,让很多年代久远的 C++ 代码在 Web 上可以运行,并且保证了执行效率。

    WebAssembly 的核心 JavaScript 引擎 V8 目前已包含了 Liftoff 这一新款 WebAssembly baseline 编译器。Liftoff 简单快速的代码生成器极大地提升了 WebAssembly 应用的启动速度。2019年,很多的公司都开始投入人力进行WebAssembly的学习个改造,相信2020年WebAssembly会经历爆发式期。

    5G

    2019年一个绕不开的话题就是5G。⾸先,5G 带宽的⼤幅提升带来传统 Web ⻚⾯复杂度的进⼀步提升,如同 2G 到 4G 变⾰过程中⻚⾯从 WAP 的纯⽂本超链接时代变⾰到 4G 全图⽚视频时代。5G 对于⻚⾯的变⾰必将是巨⼤的,但肯定不会⼀蹴⽽就。因为相应的配套设施也需要逐步完善,如硬件性能和浏览器的处理速度。⽽服务端渲染(SSR)肯定是其中⼀个捷径,轻前端重后台,5G 是桥梁,把渲染放后台,不像同构那么简单,需要关注和优化渲染性能。WebAssembly 或许会在这个机遇下得到快速发展,因为它可以⽆缝对接后台多种语⾔,⽽后台渲染的优化也会带来前端⻚⾯研发模式和技术架构的变⾰。

    其次,5G 带来的万物互联,⼜将带来有别于智能⼿机和普通 PC 的多样化的应⽤场景,VR、可穿戴设备、⻋载系统、智能投影、智能交互等⼜会把 Web 带⼊各种各样的垂直领域,这也意味着前端将有更多⼴阔的空间。相信随着5G的大规模商业,会诞生一批新的互联网巨头。

    展开全文
  • web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS 的流行...

    web前端到底是什么?


    某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS 的流行,让前端异常火爆,以后还会更有前途吗?请问您怎么看?”



    “我只能告诉你:前端不灭”
    “除非你不要脸!”
    “前些年因为国内都不要脸,然而现在都明白了用户体验至上,现在都要脸;”
    “不但要脸 还要胸大 活好!用着舒服”
    “后端提供床,前端提供颜值高的妹,你说重要吗?”


    某货:“嘿嘿!你意思是 地上、厨房都可以,但没妹子怎么行?。。【大大的 污 】”


    上面对话,是我前两天在群里 一段解答的对话。
    有人问我 为什么你举例这么生动,真实,让人看了觉得更激情了。我只能告诉你:我主业是段子手,副业才是code,你表 搞错好吗?
    好,下面我来简单粗暴的介绍下我自己:3个特征而已


    1. 我 最 帅!
    2. 我 最 帅!
    3. 我 最 帅!

    O(∩_∩)O 好了,我们已经相识了,我们进入相知的阶段(我擦,太快了吧?)

    在我讲段子之前呢,我有必要和责任解释下:
    {“ web前端开发 ”是什么? }
    {“ web前端开发 ”有前途吗?}
    {“ web前端开发 ”到底怎么学?}

    这3个对象,是你入【前端】这个坑的初恋,对!没错同时和 3个对象谈恋爱(我知道你大学肯定干过额 【邪恶脸】)。

    NO 1: web前端开发 ”是什么?


    前言:声明啊,我是个草根派,不是学院派;那些一篇噼里啪啦,噼里啪啦的各种定义 和术语解释,你在我这么帅的人的系列文章里,根本看不到 嘿嘿!


    【啦啦啦 啦啦啦, 我是卖报的小行家,不怕苦,不怕累。。】。。。画风突变


    跑题啦!不过话说回来,这个脍炙人口的儿歌,深刻反映了我们 web前端行业的一个工种状态。行家,自由,但要经历苦、累 才会有收获。其他行业,苦、累居多,而我们大前端那必须是自由,乐趣,随心所欲的一个工种。

    本帅的感触:做任何一件事,如果是兴趣使然,那必定会坚守到老,从菜鸟变大神也是顺理成章的事儿。因为你的经验会随着你的颜值经历时间的洗刷,最后你回头会发现一件最有意义的事:

    我擦,加薪了! (^o^)/YES!

    废话了这么多,我们来步入正题:其实web前端这个职位,并没有一个有效的历史记录可以查询,更没有一个明确的定义,她不像java 攻城狮、c++开发这种一开始就有明确定位的工种一样,是有核心技能可以描述的。比如java开发,顾名思义就是利用java程序来开发功能,php开发:利用php做个商城等等。

    前端小美女

    你会发现:我们前端这个姑娘,她甚至没有一个logo 和拟人化的图形用来描述(是不是挺扯淡的?)不过不要紧,下面让帅的人 来为她正名。O(∩_∩)O~

    一、web前端的演变


    Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过10年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

    2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

    随着WEB2.0概念的普及和W3C组织的推广,网站重构的影响力正以惊人的速度增长。


    前端飞速发展


    上边一段标注解释,是某科的一些附录,(这么枯燥的东西,就让别人来总结吧对么?)大概阐述了,以前的web是怎么一种状态和Web2.0的重要性。

    其实中国的“web前端开发攻城狮”这个职位好多人并不知道是怎么叫出来的,那么我偷偷 <( ̄︶ ̄)>告诉你:其实是淘宝团队,发明出来的本土化的名称,因为历史原因,淘宝在2005以后迅速崛起,并且爆发式的访问量,让淘宝网的用户体验受到巨大考验和急需前进。

    然后淘宝官方第一次有了【 web前端开发 】这个字眼和招聘职位,或许其他网站也想到了这样一种描述,但是毕竟知名度巨高的淘宝,受关注度自然高,口碑相传,就把【前端开发】这个叫法发扬光大了。

    在早期点Web前端不叫前端,而是被亲切的叫做“网页设计师”,没错你没看错,就是这个名字,我记得那时候 【网页三剑客】的说法满天飞,你掌握了这3贱客,真的很贱,就可以被人叫做网页设计师了。

    网页三剑客:DW\FW\Falsh

    网页三剑客

    网页三剑客(Flash、Dreamweaver、Firewoks) 并称为Macromedia的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合 。后来Firewoks被Adobe这个变态的巨头收购以后,ps就基本取代Firewoks来做设计网页的工作了,虽然我知道现在还有人用,估计是一种怀念和某些好用的切图功能吧。

    而那时候的网页设计师 如果要入此道,必须要掌握的就是Dreamweaver,并不是说只有他能写html 和 css ,而是它在当时的自动提示实在太好用、太强大了,简直不用费脑细胞,你就可以轻轻松松的完成你所想。在当时前端工具和编辑器贫乏的时代,这个绝对是神奇级别了(当然后来 写的多了都熟悉基本不用提示的)。当年还有很多基于Dreamweaver构建网站的教程,那时候真的是个基情满满的年代,这些工具类的历史产物,有兴趣的朋友可以去了解一下就好了,我们不在多舌。

    二、web前端开发入门,需要掌握哪些基础


    虽说这个问题很大,但是这个话题就很好回答了;因为现在前端如此眼花缭乱,技能多多,都是基于此三板斧:
    HTML、CSS、JavaScript


    W3C


    语言基础:HTML、CSS、JavaScript

    思想标准:W3C标准

    W3C万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言标准通用标记语言下的一个应用)、可扩展标记语言等,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

    所以 我们现在运用的html 超文本标记语言,css 等所有基于web技术的范畴,基本都是w3c标准,并全世界统一执行的,所以符合w3c 也就是开启前段之门了。
    web前端,首先不是孤立存在的,前端相对于web后端编程而言,前端是浏览器自身支持的编程语言,包括html,css,javascript

    HTML: 是构成网页展示的基础,是一种很简单可视化的标识语言,说白了就是 一是一,你写二就出二。网上所有的网页网站,不管多么牛鼻最后都会转化成html,被浏览器渲染出来,用作展示。

    CSS: 又称作样式表,简单点说就是html的外衣,将html包装的明艳动人。

    JavaScript:是一种直译式脚本语言,非常灵活,可以在任何浏览器上开发与调试的一种动态类型、弱类型、基于原型的语言。
    (关于js这个让人又爱又恨的语言,我们到后面会着重介绍和学习,因为掌握此技能, 你就拥有了全世界,说全世界是扯淡的,说白了拥有了 money和妹子)

    NO 2: web前端开发 ”到底有前途吗?


    如果你在2012年以前 这么问,或许很多人会思考一下,给你说不知道,应该没后端编程有前途吧,或者直接说,web前端有啥啊?不就写个网页、js吗?工资又低。。。。


    但现在是2016年了亲,我只能说以后都会是前端年,很久以前不懂web前端的人观念大概是:

    xx是美工,让他弄个网页过来
    xx你好,你能给我切割按钮过来吗,我后面需要用
    xx你alert一下,看我数据传过去了没。
    xx xx xx 的

    xx你麻痹啊xx!不要叫我美工,谁叫我跟谁急;不要叫我页面仔,虽说每个扎实的前端都是页面仔过来的;更不要侮辱我的职业,以为前端只是写页面、切图。。

    然而现在的真实情况是这样的:

    hi,小北你这个是什么效果啊,这么牛,css3 html5做的?【css3 html5 笑而不语

    我擦,这,这 怎么自动就刷新了,吓我一跳啊,我还拉回切换着f5呢【gulp、 webpack等构建工具笑而不语

    哎呦,js真牛逼啊,连后台数据库都能操作了,服务器都能构建了【nodejs笑而不语

    哥,你需要什么形式的json串啊, 我这边好生成一下,哥,你过来看一下这个体验怎么样?【老子 不笑,也不会语。尼玛要累死我?


    随着html5的普罗天下,css3的风靡全球,随着nodejs 的崛起,JavaScript这个最容易被人误解的语言,终于散发了它本该有的光芒(不要以为是我抄的别人的话,本篇文章纯属原创,我就是这么有才!)


    Javascript这个牛鼻的历史产物,现在真的可以说是万能的,至少在web层面是这样,交互、效果、数据操作、娱乐游戏、操作文件io等等。

    由于现在是web应用时代,各种尺寸的电子设备,增长式的爆发,只要和屏幕有关的 就是颜值,颜值代表了一切,你说前端有前途吗?

    html5、网页游戏风靡全球,需要页面展现的东西 都是前端范畴,你说有前途吗?

    目前世界上最多的可视化物质是什么?蚂蚁?人?还有人说是TT(泥煤,亏你想的出来),那么我告诉你,是网页,网页 ,网页,据统计现在全世界 有亿级别的网页,请问什么概念,你说有前途吗?

    最直观的:前端的工资 从前几年的平均几K 到现在的10 20 k 。

    前端工资比例图


    你说有前途没?

    由于本篇文章是 我 前端系列文章的第一篇,只介绍下历史原因 和 为前端正名,并且有效提升初学者和怀疑者的兴趣,所以一些名词的介绍和意义,大家先自行谷歌、度娘一下,后面我们会一一道来。

    NO 3: web前端开发 ”怎么学习,怎么入门?


    想知道吗?嘿嘿,我好累,喝口水把个妹,想知道,持续关注我帅帅的颜值,下回分解!

    在最后,特别感谢,贺贺妹子(傻),辛苦整理提供一些资料和配图,让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧!

     

    ----------------------------------------------------------------------------------------------

     

    web前端入坑系列:点击标题进入

    第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗

    第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!

    第三篇:web前端 | 一条“不归路” -  学习路线!

     

     

    入坑方式:   欢迎加入~!气氛热情,欢乐多,妹子多!

     

     

     扫描屏二维码或直接搜索,可以关注 我的前端公众号 :前端你别闹

    听说妹子挺多的,及时更新一些前端解惑和段子

    70

     

    展开全文
  • ...所有的布局类标签都主要用来构建页面的内容区域,是双标签类型,是双标签类型,默认显示为块状元素。 通用的布局标签:&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>。

     

     

     

     

     

    展开全文
  • web前端简介 什么是HTML? HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、...

     

    目录

    web前端简介

    什么是HTML?

    HTML标签

    HTML基本结构

    HTML 段落标签

    HTML 换行标签

    HTML标题

    HTML 水平线

    HTML注释

    HTML 标签

    HTML 列表标签

    HTML表格

    HTML超链接

    HTML 图片

    HTML表单

    表单元素-文本、密码框

    表单元素-多行文本框

    表单元素-选择框

    表单元素-下拉选择框

    表单元素-按钮

    HTML-div


    web前端简介

    web前端开发是从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

    学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

    1. HTML是网页内容的载体内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

    2. CSS样式是表现就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3. JavaScript是用来实现网页上的特效效果如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

     

    什么是HTML?

    HTML 指的是超文本标记语言 (Hyper Text Markup Language)

    HTML 不是一种编程语言,而是一种标记语言 (markup language)

    标记语言是一套标记标签 (markup tag)

    HTML 使用标记标签来描述网页

     

    HTML标签

    HTML 标签是由尖括号包围的关键词,比如 <html>

    HTML 标签通常是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签

    http://img.mukewang.com/528960dc0001cb6802710128.jpg

    标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。

    http://img.mukewang.com/5289611a0001469c05510206.jpg

     

    HTML基本结构

    一个HTML文件是有自己固定的结构,如下所示:

    <html>

    <head>...</head>

        <body>...</body>

    </html>

    代码讲解:

    1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

    2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script>、 <style><link>、 <meta>等标签,头部标签在之后会详细介绍。

    3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

     

    在head中设置网页标题和字符集编码

    <head>

        <title>这里是标题</title>

        <meta charset="utf-8"/>

    </head>

     

    HTML 段落标签

    如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

    <p>段落 </p>

    <p>标签的默认样式,段前段后都会有空白。

     

    HTML 换行标签

    如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

    <p>This is<br/>a para<br/>graph with line breaks</p>

     

    HTML标题

    标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法: <hx>标题文本</hx> (x为1-6)

    题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。一个标题标签要独占一整行。

     

    HTML 水平线

    <hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。

    <p>This is a paragraph</p>
     <hr />
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>

     

    HTML注释

    么是代码注释代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

    语法:

    <!--注释文字 -->

     

    HTML <span>标签

    <span>它的作用就是为了结合CSS设置单独的样式用的,本身没有任何效果。

     

    HTML 列表标签

    1)无序列表

    在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

    http://img.mukewang.com/52d383cd0001085503320216.jpg

    这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

    语法:

    <ul>
      <li>...</li>
      <li>... </li>
       ......
    </ul>

    2)有序列表

    如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

    http://img.mukewang.com/52d3884a00014b0702270264.jpg

    语法:
    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>

     

    HTML表格

    有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

    http://img.mukewang.com/52d38f0b00017e4305060133.jpg

    想在网页上展示上述表格效果可以使用以下代码:

    http://img.mukewang.com/52d38f83000160be02920445.jpg

    创建表格的四个元素:

    table、tr、th、td

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    4、<th>…</th>:表格的头部的一个单元格,表格表头。

    5、表格中列的个数,取决于一行中数据单元格的个数。

    表格标题

    <caption> 指定表格标题,它显示在表格上方。

         语法:

    <table>

        <caption>标题文本</caption>

        <tr>

            <td>…</td>

            <td>…</td>

            …

        </tr>

    </table>

     

    合并单元格

    有时候一些行和列需要合并,如下:

    合并行使用rowspan属性,合并列使用功能colspan属性。

     

     

     

    HTML超链接

    使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

    语法:

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

    例如:

    <a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>

     

    上面例子作用是单击click here!文字,网页链接到http://www.baidu.com这个网页。

    title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

     

    <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

    如下代码:

    <a href="目标网址" target="_blank">click here!</a>

     

    HTML 图片

    在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

    语法:

    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    举例:

    <img src = "myimage.gif" alt = "My Image" title = "My Image" />

    讲解:

    1、src:标识图像的位置;

    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4图像可以是GIF,PNG,JPEG格式的图像文件。

     

     

     

    HTML表单

    网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

    <form   method="传送方式"   action="服务器文件">

    讲解:

    1.<form> <form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method  数据传送的方式(get/post)。

    <form    method="post"   action="save.php">

            <label for="username">用户名:</label>

            <input type="text" name="username" />

            <label for="pass">密码:</label>

            <input type="password" name="pass" />

    </form>

    注意:

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    2、method : post/get

     

    表单元素-文本、密码框

    当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框

    语法

    <form>

       <input type="text/password" name="名称" value="文本" />

    </form>

    1、type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    2、name:为文本框命名,以备后台程序ASP 、PHP使用。

    3、value:为文本输入框设置默认值。(一般起到提示作用)

    举例:

    <form>

      姓名:

      <input type="text" name="myName">

      <br/>

      密码:

      <input type="password" name="pass">

    </form>

    在浏览器中显示的结果:

    http://img.mukewang.com/52e4e9be000152ca05250275.jpg

     

    表单元素-多行文本框

    当用户需要在表单中输入大段文字时,需要用到文本输入域。

    语法

    <textarea  rows="行数" cols="列数">文本</textarea>

    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    2cols 多行输入域的列数

    3rows 多行输入域的行数

    4、在<textarea></textarea>标签之间可以输入默认值

    举例:

    <form  method="post" action="save.php">
            <label>联系我们</label>
            <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    </form>

    注意:代码中的<label>标签在本章5-9中讲解。

    在浏览器中显示结果:

    http://img.mukewang.com/52e5b4040001f4af05760367.jpg

     

    表单元素-选择框

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

    语法:

    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

    1type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    2value提交数据到服务器的值(后台程序PHP使用)

    3name为控件命名,以备后台程序 ASP、PHP 使用

    4checked当设置 checked="checked" 时,该选项被默认选中

    如下面代码:

    http://img.mukewang.com/52e5f7c60001a23f07360267.jpg

    注意:代码中的<label>标签在本章 5-9 中有讲解。

    在浏览器中显示的结果:

    http://img.mukewang.com/52e5f8010001159804900257.jpg

    注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

     

    表单元素-下拉选择框

    下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

    http://img.mukewang.com/52e604590001ae4005270185.jpg

    讲解:

    1、value:

    http://img.mukewang.com/52e6037300015a9905030165.jpg

    2selected="selected"

    设置selected="selected"属性,则该选项就被默认选中。

    在浏览器中显示的结果:

    http://img.mukewang.com/52e605340001014804520288.jpg

     

    表单元素-按钮

    在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮

    语法

    <input   type="submit"   value="提交">

    type:只有当type值设置为submit时,按钮才有提交作用

    value按钮上显示的文字

    举例:

    http://img.mukewang.com/52e613350001461604820109.jpg

     

    HTML-div

    在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

    语法:

    <div>…</div>

    确定逻辑部分:

    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

    http://img.mukewang.com/52d38c41000163e210120455.jpg

     

     

    展开全文
  • 前端是什么?

    2019-08-31 08:42:37
    前端是什么? 简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者...
  • 1.一次完整的HTTP事务流程 (1)域名解析 (2)发起TCP的三次握手 (3)建立TCP连接后发起http... ... ...(6)浏览器对页面进行渲染呈现给用户 ...从网址到IP地址的转换,称为DNS解析,DNS解析是一个递归查询的过程,具体...
  • web前端简易制作之HTML

    2018-10-02 11:33:21
    1.文章标题 这里可以看出在 &amp;amp;amp;amp;amp;lt;head 里的title 中 添加了 hello world ...HEAD:包含文件的标题,使用的脚本,样式定义等 ...BODY:放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中...
  • 前端学习路线

    2015-11-04 10:56:43
    先附上一张网上广为流传的前端知识体系图:前端知识体系从大图中我们总结出: 优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度!应该具备快速学习能力。 前端开发工程师 不仅要掌握基本的Web前端开发...
  • 如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,...
  • 前端发展简史

    2019-02-14 16:14:06
    前端发展简史 起源 1990 HTML 1990 年,Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。 1991 年,Tim 作为布道者在 Internet 上广泛推广 Web 的理念,与此同时,美国国家超算...
  • “↵”换行符号处理

    2019-06-10 17:12:56
    问题: 我在chrome控制台Netwrok中发现返回的数据中带有“↵”可视化换行符的符号,我们该如何来匹配这个符号并且进行相关处理呢? 方法: 尝试像这样替换它们: var myString = myString.replace(/(\r\n|\n|\r)/gm,...
  • 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造。这一年中有很多热门的前端开发框架,下面源码时代web小编...
  • 也为我近期新开的 个人前端公众号:前端你别闹(webunao) 直接增加了几百粉(果然,帅的人大家都喜欢。) 被国内著名技术博客 CSDN 推上博客首页,并且经过我授权在其他公众号也转载了不少。 我觉得我这片...
  • 做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。 本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。 本场 Chat 主要内容...
  • 前端与后端的思维专注点很不相同,前端聚焦在如何把内容以可视化的方式展现给用户,后端聚焦在如何利用IT基础设施实现业务逻辑。所以前端参与后端开发时(全栈工程师必备!)首先需要理解后端会做哪些事,其次才是...
  • 前端和后端的区别?

    2019-07-30 02:36:16
    有的人认为,前端很好学,后端不好学。 也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣。 前端和后端做简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码。 ...
  • 年中,自己做规划(2019Thinking(上) – 一个前端开发者的个人思考)时,考量了一段时间「微前端」,也关注到了《微前端的那些事儿》的文章,从而了解了作者「黄峰达」,也就购买了下面将要聊的书《前端架构:从入门...
1 2 3 4 5 ... 20
收藏数 1,219,725
精华内容 487,890
关键字:

前端