基本标签
1. 换行标签 <br>
html"><br>
2. 链接标签 <a>
html"><a href="https://www.example.com" target="_blank">网站</a>
-
href：指定链接地址。 -
target：_blank：在新标签页打开。_self（默认）：当前页面打开。
-
可以把图像做成一个超链接(把img标签嵌套在链接标签里即可)
3. 图像标签 <img>
html"><img src="image.jpg" alt="示例图片" title="鼠标悬浮提示" width="200" height="150">
<!-- ../ 上一级目录 -->
alt：图片加载失败时显示的文本。title：鼠标悬浮时显示的文字。width/height：设置宽高（像素）。
4. 段落标签 <p>
html"><p>这是一个段落。</p>
- 注意：不能直接使用
color属性设置文本颜色。
5. 水平线 <hr>
html"><hr>
- 自闭合标签，不需要结束标签。
6. 空格
html">HTML 空格示例
7. 加粗文本
html"><strong>重要加粗文本</strong>
8. 布局标签
html"><div>大盒子（块级元素）</div>
<span>小盒子（行内元素）</span>
<div>：块级元素，占据整行。<span>：行内元素，可与其他元素并排。
9.斜体
html"><em>i love you</em>
10.大于小于
html">> <!--大于-->
< <!--小于-->
11.列表
html"><!-- 有序列表-->
<ol>
<li>Java</li>
<li>python</li>
</ol>
<!-- 无序列表-->
<ul>
<li>Java</li>
<li>python</li>
</ul>
<!-- 自定义列表-->
<!--dl是标签,dt是标题,dd是内容-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>cpp</dd>
</dl>
12.表格
html"><!--table:表格标签,tr:行,td:列-->
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<!-- colspan:跨列,rowspan:跨行-->
<td colspan="2">其他信息</td>
</tr>
<tr>
<td>warren</td>
<td>18</td>
<td>家庭住址:天津</td>
<td>成绩:优秀</td>
</tr>
</table>
13.视频音频标签
html"><!--视频标签-->
<video width="800" controls autoplay>
<source src="../resource/抗战二十年.mp4" type="video/mp4">
</video>
<!--音频标签-->
<audio controls autoplay loop>
<source src="../resource/hai.mp3" type="audio/mpeg">
</audio>
14.内联框架
html"><iframe src="https://www.bilibili.com/"width="860" height="655" ></iframe>
表单 <form>
| 属性 | 作用 | 适用类型 | 前端作用 | 后端作用 |
|---|---|---|---|---|
name | 指定表单元素的名称，用于提交时标识数据 | 所有 input | 作为 document.forms 获取值的 key | 作为后端接收数据的 key (request.getParameter(name)) |
value | 指定输入框的初始值，radio/checkbox 必须有值 | text、password、radio、checkbox、hidden | 设定默认值，可用 JavaScript 修改 | 作为 name=value 提交到后端 |
size | 指定文本框初始宽度（字符单位） | text、password | 控制输入框宽度（CSS 更常用） | 无影响 |
maxlength | 限制 text 或 password 的最大输入字符数 | text、password | 限制前端输入字符长度 | 仍需后端验证，防止超长提交 |
checked | 设定 radio 或 checkbox 是否默认选中 | radio、checkbox | 设定默认选中，可用 JS 控制 | 选中时提交 name=value，未选中时无数据提交 |
1. 表单基本结构
html"><form action="submit.php" method="POST">
<!-- 表单内容 -->
</form>
action：提交地址。method：GET：数据在URL后（不安全）。POST：数据放在请求体中（比较安全,可以提交大文件）。
2. 文本框
html"><input type="text" name="username" placeholder="请输入用户名" required>
placeholder：提示文字。required：必填。
3. 密码框
html"><input type="password" name="password" placeholder="请输入密码" required>
type="password"：输入内容会隐藏。
4. 单选框
html"><input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
name：相同name让它们成为一组。checked：默认选中。
5. 多选框
html"><input type="checkbox" name="subscribe" value="yes"> 勾选
6.文件上传
html"><label>上传文件：</label>
<input type="file" name="upload">
7.下拉框
html"><label for="city">选择城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou" selected>广州</option>
<option value="shenzhen">深圳</option>
</select>
selected:默认选中
8.邮箱输入
html"><form>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="输入邮箱" required>
<button type="submit">提交</button>
</form>
- 只能输入符合邮箱格式的内容（如
user@example.com）。 - 浏览器会自动验证格式，不符合不能提交。
9.URL输入
html"><form>
<label for="website">个人网站：</label>
<input type="url" id="website" name="website" placeholder="https://example.com" required>
<button type="submit">提交</button>
</form>
- 只能输入URL 格式的内容（如
https://example.com）。
10.滑块
html"><form>
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50" oninput="updateValue(this.value)">
<span id="volumeValue">50</span>
</form>
<script>javascript">
function updateValue(value) {
document.getElementById("volumeValue").innerText = value;
}
</script>
min和max限制范围，step设置步长，value设定初始值。oninput事件监听变化，JavaScript可实时更新显示数值。
按钮
1. 提交按钮
html"><input type="submit" value="提交">
2. 普通按钮
html"><input type="button" value="btn" onclick="javascript language-javascript">alert('点击')">
- 可用于执行 JavaScript 代码。
3. 重置按钮
html"><input type="reset" value="重置">
- 点击后清空表单数据。
