[华为云WEB前端全栈成长计划]二、初识HTML
上一章是对互联网，WWW，网站的认识，这一张我们就正式学习HTML。
在正式学习HTML之前，我们先来认识认识Web开发。
可以简单的理解为我们要修建一个餐厅，前端就是餐厅的外观，餐厅的布局，以及配置餐厅的服务员和与厨师、老板沟通的交互方式等，需要由前端来做，也就是页面的展示，页面和用户的交互，页面的效果，
后端就是处理方式，当用户点菜，做菜等流程就要进行相应的工作，类似于点击登录按钮，然后后端就要处理登录的逻辑，完成一系列的操作，
一般前端开发的基础为HTML，CSS，JavaScript，然后有JQuery，让JavaScript变得简单，后续还会有Node.js、Vue.js、AngularJS框架。
后端语言比较多，一般常见的有Java，Python，PHP等语言，这些语言用来进行后端开发，同时不同语言也产生了不同的框架，比如Java的Spring家族，Python的Django等框架，
通俗的语言来讲，HTML就相当于我们自己餐厅的布局，CSS就相当于定义了餐厅中桌子凳子的大小模样，这么定义完，网页还是不够灵气，因此使用JavaScript让整个餐厅更生动，让大门旋转，让里面的灯光进行律动。
我们要进行HTML语言的学习，编写，必不可少的就是选择开发工具，目前大多数都在使用VScode，我们这里不多讲。
HTML之所以全部大写是因为它是Hyper Text Markup Language超文本标记语言的缩写，是一种标记语言
标记语言，也称置标语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。[来自360百科]
我们先认为他就是用一个东西标记我们真正要用的数据，比如x=未知数，我们看见x就知道它代表未知数，当然标记的语法不是这种形式在HTML中，在HTML发展的过程中又出现了XHTML，它和HTML的区别如图：
这里我们说一下，我们可能会看到HTML和HTML5，HTML5是HTML的新版本，它对HTML进行了改进和优化，同时增加了一些新标签。具体如图：
下面我结合一个简单的例子说明HTML。
首先进行声明，一个HTML文件大部分都是.html为文件后缀名的文件。它有一些固定的格式：比如如下的代码，其中我们可以明显的看出来<html></html>就是标记，其中title标签中的title是自己键入的，当我们将文件保存为.html文件时，然后打开时(使用浏览器，也是默认的方式)，然后title标签内的文字就会出现在浏览器标签页标题上。<body>标签内的元素都会显示在标签页。
以此图为例，百度一下，你就知道，就是被title标签标记的，而我们看到搜索框，之类的东西就是用body标签内的东西，这里我们觉得美观就是因为里面还有css，JavaScript等的修饰以及图片的作用结果。我们在chrome浏览器中按F12。Elements内就是页面的源代码，进行验证。
因为以下这些代码基本都是固定的，所以在使用编辑器的时候，我们新建html文件，他会帮我们自动生成，但是需要注意不同的编辑器生成的初始代码也不同，但是不影响我们写html。<!DOCTYPE html>标识这是一个html5语言的html文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML</title> </head> <body> <p>html内容</p> </body> </html>
下面的这个例子比较详细：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>从零学习前端</title> </head> <body> <div style="width: 500px; height: 50px;border: solid red;">可以设置宽和高，独占一行</div> <div> 独占一行</div> <div> 独占一行</div> <p>段落1</p> <p>段落1</p> <p>段落1</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <span style="width: 400px;height: 50px;border: solid red;">不能独占一行</span> <span>不能独占一行</span> <span>不能独占一行</span> <span>水的化学元素符号为H<sub>2</sub>O</span> <span>古文常用的注释例如：青莲剑歌<sup>①</sup>李白</span> </body> </html>
我们发现除了和第一个例子出现的<p>标签外还出现了新的标签<div>、<span>、<h1>、<sub>、<sup>标签
其中分别意义为块，行，标题，下标，上标。p标签表示一个段落。
本章到此为止，下一章介绍常用的标签。
- 点赞
- 收藏
- 关注作者
评论（0）