0基础:教你看懂HTML5

版权声明:本文为北京爱创课堂原创文章,未经允许不得转载。

如果你对C语言、网站制作等技术没有什么了解,你可以查看这篇文章。无论你是唱歌的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。只要你平时上网,你看完这篇文章之后,相信你一定能够对HTML5有一个基本的认识。

HTML5是做什么的?

  极其简单的概括:用于实现我们能够看到的所有网站,但是不涉及到数据层面(也就是负责将一张设计好的网页图片(设计师的工作),用代码实现出来,在一个地方放置个块,给一个块设置颜色,调整字体大小,让图片动起来等)。

HTML5的由来:

  不熟悉HTML5的人,可能会很熟悉一个2005年以前常用的词语——网页设计与制作。

  随着行业的发展,网站的制作越来越受到了人们的重视,社会化分工越来越明细。在2005年,“WEB前端开发工程师”这个词语开始出现在各个一线城市。2008年,HTML5横空出世,2009年HTML5这个全新的词语在北京的一些顶尖级公司出现,2012年,逐渐的普及开来,2014年迅速发展。

HTML5的基本组成

HTML5 = HTML + CSS + JavaScript

HTML指的是结构

CSS指样式

JS即JavaScript,指的是行为

  关于结构、样式、行为的理解

  结构——在整个网页中有标题,有列表,有图片等。

  样式 —— 标题文字的字体大小、颜色、字体;图片的大小;某个块的背景色或背景图等。

  行为——在网页上四处飘动的广告;图片滚动;浏览淘宝时鼠标移动到商品时,放大商品的效果等。

  容易弄混的概念

HTML5移动端的功能和应用程序。

  对于苹果手机中的应用程序,属于iOS开发,语言是OC;对于其他安卓系统的手机,需要使用JAVA语言进行开发。HTML5能够做的是移动端的网页以及微信平台中的移动端网页。

  前端后台的区别

  无论HTML5还是iOS,在整个网页开发流程当中,前端(HTML5)开发工程师,主要负责的是“前台页面制作”,“网站测试”,“修改”三个部分。

  

HTML5 与 网页设计与制作 的区别

  原有的网页设计与制作,主要针对PC平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客——PhotoShop、Flash、Dreamweaver。然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰,原因主要有四:

  一、网页设计与网页制作是两个完不同的领域,一个由美感主导,另一个则需要逻辑思维主导。对于开发人员来说,如果将宝贵的精力分散到两个不同的行业中,最后通常两方面都是半斤八两,没有实质的竞争力;

  二、网页设计与制作,这一职业中的制作,指的是网页的结构与样式(即HTML+CSS),而当前网站中JavaScript已经占据了极大的比重,如果还停留在原有的结构和样式中,发展空间会变得很小;

  三、网页设计与制作当中的结构实现,通常采用的是table布局;而WEB前端开发工程师、HTML5当中结构的实现,采用的是DIV+CSS方式的布局,因此,Dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而Flash,在与HTML5的大战当中战败,当前已经退出了移动端以及电视平台的市场争夺,在PC平台也越来越少。转言之,Flash在网页制作的领域里已经江郎才尽~原来的网页三剑客只剩下一个PS,在前端工作的要求中,需要掌握基本的切图即可;

  四、移动互联网的飞速发展,也使得HTML5全栈开发的地位迅速提升。移动设备有其特殊的开发要求,原有的网页设计与制作,早已无法满足开发的需要。

  

北京爱创课堂原创作品:2016年10月

官方网站http://www.icketang.com/?sxt140

时间: 2024-10-05 04:01:38

0基础:教你看懂HTML5的相关文章

教你看懂Code128条形码

首     页 条码控件 条码技术 条码新闻 合作伙伴 联系我们 常见问题 电话:010-84827961 当前位置:条形码控件网 > 条形码控件技术文章 > >正文 教你看懂Code128条形码 发布时间:2014-10-28 Code128码分成三类,即128A.128B.128C.它们的区别就是对应的字符表不一样. 那么Code128码到底怎么读呢?请看下面的图: 从左往右是黑白相间的条形码,黑的叫“条”(B),白的叫“空”(S). 如果你仔细看,条和空都有4种不同的宽度.我们将它

如何教你看懂复杂的正则表达式

[前言] 1.此文针对,正则表达式的初学者,老鸟请飘过. 正则表达式的初学者,常遇到的情况是,对于相对复杂一点的正则表达式,觉得很难理解,很难看懂. 2.此文目的,之前你看不懂,看了此教程后,就基本掌握了,看懂复杂正则表达式的思路. 这样就可以通过自己的能力,一点点把复杂的正则表达式,一点点拆分,一点点分析,知道完全理解. 3.在看此文之前,肯定需要你本身对于正则表达式,已经有了一些基本的基础, 比如知道点’.’表示任意字符,星号’*’表示0或多个之类的含义,这样才有看此文的基础. 关于正则表达

LoRaWAN与LoRa的基础知识简介 教你看懂两者的区别

在物联网技术快速发展的今天,NB-IoT.LoRa.SigFox等技术名词经常进入我们的视野中,对于刚刚接触物联网领域的人来说,在一大堆名词面前可能会混淆.面对类似于LoRa和LoRaWAN这样容易混淆的名词,其实只要系统梳理一下就可以发现其中的区别.今天我们就来看看LoRaWAN与LoRa两者的区别: 总体而言,LoRa仅包含链路层协议,并且非常适用于节点间的P2P通信:同时,LoRa模块也比LoRaWAN便宜一点: LoRaWAN也包含网络层,因此可以将信息发送到任何已连接到云平台的基站.只

教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子.所以60行乍一看还是很让人吃惊的. 但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码. 总结起来主要是以下三点 1.使用eval来产生JavaScript代码,减小了代码体积 2.以字符串作为

教你看懂Excel密码破解工具结果对话框

Excel文档的密码可谓是Office所有产品中最复杂的,密码类型最多,还涉及密保程度较高的VBA密码.自然而然Excel密码破解工具的结果对话框也是稍微复杂,用户可能会看不懂其中的内容,下面将教你如何快速秒懂Excel密码破解工具的结果对话框. 解读Excel密码破解工具结果对话框 在Excel密码破解工具破解过程结束之后,不管是否破解成功,系统都会弹出密码对话框,对话框上的信息都是对此次密码破解结果的展示,破解成功的结果对话框如下图所示: Excel密码破解工具结果对话框的第一部分是密码区,

一个故事教你看懂什么是数字证书,它的原理是什么?它的作用是什么?

原创地址:http://www.cnblogs.com/JeffreySun/archive/2010/06/24/1627247.html 1.基础知识 这部分内容主要解释一些概念和术语,最好是先理解这部分内容. 1.1.公钥密码体制(public-key cryptography) 公钥密码体制分为三个部分,公钥.私钥.加密解密算法,它的加密解密过程如下: 加密:通过加密算法和公钥对内容(或者说明文)进行加密,得到密文.加密过程需要用到公钥. 解密:通过解密算法和私钥对密文进行解密,得到明文

教Alexa看懂手语,不说话也能控制语音助手

Alexa.Siri.小度--各种语音助手令人眼花缭乱,但这些设备多是针对能力健全的用户,忽略了听.说能力存在障碍的人群.本文作者敏锐地发现了这一 bug,并训练亚马逊语音助手 Alex 学会识别美式手语.项目发布之后受到社交媒体的热捧.本博文将介绍项目的底层技术以及如何使用 TensorFlow.js 构建该系统. 数月前的某个夜晚,我躺在床上时,一个念头闪过我的脑海--「如果语音是计算接口的未来,那么那些听不见或看不见的人该怎么办?」我不知道究竟是什么触发了这个想法.我自己能听.能说,周围也

教你看懂GERBER中的钻孔(.txt)文件

PCB在制作的时候也会导出相应钻孔的坐标位置,但是发现网上很少有关于这方面的资料,而一些项目中,可能就会用到钻孔的坐标信息,今天就抛下砖. M48 ;Layer_Color=9474304  % 图层颜色  数值转换成十六进制就是我们熟悉的color值 ;FILE_FORMAT=2:5     %数据格式,5位整数,2位小数,整数部分可能会出现2位,3位,4位,5位,小数部分只能是2位. INCH,TZ                         %单位inch ;TYPE=PLATED  

教你看懂 OpenStack 日志 - 每天5分钟玩转 OpenStack(29)

instance 从创建到删除的整个生命周期都是由 Nova 管理的. 后面各小节我们以 instance 生命周期中的不同操作场景为例,详细分析 Nova 不同组件如何协调工作,并通过日志分析加深大家对 Nova 的理解. 在研究 Nova 各个操作之前,我们先来学习一个重要的内容:OpenStack 日志.OpenStack 的日志记录了非常详细的细节信息,是我们学习和 troubleshoting 的利器. 日志的位置 我们实验环境使用的是 devstack,日志都统一放在 /opt/st