HTML

HTML Overview

HTML is the abbreviation of HyperText Markup Language, and its Chinese name is “Hypertext Markup Language.”

Hypertext: In addition to ordinary text, it can also contain pictures, audio, videos, links, forms, etc.
Markup Language: Describe the structure and content of the page through tags. HTML is not a programming language, nor is it a scripting language that requires compilation and execution.

A common extension for HTML files is .html or .htm. After the browser reads the HTML file, it parses the tags and renders the page.

HTML document structure

A complete HTML document usually consists of a document declaration, root elements, headers, and body:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>我的第一个页面</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE html>: declares that the current document uses HTML5.
<html>: The root element of an HTML document.
<head>: Saves page information such as page titles, character coding, style sheets, and scripts.
<body>: Save the actual page content displayed in the browser.

Common text tags

title tag

HTML provides six-level titles from <h1> to <h6>, with <h1> having the highest level and <h6> having the lowest level:

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

Title levels should be used based on the content structure, not just selecting titles based on the default font size.

Paragraphs and line breaks

<p>这是一个段落。</p>
<p>这是另一个段落。<br />这里进行了换行。</p>

<p> denotes a paragraph, and <br /> denotes a line break at the current position.

horizontal dividing line

<hr />

In the old version of HTML, you can set separator styles through attributes such as size and color, but modern development usually uses CSS.

Text Style Labels

<p><s>删除线文本</s></p>
<p><u>带下划线的文本</u></p>
<p><i>斜体文本</i></p>
<p><b>加粗文本</b></p>
<p>2<sup>10</sup></p>
<p>n<sub>log</sub></p>

<s>: Indicates content that is no longer accurate or relevant, and displays strikethrough by default.
<u>: Underline is displayed by default.
<i>: Italic is displayed by default.
<b>: Bold is displayed by default.
<sup>: Superscript.
<sub>: subscript.

When semantics need to be emphasized, <strong> and <em> are usually preferred.

preformatted text

<pre> retains spaces and line breaks in the text:

<pre>
public class Person {
    private String name;
    private Integer age;
    private String sex;
}
</pre>

font tags

Old versions of HTML can use <font> to set font color and size:

<font size="5" color="red">正式进入第三阶段：</font>
<font color="green">JavaWeb 程序开发</font>

<font> has been abandoned in HTML5, and modern pages should use CSS attributes such as color and font-size.

HTML entity characters

Entity characters can be used when characters conflict with HTML syntax, or when special spaces are required:

Entity	Display Results	Description
`<`	`<`	Less than
`>`	`>`	Greater than
`&`	`&`	and number
` `	Non-line-breaking spaces	is often used to insert fixed spaces

description list

The description list consists of <dl>, <dt> and <dd>:

<dl>
    <dt>图书信息</dt>
    <dd>Java 学习笔记</dd>
    <dd>Java 核心技术</dd>
    <dd>Java 编程思想</dd>
</dl>

ordered list

<ol type="1">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ol>

Common values for type include 1, A, a, I and i.

unordered list

<ul type="disc">
    <li>Java 学习笔记</li>
    <li>Java 核心技术</li>
    <li>Java 编程思想</li>
</ul>

The type attribute of old HTML can use circle, disc, or square. Modern development usually uses CSS list-style-type to set bulleted points.

image labels

<img> is used to display pictures on the page:

<img src="" width="300" height="300" alt="图像丢失" />

src: Picture address.
width: Picture width.
height: Picture height.
alt: Alternative text when pictures cannot be displayed also facilitates barrier-free access.

hyperlink tags

<a> is used to create hyperlinks:

<a href="www.baidu.com" target="_blank">百度</a>

href: Target address.
target="_blank": Open in a new window or new tab.
target="_self": Open it on the current page, which is also the default behavior.

Form label

Tables are mainly used to display structured data, and it is not recommended to use tables to complete the entire page layout.

basic structure

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格</th>
        <td>普通单元格</td>
    </tr>
</table>

<table>: Definition table.
<caption>: Define table titles.
<tr>: Define a line.
<th>: Define header cells, bold and centered by default.
<td>: Define normal cells.

cell merging

colspan: Cross-column consolidation, that is, horizontal consolidation.
rowspan: Cross-line merge, that is, vertical merge.

example

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表格示例</title>
</head>
<body>
    <table align="center" width="800" border="1" bordercolor="#ffb399" cellpadding="10" cellspacing="5">
        <caption>用户信息</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>女</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td colspan="2">水平方向合并两个单元格</td>
            <td rowspan="2">垂直方向合并两个单元格</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>22</td>
            <td><a href="">修改</a>｜删除</td>
        </tr>
    </table>
</body>
</html>

Presentation class attributes such as align, border, bordercolor, cellpadding and cellspacing are no longer recommended in modern HTML, and actual development is usually set through CSS.

form labels

Forms are used to collect user input and submit the data to the server.

Basic form structure

<form action="http://localhost:8080/login.do" method="get">
    表单内容
</form>

action: Form submission address.
method: Submission method, common values are get and post.

Only form controls with the name attribute that are not disabled will participate in form submission according to the rules.

`input` control

Common type values for input are as follows:

`type`	Action
`text`	Single-line text box
`password`	Password input box
`radio`	Radio Box
`checkbox`	Checkbox
`hidden`	Hidden domain
`email`	Mailbox input box
`number`	Digital input box
`file`	File selection box
`date`	Date selection box
`datetime-local`	Local Date and Time Select Box
`month`	Month and Month Select Box
`color`	Color Selector
`button`	Ordinary button
`image`	Picture submit button
`submit`	Submit button
`reset`	Reset button

Common common attributes include id, name, class, placeholder, style and value.

Example form

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>表单示例</title>
</head>
<body>
    <form action="http://localhost:8080/login.do" method="get">
        账户：<input type="text" name="userName" /><br />
        密码：<input type="password" name="userPwd" /><br />
        性别：
        <input type="radio" name="userSex" value="male" />男
        <input type="radio" name="userSex" value="female" />女<br />
        爱好：
        <input type="checkbox" name="hobby" value="smoking" />抽烟
        <input type="checkbox" name="hobby" value="drinking" />喝酒
        <input type="checkbox" name="hobby" value="perm" />烫头<br />
        邮箱：<input type="email" name="email" /><br />
        数字：<input type="number" name="number" /><br />
        文件：<input type="file" name="file" /><br />
        日期：<input type="date" name="date" /><br />
        本地时间：<input type="datetime-local" name="dateTime" /><br />
        颜色：<input type="color" name="color" /><br />
        年月：<input type="month" name="month" /><br />
        普通按钮：<input type="button" value="确定" /><br />
        图片按钮：<input type="image" src="fish.jpg" width="600" height="300" alt="提交" /><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

Radio boxes need to use the same name to form mutually exclusive groups; controls that need to be submitted should have name and the appropriate value.

Drop-down Select Label

<select> definition drop-down list, <option> definition options:

<label for="education">学历：</label>
<select id="education" name="education">
    <option value="">请选择</option>
    <option value="college">专科</option>
    <option value="bachelor">本科</option>
    <option value="master">研究生</option>
</select>

metadata tags

<meta> is usually placed in <head> and is used to describe the character encoding, keywords, viewports and other information of the document.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="java程序开发,javaWeb程序设计,锅包肉" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元数据示例</title>
</head>
<body>
</body>
</html>

charset: Set document character encoding.
name: Specify the metadata name, such as keywords or viewport.
content: Specify the content of the corresponding metadata.
http-equiv: Simulate some HTTP response header functions.

frameset tag

Old versions of HTML can use <frameset> and <frame> to split the browser window into multiple areas:

<frameset rows="150,*">
    <frame name="top" src="hello.html" />
    <frameset cols="200,*">
        <frame name="left" src="world.html" />
        <frame name="right" src="right.html" />
    </frameset>
</frameset>

rows: Divide areas by row.
cols: Divide areas by column.
name: Framework name.
src: The page address displayed in the frame.

<frameset> and <frame> are obsolete in HTML5. Modern page layouts should use CSS, and <iframe> can be used as needed when embedding other pages.

comprehensive case

The following case uses a combination of titles, links, lists, tables and forms. The case retains the course writing using table layout; in modern projects, the overall page layout usually uses CSS Flexbox or Grid.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>前端编程培训中心</title>
</head>
<body>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" height="100" bgcolor="#f0f0f0" align="center">
                <h1>前端编程培训中心</h1>
                <p>专注 HTML、CSS、JavaScript 零基础前端教学</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="40" bgcolor="#2c3e50" align="center">
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">首页</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">课程介绍</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">师资力量</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">学员案例</a>
                <a href="#" style="color: #fff; text-decoration: none; margin: 0 15px;">在线报名</a>
            </td>
        </tr>
        <tr>
            <td width="200" bgcolor="#ecf0f1" valign="top" height="400">
                <h3 align="center">栏目导航</h3>
                <hr />
                <ul>
                    <li><a href="#">HTML 入门课程</a></li>
                    <li><a href="#">CSS 美化样式</a></li>
                    <li><a href="#">JavaScript 交互</a></li>
                    <li><a href="#">综合项目案例</a></li>
                </ul>
                <hr />
                <h3 align="center">联系我们</h3>
                <p align="center">电话：123-456789</p>
                <p align="center">地址：黑龙江工商学院</p>
            </td>
            <td width="600" valign="top" bgcolor="#ffffff">
                <h2 align="center">欢迎来到黑龙江工商学院</h2>
                <hr />
                <table width="90%" border="1" align="center" cellpadding="5" cellspacing="0">
                    <tr>
                        <th>课程名称</th>
                        <th>学习时长</th>
                        <th>适合人群</th>
                    </tr>
                    <tr>
                        <td>HTML 网页搭建</td>
                        <td>5 天</td>
                        <td>零基础学员</td>
                    </tr>
                    <tr>
                        <td>CSS 页面美化</td>
                        <td>7 天</td>
                        <td>掌握 HTML 基础</td>
                    </tr>
                    <tr>
                        <td>JavaScript 交互开发</td>
                        <td>10 天</td>
                        <td>有前端基础</td>
                    </tr>
                </table>
                <br />
                <hr />
                <h3 align="center">在线报名表单</h3>
                <form>
                    <table width="80%" align="center" border="0">
                        <tr>
                            <td width="100" align="right">姓名：</td>
                            <td><input type="text" name="name" placeholder="请输入姓名" /></td>
                        </tr>
                        <tr>
                            <td align="right">手机号：</td>
                            <td><input type="text" name="phone" placeholder="请输入手机号" /></td>
                        </tr>
                        <tr>
                            <td align="right">意向课程：</td>
                            <td>
                                <select name="course">
                                    <option>HTML 入门</option>
                                    <option>CSS 美化</option>
                                    <option>JavaScript 开发</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" value="提交报名" />
                                <input type="reset" value="重置" />
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="60" bgcolor="#2c3e50" align="center">
                <p style="color: #fff;">© 2026 前端编程培训中心 版权所有</p>
            </td>
        </tr>
    </table>
</body>
</html>

HTML

HTML

HTML Overview

HTML document structure

Common text tags

title tag

Paragraphs and line breaks

horizontal dividing line

Text Style Labels

preformatted text

font tags

HTML entity characters

list tag

description list

ordered list

unordered list

image labels

hyperlink tags

Form label

basic structure

cell merging

example

form labels

Basic form structure

input control

Example form

Drop-down Select Label

metadata tags

frameset tag

comprehensive case

`input` control