A095_Html5入门

目录

      • 1.内容介绍
      • 2.知识回顾
        • 2.1.学习过哪些前端的内容
        • 2.2.问题分析
        • 2.3.小结
      • 3.HTML5
        • 3.1.什么是HTML5
        • 3.2.为什么要学习HTML5
        • 3.3.新功能
        • 3.4.兼容性
        • 3.5.文档结构
        • 3.6.语义标签
        • 3.7.表单增强
          • 3.7.1.新的Input类型
          • 3.7.2.新的表单元素
          • 3.7.3.表单属性
        • 3.8.Canvas
          • 3.8.1.Canvas元素
          • 3.8.2.获取绘制上下文对象
          • 3.8.3.直线
          • 3.8.4.矩形
          • 3.8.5.圆形
        • 3.9.音频和视频
          • 3.9.1.视频播放
          • 3.9.2.音频播放
        • 3.10.Web存储
          • 3.10.1.sessionStorage
          • 3.10.2.localStorage
        • 3.11.小结
      • 4.课程总结
        • 4.1.重点
        • 4.2.难点
        • 4.3.如何掌握?
        • 4.4.排错技巧(技巧)
      • 5.课后练习
      • 6.面试题
      • 7.扩展知识或课外阅读推荐(可选)
        • 7.1.扩展知识
        • 7.2.课外阅读

1.内容介绍

1. Hbuilder入门;(掌握)
2. HTML5;(掌握)

2.知识回顾

2.1.学习过哪些前端的内容

传统:Html+css+js+ajax+jquery+js(高级)+bootstrap+jquery easyUI+html5
Vue技术栈: nodejs,npm,webpack,vue,vuecli,elmentui

2.2.问题分析

① 前端开发都用过什么软件?
记事本、Eclipse、EditPlus、Dreamweaver,Hbuilder、vscode,WebStorm
其中,前端开发利器Hbuilder应用面非常广。
② Hbuilder安装与入门
Hbuider是一个绿色工具包,解压缩就完成安装。
A095_Html5入门_第1张图片
一直打不开,在任务管理器中,结束hbuider的进程,重新启动就ok。
打开软件后,可以创建项目、创建html,css,javascript,创建目录
A095_Html5入门_第2张图片
常用快捷键
L Enter 导入css
S 2 Enter导入js
启动html
选择各种浏览器,如果要想在当前浏览器中运行,ctrl+r:

快速生成代码:如输入table 可以快速生成表格代码
快速导入css:如输入link可快速导入css
快速导入js:如输入secript可快速导入js

2.3.小结

把java项目导入Hbuider中,两个工具引用的是同一套代码,Hbuider中修改以后,eclipse中自然就修改了。

3.HTML5

3.1.什么是HTML5

HTML5是新一代的HTML,是HTML中的最新版本,目前是前端的前沿技术。

3.2.为什么要学习HTML5

1、强化了Web网页表现能力。除了可以绘制图形外,还可以直接在网页中播放视频和音频(HTML4中需要flash插件,才能播放视频和音频,关键是flash容易崩溃,而且漏洞很多);
2、支持本地数据库等Web应用的能力;
3、HTML5容错性更很高(例如:标签未正常的关闭、属性的引号问题等),HTML5是向上兼容的,这保证使用HTML5也可以在低版本浏览器中正常显示。
4、HTML5是近十年来Web标准发展而生的产物。 和以前版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台。
5、HTML5对移动端兼容性非常好,所以手机网站开发必备。

3.3.新功能

新元素(新标签)
新属性
完全支持 CSS3
视频和音频
2D/3D 制图
本地存储
本地 SQL 数据
Web应用

3.4.兼容性

浏览器兼容HTML5评分网站:http://html5test.com/,分数越高,兼容越好,但是手机浏览器中对HTML5兼容良好,因为手机中没有IE浏览器。

注意点:
现代的主流浏览器都支持 HTML5,非主流不支持(IE6,7,8)。
此外,所有浏览器包括旧的和最新的,对无法识别的元素会作为行内元素自动处理。
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级元素。
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

实例
header, section, footer, aside, nav, main, article, figure {
display: block; /* 块级元素 */
}

3.5.文档结构

浏览器兼容HTML5
HTML4文档结构:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>文档标题title>
	head>
	<body>
		内容。。。。
	body>
html>

HTML5 :文档声明,告诉浏览器这个文档是一个HTML

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
DOCTYPE html> 
HTML5文档结构: 
DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>文档标题title>
	head>
	<body>
	文档内容......
	body>
html> 

3.6.语义标签

HTML中最核心的部分就是标签,在新一代HTML5中新增的很多新的标签,这些标签都附有语义。
语音标签代表了某种含义,但是没有具体的功能,一个语义元素能够清楚的描述其意义给浏览器和开发者。看到标签就知道它是干嘛的了。比如2020年9月15日是一个时间,那可以通过
2020年9月15日把他包起来代表这是一个时间,但是标签没有实际的功能。

无语义元素实例:

- 无需考虑内容.
语义元素实例:
, , and ,
    - 清楚的定义了它的内容.

    案例:HTML4使用div构造我们的网页:

    <div class=”header”>
    	头部
    div>
    <div class=”content”>
    	内容
    div>
    <div class=”footer”>
    	脚部
    div>
    

    而HTML5中使用语义标签构造我们的网页:

    <header>
    	头部
    header>
    <article>
    	主体
    article>
    <footer>
    	尾部			
    footer>
    

    问:比较HTML4与HTML5两种写法?
    答:结构上面来看都一样,html4中统一使用div来定义网页结构,而html5使用了语义标签来定义我们的网页结构,使我们的文档更加清晰,也就是说当浏览器或开发者看到

    标签的时候就知道这个标签里面装的是什么内容。

    注意:语义是不是让我们编写的HTML文档更加清晰明了,但是然并卵,现在连w3c的官方网站都还没有使用。
    1 流行起来需要一个过程
    2 标签太多,导致开发者没法快速选择。

    标签			描述
    
    定义页面独立的内容区域。

    3.7.表单增强

    Form标签
    Form的表单项

    3.7.1.新的Input类型

    HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

    Color  			颜色选择器
    Date  		 	日期选择框
    Datetime		日期时间选择框
    datetime-local	日期和时间 (无时区)选择框
    email			电子邮件
    month  			月份选择器
    number 			数值的输入域
    range  			区间选择器
    search 			搜索框
    tel    			电话号码
    time   			时间选择框
    url    			url地址
    week   			周和年选择框
    

    例子:

    <form>
    	颜色:<input type="color" /><br />
    	日期:<input type="date" /><br />
    	日期时间:<input type="datetime" /><br />
    	日期时间(本地格式):<input type="datetime-local" /><br />
    	email:<input type="email" /><br />
    	月份:<input type="month" /><br />
    	
    	数值:<input type="number" max="100" min="1" /><br />
    	
    	区间值:<input type="range" min="0" max="100" step="1" /><br />
    	搜索框:<input type="search" /><br />
    	电话:<input type="tel"  /><br />
    	时间:<input type="time"  /><br />
    	url地址:<input type="url"  /><br />
    	周和年:<input type="week"  /><br />
    	<input type="submit" value="提交" />
    form>
    

    注意点:
    虽然html5为我们提供很多新的输入框类型,但是这些新的类型在不同浏览器下面表现形式也不同,并且有浏览器默认验证功能,但一般我们需要自定义验证规则,所以我不建议各位使用,了解即可。

    3.7.2.新的表单元素

    HTML5 有以下新的表单元素(了解):

    <datalist>
    <keygen>
    <output>
    

    :元素规定输入域的选项列表。

    你可能感兴趣的:(文档,java,H5,html5)