介绍HTML

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 79 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #笔记 #后端

java基础专栏收录该内容

182 篇文章

订阅专栏

本文详细介绍了HTML，一种用于创建网页的标记语言，包括标签和元素的使用、HTML文档的基本结构、标题、段落、链接、图像、列表、表格、表单以及HTML样式和CSS的应用。

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。HTML 由许多不同的标记和元素组成，这些标记和元素定义了网页中各个部分的结构和显示方式。

下面是 HTML 的详细介绍：

HTML 标签和元素

HTML 使用标签（tag）来创建 HTML 文档中的元素（element）。标签和元素是 HTML 的基本组成部分。HTML 中的标签使用尖括号（<>）括起来，例如 <html>、<head>、<body>、<p> 等都是 HTML 中的标签。标签可以包含属性（attribute），用来为元素提供额外信息。例如，<a> 标签用于创建链接，可以使用 href 属性指定链接地址。

HTML 文档结构

HTML 文档通常由以下三个部分组成：

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <!-- 文档内容 -->
  </body>
</html>

<!DOCTYPE html> 声明文档类型为 HTML5。
<html> 元素是 HTML 文档的根元素。
<head> 元素包含了文档的头部信息，如文档标题、样式和脚本等。<title> 元素用于设置文档的标题，显示在浏览器的标签页上。
<body> 元素包含了文档的主体内容。

HTML 标题

HTML 标题用于对网页进行层次化组织，通常使用 <h1> 到 <h6> 六个层次的标题，其中 <h1> 为最高层次，表示最重要的标题。

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

HTML 段落

HTML 段落由 <p> 标签定义，用于表示一段文本。

<p>这是一段文本。</p>

HTML 链接

HTML 链接用于将网页中的不同部分链接在一起，使用户可以通过点击链接跳转到其他页面或文档。HTML 链接使用 <a> 标签定义，其中 href 属性用于指定链接地址。

<a href="https://www.baidu.com/">百度</a>

HTML 图像

HTML 图像用于在网页中显示图片。HTML 图像使用 <img> 标签定义，其中 src 属性用于指定图片地址，alt 属性用于指定图片的替代文本。

<img src="image.jpg" alt="图片">

HTML 列表

HTML 列表用于在网页中显示一组有序或无序的项。HTML 有两种列表类型：无序列表和有序列表。无序列表使用 <ul> 标签定义，其中每一项使用 <li> 标签定义；有序列表使用 <ol> 标签定义，其中每一项使用 <li> 标签定义。

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

<ol>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ol>

HTML 表格

HTML 表格用于在网页中显示数据。HTML 表格使用 <table> 标签定义，其中每个单元格使用 <td> 标签定义。表头可以使用 <th> 标签定义。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

HTML 表单

HTML 表单用于在网页中创建交互式控件，如文本框、单选框、复选框、下拉列表等。HTML 表单使用 <form> 标签定义，其中包含了各种控件。控件使用不同的标签定义，如 <input>、<select>、<textarea> 等。

<form>
  <label>用户名</label>
  <input type="text" name="username" />

  <label>密码</label>
  <input type="password" name="password" />

  <label>性别</label>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女

  <label>爱好</label>
  <input type="checkbox" name="hobby" value="reading">阅读
  <input type="checkbox" name="hobby" value="music">音乐

  <label>城市</label>
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>

  <label>自我介绍</label>
  <textarea name="introduction"></textarea>

  <input type="submit" value="提交">
</form>

HTML 样式

HTML 样式用于改变网页中元素的外观，如文字颜色、背景颜色、字体大小、字体样式等。HTML 样式可以使用内联样式、内部样式表、外部样式表来定义。

内联样式可以在元素标签中使用 style 属性直接定义样式。

<p style="color:red;font-size:16px;">这是一段文本。</p>

内部样式表以 <style> 标签的形式包含在 HTML 文档的头部。

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

外部样式表可以将样式定义在独立的 CSS 文件中，然后在 HTML 文档中使用 <link> 标签引入。

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