十分钟带你入门HTML、HTML5网页制作

最新推荐文章于 2024-10-18 19:19:52 发布

gopyer

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量960

点赞数 34

分类专栏：十分钟入门系列文章标签： html html5 前端

本文链接：https://blog.csdn.net/fuxily/article/details/139479763

版权

十分钟入门系列专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

概览

HTML是一种超文本标记语言，它是万维网（World Wide Web，简称Web）的重要组成部分之一。万维网是1989年Tim Berners-Lee（蒂姆·伯纳斯-李）发明的一个基于Internet的一个文档系统。这个系统包含了基于TCP\IP协议的HTTP协议（用于在Internet上传输文档）、URL统一资源标志符（用于在网络中定位文档位置）、HTML超文本标记语言（用于描述文档）。“互联网”和“万维网”这两个名词经常被混用。然而，这两个名词的意思并不相同。互联网是一个全球互相连接的计算机网络系统，而万维网是由超链接和统一资源标志符连接的文件和其他资源的全球集合。

HTTP的历史

HTML的首个公开描述出现于1991年底的一个名为HTML Tagsd的文件中；
1993年中期互联网工程任务组（IETF）发布首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案（页面存档备份，存于互联网档案馆），由伯纳斯-李与丹·康纳利撰写
在HTML和HTML+的草案于1994年初到期后，IETF创建一个HTML工作组，并在1995年完成"HTML 2.0"
1997年1月，HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本
1997年12月HTML 4.0作为W3C推荐标准发布
1999年12月，HTML 4.01作为W3C推荐标准发布
2014年10月28日，HTML5作为W3C推荐标准发布

一个HTML5入门项目

HTML5是HMLT的最新版本，并且目前已被大多数浏览器支持，所以我们学习直接学习最新版的HMLT5，HTML5也提供了更多更强的功能。下面我们通过一个完整入门项目来快速掌握HTML5的开发。

创建一个文件夹，作为html5 web应用的项目文件夹，方便管理项目所有的源码和资源文件
```
jagitch@4d7a018f5ea9:html-hello$ mkdir html-hello
jagitch@4d7a018f5ea9:workspace$ cd html-hello/
```
准备一张图片、一个音频和一个视频文件，如下所示
```
jagitch@4d7a018f5ea9:html-hello$ ls
demo.jpg  demo.mp4  demo.wav
```

创建一个叫index.html的文件，并输入一下html代码

<!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>HTML5</title>
       <style>
           body{
               text-align: center;
               padding:10px;
           }
           img,audio,video {
               width:100%;
           }
           .audio-panel{
               border: 1px solid #ccc;
               border-bottom: none;
           }
           .audio-panel span{
               display: block;
               margin:20px 0px;
           }
       </style>
   </head>
   <body>
       <header>
           <h1>HTML5的入门演示</h1>
       </header>
       <article>
           <p>
               <img src="demo.jpg">
               <a href="https://blog.csdn.net/fuxily">喜欢我，就关注我吧</a>
           </p>
           <p class="audio-panel">
               <span>周杰伦-霍元甲.wav</span>
               <audio controls>
                   <source src="./demo.wav" type="audio/wav">
               </audio>
           </p>
           <p>
               <video  controls>
                   <source src="demo.mp4" type="video/mp4">
                 Your browser does not support the video tag.
                 </video> 
           </p>

       </article>
   </body>
   </html>

在文件管理器中用鼠标右击index.html文件，选择在浏览器中打开
接着，我们就能看到浏览器打开了如下所示的页面。

HTML源码解析

html是写在一个以.html为扩展名的普通文本文件中，所以我们使用任何文本编辑器就可以进行html5页面的编写。
html文件里面就是一些标签组成的，每种标签都代表一定的语义，并且有一个根标签<html></html>，多数标签都是可以嵌套，外层的叫父标签，里面的叫子标签。
标签一般都是成对出现的，例如<html></html><head></head><audio></audio>等，也有一些是可以单独出现的，如<br><img>等
head标签的语义是表示页面的头部，它不显示内容，但作用很大，可以在它里面使用title标签设置网页标题，可以使用style标签给页面的标签设置样式，可以使用script标签给页面增加交互功能。
body标签是页面的主体，页面所有要显示的内容都包含在它里面。
header标签是html5中新加入的标签，它的语义也是头部，不过它是可视区域的头部，我们可以在里面放导航条等。
h1,h2,h3,h4,h5,h6是不同级别的标题
article标签的语义是代表一块独立的内容，例如一篇文章、页面等。即把它周围的标签都移除它也能不受影响。
p标签的语义是一个段落，例如文章中的段落。
span标签是一个通用的内联标签，就像普通的文本一样，它不会占据一整行。
img标签可以显示一幅图片，每个html标签都由自己的属性，如图片的URL使用src属性指定。
audio标签可以给页面加载一个音频文件，它的属性controls可以给音频显示控制按钮
video标签可以给页面加载一个视频文件。
source标签可以指定audio和video标签的资源地址。

总结

本文首先介绍了万维网和HTML的由来，HTML是万维网的重要组成部分。接着又介绍了HTML的演进，从首次公开到HTML4，再到HTML5，HTML都经过了非常坎坷的阶段，以前的浏览器大战时期，也导致了HTML出现了很多不兼容的问题，好在W3C等标准化组织的努力，最终浏览器基本上都以兼容HTML5为目标，以前那个特立独行的IE浏览器已经一去不复返了，最终会消失在历史的长河中。最后我们以一个入门级别的实例，演示了HTML网页的制作，并逐行进行了讲解，这是一个入门的例子，短短10多分钟，不可能把所有的HTML标签和知识点都讲到，本文的目标就是引导读者如何从零开始动手去制作一个HTML5页面，然后感兴趣地可以去学习一下更多的标签和内容。

每一次点赞，都是你独特的味道。每一次关注，都是我前行的动力。感谢有你，一起成长！