IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

现在学习HTML5的方式

目前HTML还处于HTML4与HTML5之间的过渡使用阶段。移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题,以及开发人员对HTML5新技术需要一段时间了解和熟练,所以学习HTML必须兼顾这两个版本。可以按版本升级的方式,先学习HTML4的技术,再延伸学习HTML5新增加的内容。而HTML是一个不断变化的标准,不管是哪个版本都属于HTML技术,所以本书直接学习HTML5的标准,当然遇到与HTML4变化较大的地方也会重点指出。

简单HTML实例制作

学习使用HTML制作网页,最好、最快捷的方式就是边学边做实验,那么让我们建立一个简单的范例吧,非常容易。因为网页文档是纯文本文件,所以只需要两个工具即可:一个是文本编辑器,另一个是浏览器。下面介绍一个简单的HTML实例制作步骤,所有HTML页面的制作都可以参考同样的过程。

第一步:打开文本编辑器(推荐Notepad++,Linux系统用户可以使用vi)。记住,如果你在使用比较复杂的文字处理器,就应该用“纯文本”或“普通文本”来保存。

第二步:输入页面的主体标记。每个HTML页面都要包含这些主体标记,代码如下。

第三步:将它命名为“xxxx.html”(随便你起一个什么名字,扩展名也可以是.htm)。例如,mypage. html。

第四步:使用浏览器直接打开这个文件,你会看见自己做得最简单的页面,如图所示。

图 第一个HTML实例演示

如果希望将该页面发布到WWW上,让任何人都可以访问,就需要将其存放到Web服务器的文档根目录下。然后在客户端浏览器(Chrome)的地址栏中,通过输入该文件的URL进行访问,例如http://localhost/mypage.html。页面的显示内容和在本机中直接使用浏览器打开的结果相同,都是通过浏览器解析同样的HTML代码后输出的结果。

原文地址:https://www.cnblogs.com/itxdl/p/11570409.html

时间: 2024-10-21 19:00:02

IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作的相关文章

IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具

如何选择开发工具 有许多可以编辑网页的软件,事实上你不需要用任何专门的软件来建立HTML页面,你所需要的只是一个文本编辑器(或字处理器),如Office Word.记事本.写字板等.制作页面初学者通常都会选择一个集成开发环境(IDE),例如Dreamweaver,入门快.见效快,在不知不觉中已经完成了页面制作.但是随着学习的深入,你就会发现步入了一种窘境,因为过分的依赖IDE导致我们不清楚其实现的本质,知其然但不知其所以然.特别是页面出现BUG时,不用工具你便手足无措,更不用提如何进行页面优化以

IT兄弟连 HTML5教程 HTML5的基本语法 了解HTML及运行原理

了解HTML HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言.我们在浏览网页时看到的一些丰富的影像.文字.图片等内容都是通过HTML表现出来的.用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台,一直被用作WWW(万维网)的信息表示语言.对于网站软件开发人员来讲,如果不涉及HTML语言是不可能的. Ø 所谓超文本,是因为它不仅是可以加入文字的文本文件,还是可以加入链接.图片.声音.动画.影视等内容的文本文

IT兄弟连 HTML5教程 HTML5的靠山 W3C、IETF是什么

无规矩不成方圆,软件开发当然不能例外.Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准.Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循,开发者一样要遵循相同的标准.而似乎和Web相关标准的制作组织机构很多,例如W3C.IETF.ECMA和  WHATWG等,哪些是我们需要了解的?需要掌握什么信息?都在本节详细介绍. W3C是什么 W3C创建于1994年,W3C是万维网(World Wide Web)联盟的

IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线

IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容

为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几方面进行了兼顾,确保与之前版本的HTML达到兼容.在下面示例中,将本节介绍的几个HTML5新应用方法集成在一起使用: 可以省略标记的元素 元素的标记分为三种情况:不允许写结束标记的元素,可以省略结束标记的元素和开始标记结束标记都可省略三种类型.不允许写结束标记的元素是指不允许使用开始标记和结束标记将元素括起来的形式,例如,换行标记正确的书写方式为“<br/>”,而“

IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素. 1  <datalist>元素 <datalist>元素规定输入域的选项列表.<datalist>属性规定form或input域应该拥有自动完成功能.当用户在自动完成域中开始输入时,浏览器应该在该域中显示的填写的选项.Internet Exp

IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1

HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可以在所有的主浏览器中使用它们,即使不被支持,仍然可以显示为常规的文本域.HTML5 Input类型如表. 表  HTML5 Input类型 1  email email类型用于包含e-mail地址的输入域,在提交表单时,会自动验证email域的值,用法如下: 上述代码验证了email输入框的邮箱格式,若出错会有提示.效果如图1所示: 图1  email的输入类型 2 

IT兄弟连 HTML5教程 HTML5表单 小结及习题

小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架.HTML5新增表单元素有<datalist>.<keygen>和<output>.<datalist>元素规定输入

【HTML5 1】39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<v