一、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>
- type：disc（默认实心圆）、circle（空心圆）、square（方块）。
2. 有序列表 <ol>
- <ol type="A" start="3">
- <li>第一步</li>
- <li>第二步</li>
- </ol>
- type：1（数字）、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 实体
实体代码显示结果<<>>&& 空格©©
七、表单 <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：请求方式（get或post）。
常见输入范例 <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>
- <textarea rows="4" cols="50">默认文本</textarea>
- <button type="button">点击</button>
九、留意事项
- 语义化标签：优先利用<strong>、<em>等语义化标签。
- 属性弃用：克制利用align、bgcolor等过时属性，改用 CSS。
- 表单安全：敏感数据（如密码）利用method="post"。
- 无停滞访问：为图片添加alt属性，表单元素关联<label>。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
