NightWatch

# 前端查漏补缺—HTML4

# 新增语义化标签

# 新增布局标签

  1. header：整个页面，或部分区域的头部
  2. footer：整个页面，或部分区域的底部
  3. nav：导航
  4. article：文章、帖子
  5. section：页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）
  6. aside：侧边栏

关于article和section

  1. article里面可以有多个section
  2. section强调的是分段或分块，如果想将一段内容分为几段的时候，可以使用section，如小说中的一章
  3. article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素

相对于普通的div只是多了语义

# 新增状态标签

  1. meter标签

    • 语义：定义已知范围内的标量，也被称为gauge（尺度），例如：电量、温度
    • 常用属性：high、low、max、min、optimum、value

    注意：

    1. max、min指定量程范围, high、low将量程分为三段，默认中间为最佳值，两侧为异常值
    2. optimum指定最佳值，可指定两侧，用来正序或逆序排列
    3. value是当前值

  2. progress标签

    • 语义：显示某个任务完成的进度的指示器，一般用于进度条
    • 常用属性：max、value

# 新增列表标签

  1. datalist：用于搜索框的关键字提示
  2. details：用于展示问题和答案，或对专有名词进行解释
    • summary：写在details里面，用于指定问题或专有名词

代码示例：

<input type="text" list="mydata">
<button>搜索</button>
<datalist id="mydata">
    <option value="周杰伦">周杰伦</option>
    <option value="周冬雨">周冬雨</option>
    <option value="马冬梅">马冬梅</option>
    <option value="温兆伦">温兆伦</option>
</datalist>

<details>
    <summary>如何成为技术大牛？</summary>
    <p>脚踏实地、仰望星空</p>
</details>

# 新增文本标签

  1. ruby标签：用于包裹需要注音的文字
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī mèi wǎng liǎng </rt>
    </ruby>
  1. mark标签：用于在一段文字中做标记
 <p>Lorem ipsum <mark>dolor</mark> sit amet, consectetur adipisicing elit</p>

# 新增表单控件标签

# 表单控件新增属性

属性名 功能
placeholder 提示文字，适用于文字输入类的控件
required 表示该输入项必填，适用于除按钮外的其他表单控件
autofocus 自动获取焦点，适用于所有表单控件
autocomplete 自动完成，可以设置为on或off，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用。
pattern 正则表达式，适用于文本输入表单控件。注意：多行输入不可用，空的输入框不会验证，往往与required配合

# input标签的新增type属性

属性名 功能
email 邮箱类型输入框，表单提交时会验证，输入为空不验证
url url类型输入框，表单提交时会验证，输入为空不验证
number 数字类型输入框，表单提交时会验证，输入为空不验证
search 搜索类型输入框，表单提交时不会验证
tel 电话类型输入框，表单提交时不会验证
range 范围选择框，默认值为50，表单提交时不会验证
color 颜色选择框，表单提交时不会验证
date 日期选择框，表单提交时不会验证
month 月份选择框，表单提交时不会验证
week 周选择框，表单提交时不会验证
time 时间选择框，表单提交时不会验证
datetime-local 日期+时间选择框，表单提交时不会验证

# form标签新增属性

属性名 功能
novalidate 如果给form设置了该属性，表单提交的时候不再验证

# 新增媒体标签

# 视频标签

video标签用于定义视频

属性 值 描述
src URL地址 视频地址
width 像素值 播放器宽度
height 像素值 播放器高度
controls - 显示播放器控件
muted - 视频静音
autoplay - 视频自动播放
loop - 循环播放
poster URL地址 视频封面
preload auto/metadata/none 视频预加载，如果使用autoplay，则忽略改属性。none表示不预加载视频，metadata表示仅预先获取视频的元数据，auto表示下载整个视频文件

注意：浏览器会记录某个网页的媒体参与度，参与度很高时，不设置muted，仍然可以自动播放

# 音频标签

audio标签用于定义音频

属性 值 描述
src URL地址 音频地址
controls - 显示音频控件
muted - 音频静音
autoplay - 音频自动播放
loop - 循环播放
preload auto/metadata/none 音频预加载，如果使用autoplay，则忽略改属性。none表示不预加载音频，metadata表示仅预先获取音频的元数据，auto表示下载整个音频文件

注意：

  1. 音频不能再静音的状态自动播放，需要JS实现
  2. 不能设置width、height、poster

音频和视频的区别，其实相当于少了画面，播放控件类似

# 新增全局属性

  • contenteditable：内容可编辑性
  • draggable：可拖动，配合JS使用可以获取拖动位置
  • hidden：隐藏元素，不占位
  • spellcheck：拼写检查，浏览器需要打开相关设置
  • contextmenu：网页鼠标右键菜单
  • data-*：用于存储页面的私有定制数据，添加前缀，便于JS获取数据

# 兼容性问题

  • 添加元信息，让浏览器处于最优渲染模式
<!-- 让IE浏览器处于最优渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对一些国产双核浏览器，让浏览器优先使用webkit内核去渲染网页 -->
<meta name="render" content="webkit">
  • 使用html5shiv让低版本浏览器认识H5的语义化标签
<!-- [if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
  • 扩展

lt 小于

lte 小于等于

gt 大于

gte 大于等于

! 逻辑非

Last Updated: 12/23/2024, 4:18:13 AM

← HTTP面试题 →