Skip to Content
开发🎨 前端开发Web 基础HTML 基础

基本框架

html基本框架

页面结构

html页面结构

常见属性

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>

<div> 元素

<div> 是块级元素,没有特定的含义,可用做组合其他 HTML 元素的容器,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 可用于对大的内容块设置样式属性。

<div> 的另一个常见用途是文档布局。它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法,<table> 元素的作用是显示表格化的数据。

<span> 元素

<span> 是内联元素,也没有特定的含义,可用作文本的容器

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

Last updated on