H5基本开发1——（H5简单概述）

html概述

• HTML指的是超文本标记语言Hyper Text Markup Language，是一种用于创建网页的标准标记语言
• 标记语言是一套标记标签markup tag
• HTML使用标记标签来描述网页
• HTML文档的后缀名：.html或者.htm，两种后缀名没有区别，都可以使用
• HTML5是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定
• HTML5的设计目的是为了在移动设备上支持多媒体

什么是html开发

HTML
开发就是编写以
.html
结尾的文档，交给浏览器运行

• Html文件就是【普通文本+Html标签】，不同的html标记可以表示不同的效果
• 目前主要使用html文档传递数据和数据的结构，具体显示依赖于css实现

浏览器本质：特殊的文件查看器，能够对
.html
文档中的特殊字符进行识别，自动渲染

HTML5
并不是革命性的改变，而只是发展性的。而且对于之前
HTML4
的很多标准都是兼容的，所有通过最新
HTML5
标准制作的
Web
应用也可以轻松的跑在老版本的浏览器上。
HTML5
标准中的确是集成了很
多实用的功能比如：音视频、本地存储、
Socket
通信、动画等都是之前应用开发中确实感觉到
Web
端的
鸡肋才得到重视和升级的，相信如果你有相关的经验的话也会很有感触。

HTML5
的目标是：它通过一些新标签，新功能为开发更加简、独立、标准的通用
Web
应用提供了标准。新的标准解决了三大问题：浏览器兼容问题，解决了文档结构不明确的问题，解决了
Web
应用程序功能
受限等问题。

常见的浏览器

实际使用过程中，浏览器的种类繁多，并且统一浏览器还拥有不同的软件版本，因此在开发学习过程
中，如何适配不同浏览器也是我们着重注意的点。

常见编辑器

为了提高开发效率，提供不同的编写工具

前端开发：本质就是编写一个
.html
的文档，通过浏览器执行这个文档。

编写
.html
文档时采用以下的编写工具

1. windows写字板 2. webStrom 3. HBuilderX
2. vscode 5. Atom 6. Sublime Text

HTML开发代码构成 

• 标签不区分大小写 <标签名 属性="值"></标签名>
• 元素可以省略结束标签
• 元素的属性可以省略属性值，例如disabled、readonly
• 允许属性值不使用引号

浏览器验证 

​
<canvas id="ca1" width="200" height="100" style="border:2px solid #ccc;background-color:#eee">当前浏览器不支持全新的画布标记</canvas>
​

可以判定当前浏览器是否支持Html5的新特性，如果执行后显示一个矩形效果，则是支持；否则在页面显示对应不支持的提示信息

HTML部分

• 所谓标记：就是指由一对尖括号扩起来，当中具有特定英文单词的标识 ，<b>abc</b> 给文字加粗显示
• 标记的其他叫法：标签 元素 element

• 单标记 ：例如 <meta> 不能存放内容，多是一些功能性的标记
• 双标记 ：例如 <div> 超文本 </div> 有开始有结束，主要功能是存放内容，可以是超文本，也可以是其他标记

<font color="red">实际开发中，我是通过这些标记符号，在文档中表示图片、视频、音频、文字，只有通过标记，才能帮助浏览器识别</font>

 代码示例

<!-- 双标记 -->
<div>超文本</div>
<!-- 单标记 -->
<img>

CSS部分

<!-- code by lanou -->
<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html部分 -->
<div>红色字体</div>

<style>
/* css代码部分 */
div{
color : red
}
</style>
<!-- html代码部分 -->
<div onclick="fun()">js展示(超文本)</div>
<script>
// js代码
function fun(){
alert("js展示成功");
}
</script>