2小时入门html5 新手教程

HTML5入门篇

HTML 全称：HyperText Markup Language 超文本标记语言。所以html严格来说不算是一种编程语言，只是一种标记语言。对初学者来说没有任何门槛要求。

学习HTML5所需要的软件：Visual Studio Code、谷歌浏览器。
接下来就进入HTML5的学习吧

HTML的组成：元素

HTML由多个HTML元素组成。

什么是元素呢，我们在网站上能看到的文字、图片、视频、超链接等，都是通过元素实现的。也就是说：元素实现了我们要展示在网页中的内容。

元素的书写格式：例如：表示文本段落的元素p
他的书写格式：

 <p>所要展示的文本内容</p> 

可以看到 一个p元素由三个部分组成。首先是

，我们称之为起始标记/标签。中间则是元素内容，即我们需要展示到网页上的内容。最后

则是结束标记/标签。大部分元素的书写格式都是由这三大部分组成。

空元素：这类元素没有结束标记和元素内容，仅由起始标记组成，单依然有内容展示。
例如：添加图片的元素img 书写格式：

   <img src=""> 

元素的属性

那么没有元素内容的img标签怎么展示内容的呢？ 可以看到img起始标记中有一个src=“”，称之为元素的属性，一个元素可以有多种不同的属性，而属性决定了元素的行为表现。 src为属性名 后面**“”内的内容为属性值**，这里属性值需要填写图片的链接地址，这样图片就可以展现到页面中了。 类似的空元素还有一些，可以自行去查阅。

元素的嵌套

元素嵌套：一个元素可以嵌套另一个元素。
例如：页面中的一个区域div内有3个段落，每个段落中有一个可点击的超链接。
书写格式：

   <div>
           <p>段落内容<a herf="#">了解更多</a>
           <p>段落内容<a herf="#">了解更多</a>
           <p>段落内容<a herf="#">了解更多</a>
   </div>

嵌套的形式在书写网页中是很常见的，但是嵌套的方式要符合逻辑，例如区域嵌套段落。如果是一个段落嵌套一个区域，那么就会显得不合理。

W3C

W3C全程：The World Wide Web Consortium
W3C是一个国际组织，是一个专门为HTML制定相应的规则与规范的机构。

HTML的创建

html的文件格式为：index.html
其中index可以随意更改，后缀html不可更改

打开VS code创建好一个html文件之后
在代码书写区域，需要先添加部分基础代码。 在VS code中，只需在英文状态下输入! 按下回车即可。

输入完成后可以看见html中出现了部分代码。
首先是DOCTYPE html 文件类型：html

然后有一些标签：head、meta、title、body
我们书写的内容都放在body内

在这里给大家介绍一些常用的元素：

   a元素 <a herf="">元素内容</a> 超链接
   
   div元素<div></div>用于划分区域的元素
   
   p元素<p></p>文本段落元素
   
   h1~h6元素<h1></h1>标题元素
   
   img元素<img src="">图片元素

学会以上五种基本元素后，我们已经可以开始书写一些有简单文字图片内容的页面了。

注释

在我们书写html代码过程中，需要为我们所写的代码添加注释，这是至关重要的。

注释有什么作用呢？
在我们开发一个软件或者网页的过程中，有些时候需要我们回过头来修改一部分内容，为了方便我们快速的找到对应内容，就需要为代码添加注释。
当我们的网页或软件开发完成之后，在网页的使用过程中，需要修改网页中的部分内容：如图片文字等。并且当网页出现问题，维护人员负责修复我们的网页，所以为了让维护人员和开发人员能够准确高效的找到修改维护的地方，我们需要添加html注释。一个优秀的作品，html注释是必不可少的。

html注释的书写格式：<！-- 注释内容 -->
在我们html开发中，为了提高我们的开发效率，在VS code中设有注释的快捷键：ctrl+？
通常在我们划分一个区域的时候，会添加一个注释，描述接下来是哪一部分的区域。

区域划分

在我们开发一个网页的时候，一个网页会划分很多个区域，那么如何规范合理的来划分网页中的区域呢？

首先，一个网页会划分为三个大块：

   顶部板块：放置网站导航以及logo、用户登录的区域。
   
   中间内容板块：我们需要展示在网页上的所有主题内容的区域。

   底部板块：一些不是很重要的内容、例如版权信息、备案号、联系我们的内容区域。

然后每个大块中，会有不同的区域，而每个区域也需要一一划分。

划分区域我们就需要用到相应的标签。每个区域都是一个标签。在刚才的介绍中我们知道了划分区域所用的标签是div。但是当我们用div来划分整个页面的区域时，会发现我们会写很多个div。当div太多时，就不方便我们开发人员和维护人员的修改。并且整个网站的评分也会降低。

为了避免这种现象，我们划分区域会尽量用到语义化标签。

语义化标签

语义化标签：顾名思义，就是标签名带有相应含义的标签。
在html5中，为了使我们书写的代码更规范，W3C在html5中新增了一些用于区域划分的html标签。
下面为大家一一介绍：

   header标签：一个页面的顶部或页面内某个区域的顶部。

   footer标签：一个页面的底部或者页面某个区域的底部。

   article标签：页面中主题内容的区域。

   aside标签：侧边栏、页面中主题内容周围附加的区域。

   section标签：某个章节、某个主要内容中的一个部分。

   nav标签：导航标签，只用于导航区域。

在我们网页开发的过程中，应该尽量的使用语义化标签，方便理解。并且语义化标签需要根据语义来合理规范的使用。

学习以上内容后，我们已经可以写一个简单的网页了，并且划分出网页的基本结构。

然而用html代码书写出来的网页和我们平时所看见的网页有很大的区别。在后面我们需要用到CSS来更改网页的外观样式，使网页变得更美观，更符合要求。