HTML5常用元素

VLang
188 阅读3分钟

1. 语义化元素

header section artical footer main aside nav figure figcaption
头部 区块 文章 脚部 主体 侧边栏 导航 图形 图形标题
  • <header>,<footer>：不能与自身或同级相互嵌套，但文档可含有多个<header>,<footer>
  • <main>：作为网站主体区域，只出现一次，直接位于<body>中
  • <artical>：独立完整的文章区域（帖子，文章）
  • <section>：页面独立的区块，作为页面主体的一部分
  • <nav>：网站导航区域，可直接内嵌<a>，可出现多次
  • <aside>：与主体有一定联系的独立区域（工具，大纲，广告等）
  • <figure>：文章中的独立内容（图片，图表，照片，代码等）, <figcaption>作为标题
<header>
    <nav>
        <a href="#">主页</a>
        <a href="#">详情页</a>
        <a href="#">关于</a>
    </nav>
</header>

<main>
    <section>
        <article>
            <h2>文章标题</h2>
            <p>文章段落文章段落文章段落文章段落文章段落文章段落文章段落</p>
            <figure>
                <figcaption>配图标题</figcaption>
                <p>配图描述</p>
            </figure>
        </article>
    </section>
    <aside>
        <a href="#">文章1</a>
        <a href="#">文章2</a>
    </aside>
</main>

<footer>
    <nav>
        <a href="#">友情链接</a>
        <a href="#">友情链接</a>
    </nav>
</footer>

2. 新的表单控件

date email file image number range hidden month color datetime-local
日期 邮箱 文件 图片按钮 数值 滑竿 隐域 月日 颜色 日期时间

2.1 date日期组件

  • 弹出一个日期卡片用于选择年月日，可以设置默认值
<input type="date" name="birthday" value="2000-01-01">

2.2 email邮箱地址组件

  • 可以验证字符串是否包含 @，移动端会弹出邮箱键盘
<input type="email" name="email">

2.3 file读取文件

  • mutiple：文件多选

2.3.1 文件读取类型

readAsBinaryString readAsDataURL readAsText
读取为二进制编码 读取为DataURL 读取为文本

2.3.2 FileReader EventListener

onloadstart onprogress onbort onerror onload onloadend
开始读取 正在读取 读取中断 读取出错 读取成功 读取完成 
<input type="file" name="file">
<script>
    var iFile = document.querySlector('input[type=file]');
    // 1. 添加 onchange 事件
    iFile.onchange = function() {
        // 2. 获取文件
        var file = this.files[0];
        // 3. 创建 FileReader 文件读取器
        var reader = new FileReader();
        // 4. 将文件读取为文本
        reader.readAsText(file);
        // 5. 监听文件读取状态
        reader.onload = function() {
            console.log(reader.result);
        }
    }
</script>

2.4 image图片按钮

<input type="image" src="images/btn.png" width="30" height="30">

3. 新的表单元素

3.1 <datalist> 元素

说明： 用于辅助input：text输入的数据列（类似于邮箱辅助输入）

  • input:text list="" 通过id 绑定 datalist
  • 直接子元素为 <option value="">，没有 #text 节点，不用闭合
<input type="text" list="my-list">
<datalist id="my-list">
    <option value="data1">
    <option value="data2">
    <option value="data3">
</datalist>

3.2 <output> 元素

说明： 用于 input 数值组件的动态计算

  1. <form>：添加 oninput 事件，填写公式
  2. input:range/number：添加 2 个数值控件并设置初始值
  3. <output for="">：for 属性通过 id / name关联数值控件（使用空格分隔）
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b">
</form>
avatar
文章
阅读
粉丝