基本框架

页面结构

常见属性
id
给元素一个唯一的标识符,可以用于 CSS 选择器或 JavaScript 操作。
<div id="header">This is a header</div>
class
给元素指定一个或多个类名,方便通过 CSS 或 JavaScript 操作。
<p class="text-muted">This is a paragraph.</p>
style
直接为元素定义 CSS 样式。
<span style="color: red;">This text is red.</span>
href
用于 <a>
标签,指定链接目标。
<a href="https://www.example.com">Visit Example</a>
src
用于 <img>
和 <script>
标签,指定资源的路径。
<img src="image.jpg" alt="Description" />
alt
用于 <img>
标签,提供图片的替代文本。
<img src="logo.png" alt="Company Logo" />
title
提供关于元素的额外信息,通常在鼠标悬停时显示。
<button title="Click me">Submit</button>
target
用于 <a>
标签,指定链接的打开方式(如 _blank
在新窗口中打开)。
<a href="https://www.example.com" target="_blank" rel="noopener"
>Open in new tab</a
>
文本
文本格式化标签
<b>
定义粗体文本
<em>
定义着重文字
<i>
定义斜体字
<small>
定义小号字
<strong>
定义加重语气
<sub>
定义下标字
<sup>
定义上标字
<ins>
定义插入字
<del>
定义删除字
”计算机输出” 标签
<code>
定义计算机代码
<kbd>
定义键盘码
<samp>
定义计算机代码样本
<var>
定义变量
<pre>
定义预格式文本
引文、引用及标签定义
<abbr>
定义缩写
<address>
定义地址
<bdo>
定义文字方向
<blockquote>
定义长的引用
<q>
定义短的引用语
<cite>
定义引用、引证
<dfn>
定义一个定义项目
列表
无序列表使用 <ul>
标签,有序列表使用 <ol>
标签,每个列表项始于 <li>
标签。
自定义列表用 <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
ul 是 unordered lists 的缩写 (无序列表)
li 是 list item 的缩写 (列表项目)
ol 是 ordered lists 的缩写(有序列表)
dl 是 definition lists 的英文缩写 (自定义列表)
dt 是 definition term 的缩写 (自定义列表组)
dd 是 definition description 的缩写(自定义列表描述)
nl 是 navigation lists 的英文缩写 (导航列表)
tr 是 table row 的缩写 (表格中的一行)
th 是 table header cell 的缩写 (表格中的表头)
td 是 table data cell 的缩写 (表格中的一个单元格)
链接
基础属性
创建链接的主要HTML元素是 <a>
(锚)元素,具有以下属性:
-
href:指定链接目标的URL,可以是文本、图像、锚点、下载等。
-
target(可选):指定链接如何在浏览器中打开。常见的值包括
_blank
(在新标签或窗口中打开链接)和_self
(在当前标签或窗口中打开链接)。 -
title(可选):提供链接的额外信息,通常在鼠标悬停在链接上时,显示为工具提示。
-
rel(可选):指定与链接目标的关系,如 nofollow、noopener 等。
锚点链接
要创建锚点链接,需要在目标位置使用 <a>
元素定义一个标记,并使用 #
符号引用该标记。例如:
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
下载链接
如果您希望链接用于下载文件,而不是导航到另一个网页,可以使用 download 属性。例如:
<a href="document.pdf" download>下载文档</a>
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>
为了避免向服务器发送两次 HTTP 请求,请始终将正斜杠添加到子文件夹,如
href="https://iflux.art/"
。
区块
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。例如: <h1>
、 <p>
、 <ul>
、 <table>
。
内联元素在显示时通常不会以新行开始。例如:<b>
、<td>
、 <a>
、<img>
。