005.HTML标记语言的基础知识

简单来说，HTML标记语言帮我们提供了网页界面，让网络文本看起来格式更优雅美观。

什么是HTML(超文本标记语言)

HTML 是一种使用标签元素来构建Web页面的语言，通过提供了style样式可以美化元素显示效果，通过Event事件丰富标签元素的行为表现。每个标签元素都包含一些属性信息，通过属性信息来命名、样式等个性化信息，例如的 href属性可以提供链接地址信息。<img>标签元素的src属性标记出显示的图片路径信息。

通过标签元素的布局来定义要展示页面的大致布局结构
再通过CSS样式及标签属性丰富页面显示效果，让页面看起来更加美观
再通过JavaScript脚本和标签事件动作的配合，让页面看起来是动态的和相互关联的。

HTML结构

HTML基本结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
<body>
	<h1>This is a Heading</h1>
	<p>This is a paragraph.</p>
</body>
</html>

Doctype声明

<!DOCTYPE html> ：这是文档类型声明，HTML文档必须要添加的，这个是HTML5的声明，以前的声明还有如下：

HTML 4.01 :

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1 :

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

关于不同DocType支持的标签也是不同的，详细参考连接 Valid HTML Elements in Different DOCTYPES

head头标签

页面标题、样式链接、脚本链接、元数据等信息都包含在<head>标签中，

<head>标签中可以包含标签：

<title> (required in every HTML document)
<style>
<base>
<link>
<meta> ：元数据描述了页面相关的关键词、作者信息、修改时间及字符集等信息，帮助搜索引擎标记Web页面搜索关键词。
<script>
<noscript>

`<meta>`元数据标签属性

属性	值	描述
content(必选属性)	some_text	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	content-type , expires, refresh, set-cookie	把 content 属性关联到 HTTP 头部。
name	author,description,keywords,generator,revised,others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

关于<meta>元数据的示例：

1
2
3
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
<meta http-equiv="charset" content="utf-8">

其中http-equiv属性为key-value对提供了命名的名称。当浏览器请求服务器数据头部时会返回信息如下：

1
2
3
4
content-type: text/html
description: Free Web tutorials on HTML, CSS, XML
keywords: HTML, CSS, XML
charset:utf-8

body实体标签

要显示的内容就包含在<body>标签中，也就是我们要描述页面布局的位置，我们需要展示什么样的布局，什么内容，都是在这里进行描述的。

<body>实体标签内部可以包含很多标签，具体的标签可参考标签元素名称列表

style设置CSS样式

仅仅使用标签描述文档结构是不够美观的，我们还需要通过CSS样式来控制标签显示的更加丰富多彩。

下面是一个简单的定义颜色显示：

1
2
3
4
5
6
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

如果需要外部链接到CSS样式文件，需要使用<link>标签：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

HTML事件属性

在浏览器中，HTML的事件属性可以触发一些执行动作，比如当点击一个标签元素时可以执行onclick事件设置的JavaScript方法动作。关于JavaScript的方法实现就不在这里介绍，这里只是列举一下有哪些事件类型。

Window 事件属性：针对 window 对象触发的事件（应用到标签）
Form表单事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）
Keyboard 事件：键盘事件onkeydown按下按键、onkeypress敲击按键、onkeyup释放按键
Mouse 事件: 鼠标或类似用户动作触发的事件，如：左键按下、左键释放、滚动、点击、拖放等动作。
Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如、、、以及）

具体事件属性名和含义参考 HTML事件属性列表

原文作者: 根叔

原始链接: https://www.learnhard.cn/python_spider/005.html%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80/

发表时间: 2024-05-31 12:51:22 +0800 CST

什么是HTML(超文本标记语言)#

HTML结构#

Doctype声明#

head头标签#

<meta>元数据标签属性#

body实体标签#

style设置CSS样式#

HTML事件属性#