【HTML5】部分知识整理

一、语义化标签

明确“语义与实现分离”思想，使用语义化标签可以使页面规范化，代码结构清晰，易于阅读维护。

定义网页不同部分的标签：

1. <header>定义简介形式内容</header>
2. <nav>定义页面主导航功能</nav>
3. <main>定义主内容</main>
4. <article>定义文章的独立内容，与页面其他部分无关</article>
5. <section>定义文档中的节，组织页面使其按功能分块</section>
6. <aside>定义侧边栏</aside>
7. <footer>定义页脚部分内容</footer>
8. <details>定义额外细节</details>
9. <summary>定义details的标题</summary>

另外，在没有css样式的情况下，有些语义化标签的默认样式是相同的，但表示的语义不同，比如：

1. <del>表示删除</del>
<s>表示不再正确的内容</s>
   
2. <ins>表示插入的内容</ins>
<u>表示拼写错误的单词，或汉语中的专有名词</u>
   
3. <strong>表示强调作用，有“重要”的语义</strong>
<b>仅加粗显示字体</b>
   
4. <em>表示强调</em>
<i>仅将字体变为斜体</i>
   

二、meta标签

<meta charset="UTF-8">
<!-- viewport实现网页尺寸自适应 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="网页关键字，html学习基础，教程，笔记">
<meta name="description" content="网页描述段落">
<meta name="author" content="大侯我銮">

三、浏览器加载页面过程

浏览器先加载html，遇到js文件暂停html的加载，转去获取并执行js文件，执行完毕后，继续加载html。

1. 延迟执行脚本
   引入js文件时，指定一个属性defer，这个js文件就会在html加载完毕后执行。

<script type="text/javascript" src="js/hi.js" defer></script>

2. 异步执行脚本
   引入js文件时，指定一个属性async，这时候页面遇到js文件不会停止html的加载，而是html的加载和js的获取同时进行；
   js文件获取完毕后，html停止接在，转去执行js文件，执行完毕后，继续加载html。

<script type="text/javascript" src="js/hi.js" async></script>

四、表单操作

一个简单的调查问卷案例：

  <h3>调查问卷</h3>
  <form action="" method="POST">
    <!-- 使用fieldset标签划分不同类型表单元素，
      在标签内第一行添加<legend>标签，定义描述信息 -->
    <fieldset>
      <legend>基本信息</legend>
      <label for="name">输入姓名：</label><input type="text" name="name" id="name"><br><br>

      <!-- 使用<select>和<option>制作下拉选择项 -->
      <label for="sex">选择性别：
        <select name="sex">
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </label><br><br>
      <label for="age">输入年龄：</label><input type="age" name="age" id="age"><br><br>
      上传照片：<input type="file" enctype="multipart/from-data" accept="image/*"><br>
    </fieldset>

    <fieldset>
      <p>是否有培训经历</p>
      <!-- 单选框 -->
      <label><input type="radio" name="q0" value="yes">是</label>
      <label><input type="radio" name="q0" value="no">否</label>
      <legend>调查内容</legend>
      <label for="q1">学过多久的编程？</label><input type="text" name="q1" id="q1"><br><br>
      <label for="q2">简述工作经历：</label><input type="text" name="q2" id="q2"><br><br>
      
      <!-- 数据列表 -->
      期望薪资：<input type="text" list="numlist">

      <!-- 使用optgroup标签对选项进行分类 -->
      <label for="class">选择感兴趣的方向：
        <select name="class">
          <optgroup label="前端">
            <option value="c1">html+css</option>
            <option value="c2">javascript</option>
            <option value="c3">vue</option>
            <option value="c0">.....</option>
          </optgroup>
          <optgroup label="后端">
            <option value="j1">java</option>
            <option value="j2">c++</option>
            <option value="j3">python</option>
            <option value="j0">......</option>
          </optgroup>
        </select>
      </label><br><br>
    </fieldset>

    <input type="submit" value="提交">
    <input type="reset" value="重写">
  </form>
  
  <datalist id="numlist">
    <option>3K-9K</option>
    <option>9K-15K</option>
    <option>15K+</option>
</datalist>

显示效果：