HTML基础

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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="image.png" 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的缩写，表示表格的表头单元格。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

HTML列表

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项