🎓 HTML 开发教程

本教程由沈阳农业大学大学生网络信息中心运行部提供，适用于校园网站开发

第一章：HTML 基础

1.1 HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标记语言。它是一种标准通用标记语言，由一系列的元素（如：文本、图像、链接、表格、列表等）组成。HTML 被设计用来定义网页的结构和内容，并可以嵌入到各种多媒体文件中，如：图像、视频、音频、应用程序等。

HTML 由一系列标签（tags）组成，这些标签告诉浏览器如何显示网页的内容。HTML 标签通常是成对出现的，比如：<html> 和 </html>，<head> 和 </head>，<body> 和 </body>。

HTML 运行在浏览器上，由浏览器来解析。

HTML文档的后缀名有两种： .html.htm 以上两种后缀名没有区别，都可以使用。

1.2 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园网站</title>
</head>
<body>
    <h1>欢迎来到沈阳农业大学</h1>
    <p>这里是网络信息中心运行部</p>
</body>
</html>

提示

在VSCode中，使用快捷键 ！ 可以自动创建 HTML 的骨架代码。

注意事项

必须包含 <!DOCTYPE html> 声明
推荐使用 meta charset="UTF-8"
<html lang="zh-CN">,设置网站的语言为中文

一个完整的网页由三部分组成：

1.骨架：骨架既网页的实际内容，包含文字，图片，视频，音频等。一般为 HTML 标签。

2.装饰：装饰是美化网页的外表，由 CSS 样式实现。

3.交互：交互是让用户与网页进行交互的功能，由 JavaScript 脚本实现。

本文档主要讲述 HTML 的基础知识，重点介绍骨架标签，CSS 和 JavaScript 的讲解将会放在后续章节中。

第二章：HTML标签

2.1 常用标签

标签	含义	示例	说明
`<h1>-<h6>`	标题	`<h1>校园新闻</h1>`	`<h1>` 到 `<h6>` 对应六级标题
`<p>`	段落	`<p>正文内容</p>`	使用 `<br>` 实现换行
`<a>`	链接	`<a href="https://www.syau.edu.cn">沈阳农业大学</a>`	超链接
`<img>`	图片	`<img src="https://www.syau.edu.cn/assets/syau-logo.png" alt="校徽" width="120" >`	图片标签
`<p>`	段落	`<p>正文内容</p>`
`<br>`	换行	`第一行<br>第二行`	单标签
`<ul>`	无序列表	`<ul><li>列表项1</li><li>列表项2</li></ul>`	列表项
`<ol>`	有序列表	`<ol><li>列表项1</li><li>列表项2</li></ol>`	列表项
`<li>`	列表项	`<li>列表项内容</li>`	列表项
`<code>`	代码	`<code>代码内容</code>`	代码内容
`<pre>`	预格式化文本	`<pre>代码内容</pre>`	代码内容
`<span>`	行内样式	`<span style="color:red">红色文本</span>`	行内样式
`<div>`	块级元素	`<div>块级元素内容</div>`	块级元素
`<table>`	表格	`<table><tr><td>单元格内容</td></tr></table>`	表格
`<form>`	表单	`<form><input type="text" name="username"></form>`	表单
`<input>`	输入框	`<input type="text" name="username" required>`	输入框
`<button>`	按钮	`<button>提交</button>`	按钮
`<script>`	JavaScript脚本	`<script>console.log("Hello, world!");</script>`	在标签内写入JavaScript脚本
`<style>`	CSS 样式	`<style>body { font-family: "Microsoft YaHei", sans-serif; }</style>`	在标签内写入CSS样式

2.2 常用标签详述

2.2.1 常用结构标签

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

2.2.2 文本标签

<h1>-<h6> 六级标题，其中 <h1> 表示为一级标题，以此类推。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>第一段<br>第二段</p>

<p> 描述一个段落。
<br> 换行。

<p>第一段<br>第二段</p>
<p>第三段</p>

2.2.3 链接标签

<a> 定义一个超链接，href 属性指定链接的地址，title 属性为链接的提示文字。

<a href="https://www.syau.edu.cn" title="沈阳农业大学">沈阳农业大学</a>

2.2.4 图像标签

<img> 定义一个图像，src 属性指定图像的 URL，alt 属性为图像的替代文字，width 属性为图像的宽度。

<img src="https://www.syau.edu.cn/assets/syau-logo.png" alt="校徽" width="120" >

2.2.5 列表标签

<ul> 定义一个无序列表，<li> 定义列表项。
<ol> 定义一个有序列表，<li> 定义列表项。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

2.2.6 代码标签

<code> 表示内联代码片段，用于在 HTML 文档中嵌入计算机代码。
<pre> 定义预格式化文本，通常用来表示代码片段。
<kbd> 表示键盘字符。
<sup> 定义上标文本。
<sub> 表示下标文本。

<code>document.write("Hello, world!");</code>

<pre>
function myFunction() {
  console.log("Hello, world!");
}
</pre>

<kbd>Ctrl</kbd>+<kbd>C</kbd>

<p>H<sub>2</sub>O</p>

2.2.7 表单标签

<form> 定义一个表单，action 属性指定提交表单数据的 URL，method 属性指定提交方式，如 GET 或 POST。
<input> 定义一个输入框，type 属性指定输入框类型，如 text、password、checkbox、radio、submit、reset。
<button> 定义一个按钮，type 属性指定按钮类型，如 button、submit、reset。

<form>
    <input type="text" name="username" required>
    <button type="button">显示用户名</button>
</form>

2.2.8 分组标签

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

提示

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

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

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

提示

<span> 元素也没有特定的含义。

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

HTML 分组标签

标签	描述
`<div>`	定义一个 HTML 章节。
`<span>`	定义一个文档中的节。

<div> 定义了文档的区域，块级 (block-level) <span> 用来组合文档中的行内元素，内联元素(inline)

2.2.9 其他标签

<table> 定义一个表格，<tr> 定义表格行，<td> 定义表格单元格。
<style> 定义 CSS 样式，用于设置网页的样式。CSS教程见后续章节。
<script> 定义 JavaScript 脚本，用于实现网页的动态效果。JavaScript教程见后续章节。

第三章：表单应用

表单是 HTML 中最为常见的内容之一，几乎所有的网页中都有表单的身影。

3.1 登录表单

登录表单可用于用户输入登录信息。

<form class="login-form" action="/login" method="POST">
    <div class="form-group">
        <label for="username">学号/工号：</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    
    <button type="submit" class="syau-btn">登录</button>
</form>

3.2 信息收集表单

信息收集表单可用于收集用户的个人信息。其中可包含有单选框、复选框、单行文本框和多行文本框等

<form class="info-form" action="/submit" method="POST">
    <div class="form-group">
        <label>姓名：</label>
        <input type="text" name="name" required>
    </div>
    
    <div class="form-group">
        <label>性别：</label>
        <select name="gender">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>爱好：</label>
        <fieldset>
            <input type="checkbox" name="hobbies" value="music">音乐
            <input type="checkbox" name="hobbies" value="movie">电影
            <input type="checkbox" name="hobbies" value="read">阅读
        </fieldset>
    </div>
    
    <div class="form-group">
        <label>备注：</label>
        <textarea name="note">请输入备注...</textarea>
    </div>
    
    <button type="submit" class="syau-btn">提交</button>
</form>