html5语义化标签——回顾

html5 头部结构    <!doctype html>     <meta charset=“utf-8”/>

<header></header> 页眉

    主要用于页面的头部的信息介绍,也可用于板块头部

<hgroup></hgroup> 页面上的一个标题组合

      一个标题和一个子标题,或者标语的组合

      <hgroup>
        <h1></h1>
        <h2></h2>
      </hgroup>

<nav></nav>  导航 (包含链接的的一个列表)(包含链接的的一个列表)

      <nav>
        <p><a href=“#”>妙味课堂</a></p>
        <p><a href=“#”>妙味课堂</a></p>
        </nav>

<footer></footer>页脚  页面的底部 或者 版块底部

<section> <section> 页面上的版块

    用于划分页面上的不同区域,或者划分文章里不同的节

<article></ article > 用来在页面中表示一套结构完整且独立的内容部分

    <aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分

<figure> < figure > 用于对元素进行组合。一般用于图片或视频

<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明

    <figure>
      <img src=“miaov.png”/>(注意没有alt)
      <figcaption> html5语义化标签</figcaption>
     </figure>

<time></time>用来表现时间或日期

    <p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数
    <p> 我在 <time datetime="2017-02-14">情人节</time> 有个约会。 </p>

<datalist></datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值。

    <input type="text" list="valList" />
      <datalist id="valList">
          <option value="javascript">javascript</option>
           <option value="html">html</option>
          <option value="css">css</option>
      </datalist>

    <details></details>用于描述文档或文档某个部分的细节

    该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容

    Open 属性默认展开

< summary></summary> details 元素的标题

    <details>
      <summary>元素标题</summary>
      <p>内容</p>
    </details>

<dialog></dialog>定义一段对话

    <dialog>
        <dt>老师</dt>
        <dd>2+2 等于?</dd>
        <dt>学生</dt>
        <dd>4</dd>
        <dt>老师</dt>
        <dd>答对了!</dd>
    </dialog>

<address></address> 定义文章 或页面作者的详细联系信息

<mark></mark> 需要标记的词或句子

<keygen>给表单添加一个公钥

    <form action="http://www.baidu.com" method="get">
      用户: <input type="text" name="usr_name" />
      公钥: <keygen name="security" />
        <input type="submit" />
    </form>

<progress><progress>定义进度条

    <progress max="100" value="76">
           <span>76</span>%
      </progress>

forms

  新的输入型控件

email  :  电子邮箱文本框,跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化

tel   :   电话号码

url   :   网页的URL

search  :  搜索引擎

chrome下输入文字后,会多出一个关闭的X

range  :  特定范围内的数值选择器

min、max、step( 步数 )

新的输入型控件

number  :  只能包含数字的输入框

color  :  颜色选择器

datetime  :  显示完整日期

datetime-local  :  显示完整日期,不含时区

time  :  显示时间,不含时区

date  :    显示日期

week  :  显示周

month  :  显示月

新的表单特性和函数

placeholder  :  输入框提示信息

    例子 :  微博的密码框提示

autocomplete  :  是否保存用户输入值

      默认为on,关闭提示选择off

autofocus  :  指定表单获取输入焦点

    list和datalist  :  为输入框构造一个选择列表list值为datalist标签的id

required  :  此项必填,不能为空

Pattern : 正则验证  pattern="\d{1,5}“

Formaction 在submit里定义提交地址

表单验证

validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false

    oText.addEventListener("invalid",fn1,false);

    ev.preventDefault()

valueMissing  :  输入值为空时

  typeMismatch :  控件值与预期类型不匹配

patternMismatch  :  输入值不满足pattern正则

tooLong  :  超过maxLength最大限制

rangeUnderflow : 验证的range最小值

rangeOverflow:验证的range最大值

stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

customError 不符合自定义验证

setCustomValidity(); 自定义验证

表单验证

Invalid事件  :  验证反馈 input.addEventListener('invalid',fn,false)

    阻止默认验证:ev.preventDefault()

    formnovalidate属性  :  关闭验证

demo 下载 https://github.com/ningmengxs/html5.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

网络拓扑图上文本的巧妙应用

在前端网页设计中,文本是重要的组成部分,那么在网络拓扑图中也是一样的,文本在网络拓扑图上最基本的显示功能之一,在不同的应用场景下,会有不同的需求。但是不同的需求...

21860
来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

41970
来自专栏十月梦想

一天带入门到放弃vue.js(三)

自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

34240
来自专栏雨过天晴

控制台输出颜色控制(Console

前端时间,写了一篇 PHP 在 Console 模式下的进度显示 ,正好最近的一个数据合并项目需要用到控制台颜色输出,所以就把相关的信息整理下,写到OSC的博客...

1.4K10
来自专栏Ryan Miao

idea快捷键总结

使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键。参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会...

299120
来自专栏DeveWork

自定义WordPress 标签云小工具相关参数

相信你知道WordPress 标签云widget(小工具)是什么,如果你的WordPress 主题支持小工具,就可以在后台启用标签云小工具,该小工具不仅能展示标...

28980
来自专栏HaHack

学习 React Native for Android:React 基础

13920
来自专栏前端新视界

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

25490
来自专栏极客编程

Cheerio,服务端的JQuery。

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

12510
来自专栏hightopo

基于HTML5快速搭建TP-LINK电信拓扑设备面板

17230

扫码关注云+社区

领取腾讯云代金券