什么是 HTML?

HTML

HTML 代表 Hyper Text Markup Language

HTML 是网页的标准标记语言

HTML 元素是 HTML 页面的构建块

HTML 元素由 <> 标签 表示


HTML 元素

一个 HTML 元素是一个 start 标签和一个 end 标签,其内容介于两者之间:

<h1>这是一个标题</h1>
开始标签 元素内容 结束标签
<h1> 这是一个标题 </h1>
<p> 这是段落。 </p>

HTML 属性

  • HTML 元素可以有属性
  • 属性提供关于元素的附加信息
  • 属性以名称/值对的形式出现,例如 charset="utf-8"

一个简单的 HTML 文档

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>Page Title</title>

<body>
   <h1>这是一个标题</h1>
   <p>这是一个段落。</p>
   <p>This is another paragraph.</p>
</body>

</html>

亲自试一试 »

实例解析

HTML 元素是 HTML 页面的构建块。

  • <!DOCTYPE html> 声明将此文档定义为 HTML5
  • <html> 元素是 HTML 页面的根元素
  • lang 属性定义文档的语言
  • <meta> 元素包含有关文档的元信息
  • charset 属性定义了文档中使用的字符集
  • <title> 元素指定文档的标题
  • <body> 元素包含可见的页面内容
  • <h1> 元素定义了一个大标题
  • <p> 元素定义了一个段落

HTML 文档

所有 HTML 文档都必须以文档类型声明开头:<!DOCTYPE html>

HTML 文档本身以 <html> 开始,并以 </html> 结束。

HTML 文档的可见部分位于 <body></body> 之间。


HTML 文档结构

下面是一个 HTML 文档(一个 HTML 页面)的可视化:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

注释:只有 <body> 部分(上面的白色区域)内的内容会显示在浏览器中。


HTML 标题

HTML 标题是用 <h1><h6> 标签定义的。

<h1> 定义了最重要的标题。 <h6> 定义了最不重要的标题:

实例

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
亲自试一试 »


HTML 段落

HTML 段落是用 <p> 标签定义的:

实例

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
亲自试一试 »

HTML 链接

HTML 链接是用 <a> 标签定义的:

实例

<a href="https://www.w3schools.cn">This is a link</a>
亲自试一试 »

链接的目的地在 href 属性中指定。


HTML 图片

HTML 图像是用 <img> 标签定义的。

源文件 (src)、替代文本 (alt)、widthheight 作为属性提供:

实例

<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
亲自试一试 »

HTML 按钮

HTML 按钮是用 <button> 标签定义的:

实例

<button>Click me</button>
亲自试一试 »

HTML 列表

HTML 列表使用 <ul>(无序列/项目符号列表)或 <ol>(有序/编号列表)定义 ) 标签,后跟 <li> 标签(列表项):

实例

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
亲自试一试 »

HTML 表格

HTML 表格是用 <table> 标签定义的。

表格行是用 <tr> 标签定义的。

表头是用 <th> 标签定义的。 (默认情况下粗体和居中)。

表格单元格(数据)使用 <td> 标签定义。

实例

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
亲自试一试 » With CSS »

HTML 编程

每个 HTML 元素都可以有属性

对于 Web 开发和编程,最重要的属性是 idclass.这些属性通常用于解决基于程序的网页操作。

属性 例子
id <table id="table01"
class <p class="normal">
style <p style="font-size:16px">
data- <div data-id="500">
onclick <input onclick="myFunction()">
onmouseover <a onmouseover="this.setAttribute('style','color:red')">

完整的 HTML 教程

这是对 HTML 的简短描述。

如需完整的 HTML 教程,请访问 W3Schools HTML 教程

有关完整的 HTML 标记参考,请转到 W3Schools 标记参考