您的位置:时时app平台注册网站 > web前端 > 达牛 简单粗暴,3分钟带你读完HTML5新手教程彩世

达牛 简单粗暴,3分钟带你读完HTML5新手教程彩世

2019-11-03 04:39

一、 web1.0时代的网页制作

网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。

例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。

相信可能大多数人都听过“网页三剑客 Dreamweaver Fireworks Flash”吧,这个组合就是web1.0时代额产物

**18、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?
**
(1)、id选择器( # myid)
(2)、类选择器(.myclassname)
(3)、标签选择器(div, h1, p)
(4)、相邻选择器(h1 p)
(5)、子选择器(ul < li)
(6)、后代选择器(li a)
(7)、通配符选择器( * )
(8)、属性选择器(a[rel = "external"])
(9)、伪类选择器(a: hover, li: nth - child)

作为人人追捧的高薪职业,如果你还不清楚HTML5是什么?今天我们花3分钟,弄明白HTML5究竟是个什么东西。

六、 开发环境

市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

1、浏览器

浏览器在本地也能打开html文件,浏览器就跟解释器一样,从上倒下,从左到右

全球共有五大浏览器厂商,我们主要以chrome为主

ie
chrome
firfox
safri
presto
浏览器内核不同,浏览器渲染引擎不同(后期考虑兼容性问题),其他浏览器都是使用这5款浏览器内核 

2、浏览器历史:

世界最早浏览器,网景浏览器(Netscape )
后来它想做操作系统,动了微软的奶酪,微软就想弄死他,
微软做的也特别的绝情,微软利用windows操作系统的市场占有率,提供了免费浏览器ie,而且windows
操作系统里还必须有

中国最早浏览器ie6,国企内就用ie6,

浏览器不同,解析的标签标准不同,微软太霸道,就不改标准,坚持不更新,后来谷歌和火狐抢占了市场,IE就傻逼了,目前也只有傻逼才用IE。。。

市场越发地混乱,于是w3c(万维网联盟(World Wide Web Consortium,W3C))成立,用来制定大家的统一标准

须知:学前端一半工作在考虑兼容性,目前html5在兼容性方面解决的比较好

3、文件后缀名规范

.htm和.html扩展名的区别

#1、DOS系统(win95或win98)下只能支持长度为3的后缀名,所以老版本的系统一直在用.htm后缀

#2、但在windows后缀长度可以大于3位,所以windows下无所谓htm与html,html是为长文件的格式命名的

#3、如果文件后缀是.htm,毫无疑问,浏览器也可以兼容,但推荐使用.html

*13、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?
*
IE浏览器的内核Trident、
Mozilla(火狐)的Gecko、
google(谷歌)的WebKit、
Opera内核Presto;
png24为的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

HTML5的由来

二、 web2.0时代的前端开发

“前端开发”是从“网页制作”演变而来的。

从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。

在web 2.0时代,网页有静态网页和动态网页。

所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。

web2.0时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver Fireworks Flash”制作的,那是远远不能满足需求。

现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。

所以,处于web2.0时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver Fireworks Flash”,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了

**25、切图工作是UI设计师来做?还是前端工程师来做?
**
对于app工程师,也就是ios和Android工程师,大多由UI设计师来完成切图。对于web前端工程师,也就是PC端、浏览端,大多有web前端工程师自己完成切图。

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

四、 为什么要学习前端开发

我们为什么要学习前端开发,因为我们的课程定位是Python全栈开发,也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习,相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的,在接下来的这个章节我们将一起来学习一下前端部分的内容,

4、针对不同屏幕的响应式,UI设计师该做几套设计图?
只做一套,大多UI设计师会使用iPhone5的尺寸来做一套(640X1136)。那么这种可以适配响应式的各种屏幕的吗?这种在HTML5中通过代码中的媒体查询来实现。媒体查询怎么写?媒体查询的具体写法如下:@media screen and (max-width:640px) { //最大宽度是640px的屏幕宽度 nav li { //nav标签下的li标签设置样式 display: inline; //转化为行元素 }}

2.前端后台的区别

五、 前端开发都有哪些内容

我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

(1)HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

(2)CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

(3)JavaScript

JavaScript是一门脚本语言。

HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

如果我们把前端开发的过程比喻成“建房子”,做一个网页就像盖一栋房子

1、先把房子结构建好(HTML)

2、建好房子之后给房子装修(CSS),例如往窗户安上窗帘、往地板铺上漂亮的瓷砖

3、最后呢,装修完了之后,当夜幕降临的时候,我们要开灯(JavaScript),这样才能看得见里面。

 

我们先用HTML搭建网页结构,这时候默认情况下,字体、字体颜色、字体大小和背景颜色如下图,仅仅使用HTML的文字

彩世界网址 1

然后我们通过CSS修饰一下,改变其字体、字体大小、字体颜色和背景颜色,得到如下的效果图

彩世界网址 2

最后,我们通过JavaScript定义鼠标一个行为,就是鼠标移动到上面的时候,背景颜色会变为深绿色,效果如下:

彩世界网址 3

< img /> <input> <link> <meta> 。

样式 - 标题文字的字体大小、颜色、字体;

  • 一、 web1.0时代的网页制作
  • 二、 web2.0时代的前端开发
  • 三、 Web前端能做什么?
  • 四、 为什么要学习前端开发
  • 五、 前端开发都有哪些内容
  • 六、 开发环境

3、什么叫做响应式?
针对不用的屏幕显示不同的网页布局,比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。

HTML指的是结构CSS指样式

三、 Web前端能做什么?

公司官网(在PC通过浏览器来访问公司网站)移动端网页(在手机上来浏览公司信息、小游戏等)移动端APP(例如:淘宝、去哪儿旅游、携程等)微信小程序(微信最新推出的功能,随用随装,不占用手机空间)。前端开发所学技术由简单到难,所以在很多网站上你会看到“七天入门前端”的视频博客等等,也就是说一星期就学会了HTML CSS。最基本的页面你就可以书写了。

**15、页面重构怎么操作?
**
编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。

HTML5的基本组成

**29、什么时网页三剑客?
**
网页三剑客,是一套强大的网页编辑工具,最初是由Macromedia公司开发出来的。由Dreamweaver,Fireworks,Flash三个软件组成,俗称网页三剑客。
Dreamweaver 是一个“所见即所得”的可视化网站开发工具,主要用于动态网页和静态网页的开发;
Fireworks主要是用于对网页上常用的jpg、gif的制作和处理,也可用于制作网页布局;
Flash主要用来制作动画,后推出Flash平台,之后有极好的前景,再之后就是H5的时代了。

达牛是手机应用学开创者,专注于手机应用开发,参与更多的手机应用项目开发,编程技术当然比大学院校毕业生更牛。转发本文并关注达牛微信号 todaniu 可以免费参加手机应用项目实战。

**23、著名的前端框架都有哪些的呢?
**布局框架:bootstrap、easy UI等。Js动效框架:jquery、angular.js等。

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

  • 可继承: font-size font-family color, ul li dl dd dt;
  • 不可继承 :border padding margin height ;
  • 优先级就近原则,样式定义最近者为准;
  • 载入样式以最后载入的定位为准;优先级为: !important > id > class > tag
    important 比 内联优先级高

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

1、什么是H5?
H5=HTML5,指的是HTML超文本标记语言(HTML)的第五次重大修改,HTML的第五代。HTML5具有的特点:
(1)、语义化的标签:好处是网站加载更快;该标签举例:header、nav、article等。
(2)、增加了音频、视频标签:好处是取代falsh;该标签举例:audio、video。
(3)、canvas标签:好处在浏览器上绘制图形或动画,取代flash。
(4)、支持手机和平板的响应式布局。HTML5的缺点:低版本浏览器支持性不好,比如IE9以下的浏览器不支持HTML5。

行为的理解:结构 - 在整个网页中有标题,有列表,有图片等。

**14、你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏(品)字布局 如何设计?
**
首先划分成头部、body、脚部;
实现效果图是最基本的工作,精确到2px;
与设计师,产品经理的沟通和项目的参与做好的页面结构,页面重构和用户体验处理hack,兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。

图片的大小;某个块的背景色或背景图等。

**19、如何居中div,如何居中一个浮动元素?
**
确定容器的宽高 宽500 高 300 的层。
设置层的外边距
.div { Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%; top:50%; }

彩世界网址 4

17、Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
(1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

JS即JavaScript,指的是行为关于结构、样式、

5、div是什么?在div出现之前做网站用什么布局?
div是网站布局的盒子标签,div出现是table布局,因为table布局嵌套很多,网站加载慢,布局层级不清晰。

行为 - 在网页上四处飘动的广告;图片滚动;

27、UI设计师的工作内容是什么?
(1)、负责软件界面的美术设计、创意工作和制作工作;
(2)、根据各种相关软件的用户群,提出构思新颖、有高度吸引力的创意设计;
(3)、对页面进行优化,使用户操作更趋于人性化;
(4)、维护现有的应用产品;
(5)、收集和分析用户对于GUI的需求。

容易弄混的概念

**24、做一个网页设计师或者前端工程师,平常访问学习的IT网站都有哪些?
**
(1)、W3C shool
(2)、segmentFault
(3)、csdn
(4)、知乎论坛
(5)、博客园

原有的网页设计与制作,主要针对PC平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客——PhotoShop、Flash、Dreamweaver。然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰。其中原因之一就是网页设计与制作当中的结构实现,通常采用的是table布局;而WEB前端开发工程师、HTML5当中结构的实现,采用的是DIV CSS方式的布局,因此,Dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而Flash,在与HTML5的大战当中战败,当前已经退出了移动端以及电视平台的市场争夺,在PC平台也越来越少。转言之,Flash在网页制作的领域里已经江郎才尽,原来的网页三剑客只剩下一个PS,在前端工作的要求中,需要掌握基本的切图即可。

**22、你做的页面在哪些流览器测试过?
**IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT。 非IE内核浏览器:firefox opera safari chrome 。

HTML5 = HTML CSS JavaScript

2、H5为什么这么火?H5是哪一年产生的?H5会火多久?
(1)、因为H5的后台很硬,是谷歌(google)和苹果(Apple)两大巨头公司,谷歌和苹果大力倡导H5的发展,也是H5的忠实的支持者和实践者(IOS Android系统占据手机市场92.36%),H5的产生主要目的也是干掉flash,因为flash是adobe公司的,adobe不是W3C组织的成员之一,苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。
(2)、H5是2014年9月份W3C(万维网联盟,主要有苹果和谷歌公司)组织发布的。
(3)、刷脸时代(这里专指网站用户体验更加美观的时代) 移动端时代(手机 平板),会促使H5会在未来的有更加美好的发展前景,只要有网站,H5就会很火,UI也就很火,H5的发展会让UI更加提高用户的满意度,H5的火爆时代,会促进UI更好发展。
(4)、微信的发展,O2O的促使H5更火。在这里不得不谈微信,如果没有微信,或许今天我们不会这样来讨论H5,微信无意中养成了用户扫码的习惯,并通过公众号的内容生产及分发,以及微信本身已有的庞大的用户群体及社交属性,使基于网页的内容可以快速传播,真正带来了APP即浏览器的时代,取消了输入内容网址的麻烦。以微信为代表的超级社交APP,解决了网页内容浏览及分发的通路。H5或许会没落,但会迎来H6、H7...,只会变得越来越好,所以没必要担心H5会不会死,当下重在实践与积累,至少现在,Html5的影响力,会超出你我的想象,也就意味着H5的好闺蜜UI会一直火下去。

浏览淘宝时鼠标移动到商品时,放大商品的效果等。

7、什么是前端工程师?什么是后端工程师?
前端工程师就是指的做静态网页的工程师:
(1)、广义的前端分为三种:安卓工程师、ios工程师、web前端工程师。
(2)、狭义的前端指的是web前端工程师,web前端工程师指的是做静态的PC端和手机端静态网页的工程师。

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

**26、切图工程师、前端工程师、UI设计师、美工、网页设计师区别是什么?
**
(1)、UI设计师俗称美工,不过UI设计师工作高端、名字大气、工资上档次,不过大多公司都称呼UI为美工,你也不要介意的,不管他们怎么称呼的,反正就是做网站设计图的就OK,别人怎么称呼不重要的了,只要你拿了高工资就是UI设计师了: UI的主要任务是设计。了解用户的意图,分析网站配色,基本布局。绘制出一个网站效果图。 UI需要掌握的知识体系应该包括网页设计,UI(User Interface)用户界面人机交互、操作逻辑、界面美观的整体设计,UED(user experience design)用户体验设计--简单来说就是如何使得网站更加便于交互。
(2)、前端开发:美工在完成设计效果图之后,由前端开发人员将其制作成为适合浏览器查看的HTML页面。由于现在移动互联网的大规模流行,加上各个不同厂商的浏览器的激烈竞争,前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。前端开发需要掌握的知识体系主要是兼容性问题的解决,流畅完美的交互体验。具体到技术细节上就是HTML,CSS,JavaScript,各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。
(3)、后台开发: 前台开发完成之后,就是后台程序员的工作了,相比较前端来说,后台更像传统意义上的程序员。后台的工作简单来说就是网页文件对数据库的增删改查。后台需要掌握的知识体系应该包括,编程基础,基本HTML语言,至少一门主流网页语言(C#,C ,JAVA,PHP等),数据库的操作等等。
(4)、 UI设计师和网页设计师有什么区别? 其实网页设计,分出来有两块,一个是UI设计,一个是web前端。UI设计自然要懂的更多的是PS,FW,AI,CD等制图软件,还有一些比较优秀的网页设计理念,切图等相关知识。 web前端,需要的html css javascript,通过这三个东西把设计图转换成代码。这一步所实现的就是设计图的静态化,也就是变成了网页形式。 网页设计师,是个很泛的概念,不过一般指的会偏重UI设计。稍微关注过网页设计领域的公司,有点规模的,招人都会写得比较详细,例如招UI设计师,或者招web前端工程师。你找工作的时候,都找这些名称比较规范的,因为起码他们会区别职位的不同。一定要找的时候看清楚是UI设计师,不是找前端或者美工的,前端更多的写较高级的代码的,会比设计懂的知识点更多的,美工其实就是淘宝装修店铺或者说简单的PS照片的,就是会玩美图秀秀或者PS简单的绘图就可以的了,UI设计师才是咱们的IT行业“高大上”职位。
(5)、UI设计师:“UI”的本义是用户界面,是英文User和interface的缩写。UI设计师简称UID(User Interface Designer),指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计,是目前中国信息产业中最为抢手的人才之一。UI设计师的特点是:工资高、发展前景好,会一些简单的前端知识代码,做手机端和PC端的网站设计图。

**11、行内元素有哪些?块级元素有哪些?空(void)元素有那些?
**
(1)、CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
(2)、行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p。
(3)、知名的空元素(单标签):

**12、CSS的盒子模型?
**
(1)、两种, IE 盒子模型、标准W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)、盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。

**30、怎么调试网页代码?怎么查看网页源代码?
**
(1)、按键盘上的F12,打开开发者调试工具;
(2)、鼠标右键查看页面源代码。

**20、css的基本语句构成是?
**
选择器{属性1:值1;属性2:值2;„„} 例如:div{margin-top:10px;border:1px solid #ccc}

**28、UI设计师需要会使用的工具的简称都有哪些?
**
以下一些工具的简称,大家应该有一定的了解,以免被问到咱们只知道简称。
(1)、AI (adobe illustrator)基于矢量的图形制作软件
(2)、PS(adobe Photoshop)图像处理软件。
(3)、DW(Adobe Dreamweaver)网页编辑器
(4)、AE(Adobe After Effects)一款图形视频处理软件
(5)、flash(Adobe Flash)二维动画软件
(6)、Axure(Axure RP)快速原型设计工具
(7)、墨刀(MockingBot)移动端原型工具
(8)、Fireworks网页作图软件

**8、什么是静态网页?什么叫做动态网页?
**
(1)、静态网页:没有数据交互的网页,没有数据库参与,没有服务器端数据的加载。比如静态网页就是只有html css JavaScript做成的网站。
(2)、动态网页:有后台数据参与的网页,网页中的数据是从数据库取的,需要有后台逻辑的支持。比如动态网页就是jsp页面(后台语言是java)、asp页面(后台语言是asp.net)。

**21、前端页面由哪三层构成,分别是什么?作用是什么?
**
网页分成三个层次,即:结构层、表示层、行为层。
网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。
标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。
例如,P 标签表达了这样一种语义:“这是一个文本段。” 网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

**9、前端语言有哪些?后端语言有哪些?
**
(1)、前端语言:HTML、css、javascript。
(2)、后端语言(服务器端语言):php、java、asp.net、node.js

*16、为什么要初始化CSS样式。
*
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法就是: {padding: 0; margin: 0;} 。

**10、做一个网站的团队都需要哪些人?
**
(1)、产品经理:设计这个产品,通常就是了解用户的网站需求,画原型图。
(2)、项目经理:通常是对整个产品有一个整理管理和负责,通常是会代码技术的人来构建整个网站的代码框架,以后网站实现的全面管理。
(3)、UI设计师,通过原型图画psd设计图的。
(4)、前端工程师,根据设计图来做静态网页,可能是原生app的IOS和安卓工程师,或者web端的web前端工程师。
(5)、后端工程师,通常就是做java、asp.net、php的工程师来写后端逻辑的工程师。

6、html是什么?css是什么?js是什么?
(1)、html是超文本标记语言,他是做网站时候用的一些文本标记标签,比如div、span等。
(2)、 css是层叠样式表,是做网站的时候给标签来美化网站的样式,比如说background(背景)、color(字体颜色)、height(高度)、width(宽度)等。
(3)、js=javascript是网站中写前后台交互效果、网页动画效果的一种开发语言,比如鼠标点击事件(click)、前后台数据请求(ajax)等。


本文由时时app平台注册网站发布于web前端,转载请注明出处:达牛 简单粗暴,3分钟带你读完HTML5新手教程彩世

关键词: