初识HTML(一)基础

HTML介绍

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

站在开发架构的角度,其属于:B/S架构的程序,也就是说客户端就是浏览器,而服务端就是存放HTML的机器。当浏览器要打开一个页面时,会向服务端发送html文件请求,待服务端返回后,然后由浏览器从上至下执解析html代码,中间可能加载到内部css和js代码 或 引入了外部css、js等文件,这些文件的加载渲染页面全部是由浏览器来完成。


什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如

  • HTML 标签通常是成对出现的,比如

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签(但也有部分标签只有开始标签,没有结束标签)

  • 开始和结束标签也被称为:开放标签闭合标签

    <标签>内容</标签>


HTML 文档 = 网页

  • HTML 文档:描述网页
  • HTML 文档:包含 HTML 标签和纯文本
  • HTML 文档也被称为:网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。


HTML网页结构

创建HTML文件后通常会定义以下标签:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>网页标题</title>
  </head>
  <body>
  	<h1>Hello,World!</h1>
  </body>
</html>

DOCTYPE html:声明为 HTML5 文档,有助于告诉浏览器该html属于哪个版本,(该标签不区分大小写)

html:网页元素的根元素,所有标签应该被包含在这里面

head:该标签内元素包含了文档的元(meta)数据,如描述页面信息,定义页面标题等等

meta:告诉浏览器用什么编码解析html文本,通常指定html编写时的编码

body:该标签内的元素包含了页面可见内容


如何进行HTML编辑?

我们可以将上序html代码放入记事本内保存,然后修改记事本的后缀名为.html 或 htm都可以,最后使用浏览器打开html文件。

浏览器推荐使用5大主流浏览器:

  • Internet Explorer 简称IE,微软公司旗下浏览器
  • Google Chrome浏览器,Google旗下浏览器:追求简洁、快速、安全。笔者极力推荐使用,因为网页调试方面用到很顺手
  • Firefox浏览器,又称火狐浏览器,Mozilla公司旗下浏览器,类似于Chrome非常给力。
  • Safari浏览器,苹果公司旗下浏览器,在苹果系统下是很优秀的浏览器。不推荐在windows下面使用
  • Opera浏览器,Opera是挪威Opera Software ASA公司旗下的浏览器

当打开html文件后,呈现给我们的是以下效果:
在这里插入图片描述
至此,我们已经制作出了第一个html文件,后续我们将了解到更多标签的使用,以及可以达到各种我们平时在网页遇见的效果。


如果本文对您有帮助,别忘一键3连,感谢支持!

技术小白记录学习过程,有错误或不解的地方还请评论区留言,如果这篇文章对你有所帮助请点赞 收藏+关注 子夜期待您的关注,谢谢支持!

下一章传送门:常用HTML标签

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值