这篇随笔主要目的有二:

第一:帮助web前端初学者入门(编写一个简单的网页)

第二:解除web前端工程师对htm的误解。较为深入的解析html

html简介主要从四个方面进行阐述:

1、网页的组成部分

1.1、结构层(HTML/HTML5)

网页的骨架。我们浏览一个网页能够看到的内容(文字、图片、视频等)都是以html为载体展示出来的。

1.2、样式层(CSS/CSS3)

网页的外衣。起到修饰的作用,比如文字的颜色、图片大小、边框等样式。可以让网页更加好看,提升用户体验。

1.3、行为层(Javascript)

网页的逻辑操作。用户可以对网页进行一定的行为操作,比如鼠标点击时弹出下拉框、表单提交等。

2、什么是html?

通俗的解释: 从第一部分我们也可以看出来,html其实是网页的重要组成部分,是网页内容的载体。所以我们一般说一个网页就是一个html页面。

官方解释:超文本标记语言(Hyper Text Markup Language,简称:HTML),是一种用于创建网页的标准标记语言。

2.1、超文本:超出了文本之外的内容,也就是说不光包含文字,还包含图片、音乐、视频等

2.2、标记语言:其实就是通过某些标记将内容展示出来。这些标记其实就是我们常说的标签,比如p标签、a标签等。

简单的来说,html其实是网页的载体,通过一些标签将内容展示给用户。

3、html的发展史

html到目前为止,共经历了五大版本,所以我们现在用到的就是第五个版本:HTML5

html5单页应用 介绍单页html_html

4、熟悉html5基本结构

4.1、<!doctype html>

文档申明:告诉浏览器你是用哪个HTML版本写的,此处是HTML5的申明方式,大家可以自己查询下其他版本的申明方式

4.2、<html></html>

告诉浏览器搜索引擎,这个页面是html语言

4.3、<head></head>

HTML结构中的头部,包含标题标签、编码申明以及css

4.3.1、<title></title>

网页的标题标签

html5单页应用 介绍单页html_css_02

 4.3.2、<meta charset="UTF-8">

申明编码,告诉浏览器你使用的什么编码。

 4.4、<body></body>

HTML结构中的身体部分,大部分的内容都在这里写。

实例代码:

<!doctype html>
<html>
  <head>
    <title>html5基本结构</title>
    <meta charset="UTF-8">
  </head>
  <body>
    我的第一个网页
  </body> 
</html>

目前为止,你就可以编写一个简单的网页啦!希望能够帮助到你,若对你有所用处,给个赞和关注吧。往后会持续跟新的哦,有什么疑问或建议的都可以扣我啦。

与此相关的详细视频如下:https://www.bilibili.com/video/BV1kE411G7tq