HTML | Eternity's Blog

HTML基础

一般的HTML的文件有如下结构：

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

HTML中常用的标签

标题：<h1> </h1>
段落：<p> </p>
换行：<br>
创建水平线：<hr>
链接：<a href="www.baidu.com">链接</a>
图片：<img src=/test.png width="258" height="39" />

HTML属性

HTML属性通常出现在开始标签中，定义了元素的行为、样式、内容以及其他特性，以name="value"的形式写在标签内。常见的HTML属性为：

属性名	适用元素	说明
`id`	所有元素	为元素指定唯一的标识符。
`class`	所有元素	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
`style`	所有元素	直接在元素上应用 CSS 样式。指定样式时使用冒号键值对，不同键值对之间使用分号隔开。如`<p style="color:blue; font-size: 14px">abc</p>`
`title`	所有元素	为元素提供额外的提示信息，通常在鼠标悬停时显示。
`data-*`	所有元素	用于存储自定义数据，通常通过 JavaScript 访问。如`<div data-user-id="123">User Info</div>`
`href`	`<a>`, `<link>`	指定链接的目标 URL。
`src`	`<img>`, `<script>`, `<iframe>`	指定外部资源（如图片、脚本、框架）的 URL。
`alt`	`<img>`	为图像提供替代文本，当图像无法显示时显示。如`<img src="/2025/01/20/Web/JavaScript/HTML/undefined" alt="An example image">`
`type`	`<input>`, `<button>`	指定输入控件的类型（如 `text`, `password`, `checkbox` 等）。
`value`	`<input>`, `<button>`, `<option>`	指定元素的初始值。
`disabled`	表单元素	禁用元素，使其不可交互。
`checked`	`<input type="checkbox">`, `<input type="radio">`	指定复选框或单选按钮是否被选中。
`placeholder`	`<input>`, `<textarea>`	在输入框中显示提示文本。
`target`	`<a>`, `<form>`	指定链接或表单提交的目标窗口或框架（如 `_blank` 表示新标签页）。
`readonly`	表单元素	使输入框只读。
`required`	表单元素	指定输入字段为必填项。
`autoplay`	`<audio>`, `<video>`	自动播放媒体。
`onclick`	所有元素	当用户点击元素时触发 JavaScript 事件。
`onmouseover`	所有元素	当用户将鼠标悬停在元素上时触发 JavaScript 事件。
`onchange`	表单元素	当元素的值发生变化时触发 JavaScript 事件。

其中disabled、readonly、required、autoplay为布尔属性，存在时为true否则为false：

1	<input type="text" readonly>

onclick、onmouseover、onchange为事件处理属性，可以通过事件处理响应特定事件：

1	<input type="text" onchange="alert('Value changed!')">

HTML文本格式化

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

HTML超链接

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

<a>的属性target定义了链接打开的方式：

_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口或标签页中打开链接（默认）。
_parent: 在父框架中打开链接。
_top: 在整个窗口中打开链接，取消任何框架。

属性id用于链接锚点，通常在同一页面中跳转到某个特定位置。

1 2	<a href="#section1">跳转到第1部分</a> <div id="section1">这是第1部分</div>

HTML头部

<head>包含了所有头部标签元素，可以在此插入JavaScript、CSS以及meta信息。可以添加在头部区域的元素标签为：<title>,<style>,<meta>,<link>,<script>, <noscript>和<base>。

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

<title>元素的作用：

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

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

1
2
3

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

<link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表:

1
2
3

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

HTML表格

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

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

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

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

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

<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>

以上的表格实例代码中，

元素表示整个表格，它包含两个主要部分：<thead>和<tbody>。

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