HTML详解连载

在HTML中，<a>标签用于定义超链接，<img>标签用于插入图片。

<!-- 超链接 -->
<a href="https://www.example.com">访问Example网站</a>
 
<!-- 图片插入 -->
<img src="image.jpg" alt="描述性文本" />

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括表单、列表、表格、多媒体内容等。

<!-- 表单 -->
<form action="/submit" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
 
<!-- 无序列表 -->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
 
<!-- 有序列表 -->
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>
 
<!-- 表格 -->
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>
 
<!-- 嵌入视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括iframe嵌入网页、下拉框、多选框和单选按钮等。

<!-- iframe嵌入网页 -->
<iframe src="https://www.example.com" width="300" height="200"></iframe>
 
<!-- 下拉框 -->
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
 
<!-- 多选框 -->
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">骑自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">开汽车</label><br>
 
<!-- 单选按钮 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label><br>

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括Canvas绘图、HTML5表单验证和地理位置API等。

<!-- Canvas绘图 -->
<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持Canvas。
</canvas>
 
<!-- 数据验证 -->
<form action="/action_page.php" method="get">
  <label for="fname">名字（只能是字母）：</label><br>
  <input type="text" id="fname" name="fname" pattern="[A-Za-z]+" title="名字只能是字母">
  <input type="submit">
</form>
 
<!-- 地理位置API -->
<script>
  if ("geolocation" in navigator) {
    navigator.geol