HTML 基础学习(一)

2023-10-18

字数统计: 2.5k字 | 阅读时长≈ 10分

参考文章：HTML 学习

简介

什么是 HTML

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

HTML 指的是超文本标记语言（Hyper Text Markup Language）；
HTML 不是一种编程语言，而是一种标记语言（markup language）；
标记语言是一套标记标签（markup tag）
HTML 使用标记标签来描述网页。

HTML 标签

HTML 标记标签通常被称为 HTML 标签（HTML tag）

HTML 标签是由尖括号包围的关键词，比如 <html>;
HTML 标签通常是成对出现的，比如： <b> 和 </b>;
标签对中的的第一个标签是开始标签，的二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。

基本的 HTML 标签

HTML 标题 <h1> - <h6>
HTML 标题是通过 <h1> - <h6> 等标签进行定义的。

1
2
3

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落 <p>
HTML 段落是通过 <p> 标签进行定义的。

1 2	<p>This is a paragraph.</p> <p>This is another paragraph.</p>

HTML 连接 <a>
HTML 连接是通过 <a> 标签进行定义的。
1
<a href="https://www.w3school.com.cn">This is a link</a>
HTML 图像 <imag>
HTML 图像是通过 <img> 标签进行定义的。
1
<img src="w3school.jpg" width="104" height="142" />

HTML 元素

HTML 元素指的是从开始标签到结束标签的所有代码。

开始标签	元素内容	结束标签
`<p>`	This is a paragraph	`</p>`
`<a href="default.html" >`	This is link	`</a>`
`<br/>`

HTML 元素语法

HTML 元素以开始标签起始;
HTML 元素以结束标签终止;
元素的内容是开始标签与结束标签之间的内容;
某些 HTML 元素具有空内容（empty content）;
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性。

嵌套的 HTML 元素

大多数 HTML 元素是可以嵌套的。HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML，XML 以及未来版本的 HTML 中，所有的元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML，XHTML 和 XML 都接收这种方式。

HTML 提示：

使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
但是万维网联盟（W3C）在 HTML4 中推荐使用小写，而未来（X)HTML 版本中强制使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

1	<a href="http://www.w3school.com.cn">This is a link</a>

HTML 提示：

使用小写属性

属性和属性值对大小写不敏感。不过万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML 要求使用小写属性。

始终为属性值添加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没问题。
在某些个别情况下，比如属性值本身就含有双引号，那么你必须使用单引号，例如：

1	name='Bill "HelloWorld" Gates'

HTML 属性值参考手册

完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：
完整的 HTML 参考手册

标签	描述
`<!-- ... -->`	定义注释
`<!DOCTYPE>`	定义文档类型
`<a>`	定义链接
`<abbr>`	定义缩写
`<acronym>`	定义只取首字母的缩写
`<address>`	定义文档作者或者拥有者的联系信息
`<applet>`	`不赞成使用`，定义嵌入的 applet
`<area>`	定义图像映射内部的区域
`<article>`	定义文章
`<aside>`	定义页面内容之外的内容
`<audio>`	定义声音内容
`<b>`	定义粗体字
`<base>`	定义页面中所有链接的默认地址或默认目标
`<basefont>`	`不赞成使用`，定义页面中文本的默认字体，颜色或尺寸
`<bdi>`	定义文字的文本方向，使其脱离周围文本的方向设置
`<bdo>`	定义文字方向
`<big>`	定义大号文本
`<blockquote>`	定义长的引用
`<body>`	定义文档的主体
`<br>`	定义简单的折行
`<button>`	定义按钮
`<canvas>`	定义图形
`<caption>`	定义表格标题
`<center>`	`不赞成使用`，定义居中文本
`<cite>`	定义引用

下面列出了适用于大多数 HTML 元素的属性：

属性	值	描述
class	classname	规则元素的类名
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息（可在工具提示中显示）

HTML 全局属性

HTML 属性赋予元素意义和语境。下面的全局属性可用于任何 HTML 元素：

属性	描述
accesskey	规定激活元素的快捷键
class	规定元素的一个或多个类名
contenteditable	规定元素内容是否可编辑
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显式
data-*	用于存储页面或应用程序的私有定制数据
dir	规定元素中内容的文本方向
draggable	规定元素是否可拖动
dropzone	规定在拖动被拖动数据时是否进行复制，移动或链接
hidden	规定元素仍未或不再相关
id	规定元素的唯一 ID
lang	规定元素内容的语言
spellcheck	规定是否对元素进行拼写和语法检查
style	规定元素的行内 CSS 样式
tabindex	规定元素的 tab 键次序
title	规定有关元素的额外信息
translate	规定是否应该翻译元素的内容

文本格式化

文本格式化标签

标签	描述
`<b>`	定义粗体文字
`<big>`	定义大号字体
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字
`<s>`	不赞成使用，使用 `<del>` 代替
`<strike>`	不赞成使用，使用 `<del>` 代替
`<u>`	不赞成使用，使用样式（style）代替

计算机输出标签

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<tt>`	定义打字机代码
`<var>`	定义变量
`<pre>`	定义预格式文本
`<listing>`	不赞成使用，使用 `<pre>` 代替
`<plaintext>`	不赞成使用使用 `<pre>` 代替
`<xmp>`	不赞成使用，使用 `<pre>` 代替

引用，引用和术语定义

标签	描述
`<abbr>`	定义缩写
`<acronym>`	定义首字母缩写
`<adddress>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用
`<cite>`	定义引用，引证
`<dfn>`	定义一个定义项目

HTML 样式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

1
2
3

<head>
<link rel="stylesheet" type="text/css" href="mysite.css">
</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式表

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1
2
3

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

样式定义标签说明

标签	描述
`<style>`	定义样式
`<link>`	定义资源引用
`<div>`	定义文档中的节或区域（块级）
`<span>`	定义文档中的行内的小块或区域
`<font>`	规定文本的字体，字体尺寸，字体颜色。不赞成使用，请使用样式
`<basefont>`	定义基准字体，不赞成使用，请使用样式
`<center>`	对文本进行水平居中，不赞成使用，请使用样式

HTML 超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档文档或者当前文档中的某个部分。