HTML基础（文本内容、列表、表格、图像、链接、属性）

本文链接：https://blog.youkuaiyun.com/qq_42683732/article/details/138170488

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

什么是HTML?

HTML 代表超文本标记语言
HTML 是创建网页的标准标记语言
HTML 描述网页的结构
HTML 由一系列元素组成
HTML 元素告诉浏览器如何显示内容
HTML 元素标记内容片段，如 "这是一个标题", "this is a paragraph", "this is a link"等。

使用任何一款编辑器，甚至新建一个文本文档都可以，将文档后缀名命名为html即可得到一个网页文件。

第一个网页

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
 
<h1>标题</h1>
<p>段落</p>
<a href="https://blog.youkuaiyun.com/qq_42683732?type=blog">这是一个链接</a>
 
</body>
</html>

每个尖括号里的内容称为标签，有像<h1>标题</h1>这样要用<h1>将内容包裹起来的双标签，也有<meta charset="utf-8">这样单独的单标签

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 定义网页标题，会显示在浏览器的标签页上。
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<a>标签定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性，它指示链接的目的地。

接下来学习一下HTML里常用的几个标签

文本内容

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

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

<strong>、<del> 和 <em> 标签可以用于强调文本。

<strong>定义重要的文本。加粗文本

<del>标签定义文档中已删除的文本。

<em>标签是一个短语标签，用来呈现为被强调的文本。标签内的内容通常以斜体显示。

<i>定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

<u>  为文本加下划线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>
    <h4>这是一个四级标题</h4>
    <h5>这是一个五级标题</h5>
    <h6>这是一个六级标题</h6>
    <p>这是一个段落</p>
    <p><strong>加粗文本</strong><b>这个也是加粗</b></p>
    <p><i>斜体</i><u>下划线</u></p>
    <p><del>这是一个被删除的文本</del></p>
    <p><em>被强调的文本</em></p>
 
</body>
</html>

这里只列举了其中几个标签，不能涵盖全部。

提示一句，使用css也可以到到同样的效果。

列表与表格

列表分无序列表、有序列表和自定义列表。使用 <ul> 和 <li> 标签创建无序列表，使用 <ol> 和 <li> 标签创建有序列表。使用 <dl> 和 <dt> 标签创建自定义列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <dl>
        <dt>自定义1</dt>
        <dd>哈哈哈哈</dd>
        <dt>这是自定义的</dt>
        <dd>哇哇哇哇</dd>
    </dl>
 
</body>
</html>

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

表格：使用 <table>、<tr>、<td>、<th> 等标签创建表格，<table> 是表格标签的根元素，然后是 <tr> 表格的行标签，在 <tr> 内部是 <td> 与 <th>

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。每行里面的内容
th：th 是 table header的缩写，表示表格的表头单元格。也就是列标题

使用边框属性来显示一个带有边框的表格，如果不要边框这可以将border="1"删去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body> 
    <table border="1">
        <tr>
            <th>列标题A</th>
            <th>列标题B</th>
            <th>列标题C</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
    </table>
</body>
</html>

图像、链接和注释

<img src="图片路径" alt="图片描述">
<a href="https://blog.youkuaiyun.com/qq_42683732?type=blog">这是一个链接</a>
<!-- 注释内容 -->

图像

图像还可以设置宽（width）高（height）属性。

图片路径一般用相对路径，因为网页一般上传置服务器，服务器路径与本地路径一般不同

绝对路径和相对路径

绝对路径是指从根目录开始

C:\Users\eh\AppData\Local\Programs\Microsoft VS Code

这样是从c盘开始的

相对路径是从当前目录开始的如.\img\index.png

不同操作系统使用的斜杠不同Linux系统是/，window系统是\

../表示上一级目录

alt="图片描述",当图片不显示时显示图片描述，这里插一句，盲人无法查看图片，但盲人可以通过无障碍软件将图片的信息读出来，所以应当合理书写alt属性，不要与内容不符也不要过于冗长。

链接

href 属性规定链接指向的页面的 URL。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

如果 href 属性不存在，则 <a> 标签将不是超链接。

提示：您可以使用 href="#top" 或 href="#" 链接到当前页面的顶部！

链接还可以放到图片里，这样可以点击图片链接。

注释

这没什么好说的

属性

在 HTML 中，每个元素都可以有一个或多个属性，用于描述元素的特征和行为。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

上文的src、href、border等都是属性。

这里介绍几个常用的属性

<p class="note">这是一个带有 note 类属性的 p 标签</p>
<h1 id="myHeader">My Header</h1>
<div style="color: red; font-size: 20px;">这是一段红色的文字</div>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>

class 属性：class 属性是用于向元素添加一个或多个类名，以便通过 CSS 样式表定义样式。此外，类名还可以用来实现 JavaScript 的交互效果。用空格分隔类名。

id 属性：id 属性是用于将元素标识为唯一的标识符。它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素。

style 属性：style 属性是用于将CSS样式规则直接应用于元素。它可以用于控制元素的颜色、字体、大小和布局等。一个或多个由分号分隔的 CSS 属性和值。style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本

属性名称不区分大小写，属性值对大小写敏感。