前言

这个系列是与我学习进度同步，所以不定期更新，若大家想根据自己的进度去学习，可以去w3schools上面去学。
内容我会尽可能说的详细、准确些，若有问题还请大佬指出，欢迎大家一起学习交流。
可以用html在线编辑器实现便捷快速地编码。

什么是HTML?

  • html(Hyper Text Markup Language)即超文本标记语言是世界通用的标记语言，可以创建网页(其中超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。)
  • html能够描述一个网页的结构
  • html由许多的html元素组成
  • html元素可以告诉浏览器该怎么去显示内容

HTML发展史

点我查看
YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Tim Berners-Lee invented HTML
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

HTML长什么样？

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph</p>
    </body>
</html>

在上面这行代码中，有许多的html元素，如<!DOCTYPE html> | <head></head> | <body></body>等等。下面我会给大家详细讲解html文件结构和这些标签的含义和作用。

一个最基本的html文件必须含有以下代码块的内容，这样才算一个结构完整的html文件。

1
2
3
4
<!DOCTYPE html>
<html></html>
<head></head>
<body></body>

<!DOCTYPE html>这行代码始终放在文档的第一行，用来告诉浏览器这是一个html文件。

一个html元素分成了一个开标签和一个闭标签(部分标签是自关闭标签，不需要闭标签，只需要在元素名后面空格再加个/)
<!DOCTYPE html>它下面的就是三对标签
而<html></html>中间的部分分别是<head>标签和<body>标签。

<html>这个元素是一个html网页的根元素

<head>标签内的内容是用来修改网站的属性的，比如你的网站标题、文字编码格式、网站语言等等都是要写在<head>标签里，其中有一个html元素：<title></title>是<head>标签里必须包含的一个标签，<title></title>之间的内容为网站的标题。
(注意：head标签内用来修改网页属性的内容只会被浏览器读取，并不会以任何方式呈现在人们的眼前)

而<body>标签是用来描述页面的，会根据你写的代码以不同形式呈现在人们的眼前

<head>和<body>顾名思义，就是头和身体，大脑用来确定自己的一些相关属性，身体则作为整个网站的主体。

在最开始那个代码块里你会看见<h1>和<p>
其中<h1>是标题标签，一共有<h1>|<h2>|···|<h5>|<h6>这6个，其中数字越大，标题大小越小，其实就是用于区分标题和副标题。形式如下：<h1>大标题</h1>
而<p>标签则是段落标签，写一段文字可以用<p>段落内容</p>表示

以上就是html大致的样子了，如果你觉得掌握不错了，可以点我在线编写自己的html文件并预览
更多关于html基础知识请关注下一篇文章！

Tips

  • html元素不会区分大小写，所以像<h1></H1>这样的标签写法是没有问题的，但严格来讲建议都使用小写
  • 很多网站为了节省几个字符，通常都会把自关闭标签的空格/去掉，这样并不影响什么，但严格来讲建议自关闭闭标签写成这样：<元素名 />，若你想知道具体原因可自行百度
  • .html和.htm本质上没有区别，只是html文件的两种后缀，但建议使用.html作为后缀

footer