HTML 颜色

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

在HTML中应用16进制颜色
设置文本颜色

可以通过CSS的color属性来设置文本颜色。例如：

1	<p style="color:#FF5733;">这是一段红色的文本。</p>

在这个例子中，段落p中的文本颜色被设置为#FF5733，这是一种橙红色。

设置背景颜色

使用background-color属性可以设置元素的背景颜色。例如：

1
2
3

<div style="background-color:#333399; width:200px; height:100px;">
  这是一个有背景颜色的div
</div>

这里设置了一个div元素的背景颜色为#333399，这是一种深蓝色。同时，通过设置width和height属性，定义了div的大小，以便更好地展示背景颜色效果。

设置边框颜色

如果要给元素添加边框并设置边框颜色，可以使用border属性。例如：

1
2
3

<div style="border:2px solid #FFD700; width:200px; height:100px;">
  这是一个有黄色边框的div
</div>

在这个例子中，div元素有一个2像素宽的实线边框，边框颜色为#FFD700，即金色。通过这种方式，可以为网页中的各种元素添加具有特定颜色的边框，增强页面的视觉效果。
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

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

1
2
3

<head>
<link rel="stylesheet" type="text/css" href="mystyle.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>

HTML 超链接

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

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用《a》标签在 HTML 中创建链接。
有两种使用《a》标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML中的链接是通过《a》（anchor）标签来创建的，它允许用户从一个网页跳转到另一个网页、网页的某个部分，或者打开一个文件等。以下是关于HTML链接的详细介绍：

一、基本语法

1	<a href="链接目标的URL">链接文字或内容</a>

href属性是关键，它指定了链接的目标地址。可以是网页的URL、文件的路径、网页内部的锚点等。
链接文字或内容是显示在网页上的部分，用户点击这部分内容就会触发链接跳转。可以是纯文本，也可以是图片或其他HTML元素。

二、链接类型
1.外部链接
这是指向其他网站的链接。例如，要创建一个链接到百度首页的链接，可以这样写：

1 2	<a href="https://www.baidu.com">访问百度</a>

当用户点击“访问百度”这几个字时，浏览器会打开百度的首页。

2.内部链接
内部链接是指在同一网站内部不同页面之间的链接。例如，一个网站有首页（index.html）、关于我们（about.html）和联系我们（contact.html）三个页面，可以在首页创建一个链接到关于我们页面的链接：

1	<a href="about.html">关于我们</a>

这里假设这些页面都在同一个目录下。如果页面在不同的目录，需要正确设置相对路径或绝对路径。例如，如果关于我们页面在pages目录下，链接可以写成：

1	<a href="pages/about.html">关于我们</a>

3.锚点链接

锚点链接用于在同一页面内快速跳转到特定位置。首先需要在目标位置设置一个锚点，使用《a》标签的name属性（HTML5中推荐使用id属性）来定义锚点。例如，在页面底部有一个段落：

1 2	<h2 id="section1">第一部分</h2> <p>这里是第一部分的内容……</p>

然后在页面顶部可以创建一个链接到这个锚点的链接：

1
2
3

<a href="#section1">跳转到第一部分</a>

当用户点击这个链接时，页面会滚动到<h2 id="section1">所在的位置。

三、链接的其他属性
1.target属性

这个属性可以控制链接在何处打开。常用的值有：

_self：在当前窗口或标签页中打开链接，这是默认值。 _blank：在新窗口或新标签页中打开链接。例如：

1	<a href="https://www.example.com" target="_blank">在新标签页打开示例网站</a>

点击这个链接会在新标签页中打开https://www.example.com。

_parent：在父窗口或标签页中打开链接，主要用于框架（frame）或嵌套的网页场景。 _top：在整个浏览器窗口中打开链接，也会清除所有框架。
2.title属性
为链接提供额外的信息，当用户将鼠标悬停在链接上时，会显示这个提示信息。例如：

1	<a href="https://www.example.com" title="这是一个示例网站">示例网站</a>

鼠标悬停在“示例网站”链接上时，会显示“这是一个示例网站”的提示。
HTML链接是网页之间相互连接的桥梁，合理使用链接可以极大地提升用户体验和网站的导航性。

HTML 图像

在HTML中插入图像主要通过《img》标签来实现，这是一种非常简单但功能强大的方式，可以让网页更加生动和富有表现力。以下是关于如何在HTML中插入图像的详细介绍：
一、基本语法

1	<img src="图像的URL或路径" alt="图像的替代文本">

src属性：这是必需的属性，用于指定图像的源路径。可以是相对路径（相对于当前HTML文件的位置）或绝对路径（完整的URL）。

alt属性：也是很重要的属性，它提供了图像的替代文本。当图像由于某些原因无法显示时（如网络问题、图像路径错误等），浏览器会显示这个替代文本。此外，对于使用屏幕阅读器的用户来说，alt文本可以帮助他们了解图像的内容，从而提高网页的可访问性。

示例

1.使用相对路径插入图像
假设你有一个名为image.jpg的图像文件，它和你的HTML文件位于同一个目录下，你可以这样插入图像：

1	<img src="image.jpg" alt="示例图像">

如果图像文件位于一个名为images的子目录中，路径应该是：

1	<img src="images/image.jpg" alt="示例图像">

2.使用绝对路径插入图像
如果你想插入一个来自互联网的图像，可以使用完整的URL：

1	<img src="https://example.com/images/image.jpg" alt="来自外部网站的图像">

二、其他有用的属性
1.width和height属性

这两个属性可以用来指定图像的显示宽度和高度，单位通常是像素。这可以帮助你控制图像在网页中的大小，使其更好地适应布局。例如：

1	<img src="image.jpg" alt="示例图像" width="300" height="200">

注意，如果只设置其中一个属性，图像会按比例自动调整另一个维度的大小，以保持图像的纵横比。
2.title属性

和链接的title属性类似，title属性为图像提供额外的信息，当用户将鼠标悬停在图像上时，会显示这个提示信息。

例如：

1	<img src="image.jpg" alt="示例图像" title="这是一个示例图像">

HTML 表格，列表

一、基本语法
HTML表格是通过table标签来创建的，表格由行（《tr》）、单元格（td或th）组成。其中，th用于定义表头单元格，通常显示为加粗和居中，而td用于定义普通单元格。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

1.表格的组成部分

1.table标签：定义整个表格。
2.tr标签：定义表格的行。
3.th标签：定义表头单元格，通常用于第一行来描述列的内容。
4.td标签：定义普通单元格，用于包含数据。

2.表格的属性

虽然HTML5中许多表格属性已经被CSS所取代，但仍然有一些属性可以用来控制表格的基本行为：
border属性：用于设置表格边框的宽度。例如，table border=”1”会创建一个有边框的表格。不过，现在更推荐使用CSS来控制边框样式。
cellpadding和cellspacing属性：分别用于设置单元格内内容与边框的距离（内边距）和单元格之间的距离（外边距）。同样，这些现在也推荐使用CSS来控制。

在HTML中，列表是一种非常有用的元素，用于组织和显示一系列相关的信息。HTML提供了三种主要的列表类型：无序列表（ul）、有序列表（ol）和描述列表（dl）。每种列表类型都有其特定的用途和格式。
一、无序列表（ul）

无序列表用于表示没有特定顺序的项目列表。列表项使用li（list item）标签定义。

1.基本语法

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

在浏览器中，这将显示一个带有项目符号的列表。
二、有序列表（ol）
有序列表用于表示有特定顺序的项目列表。列表项同样使用li标签定义。有序列表的列表项会自动编号。
2.基本语法

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

在浏览器中，这将显示一个带有数字编号的列表。
三、描述列表（dl）
描述列表用于表示术语和描述的列表。它由dl标签定义，每个术语使用dt（definition term）标签定义，每个描述使用dd（definition description）标签定义。
1.基本语法

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>

在浏览器中，这将显示一个术语和描述的列表，术语通常会加粗显示。
四、列表的嵌套

列表可以嵌套使用，即在一个列表项内部再创建一个新的列表。这在需要表示层次结构时非常有用。

复制
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西红柿</li>
      <li>土豆</li>
    </ul>
  </li>
</ul>

在浏览器中，这将显示一个嵌套的无序列表，其中每个主要类别（水果和蔬菜）下面有子类别。