学习笔记——HTML网页开发基础

HTML网页开发基础

一、HTML文档基本结构

1.1 文档类型声明

复制代码

<!DOCTYPE html>  <!-- HTML5文档声明 -->

1.2 基本骨架

复制代码

<html>
<head>
    <meta charset="utf-8">  <!-- 设置中文编码 -->
    <title>页面标题</title>  <!-- 浏览器标签页显示 -->
</head>
<body>
    网页内容区域
</body>
</html>

二、常用HTML标签

2.1 标题标签

复制代码

<h1>一级标题</h1>  <!-- 最大，最重要 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>  <!-- 最小 -->

特性：自动加粗、换行、字号递减

2.2 段落标签

复制代码

<p>这是一个段落，会自动换行</p>
<p>这是另一个段落，与前一段有间距</p>

2.3 水平线标签

复制代码

<hr>  <!-- 单标签，创建水平分割线 -->

2.4 注释

复制代码

<!-- 这是注释，不会在网页中显示 -->

三、元素属性

3.1 基本语法

复制代码

<标签 属性1="值1" 属性2="值2">内容</标签>

3.2 常用属性

align - 对齐方式

复制代码

<h1 align="left">左对齐</h1>
<h2 align="center">居中对齐</h2>
<h3 align="right">右对齐</h3>

bgcolor - 背景颜色

复制代码

<body bgcolor="#ff0000">  <!-- 红色背景 -->
<body bgcolor="red">      <!-- 颜色名称 -->
<body bgcolor="rgb(255,0,0)">  <!-- RGB格式 -->

四、文本格式化标签

标签	描述	示例
`<b>`	加粗文本	`<b>加粗文字</b>`
`<i>`	斜体文本	`<i>斜体文字</i>`
`<u>`	下划线文本	`<u>下划线文字</u>`
`<del>`	删除线文本	`<del>删除文字</del>`
`<small>`	小号字体	`<small>小字</small>`
`<sub>`	下标	H`<sub>2</sub>`O
`<sup>`	上标	100m`<sup>2</sup>`
`<mark>`	高亮标记	`<mark>重点内容</mark>`

4.1 化学公式示例

复制代码

H<sub>2</sub>SO<sub>4</sub>  <!-- 硫酸 -->
E = mc<sup>2</sup>          <!-- 质能方程 -->

4.2 换行标签

复制代码

第一行<br>第二行<br><br>两个换行后的第三行

五、超链接

5.1 基本语法

复制代码

<a href="目标地址">链接文本</a>

5.2 链接类型

外部网站链接

复制代码

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

本地文件链接

复制代码

<a href="index.html">返回首页</a>

图片链接

复制代码

<a href="http://www.taobao.com">
    <img src="logo.png" alt="淘宝">
</a>

邮件链接

复制代码

<a href="mailto:contact@example.com">联系我们</a>

5.3 target属性

复制代码

<a href="http://www.baidu.com" target="_self">当前窗口打开</a>
<a href="http://www.baidu.com" target="_blank">新窗口打开</a>

六、图像标签

6.1 基本语法

复制代码

<img src="图片路径" alt="替代文本">

6.2 常用属性

属性	描述	示例
`src`	图片来源	`src="photo.jpg"`
`alt`	替代文本	`alt="风景图片"`
`width`	宽度(px/%)	`width="200"` 或 `width="50%"`
`height`	高度(px)	`height="150"`

复制代码

<img src="avatar.jpg" alt="用户头像" width="100" height="100">
<img src="banner.jpg" alt="横幅广告" width="100%">

注意：高度百分比通常无效，建议使用固定像素值

七、列表

7.1 无序列表

复制代码

<ul type="disc">  <!-- 默认值：实心圆点 -->
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

type属性值

disc：● 实心圆点（默认）
circle：○ 空心圆圈
square：■ 实心方块

7.2 有序列表

复制代码

<ol type="1" start="1">
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

type属性值

1：数字1,2,3...（默认）
A：大写字母A,B,C...
a：小写字母a,b,c...
I：大写罗马数字I,II,III...
i：小写罗马数字i,ii,iii...

八、表格

8.1 基本表格结构

复制代码

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1-1</td>
        <td>数据1-2</td>
        <td>数据1-3</td>
    </tr>
    <tr>
        <td>数据2-1</td>
        <td>数据2-2</td>
        <td>数据2-3</td>
    </tr>
</table>

8.2 单元格合并

横向合并 (colspan)

复制代码

<tr>
    <th colspan="3">学生成绩表</th>
</tr>

纵向合并 (rowspan)

复制代码

<tr>
    <td rowspan="2">张三</td>
    <td>语文：90</td>
</tr>
<tr>
    <td>数学：85</td>
</tr>

8.3 完整表格示例

复制代码

<table border="1">
    <tr>
        <th colspan="3">学生信息表</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>92</td>
    </tr>
</table>

九、HTML实体字符

实体	显示	描述
` `		不间断空格
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
`"`	"	双引号
`©`	©	版权符号
`®`	®	注册商标

复制代码

<p>10 &gt; 5 显示为 10 > 5</p>
<p>版权所有 &copy; 2025</p>

十、表单

10.1 表单基本结构

复制代码

<form action="提交地址" method="get">
    <!-- 表单内容 -->
</form>

method属性

GET：数据附加在URL后，适合少量数据
复制代码
```
http://example.com/login?username=张三&password=123
```
POST：数据放在请求体中，适合大量或敏感数据

10.2 input输入框

文本输入框

复制代码

<input type="text" name="username" placeholder="请输入用户名" required>

密码框

复制代码

<input type="password" name="password" placeholder="请输入密码" required>

提交按钮

复制代码

<input type="submit" value="登录">

重置按钮

复制代码

<input type="reset" value="清空">

10.3 input常用属性

属性	描述	示例
`type`	输入类型	`type="text"`
`name`	参数名称	`name="username"`
`value`	默认值	`value="admin"`
`placeholder`	提示文本	`placeholder="请输入..."`
`required`	必填项	`required`
`maxlength`	最大长度	`maxlength="20"`
`readonly`	只读	`readonly`
`disabled`	禁用	`disabled`

10.4 其他输入类型

复制代码

<!-- 邮箱验证 -->
<input type="email" name="email" placeholder="请输入邮箱">

<!-- 普通按钮 -->
<input type="button" value="点击我" οnclick="alert('你好!')">

<!-- 图片按钮 -->
<input type="image" src="submit.png" alt="提交">

<!-- 隐藏字段 -->
<input type="hidden" name="userid" value="1001">

10.5 完整表单示例

复制代码

<form action="login.php" method="post">
    <p>
        <label>用户名：</label>
        <input type="text" name="username" 
               placeholder="请输入用户名" 
               required maxlength="20">
    </p>
    
    <p>
        <label>密码：</label>
        <input type="password" name="password" 
               placeholder="请输入密码" 
               required>
    </p>
    
    <p>
        <label>邮箱：</label>
        <input type="email" name="email" 
               placeholder="example@domain.com">
    </p>
    
    <p>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="帮助" οnclick="showHelp()">
    </p>
    
    <input type="hidden" name="token" value="abc123">
</form>

十一、最佳实践建议

语义化标签：合理使用标签表达内容含义
编码统一：始终使用UTF-8编码
属性引号：属性值用双引号包裹
图片优化：添加alt属性，设置合适尺寸
表单验证：前端验证结合后端验证
代码缩进：保持一致的缩进格式
注释清晰：复杂结构添加必要注释

十二、现代替代建议

CSS代替部分HTML属性

使用CSS设置颜色、对齐等样式

复制代码

<!-- 旧方式 -->
<body bgcolor="red">
<h1 align="center">标题</h1>

<!-- 新方式 -->
<body>
<h1 style="text-align: center;">标题</h1>

HTML5新增输入类型

复制代码

<input type="tel" name="phone">     <!-- 电话号码 -->
<input type="number" name="age">    <!-- 数字 -->
<input type="date" name="birthday"> <!-- 日期 -->
<input type="color" name="favcolor"><!-- 颜色选择 -->

使用label元素

复制代码

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

实体	显示	描述
` `		不间断空格
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
`"`	"	双引号
`©`	©	版权符号
`®`	®	注册商标

实体	显示	描述
` `		不间断空格
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
`"`	"	双引号
`©`	©	版权符号
`®`	®	注册商标

实体	显示	描述
` `		不间断空格
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
`"`	"	双引号
`©`	©	版权符号
`®`	®	注册商标