Html 5简介(学习笔记)

基本标签

1. 换行标签


<br>

2. 链接标签

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

• href：指定链接地址。

• target：

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

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

3. 图像标签

<img src="image.jpg" alt="示例图片" title="鼠标悬浮提示" width="200" height="150">

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

4. 段落标签

<p>这是一个段落。p>

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

5. 水平线

---

<hr>

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

6. 空格  

HTML 空格示例

7. 加粗文本

<strong>重要加粗文本strong>

8. 布局标签

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

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

9.斜体

<em>i love youem>

10.大于小于

> 
< 

11.列表

<ol>  
  <li>Javali>  
  <li>pythonli>  
ol>


<ul>  
  <li>Javali>  
  <li>pythonli>  
ul>


  
<dl>  
  <dt>学科dt>  
  <dd>javadd>  
  <dd>cppdd>  
dl>

12.表格

  
<table border="1px">  
  <tr>  
    <td>姓名td>  
    <td>年龄td>  
  
    <td colspan="2">其他信息td>  
  tr>  
  <tr>  
    <td>warrentd>  
    <td>18td>  
    <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>

---

表单

属性	作用	适用类型	前端作用	后端作用
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. 表单基本结构

<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>

• 只能输入符合邮箱格式的内容（如 [email protected]）。
• 浏览器会自动验证格式，不符合不能提交。

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">50span>
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="重置">

• 点击后清空表单数据。