[华为云WEB前端全栈成长计划]二、初识HTML

举报
TancyJimVonZ 发表于 2020/06/18 00:28:14 2020/06/18
【摘要】 上一章是对互联网,WWW,网站的认识,这一张我们就正式学习HTML。在正式学习HTML之前,我们先来认识认识Web开发。可以简单的理解为我们要修建一个餐厅,前端就是餐厅的外观,餐厅的布局,以及配置餐厅的服务员和与厨师、老板沟通的交互方式等,需要由前端来做,也就是页面的展示,页面和用户的交互,页面的效果,后端就是处理方式,当用户点菜,做菜等流程就要进行相应的工作,类似于点击登录按钮,然后后端就...

上一章是对互联网,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标签表示一个段落。

本章到此为止,下一章介绍常用的标签。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。