0
点赞
收藏
分享

微信扫一扫

HTML 语言简介【表格梳理版】


一、博主介绍


✍简介: 博主姓:陈,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。

🔋 充电:相信付出终将会得到回报!

二、笔芯文章

本期为大家提供 前端HTML基础。一🔎

(1)、概述

HTML 是​​网页使用​​​的语言,定义了网页的​​结构​​​和​​内容​​。浏览器访问网站,其实就是从服务器下载 HTML 代码,然后渲染出网页。

HTML 的全名是​​“超文本标记语言”​​​(HyperText Markup Language),上个世纪90年代由欧洲核子研究中心的物理学家​​蒂姆·伯纳斯-李(Tim Berners-Lee)​​发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

1999年,​​HTML 4.01 版​​​发布,成为广泛接受的​​ HTML 标准​​。2014年,​​HTML 5 ​​发布,这是目前正在使用的版本。

类型

描述

HTML

语言定义网页的结构和内容

CSS

网页的样式

JavaScript

网页与用户的互动

HTML 源码:👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

(2)、网页的基本概念

🚀 标签:网页的 HTML 代码由许许多多不同的标签(tag)构成。学习 HTML 语言,就是学习各种标签的用法。

序号

类型

代码

描述

区别

1

title

​<title>网页标题</title>​

标签放在一对尖括号里面(比如​​<title>​​),大多数标签都是成对出现的,分成开始标签和结束标签,结束标签在标签名之前加斜杠(比如)。但是,也有一些标签不是成对使用,而是只有开始标签,没有结束标签

双标签

2

meta

​<meta charset="utf-8">​

这种单独使用的标签,通常是因为标签本身就足够完成功能了,不需要标签之间的内容。实际应用中,它们主要用来提示浏览器,做一些特别处理。

单标签

3

标签可以嵌套

​<div><p>hello world</p></div>​

上面代码中,​​<div>​​标签内部包含了一个

标签。嵌套时,必须保证正确的闭合顺序,不能跨层嵌套,否则会出现意想不到的渲染结果。

正确演示

4

错误演示

​<div><p>hello world</div></p>​

闭合顺序不正确

错误演示

注意:HTML 标签名是大小写不敏感,比如​​<title>和<TITLE>​​是同一个标签。不过,一般习惯都是使用小写

meta标签详解请移步😊​​meta标签​​

head标签详解请移步😊​​head标签​​

🚀 元素 :浏览器渲染网页时,会把 HTML 源码解析成一个标签树,每个标签都是树的一个节点​​(node)​​​。这种节点就称为​​网页元素​​​(element)。所以,“标签”和“元素”基本上是同义词,只是使用的场合不一样:标签是从源码角度来看,元素是从编程角度来看,比如​​<p>​​标签对应网页的p元素。

嵌套的标签就构成了网页元素的层级关系。

<div><p>hello world</p></div>

上面代码中,​​div​​​元素内部包含了一个p元素。上层元素又称为​​“父元素”​​​,下层元素又称为​​“子元素”​​,即div是p的父元素,p是div的子元素。

🚀块级元素,行内元素:所有元素可以分成两大类:块级元素(block)和行内元素(inline)。

类别

代码

描述

特点

块级元素

​<p>hello</p>​​​ ​​<p>world</p>​

p元素是块级元素,因此浏览器会将内容分成两行显示。

块级元素默认占据一个独立的区域,在网页上会自动另起一行,占据 100% 的宽度。

行内元素

​<span>hello</span>​​​ ​​<span>world</span>​

span元素是行内元素,因此浏览器会将两行内容放在一行显示。

行内元素默认与其他元素在同一行,不产生换行。比如,span就是行内元素,通常用来为某些文字指定特别的样式。

🚀属性 :属性(attribute)是标签的额外信息,使用空格与标签名和其他属性分隔。

<img src="demo.jpg" width="500">

上面代码中,​​<img>​​标签有两个属性:src和width。

属性可以用等号指定属性值,比如上例的demo.jpg就是src的属性值。属性值一般放在双引号里面,这不是必需的,但推荐总是使用双引号。

注意,属性名是大小写不敏感的,onclick和onClick是同一个属性。

(3)、网页的基本标签

类型

代码

范例

描述

文档类型

​<!doctype>​

​<!DOCTYPE html>​

表示文档类型,告诉浏览器如何解析网页。

顶层容器

​<html>​

​<html lang="zh-CN">​

标签树结构的顶层节点,也称为根元素(root element),其他元素都是它的子元素。一个网页只能有一个标签。注意:如果是英文内容,zh-CN要改成en

容器标签

​<head>​

​<head><title>网页标题</title></head>​

用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染提供额外信息。

元数据

​<meta>​

​<meta></meta>​

​<meta>​​​标签用于设置或说明网页的元数据,必须放在​​<head>​​​里面。一个​​<meta>​​​标签就是一项元数据,网页可以有多个​​<meta>​​​。​​<meta>​​​标签约定放在​​<head>​​内容的最前面。

网页的标题

​<title>​

​<title>网页标题</title>​

用于指定网页的标题,会显示在浏览器窗口的标题栏。

容器标签

​<body>​

​<body></body>​

用于放置网页的主体内容。浏览器显示的页面内容,都放置在它的内部。它是​​<html>​​​的第二个子元素,紧跟在​​<head>​​后面。

(4)、空格和换行

HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格,一律忽略不计。

<p>  hello world   </p>

上面代码中,hello前面的空格和world后面的空格,浏览器一律忽略不计。

标签内容里面的多个连续空格(包含制表符​​\t​​),会被浏览器合并成一个。

<p>hello      world</p>

上面代码中,hello与world之间有多个连续空格,浏览器会将它们合并成一个。网页渲染的结果是,hello与world之间只有一个空格。

浏览器还会将文本里面的换行符​​(\n)​​​和回车符​​(\r)​​,替换成空格。

<p>hello



world
</p>

上面代码中,helloworld之间有多个换行,浏览器会将它们替换成空格,然后再将多个空格合并成一个。

网页渲染的结果是,hello与world之间有一个空格。【这意味着,HTML 源码里面的换行,不会产生换行效果】

(5)、注释

HTML 代码可以包含注释,浏览器会自动忽略注释。注释以 结尾,下面就是一个注释的例子。

<!-- 这是一个注释 -->

注释可以是多行的,并且内部的 HTML 都不再生效了。

<!--
<p>hello world</p>
-->

上面代码是一个注释的区块,内部的代码都是无效的,浏览器不会解析,更不会渲染它们

注释有助于理解代码的含义,复杂的代码块前面最好加上注释。

举报

相关推荐

01 # HTML 语言简介

HTML- 01:HTML 语言简介

HTML表格

html表格

HTML - html 表格(二)

HTML--表格

0 条评论