这篇随笔主要目的有二:
第一:帮助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
4、熟悉html5基本结构
4.1、<!doctype html>
文档申明:告诉浏览器你是用哪个HTML版本写的,此处是HTML5的申明方式,大家可以自己查询下其他版本的申明方式
4.2、<html></html>
告诉浏览器搜索引擎,这个页面是html语言
4.3、<head></head>
HTML结构中的头部,包含标题标签、编码申明以及css
4.3.1、<title></title>
网页的标题标签
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