Html 5简介(学习笔记)

基本标签

1. 换行标签 <br>

<br>复制

2. 链接标签 <a>

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

• href：指定链接地址。

• target：

  • _blank：在新标签页打开。
  • _self（默认）：当前页面打开。

• 可以把图像做成一个超链接(把img标签嵌套在链接标签里即可)

3. 图像标签 <img>

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

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

4. 段落标签 <p>

<p>这是一个段落。</p>复制

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

5. 水平线 <hr>

<hr>复制

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

6. 空格  

HTML 空格示例复制

7. 加粗文本

<strong>重要加粗文本</strong>复制

8. 布局标签

<div>大盒子（块级元素）</div>
<span>小盒子（行内元素）</span>复制

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

9.斜体

<em>i love you</em>复制

10.大于小于

&gt <!--大于-->
&lt <!--小于-->复制

11.列表

<!-- 有序列表-->
<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.表格

<!--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.视频音频标签

<!--视频标签-->
<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.内联框架

<iframe src="https://www.bilibili.com/"width="860" height="655" ></iframe>复制

表单 <form>

1. 表单基本结构

<form action="submit.php" method="POST">
    <!-- 表单内容 -->
</form>复制

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

2. 文本框

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

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

3. 密码框

<input type="password" name="password" placeholder="请输入密码" required>复制

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

4. 单选框

<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女复制

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

5. 多选框

<input type="checkbox" name="subscribe" value="yes"> 勾选复制

6.文件上传

<label>上传文件：</label>  
<input type="file" name="upload">复制

7.下拉框

<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.邮箱输入

<form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="输入邮箱" required>
    <button type="submit">提交</button>
</form>
 复制

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

9.URL输入

<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.滑块

<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>
    function updateValue(value) {
        document.getElementById("volumeValue").innerText = value;
    }
</script>
 复制

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

按钮

1. 提交按钮

<input type="submit" value="提交">复制

2. 普通按钮

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

• 可用于执行 JavaScript 代码。

3. 重置按钮

<input type="reset" value="重置">复制

• 点击后清空表单数据。