【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（三）

HTML学习第三天！
PS：牛牛只是每天晚上花了1.5-2小时左右来学习HTML。

书接上回

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

尝试一下👍

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小试牛刀</title> 
</head>
<body>

<p>
<a href="https://blog.csdn.net/qq_47493625/article/details/135853805">本文本</a> 是一个指向本博客中的一篇博文的链接。</p>

<p><a href="https://www.csdn.net/">本文本</a> 是一个指向CSDN页面的链接。</p>

</body>
</html>

HTML 超链接（链接）

HTML使用标签<a>来设置超文本链接。

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

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

链接的 HTML 代码很简单，它类似这样：

<a href="url">链接文本</a>

href 属性描述了链接的目标。

实例

<a href="https://www.csdn.net/">访问CSDN</a>

上面这行代码显示为：访问CSDN

点击这个超链接会把用户带到CSDN的首页。

提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

**文本链接：**最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>

**图像链接：**您还可以使用图像作为链接。在这种情况下，<a> 元素包围着<img>元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

**锚点链接：**除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用<a>元素定义一个标记，并使用#符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

**下载链接：**如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="download.pdf" download>下载文档</a>

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下(runoob.com)</title> 
</head>
<body>

<a href="https://www.csdn.net/" target="_blank">访问CSDN首页!</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

</body>
</html>

HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

HTML `<head>`

尝试一下👍

使用<title>标签定义HTML文档的标题

<html>
<head>
<meta charset="utf-8"> 
<title>我的 HTML 的第一页</title>
</head>

<body>
<p>浏览器中包含body元素的内容。</p>
<p>浏览器的标题包含title元素的内容</p>
</body>

</html>

使用 <base> 定义页面中所有链接默认的链接目标地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>尝试一下</title> 
<base href="https://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.runoob.com/images/logo.png"
<br><br>
<a href="https://www.runoob.com">RUNOOB教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>和牛牛一起学语言</title> 
<meta name="description" content="性感牛牛在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="CSDN">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>
</html>

HTML`<head>`元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML `<title>` 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML `<base>` 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML `<link>` 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML `<style>` 元素`

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

HTML `<meta>` 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

`<meta>` 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML `<script>` 元素

<script>标签用于加载脚本文件，如： JavaScript。

<script> 元素在以后的章节中会详细描述。

HTML head 元素

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

HTML 样式- CSS

尝试一下👍

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">and more...</div>

</div>

</body>
</html>

尝试一下-实例🎉

本例演示如何使用添加到部分的样式信息对 HTML 进行格式化。

1.HTML使用样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>一定要自己手敲哦</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

</html>

2.本例演示如何使用样式属性做一个没有下划线的链接。

如何使用 style 属性制作一个没有下划线的链接。

<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<a href="https://blog.csdn.net/qq_47493625?spm=1000.2115.3001.5343" style="text-decoration:none;">访问 牛牛的博客首页</a>

</body>
</html>

3.链接到一个外部样式表

本例演示如何标签链接到一个外部样式表。

<!DOCTYPE html>
<html>
<head> 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>一定要手敲啊</title> 
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    
    <body>
    <h1>我使用了外部样式文件来格式化文本 </h1>
    <p>我也是!</p>
    </body>
    
    </html>

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

内联样式

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

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一定要自己手敲哦</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>性感牛牛在线学习</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>要写好多啊！（泪）</title> 
</head>
<body>

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

</body>
</html>

内部样式表

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

HTML 样式标签

标签	描述
`<style>`	定义文本样式
`<link>`	定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

HTML 图像

尝试一下👍

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下(runoob.com)</title> 
</head>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" alt="Pulpit rock" width="304" height="228">   #路径改成本地图像的路径

</body>
</html>

实例

1.插入图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下</title> 
</head>
<body>

<p>
一个图像:
<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" alt="Smiley face" width="120" height="120"></p>

<p>
一个动图:
<img src="D:\learning info\Language learning\HTML5\tuxiang\dongtu.gif" alt="Computer man" width="60" height="60"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

**注：**这里路径都需要改成自己本地文件夹下的图片的路径
在这里插入图片描述

2.从不同的位置插入图片

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>尝试一下(runoob.com)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" alt="Google Chrome" width="150" height="150">
<p>一个来自菜鸟教程的图像:</p>
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

</body>
</html>

在这里插入图片描述

HTML 图像- 图像标签（ `<img>`）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 图像标签

标签	描述
`<img>`	定义图像
`<map>`	定义图像地图
`<area>`	定义图像地图中的可点击区域

附——"[创建图像映射]"中的代码💎

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="D:\learning info\Language learning\HTML5\tuxiang\planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="D:\learning info\Language learning\HTML5\tuxiang\sun.gif">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="D:\learning info\Language learning\HTML5\tuxiang\merglobe.gif">
  <area shape="circle" coords="124,58,8" alt="Venus" href="D:\learning info\Language learning\HTML5\tuxiang\venglobe.gif">
</map>

</body>
</html>

需要图像的可以在评论区留言

HTML 表格

HTML 表格由**<table>**标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格生成器：https://c.runoob.com/front-end/7688/。

以下是一个简单的 HTML 表格实例:

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分:在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，“列标题2"和"列标题3”。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用<tr >元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和<caption >（表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

我们也可以使用 CSS 来进一步自定义表格的样式和外观。

尝试一下👍

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

表格实例

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下：:

HTML 表格标签

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfood>`	定义表格的页脚

HTML 列表

HTML 支持有序、无序和定义列表:

HTML 列表

有序列表

第一个列表项
第二个列表项
第三个列表项

无序列表

列表
列表
列表

尝试一下👍

无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无序列表</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

有序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>有序列表</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

Coffee
Milk

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 列表标签

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定列表项的描述

【HTML教程】跟着菜鸟学语言—HTML5个人笔记经验（三）

书接上回

HTML 链接

尝试一下👍

HTML 超链接（链接）

HTML 链接语法

实例

HTML 链接 - target 属性

HTML 链接- id 属性

实例

基本的注意事项 - 有用的提示

HTML <head>

尝试一下👍

HTML<head>元素

HTML <title> 元素

实例

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素`

HTML <meta> 元素

<meta> 标签- 使用实例

HTML <script> 元素

HTML head 元素

HTML 样式- CSS

尝试一下👍

尝试一下-实例🎉

1.HTML使用样式

2.本例演示如何使用样式属性做一个没有下划线的链接。

3.链接到一个外部样式表

如何使用CSS

内联样式

HTML样式实例 - 背景颜色

HTML 样式实例 - 字体, 字体颜色 ，字体大小

HTML 样式实例 - 文本对齐方式

内部样式表

HTML 样式标签

已弃用的标签和属性

HTML 图像

尝试一下👍

实例

1.插入图像

2.从不同的位置插入图片

HTML 图像- 图像标签（ <img>）和源属性（Src）

HTML 图像- Alt属性

HTML 图像- 设置图像的高度与宽度

基本的注意事项 - 有用的提示：

HTML 图像标签

附——"[创建图像映射]"中的代码💎

HTML 表格

以下是一个简单的 HTML 表格实例:

尝试一下👍

表格实例

HTML 表格标签

HTML 列表

HTML 列表

有序列表

无序列表

尝试一下👍

无序列表

有序列表

HTML无序列表

HTML 有序列表

HTML 自定义列表

注意事项 - 有用提示

HTML 列表标签

HTML `<head>`

HTML`<head>`元素

HTML `<title>` 元素

HTML `<base>` 元素

HTML `<link>` 元素

HTML `<style>` 元素`

HTML `<meta>` 元素

`<meta>` 标签- 使用实例

HTML `<script>` 元素

HTML 样式实例 - 字体, 字体颜色，字体大小

HTML 图像- 图像标签（ `<img>`）和源属性（Src）