AI-reviewed An AI proof-read this post, but it still deserves a careful read.

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.

Common extensions for HTML files are .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>: Declare that the current document uses HTML5.
<html>: The root element of the HTML document.
<head>: Save page information such as page titles, character encoding, style sheets, and scripts.
<body>: Save the actual page content displayed in the browser.

Common text tags

title tag

HTML provides <h1> to <h6> Level six titles,<h1> The highest level,<h6> 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> Represents a paragraph,<br /> Represents a line break at the current position.

horizontal dividing line

<hr />

Old versions of HTML can be accessed through size、color Other properties set the separator style, 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>: Represents content that is no longer accurate or relevant, and a strike-through is displayed by default.
<u>: Underlining 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, it is usually preferred <strong> and <em>。

preformatted text

<pre> Spaces and line breaks in the text are preserved:

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

font tags

Old versions of HTML can be used <font> Set the font color and size:

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

<font> Obsolete in HTML5, modern pages should use CSS color、font-size and other attributes.

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 sign
`>`	`>`	greater than sign
`&`	`&`	ampersand
` `	non-breaking space	Commonly used to insert fixed spaces

description list

The description list is provided by <dl>、<dt> and <dd> Composition:

<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>

type Common values for include 1、A、a、I and i。

unordered list

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

Old version of HTML type Attributes can be used circle、disc or square。Modern development usually comes through CSS list-style-type Set the bullet.

image labels

<img> 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 the picture cannot be displayed also facilitates accessibility.

hyperlink tags

<a> Used to create hyperlinks:

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

href: Target address.
target="_blank": Opens in a new window or new tab.
target="_self": Opening in the current page 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>: Define the table.
<caption>: Define the table title.
<tr>: Define a line.
<th>: Define header cells, which are bold and centered by default.
<td>: Define ordinary 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>

align、border、bordercolor、cellpadding and cellspacing Performance class attributes such as these 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 with name Only form controls that have not been disabled will participate in form submission according to the rules.

`input` control

input common type Values are as follows:

`type`	role
`text`	single-line text box
`password`	password entry box
`radio`	radio Box
`checkbox`	check box
`hidden`	hidden field
`email`	Mailbox input box
`number`	numeric entry boxes
`file`	file selection box
`date`	Date selection box
`datetime-local`	Local date and time selection box
`month`	Month and Year Selection 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 In order to form mutually exclusive groups; controls to be submitted should be set name and appropriate value。

Drop-down select label

<select> Define down lists to<option> Define 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> generally being placed upon <head> , 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 the document character encoding.
name: Specify the metadata name, for example keywords or viewport。
content: Specifies the content of the corresponding metadata.
http-equiv: Simulate some HTTP response header functions.

frameset tag

Old versions of HTML can be used <frameset> and <frame> 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: Name of the framework.
src: The page address displayed in the frame.

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

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

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

Random Posts

Related Posts

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

Random Posts

Related Posts

`input` control