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>
相关推荐
前端付杰5 分钟前
第八节: 全面理解vue3: 工具函数的核心作用与使用方法
前端·javascript·vue.js
Mr_sun.5 分钟前
Node.js与VUE安装
前端·vue.js·node.js
Tonychen6 分钟前
【React 源码阅读】为什么 React Hooks 不能用条件语句来执行?
前端·react.js·源码阅读
Cutey91610 分钟前
Vuex vs Pinia
前端·vue.js·面试
Sallywa16 分钟前
全局替换的思路历程
前端
Anlici21 分钟前
虚拟dom 源码分析一下
前端·javascript·前端框架
码云之上1 小时前
一文讲明白页面导出为HTML实现原理与步骤
前端·javascript·canvas
unioncron1 小时前
uniapp上传文件问题以及返回上一页出现退出app的问题记录
android·前端·uni-app
SoaringHeart1 小时前
Flutter进阶:Cusor + claude-3.7 AI编程实战效果研究
前端·flutter
狼性书生1 小时前
uniapp 实现的步进指示器组件
前端·uni-app·vue·组件