建站知识

小白自学HTML5如何从入门到精通

标签:   | 作者:DT范福州网站建设 | TIMES:2018-02-26
小白自学HTML5如何从入门到精通
     很多人想自学程序但是很多人不知道学什么,看到程序繁杂的程序头脑就很大,那今天给大家介绍一款正在流行又很有用的程序,正是html5.那对于初学者如何自学html5.从哪里下手呢?

一, 开始学习啦!

1, HTML5的简单介绍 :

  • 1.1, 什么是HTML5?
    所谓的HTML5就是网页5.0版本的超文本标记语言,是HyperText Markup Labguage的简称,2014年才完成HTML5的标准制定,历时8年. 简单理解其实它就是一个文本而已,只是它是由浏览器负责将它解析成具体的网页内容而已.

  • 1.2, 为什么要用HTML5,使用它的好处是什么?
    HTML5是跨平台的,用HTML5编写的UI界面能够运行在所有拥有浏览器的平台,也就是说,HTML5的运行平台(环境)是浏览器.但是,使用HTML5也有很多缺点:比如,不能使用照相机,不能访问相册等功能.
    1.3, 编写HTML5的框架:

    • sencha-touch
    • phoneGap
    • jQuery mobile
    • bootstrap

目前有三种方式可以开发APP :
1, 原生代码(纯OC)开发APP.
2, 纯HTML.
3, 原生 + HTML.

2 , Web的发展

  • Web1.0

  • 主流技术:HTML+CSS

  • Web2.0

  • 主流技术:Ajax(JavaScript/DOM/异步数据请求)

  • Web3.0

  • 主流技术:HTML5+CSS3

    HTML5亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理
    CSS3亮点: 设计动画 2D变形 N多新特性

3, 网页的组成

网页一般都是由3部分组成的

  • 3.1, HTML :
    HTML的主要功能是搭建内容和整体的结构: 它的格式和xml格式类似,由N个标签(节点, 元素, 标记)组成
  • 3.2, CSS :
    CSS主要的功能是美化UI界面:即网页的样式
  • 3.3, JS(JavaScript) :
    所谓的JavaScript就是脚本语言,主要功能是处理用户和网页的交互效果:比如,处理用户点击鼠标的点击事件

4, 常见的HTML标签

  • 标题:h1、h2、h3、h4、h5....
  • 段落:p
  • 换行:br
  • 容器:div、span(用来容纳其他标签)
  • 表格:table、tr、td
  • 列表:ul、ol、li
  • 图片:img
  • 表单:input
  • 链接:a

HTML5的新特性 :(具体见W3C官网)
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签

5 什么事CSS

  • 1, 什么是CSS?
    所谓的CSS就是网页的层叠样式,Cascading Style Sheets的简称,它的主要功能是决定网页的最终样式,其美化网页的作用.

  • 2, CSS的样式

2, CSS的编辑模式都是以键值对的形式存在的.比如 :
color: red;

background-color: blue;

font-size: 20px;
冒号的左边是属性名,冒号的右边是属性值.

2, CSS的书写形式有3种 :
- 行内样式:(内联样式)直接在标签的style属性中书写

<body style="color: red;">

- 页内样式:在本网页的style标签中书写

<style>

    body {

        color: red;

    }

</style>

- 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

<link rel="stylesheet"href="index.css">

6 接下来我们开始我们的第一份代码编写HelloWorld

8. webStrom中讲解

<!--<!--引出HTML松散的语法-->
<!--hello World!-->
        <!---->
        <!--ewdewqdew-->
        <!--de-->
        <!--deqwdewqwedeqw-->

<!--根标签: html是所有网页的根标签,格式:缩进式-->
<html>
<!--网页的配置信息(注意前后顺序)-->
 <head>
   <!--需要将文字输出格式设置为UTF-8,否则会出现乱码-->
   <meta charset="UTF-8">
   <title>第一个网页</title>
 </head>
<!--网页的具体内容-->
 <body>
     Hello World!
 </body>

</html>-->

  • 总结 : HTML5编写比iOS简单,总之一句话,需要多敲,不敲,神仙也帮不了你拿到高薪!!!
    

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。


HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

最小的HTML5文档

下面是一个简单的HTML5文档:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html>

注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。


HTML5 的改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。


HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储
  • 访问本地文件
  • 本地 SQL 数据
  • 缓存引用
  • Javascript 工作者
  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:


HTML5 使用 CSS3

  • 新选择器
  • 新属性
  • 动画
  • 2D/3D 转换
  • 圆角
  • 阴影效果
  • 可下载的字体
  • 学习html5有没方法?
  • 一、了解HTML5及CSS3的前世今生。这个是基础性工作,去了解页面语言的历史,你就不知道你要学的这个东西究竟是个什么东西。
  • 二、不要死记硬背。HTML的标签有很多,靠死记是记不住的,新的V5版又新加了一些标签,在使用时要注意语义,这个是之前V4版本所不具备的。CSS的属性也有很多,不过CSS相对来说,还是有一定的规律性的,你写起来就知道了。
  • 三、多手写代码。手写代码很重要,可以加强你对各个标签和属性的熟悉,越写越熟悉。初期的时候,可以以页面布局为主,注意浮动和清楚浮动,后期再涉及到页面细节处理,各个浏览器的表现不同,可能也需要写少量的兼容性代码,这也是我们在网页制作过程中遵守的一个过程。
  • 四、不要用Dreamweaver等一切有代码提示的工具。代码提示会害了你的,所有的培训教程中,都会提到这个问题,编辑器可以选择具有代码高亮功能的,其它功能一概都不要有,越简单越好。现在所有的代码编辑器都有代码高亮。给大家推介EmEditor或EditPlus,这两款编辑器界面足够简单,功能也足够强大。
  • 五、知道HTML4、CSS2与HTML5、CSS3的区别。因为这也正是版本更新的,以及新版火的一塌糊涂的原因,明白了这个,你才会知道为什么要学最新版本的网页制作。不多说,网上有很多,一搜一大堆。
  • 六、HTML5与CSS3最为吸引人的地方是什么。当然是他新增的元素和各种操作,以及优异到可以代替Flash的动画功能。动画功能需要学习有一些编程的能力,你的编程能力有多少,决定着你在H5动画上走多远。
相关新闻
首页 | 网站制作 | 网站模板 | 定制设计 | 建站知识
高端网站设计咨询156-5917-6979