菜鸟教程html5网页设计,html5 菜鸟教程

http://www.itjxue.com  2023-01-09 02:23  来源:未知  点击次数: 

菜鸟教程-HTML

!DOCTYPE html声明为html5文档,有助于浏览器正确显示网页

html元素是html页面的根元素

head元素包含了文档的元数据,如定义网页编码格式

title元素描述了文档的标题

body元素包含了可见的页面内容

h1元素定义一个大标题

p元素定义一个段落

注:在浏览器的页面上使用键盘的F12按键开启调试模式,就可以看到组成标签

“HTML 标签”和“HTML 元素”通常是描述同样的意思,但是严格来说,一个HTML元素包含了开始标签和结束标签。只有body区域才会在浏览器中显示。

标题是通过h1-h6标签来定义的,字号逐渐减小。

HTML链接是通过标签a来定义的,在href中指定链接的地址。

图像是通过img来定义的,图像的名称和尺寸是以属性的形式来提供的。

HTML文档由HTML元素定义。

html5零基础入门教程

1、离线存储

HTML 5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存”的离线存储功能,因此即使当用户离线,浏览器仍然能够访问到它所需的文件。这些文件可以是HM, CSS,Javascript或者其它任何网页运行所需要的文件。

2、拖拽功能

HTML 5提供了可以用来设计交互应用程序的本地拖拽功能,通过这个特性你可以拖动任何元素然后把它放到你想放到地方。

3、地理位置定位技术

HTML 5的地理位置定位API可以让你与所信任的网站分享你当前的位置信息,当然,隐私问题是这特性所主要考虑的,W3. org声明:浏览器在没有用户许可的情况下不允许私自向网站发送用户的地理位置信息。

比如一位用户使用Firefox浏览器访问了一个实现地理位置定位技术的网页,浏览器会向用户询问是否共享他的地理位置信息,如果用户同意,Firefox会收集附近无线接入点和访问者IP地址信息,并把这些信息发送到默认设定的Google地理位置服务,处理之后的位置信息将会发送给用户访问的这个网站。

4、音频和视频

当前的HML缺少在页面中嵌入多媒体文件的特性,因此多媒体文件的嵌入需要使用各种的插件。比如FLASH被广泛地用来嵌入音频和视频文件。现在可以非常方便地使用HTML5提供的audio和video标签,而不用任何插件。

5、表单输入

HTML5提供了几个新的表单input类型,像弹出日历,调色板,数字输入框等等。这些可以创建拥有更好的输入控制和验证的高效表单。

如何用HTML5制作网页

现在以HBuilder工具编写为例:

1. 打开此工具,在项目管理器中右键单击创建一个web 项目

2.右键单击项目名称,新建一个HTML文件----form01.html

!DOCTYPE html

!--

?? ?作者:offline

?? ?时间:2017-01-06

?? ?描述:form表单

?? ?

?? ?在form标签中,有两个经常使用的属性

?? ?action:表单提交服务器地址

?? ?method: 表单提交的方法/方式----get/post

?? ???????????????? 其他提交方式---put delete

?? ???????? 提交方式----get(默认的提交方式)

?? ???????? 1.请求的参数放到地址栏中

?? ???????? 2.不安全

?? ???????? 3.存在缓存

?? ???????? 4.传输数据的大小收到限制

?? ???????? 提交方式----post

?? ???????? 1.请求的参数放到http协议中

?? ???????? 2.相对安全---账号密码等信息不会放到地址栏中

?? ???????? 3.没有缓存

?? ???????? 4.传输数据的大小限制较小

?? ????????????? 修改成post之后,可能会出现错误信息。

?? ?input标签:定义输入字段,用户可在其中输入数据。

?? ??????? 属性:

?? ??????? type 指示 input标签的类型,默认的是text

?? ???????????????????????? 按钮类型: 普通按钮 button 重置按钮 Reset? 提交按钮 submit

?? ??????? value 定义要显示的文本。

--

html

?? ?head

?? ??? ?meta charset="utf-8"

?? ??? ?titleform表单1/title

?? ?/head

?? ?body

?? ??? ? form action="" method="post"

?? ??? ? ?? ?input type="text" name="username" value="zhangsan" /

?? ??? ? ?? ?input type="submit" value="提交" /

?? ??? ? /form

?? ?/body

/html

3.查看此网页是不是HTML5,主要看表头

4.HTML5新增了很多新内容,具体可以查看API,例如:在网页中嵌套音频/视频文件的格式

html5菜鸟教程零基础好学吗?

以前我们都说会者不难,难者不会,其实不能以偏概全,对于从未接触过html5的小白来说,首先面对的是一门陌生的语言,那么相比其他后端语言,它的门槛相对来讲是比较低的,容易上手,当然,这不意味着我们可以松懈,还是要脚踏实地,练好技术才是根本

(责任编辑:IT教学网)

更多

推荐ASP.NET教程文章