html-day11标签语义化&新增标签

简介: html-day11标签语义化&新增标签

html-day11标签语义化&新增标签


1.标签语义化【面试题】

语义:有意义的,能够见名知意,提倡用正确语义的标签去描述对应的内容。
常见的标签
    页头                header
    主体                main
    页脚                footer
    文章                article
    导航                nav
    侧栏                aside
    独立的区域、节、块   section
优点:
    方便SEO。
    代码具有可读性,方便更新和维护。

2.其他标签

    1.图文列表块
        <figure>
            <img>
            <figcaption></figcaption>
        </figure>
    2.高亮      <mark></mark>
    3.标题组    <hgroup></hgroup> - ex:新闻动态 newscenter
    4.对话框    <dialog> </dialog> 要显示出来必须加属性open
    5.画布      <canvas></canvas> 需要用js实现效果

3.音频

    <audio src='音频的地址' controls autoplay  loop></audio>
        controls代表控件
        autoplay自动播放
        loop循环播放
    <source src='对应音频的路径'>  audio标签里面可以有多个source,引入不同类型的音频。
    <audio controls autoplay  loop>
        <source  src='音频的地址'>
        <source  src='音频的地址'>
    </audio>

4.视频

<video src='视频路径' controls poster='海报图片的路径'></video>
同音频

5.表单新增的属性

    1.novalidate 设置表单里面的东西不验证的
        <form novalidate></form>
    2.autocomplete 设置表单中输入信息是否有提示
        <form autocomplete='on打开 | off关闭'></form>
    3.required 设置该项为必填
    4.maxlength 和 minlength 设置最大最小长度
    5.multiple设置该项的值可以多选。
    6.autofocus 设置该项自动获取焦点。
    7.placeholder 设置该项的提示文字-占位符
    表单元素的属性所有小结
        <input type='' name='名字' value='值' readonly disabled  checked required maxlength='' minlength='' 
            placeholder=''  autofocus multiple>
            readonly只读,用于做权限 
            disabled禁用,设置按钮不可用  
            checked只有单选和复选有,用于设置默认选中该选项
        下拉列表-selected代表默认选中该选项
            <select>
                <option selected>内容</option>
            </select>

6.h5新增的标签

1.数据列表
    <input list='要关联的列表的id名'>  
    <datalist id=''>
        <option value='值'>内容</option>
        <option value='值'>内容</option>
    </datalist>
2.输出标签 (了解)
    <output></output>

面试题:h5新增的标签列举15个

  1.<header></header>
  2.<nav></nav>
  3.<aside></aside>
  4.<artical></artical>
  5.<section></section>
  6.<mark></mark>
  7.<audio></audio>
  8.<video></video>
  9.<source></source>
  10.<hgroup>
  11.<figure></figure>
  12.<figcation></figcaption>
  13.<canvas></canvas>
  14.<output></output>
  15.<dialog></diolog>
相关文章
|
6天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
6天前
HTML_表单标签
HTML_表单标签
17 0
|
6天前
|
前端开发 JavaScript 数据安全/隐私保护
【HTML】基本标签介绍(下)
【HTML】基本标签介绍(下)
13 3
|
6天前
|
机器学习/深度学习 前端开发 JavaScript
【HTML】基本标签介绍(上)
【HTML】基本标签介绍
11 1
|
6天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
6天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
6天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
6天前
|
搜索推荐 UED 开发者
【专栏:HTML 基础篇】HTML 语义化:提升网页的可访问性
【4月更文挑战第30天】HTML语义化是构建高质量网页的关键,它通过使用有意义的标签提升网页可访问性、SEO和代码可读性。语义化标签如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`等有助于内容理解与团队协作。合理应用标题、列表和导航结构,同时注意避免过度使用和保持一致性。屏幕阅读器、键盘导航和辅助技术的兼容性是语义化对可访问性的重要影响。通过掌握和应用HTML语义化,我们可以优化用户体验,为数字世界贡献力量。
|
6天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
6天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
13 0