2.HTML基础——认识HTML

17 篇文章 0 订阅

1.什么是HTML

HTML其实是HyperText Markup Language的缩写,超文本标记语言。

2.HTML的作用

  • 首先利用记事本保存了一个标题和两段描述,然后修改纯文本文件的扩展名为.html,然后再利用浏览器打开;
  • 打开之后发现显示的格式不对,不对的原因是在纯文本文件中所有文字都是同级别的,浏览器不知道有哪些文字代表什么意思,也就是浏览器不知道哪些文字是标题,哪些文字是段落…,所以导致了显示的格式不正确;
  • 所以,HTML应运而生,它的作用就是专门用来描述文本的语义,也就是我们可以利用HTML来高速浏览器哪些是标题,哪些是段落;
  • 这些用于描述其他文本语义的文本,我们称之为标签,并且这些用于描述其他文本语义的标签将来在浏览器中是不会被显示出来的;
  • 因为HTML的这些标签是专门用来描述其他文本语义的,并且在浏览器中不会被显示出来,所以我们称这些文本为“超文本”,而这些文本又叫做标签,所以HTML被称之为“超文本标记语言”。

注意事项:
虽然我们利用< h 1 >描述一段文本之后,这段文本在浏览器中显示出来会被放大和加粗,看上去我们是利用HTML的标签修改了被描述的那段文本的样式,但是要记住,HTML的作用只有一个,就是专门用来给文本添加语义的,而不是用来修改文本的样式的。

3.网页的固定格式

(1)编写网页的步骤

  1. 新建一个文本文档
  2. 利用记事本打开
  3. 编写HTML代码
  4. 保存并且修改纯文本文档的扩展名为.html
  5. 利用浏览器打开编写好的文件

(2)基本结构

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

通过观察发现,HTML基本结构中所有的标签都是成对出现的,这些成对出现的标签有一个带/有一个不带/,那么这些不带/的标签我们称之为开始标签,带/的标签我们称之为结束标签。

html标签

作用:用于告诉浏览器,这是一个网页,也就是告诉浏览器这是一个HTML文档;
其他所有的标签都必须写在html标签里面,也就是写在html的开始标签和结束标签中间。

head标签

作用:用于给网站添加一些配置信息,例如:指定网站的标题/指定网站的小图标;添加网站的SEO相关信息(指定网站的关键字、指定网站的描述信息);外挂一些外部的css/js文件;添加一些浏览器适配相关的内容。一般情况下,写在head标签内部的内容不会显示给用户查看(除了标题和小图标),是给搜索引擎看的。

在这里插入图片描述

title标签

作用:专门用于指定网站的标题,并且这个指定的标题将来还会作为用户保存网站的默认标题。
title标签必须写在head标签里面。

在这里插入图片描述在这里插入图片描述

body标签

作用:专门用于定义HTML文档中需要显示给用户查看的内容(文字、图片、音频、视频)。
虽然有时候你可能将内容写到了别的地方在网页中也能看到,但是不要这么做,一定要将显示的内容写在body中;一对html标签中只能有一对body标签。

meta标签(head内部标签)

作用:指定当前网页的字符集。在编写忘得的时候没有指定字符集会出现乱码,为了解决乱码现象,在head标签中添加< meta charset =“GBK”/ >,指定字符集。 现在浏览器的兼容性更高,没有这个问题,加了反而出现乱码。

  • 什么是字符集?字符集就是字符的集合,也就是很多字符堆在一起。就好像是古代的“活字印刷术”,在活字印书术中就是把很多刻有汉字的小印章放在一个盒子中,然后需要印刷汉字的时候再去盒子中取出。因此导致了乱码问题。在网页中我们常见的的字符集有两个,GBK/UTF-8,因此我们需要指定字符集才能找到对应的正确的内容。
  • GBK里面存储的字符就比较少,仅仅存储了汉字喝一下常用的外文,所以体积比较小;UTF-8里面存储了世界上所有的文字,体积比较大。
  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致,否则还是会出现乱码;所以仅仅指定字符集不一定能解决乱码问题,还需要保存文件的时候,文件的保存格式必须和指定的字符集一致才能保证没有乱码问题。在这里插入图片描述

4.HTML标签

HTML标签分类

  • 单标签:
    只有开始标签没有结束标签, 也就是只有一个< >组成的 。
<meta charset="GBK"/>
  • 双标签:
    有开始标签和结束标签,也就是由一个< >和一个< />组成的
<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

HTML标签关系分类

  • 并列关系(兄弟/平级)
<html>
	<head>
	</head>
	<body>
	</body>
</html>
  • 嵌套关系(父子/上下级)
    <head>
		<meta charset="GBK"/>
		<title>百度一下,你就知道123</title>
	</head>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值