HTML 进阶用法：探索更高级的功能

目录

1. 表单进阶用法
2. 表单验证
3. 多字段输入
4. 表单元素分组
5. 表格进阶用法
6. 跨行和跨列
7. 单元格内容对齐
8. 表单元素分组
9. 多媒体进阶用法
10. 控制视频和音频播放
11. 响应式多媒体
12. 内容访问性
13. 响应式设计进阶用法
14. 媒体查询
15. 弹性布局
16. 自适应图像
17. HTML 自定义属性进阶用法
18. 数据属性
19. 属性选择器
20. HTML 条件注释进阶用法
21. 浏览器检测
22. 设备检测
23. 支持 IE
24. 总结

一、HTML 表单

1. 表单验证

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <span id="username_error"></span>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" pattern="[a-zA-Z0-9]{8,}" required>
  <span id="password_error"></span>

  <input type="submit">
</form>

<script>
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  const usernameError = document.getElementById('username_error');
  const passwordError = document.getElementById('password_error');

  usernameInput.onblur = function() {
    if (usernameInput.value === '') {
      usernameError.textContent = '用户名不能为空';
    } else {
      usernameError.textContent = '';
    }
  };

  passwordInput.onblur = function() {
    if (passwordInput.value.length < 8) {
      passwordError.textContent = '密码至少需要8个字符';
    } else {
      passwordError.textContent = '';
    }
  };
</script>

2. 多字段输入

<form>
  <label for="country">选择国家：</label>
  <input list="countries" id="country" name="country">
  <datalist id="countries">
    <option value="China">
    <option value="United States">
    <option value="United Kingdom">
    <option value="Australia">
  </datalist>
</form>

3. 表单元素分组

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
</form>

二、HTML 表格

1. 跨行和跨列

<table>
  <tr>
    <td colspan="2">姓名</td>
    <td rowspan="2">邮箱</td>
  </tr>
  <tr>
    <td>性别</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>男</td>
    <td>30</td>
  </tr>
</table>

2. 单元格内容对齐

<table>
  <tr>
    <th align="center">姓名</th>
    <th align="right">年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
</table>

3. 表格样式

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid black;
    padding: 10px;
  }

  th {
    background-color: #f2f2f2;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
</table>

三、HTML 多媒体

1. 控制视频和音频播放

<video width= "320" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

2. 响应式多媒体

<style>
  .responsive-video {
    max-width: 100%;```
    height: auto;
  }
</style>

<video class="responsive-video" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>

3. 内容访问性

<video width= "320" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
 <track kind="captions" label="English" srclang="en" src="subtitles_en.vtt" default>
</video>

四、HTML 响应式设计

1. 媒体查询

@media (max-width: 768px) {
  /* 针对小屏幕的设备样式 */
}

2. 弹性布局

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    flex: 1 1 200px;
    margin: 10px
2. 弹性布局（续）

```html
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    flex: 1 1 200px;
    margin: 10px;
  }

  .item img {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="container">
  <div class="item">
    < img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item">
< img src="image2.jpg" alt="Image 2">
</div>
<div class="item">
< img src="image3.jpg" alt="Image 3">
</div>

```

3. 自适应图像

< img src="image.jpg" alt="Sample Image" srcset="image-small.jpg 300w, image-medium.jpg 700w, image-large.jpg 1200w">

五、HTML 自定义属性

1. 数据属性

<div id="profile" data-user="JohnDoe" data-age="30" data-location="New York">
  <p>用户名：<span id="username"></span></p >
  <p>年龄：<span id="age"></span></p >
  <p>所在地：<span id="location"></span></p >
</div>

<script>
  const profileElement = document.getElementById('profile');
  const usernameElement = document.getElementById('username');
  const ageElement = document.getElementById('age');
  const locationElement = document.getElementById('location');

  usernameElement.textContent = profileElement.dataset.user;
  ageElement.textContent =```html
  profileElement.dataset.age;
  locationElement.textContent = profileElement.dataset.location;
</script>

2. 属性选择器

<style>
  [data-user] {
    background-color: #f2f2f2;
    padding: 10px;
  }
</style>

<div id="profile" data-user="JohnDoe" data-age="30" data-location="New York">
  <p>用户名：<span id="username"></span></p >
  <p>年龄：<span id="age"></span></p >
  <p>所在地：<span id="location"></span></p >
</div>

六、HTML 条件注释

1. 浏览器检测

<!--[if IE]>
  <p>您正在使用 Internet Explorer。请注意，本网站可能在此浏览器上表现不佳。建议您升级到现代浏览器，以获得更好的体验。</p >
<![endif]-->

2. 设备检测

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 针对桌面浏览器的样式 */
    .desktop-only {
      color: red;
    }

    /* 针对移动浏览器的样式 */
    @media screen and (max-width: 768px) {
      .mobile-only {
        color: blue;
      }
    }
  </style>
</head>

<body>
  <h1 class="desktop-only">欢迎来到桌面版网站</h1>
  <h2 class="mobile-only">欢迎来到移动版网站</h2>
</body>

3. 支持 IE

<!--[if lt IE 9]>
  <script src="***/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="***/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

七、总结

在本文中，探讨了 HTML 的一些进阶用法，涵盖了表单、表格、多媒体、响应式设计、自定义属性和条件注释等方面。这些功能可以帮助您构建更加复杂和动态的网站。同时，我们为每个部分提供了代码演示，以便您可以更好地理解和应用这些功能。掌握这些进阶用法将有助于您在实际项目中实现更加丰富的功能和效果。