2016.3.17HTML入门了解

来源：互联网发布：天干地支日期互算法编辑：程序博客网时间：2024/04/30 22:06

为什么要学习HTML5？

1.从2010年HTML5正式推出以来，它就受到了世界各大浏览器的欢迎和支持，根据世界上各大IT界知名媒体的评论，新的web时代，HTML5的时代马上就要到来。

2.它可以跨平台运行，在PC，Mark，Linux，手机，iPad都可以完美运行。

3.对硬件的要求低。

4.可以代替flash，尤其是在手机端开发。

HTML5是什么呢？

html又称为超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。它不是一种编程语言.

HTML5的新特性：用于绘画的canves标签，用于媒介回放的video和audio元素，对本地离线储存的更好支持，新的特殊内容元素（如article，footer，header，nav，section），新的表单控件（如calendar，date，time，email，url, search），浏览器的支持（Safari，chrome,Firefox,Opera,IE9基本支持了HTML5）。

环境搭建

常用：webstrom,notepad++,eclipse,text sublime,dreamweaver

推荐：Intellij IDEA

进一步了解HTML5

tml文本是由 html命令组成的描述性文本，html 命令可以说明文字、图形、动画、声音、表格、链接等。 html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

　　html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页，早期的网页都是直接用html代码编写的，不过现在有很多智能化的网页制作软件（常用的如frontpage，dream weaver等）通常不需要人工去写代码，而是由这些软件自动生成的。尽管不需要自己写代买，但了解html代码仍然非常重要，了解认识html是什么？是学习网络营销与电子商务的重要技术基础知识。

自己动手建一个非常简单的网页，首先设置电脑显示扩展名方法，打开我的电脑，然后在栏目工具-》文件夹选项-》查看-》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选，然后点击运用确认设置完成。实现建立一个新的文本文件，在桌面新建一个txt文档（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存）在文档里写一些文字，然后将此文件命名为“xxxx.html”。(随便你起一个什么名字,扩展名也可是HTM)。然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。

DIVCSS5帮您理解：
1）、html首先是就是我们常常所说静态网页；
2）、html是以.html或.htm为扩展名的文件（显示网页扩展名）；
3）、html有一定标签代码规则，让内容在浏览器中呈现我们需要的样式；
4）、html可以使用记事本新建，并且以.html或.htm扩展名保存。

Html文件里代码具有一定的规则规律标签与内容组成。通过规定的html结构和内容组成一个完整的Html文件。Html我们可以直接使用IE浏览器打开，查看网页效果。

如果要想在浏览器中显示各式各样的网页，这个时候我们就需要HTML文件（html基本结构+内容+标签组成）和CSS文件（CSS样式）实现我们要求的漂亮各式各样的网页。

这个时候你可能需要了解：
1）、html网页结构
2）、html代码是什么
3）、html常用标签
4）、记事本怎么新建html
5）、开发html工具

HTML结构基础……做一个最简单的网页

以下内容来自DIVCSS5

很多时候学网页制作开发的时候第一看到的印象深刻的就是html或htm后缀结尾的网页，我们把这类网页归结为静态网页，伪静态除外。

那html或htm与其它如php、asp、aspx、jsp等后缀结尾的网页有什么区别呢？
首先，html页面是静态的从头到尾没有程序的执行是纯的html语言，是不经过服务器处理就直接送出给浏览器呈现给浏览者。
而其他后缀的结尾的网页相对来说就是动态网页页面，动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后才由浏览器把服务器处理完的数据程序给用户，而网页内容数据可以随后台数据改变而改变。

那html基本语言机构是怎么样的呢？
先看一下的html结构：

<html>  
<head>  
<title>放置文章标题</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //这里是网页编码现在是gb2312 
<meta name="keywords" content="关键字" />  
<meta name="description" content="本页描述或关键字描述" /> 
</head> 
<body> 
这里就是正文内容 
</body> 
</html>

完整HTML包括html DOCTYPE声明、title标题、head、网页编码声明等内容
最初使用完整的html源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>标题部分-www.divcss5.com</title> 
<meta name="keywords" content="关键字" />  
<meta name="description" content="本页描述或关键字描述" /> 
</head> 
<body> 
内容 
</body> 
</html>

最新完整HTML结构-HTML源代码(推荐)：

<!DOCTYPE html>  
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8"> 
<title>网页标题-www.divcss5.com</title> 
<meta name="keywords" content="关键字" /> 
<meta name="description" content="此网页描述" /> 
</head> 
<body> 
网页正文内容-WWW.DIVCSS5.COM  -DIVCSS5提供 
</body> 
</html>

无论是html还是其它后缀的动态页面其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。
1、无论是动态还是静态页面都是以“<html>”开始，然后在网页最后以“</html>”结尾。
2、“<html>”后接着是“<head>”页头，其在<head></head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面“<title></title>”中放置的是网页标题，可在浏览器最左上看见如图：

TITLE显示位置图

3、接着“<meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述" /> ”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4、接着就是正文“<body></body> ”也就是常说的body区，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。
5、最后是以“</html> ”结尾，也就是网页闭合。

以上是一个完整的最简单的html语言基本结构，通过以上可以再增加更多的样式和内容充实网页。
注意：网页一般的根据xhtml标准都要求每个标签闭合，如：以<html> 开始，以</html>闭合；如果没有闭合如<meta name="keywords" content="关键字" />就没有</meta> 就要<meta 内容。。。 />来完成闭合。

以上就是通俗来讲的最简单的html语言结构，如果需要看更多更丰富的html语言结构，可打开一个网站的网页，然后点击浏览器的“查看”--然后点击“查看源代码”即可看见该网页的html语言结构，这样可以根据此源代码来分析此网页的HTML语言结构与内容。

HTML 的文件的结构图

HTML的学习路径

啊，心好累，今天就这样吧

我做的网页太丑了，太简单，就不放图了。明天再学习。

今天就是简单了解了一下，然后知道了这是个什么玩意儿，我觉得挺好的。

0 0