HTML 基础

一、HTML 基本结构
复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 可见内容区域 -->
</body>
</html>
  • <!DOCTYPE html>:声明文档类型为 HTML5。
  • <html>:根标签,包裹所有 HTML 内容。
  • <head>:包含元数据(标题、CSS、字符集等)。
  • <body>:页面可见内容的容器。

二、基础标签与属性
1. 文本标签
标签 说明 示例
<h1>~<h6> 标题(1级最大,6级最小) <h1>主标题</h1>
<p> 段落(自动换行) <p>段落内容</p>
<hr> 水平分割线(单标签) <hr>
<!-- --> 注释 <!-- 这是注释 -->
2. 文本格式化
标签 效果 示例
<b>/<strong> 加粗(推荐用<strong>语义化) <strong>强调内容</strong>
<i>/<em> 斜体(推荐用<em>语义化) <em>强调文本</em>
<del> 删除线 <del>删除内容</del>
<u> 下划线 <u>下划线内容</u>
<sup>/<sub> 上标/下标 H<sub>2</sub>O
<mark> 高亮文本 <mark>重点标记</mark>

三、超链接与图像
1. 超链接 <a>
复制代码
<a href="https://www.baidu.com" target="_blank" rel="noopener">百度</a>
  • 属性
    • href:链接地址(支持 URL、本地文件、邮箱mailto:)。
    • target:打开方式(_blank新窗口,_self当前页)。
    • download:强制下载文件(需文件名)。
2. 图像 <img>
复制代码
<img src="image.jpg" alt="图片描述" width="200" height="100">
  • 属性
    • src:图片路径(支持相对/绝对路径)。
    • alt:替代文本(图片无法加载时显示)。
    • width/height:尺寸(像素或百分比,高度百分比可能无效)。

四、列表
1. 无序列表 <ul>
复制代码
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
</ul>
  • typedisc(默认实心圆)、circle(空心圆)、square(方块)。
2. 有序列表 <ol>
复制代码
<ol type="A" start="3">
    <li>第一步</li>
    <li>第二步</li>
</ol>
  • type1(数字)、A(大写字母)、a(小写字母)、I(罗马数字)。
  • start:起始序号(支持数字)。

五、表格
复制代码
<table border="1">
    <tr>
        <th colspan="2">标题</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>
  • 标签
    • <tr>:表格行。
    • <td>:普通单元格。
    • <th>:标题单元格(自动加粗居中)。
  • 属性
    • colspan:跨列合并。
    • rowspan:跨行合并。

六、HTML 实体
实体代码 显示效果
&lt; <
&gt; >
&amp; &
&nbsp; 空格
&copy; ©

七、表单 <form>
复制代码
<form action="/submit" method="post">
    <label>用户名:<input type="text" name="user" required></label>
    <input type="password" name="pwd" placeholder="输入密码">
    <input type="submit" value="提交">
</form>
  • 属性
    • action:提交地址。
    • method:请求方式(getpost)。
常见输入类型 <input>
类型 说明
text 单行文本输入
password 密码输入(掩码显示)
email 邮箱格式验证
number 数字输入(可设步长)
submit 提交按钮
reset 重置表单内容
file 文件上传(需enctype="multipart/form-data"

八、其他重要标签
1. 下拉列表 <select>
复制代码
<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>
2. 多行文本域 <textarea>
复制代码
<textarea rows="4" cols="50">默认文本</textarea>
3. 按钮 <button>
复制代码
<button type="button">点击</button>

九、注意事项
  1. 语义化标签 :优先使用<strong><em>等语义化标签。
  2. 属性弃用 :避免使用alignbgcolor等过时属性,改用 CSS。
  3. 表单安全 :敏感数据(如密码)使用method="post"
  4. 无障碍访问 :为图片添加alt属性,表单元素关联<label>
相关推荐
幼儿园技术家9 分钟前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele2 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript
谦行2 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊3 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃4 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端