Html 5简介(学习笔记)

根本标签

1. 换行标签 <br>

1. <br>

复制代码

2. 链接标签 <a>

1. <a href="https://www.example.com" target="_blank">网站</a>

复制代码

• href：指定链接地址。
  
• target：
  
  
  
  • _blank：在新标签页打开。
    
  • _self（默认）：当前页面打开。
    
  
  
• 可以把图像做成一个超链接(把img标签嵌套在链接标签里即可)
  

3. 图像标签 <img>

1. <img src="image.jpg" alt="示例图片" title="鼠标悬浮提示" width="200" height="150">
3. <!-- ../ 上一级目录 -->

复制代码

• alt：图片加载失败时显示的文本。
  
• title：鼠标悬浮时显示的文字。
  
• width / height：设置宽高（像素）。
  

4. 段落标签 <p>

1. <p>这是一个段落。</p>

复制代码

• 留意：不能直接使用 color 属性设置文本颜色。
  

5. 水平线 <hr>

1. <hr>

复制代码

• 自闭合标签，不需要结束标签。
  

6. 空格  

1. HTML&nbsp;空格示例

复制代码

7. 加粗文本

1. <strong>重要加粗文本</strong>

复制代码

8. 结构标签

1. <div>大盒子（块级元素）</div>
2. <span>小盒子（行内元素）</span>

复制代码

• <div>：块级元素，占据整行。
  
• <span>：行内元素，可与其他元素并排。
  

9.斜体

1. <em>i love you</em>

复制代码

10.大于小于

1. &gt <!--大于-->
2. &lt <!--小于-->

复制代码

11.列表

1. <!-- 有序列表-->
2. <ol>  
3.   <li>Java</li>  
4.   <li>python</li>  
5. </ol>
7. <!-- 无序列表-->
8. <ul>  
9.   <li>Java</li>  
10.   <li>python</li>  
11. </ul>
13. <!-- 自定义列表-->
14. <!--dl是标签,dt是标题,dd是内容-->  
15. <dl>  
16.   <dt>学科</dt>  
17.   <dd>java</dd>  
18.   <dd>cpp</dd>  
19. </dl>

复制代码

12.表格

1. <!--table:表格标签,tr:行,td:列-->  
2. <table border="1px">  
3.   <tr>  
4.     <td>姓名</td>  
5.     <td>年龄</td>  
6. <!--    colspan:跨列,rowspan:跨行-->  
7.     <td colspan="2">其他信息</td>  
8.   </tr>  
9.   <tr>  
10.     <td>warren</td>  
11.     <td>18</td>  
12.     <td>家庭住址:天津</td>  
13.     <td>成绩:优秀</td>  
14.   </tr>  
15. </table>

复制代码

13.视频音频标签

1. <!--视频标签-->
2. <video width="800" controls autoplay>  
3.   <source src="../resource/抗战二十年.mp4" type="video/mp4">  
4. </video>
6. <!--音频标签-->
7. <audio controls autoplay loop>  
8.   <source src="../resource/hai.mp3" type="audio/mpeg">  
9. </audio>

复制代码

14.内联框架

1. <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. 表单根本结构

1. <form action="submit.php" method="POST">
2.     <!-- 表单内容 -->
3. </form>

复制代码

• action：提交地址。
  
• method：
  
  
  
  • GET：数据在URL后（不安全）。
    
  • POST：数据放在请求体中（比力安全,可以提交大文件）。
    
  
  

2. 文本框

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

复制代码

• placeholder：提示文字。
  
• required：必填。
  

3. 密码框

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

复制代码

• type="password"：输入内容会隐藏。
  

4. 单选框

1. <input type="radio" name="gender" value="male" checked> 男
2. <input type="radio" name="gender" value="female"> 女

复制代码

• name：相同 name 让它们成为一组。
  
• checked：默认选中。
  

5. 多选框

1. <input type="checkbox" name="subscribe" value="yes"> 勾选

复制代码

6.文件上传

1. <label>上传文件：</label>  
2. <input type="file" name="upload">

复制代码

7.下拉框

1. <label for="city">选择城市：</label>  
3. <select id="city" name="city">  
4.   <option value="beijing">北京</option>  
5.   <option value="shanghai">上海</option>  
6.   <option value="guangzhou" selected>广州</option>  
7.   <option value="shenzhen">深圳</option>  
8. </select>

复制代码

• selected :默认选中
  

8.邮箱输入

1. <form>
2.     <label for="email">邮箱：</label>
3.     <input type="email" id="email" name="email" placeholder="输入邮箱" required>
4.     <button type="submit">提交</button>
5. </form>

复制代码

• 只能输入符合邮箱格式的内容（如 user@example.com）。
  
• 欣赏器会自动验证格式，不符合不能提交。
  

9.URL输入

1. <form>
2.     <label for="website">个人网站：</label>
3.     <input type="url" id="website" name="website" placeholder="https://example.com" required>
4.     <button type="submit">提交</button>
5. </form>

复制代码

• 只能输入URL 格式的内容（如 https://example.com）。
  

10.滑块

1. <form>
2.     <label for="volume">音量：</label>
3.     <input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50" oninput="updateValue(this.value)">
4.     <span id="volumeValue">50</span>
5. </form>
7. <script>
8.     function updateValue(value) {
9.         document.getElementById("volumeValue").innerText = value;
10.     }
11. </script>

复制代码

• min 和 max 限定范围，step 设置步长，value 设定初始值。
  
• oninput 事件监听变化，JavaScript 可实时更新显示数值。
  

按钮

1. 提交按钮

1. <input type="submit" value="提交">

复制代码

2. 普通按钮

1. <input type="button" value="btn" onclick="alert('点击')">

复制代码

• 可用于执行 JavaScript 代码。
  

3. 重置按钮

1. <input type="reset" value="重置">

复制代码

• 点击后清空表单数据。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。