3、表单内元素的属性

formtarget属性:在HTML5中,可以对提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

formaction属性:在HTML5中,可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。

formmethod属性:可以为每个表单元素增加formmethod属性,分别指定不同的提交方法。get/post

formenctype属性:在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。text/plain、multipart/form-data、application/x-www-form-urlencoded

autofocus属性:为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。

required属性:可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字。

article:

  • 功能:定义一个独立的内容【虽然本质上它还是网页中的内容,但特别的是,它就像浏览论坛时浏览某一个帖子一样,它有自己的相对独立的内容,比如它可以有标题(比如帖子的标题)、可以有页尾(比如底部的评论回复区)】
  • article比p,比div多了语意,虽然理论上都可以使用div来实现,但多出了语意。【比如一本书可以一章可以有多个段落,但可以有几章,而article的语意就像章节,它的内容是独立的,而不是仅仅的“段落”】
  • 示例:

    <article>
            <header id="header" class="">
                头部:菜鸡互啄区
            </header><!-- /header -->
            <h2>是道德的沦丧,还是。。。</h2>
            贪玩蓝月,你没玩过的全新版本
            <footer>
                底部:欢迎评论
            </footer>
        </article>
    

    bet36365注册送奖金 1

 


2、video标签  支持格式:ogg、mp4、webM

bet36365注册送奖金,对应的属性:

  a、width

  b、height

  c、Poster

如:<video src=”source/audio.mp3″
autoplay controls loop preload width=”600″
height=”400″></video>

datalist

datalist标签用来定义选项列表【就像QQ好友列表中,可以输入部分信息来查找到对应的好友】【datalist需要与input输入框配合】【input中的值可以不是datalist中的】

示例:

<form action="" method="get">
        <input type="text" name="user" list="userlist" />
        <datalist id="userlist">
            <option value="Admin"></option>
            <option value="Bdmin"></option>
            <option value="Cdmin"></option>
            <option value="Ddmin"></option>
            <option value="AAdmin"></option>
           <!--  也可以像下面一样写, -->
            <option>牛牛</option>
            <option>熊大</option>

        </datalist>
        <input type="submit" >
    </form>
  • bet36365注册送奖金 2bet36365注册送奖金 3

 


PC端兼容h5新标签的方法,在页面中引入一下js文件

<script  type=”text/javascript”
 src=”//cdn.bootcss.com/html5shiv/r29/html5.js”></script>

新增的属性:

list

  • 功能:与datalist配合使用,用来显示输入框的提示选项(已经在datalist中演示了怎么使用了)

placeholder

  • 功能:设置输入框的提示bet36365注册送奖金 4【图中的用户名会随着输入自动消失,如果没有内容就又会显示出来】
  • 示例:
    <form action="" method="post">
            <input type="text"  placeholder="用户名">
            <input type="submit" >
        </form>
    

multiple

  • 功能:设置可以选择多个值
  • 示例:
    <input type="file" multiple="multiple" >
    

required

  • 功能:设置输入框为必填框【当提交的时候,如果没有填上就会显示成红色或者给予提示】bet36365注册送奖金 5
  • 示例:

    <form action="" method="post">
            <input type="text"  placeholder="用户名" required="required">
    
            <input type="submit" >
        </form>
    

autocomplete

  • 功能:设置下次是否自动完成【如果设置了,那么下次输入时会有上次输入的提示】bet36365注册送奖金 6
  • 【注意:输入框需要name属性才能使得autocomplete生效】
  • 也可以把autocomplete放到form中作为属性,代表整个表单都可以autocomplete,(然后也可以在某个输入框中设置autocomplete=”off”来特定的不autocomplete)
  • 示例:
    <form action="" method="get" autocomplete="on" >
            <input type="text"  placeholder="用户名" required="required" autocomplete="on" name="username">
            <input type="submit" >
        </form>
    

 

autofocus:

  • 功能:设置是否自动获取焦点
  • 示例:

    <form action="" method="post" >
            <input type="text"  placeholder="用户名" required="required" autofocus="autofocus">
    
            <input type="submit" >
        </form>
    

pattern:

  • 功能:可以用来验证输入框的输入是否合法【考虑到行为样式结构相分离,像这样的表单验证应该由javascript完成,所以这里不介绍】

 

 

 


1、header 页面头部、页眉

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如

本文内容:

  • header
  • nav
  • article
  • footer
  • section
  • aside
  • datalist
  • 音频标签:
    • audio
  • 视频标签:

    • video
  • 插入媒体标签:
    • embed
  • 新增input属性

 

首发日期:2018-04-25


html5增加了audio和video标签,提供了在页面上插入音频和视频的标准方法

header

  • 功能:header标签定义页面的页眉信息。【主要用于定义结构,一般来说也可以使用其他方式来创建头部,但使用header就标注出了这个结构是头部,比其他多出了语意】
  • 例子:比如一些网上商城的顶部logo信息
  • 示例:

    <body>
        <header id="header" class="" style="background-color: orange;">
            <div style="float:left">
                Logo
            </div>
            <div style="float:right">
                登录
                登录
            </div>
            <div style="clear:both"></div>
        </header><!-- /header -->
    </body>
    

    bet36365注册送奖金 7

 

 


4、section 文章中的章节

  section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

通常不推荐没有标题内容使用section元素

补充:

  • 标签中间可以有内容,这个内容只有在不支持video标签的浏览器中才会显示

1、新增类型:网址  邮箱  日期  时间  星期  数量  范围  电话  颜色  搜索

  a、<label>网址:</label><input
type=”url” name=” ” required>
  b、<label>邮箱:</label><input
type=”email” name=” ” required>
  c、<label>日期:</label><input
type=”date” name=” “>
  d、<label>时间:</label><input
type=”time” name=” “>
  e、<label>星期:</label><input
type=”week” name=” “>
  f、<label>数量:</label><input
type=”number” name=” “>
  g、<label>范围:</label><input
type=”range” name=” ” >
  h、<label>电话:</label><input
type=”tel” name=” ” >
  i、<label>颜色:</label><input
type=”color” name=” “>
  j、<label>搜索:</label><input
type=”search” name=” “>

新增的input属性(常用的):

 

 

5、aside 侧边栏

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别主要内容的部分。

第一种是在article元素内部使用

<article>
    <h1>语法</h1>
    <p>文章的正文....</p>
    <aside>
        <h1>名词解释</h1>
        <p>这是一个对语言很重要的内容题</p>
    </aside>
</article>

第二种是在article元素外部使用

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="javascript:void(0);">2017-7-31</a></li>
            <li><a href="javascript:void(0);">张三:好好学一下!</a></li>
        </ul>
    </nav>
</aside>

新增的type值:

date:

  • 功能:可以选择日期bet36365注册送奖金 8
  • 示例:

time:

  • 功能:可以选择时间的输入框bet36365注册送奖金 9
  • 示例:

month:

  • 功能:可以选择年份月份的输入框bet36365注册送奖金 10
  • 示例:
    <input type="month" name="selectmonth" >
    

week:

  • 功能:可以选择XX年XX周的输入框bet36365注册送奖金 11
  • 示例:
    <input type="week" name="selectweek" >
    

search

  • 功能:比普通的文本框增加了一个可全部删除的按钮bet36365注册送奖金 12【可以点击右边的x来清除所有内容】
  • 示例:
    <input type="search" >
    

range

功能:这是一个可拖动的滑动框bet36365注册送奖金 13

属性:

  • min:定义滑动块的最小值
  • max:定义滑动块的最大值
  • value:定义默认值
  • step:定义最小滑动距离

示例:

<input type="range" min="0" max="10" step="1">

url

  • 功能:这个输入框能校验url的合法性bet36365注册送奖金 14【当提交的时候才会检测】
  • 示例:
    <form action="" method="post" >
            <input type="url" >
            <input type="submit" >
        </form>
    

email

  • 功能:这个输入框能够校验email的合法性bet36365注册送奖金 15
  • 示例:
    <form action="" method="post" >
            <input type="email" >
            <input type="submit" >
        </form>
    

number

  • 功能:这个输入框能校验输入的是否全部是数字bet36365注册送奖金 16
  • 示例:
    <form action="" method="post" >
            <input type="number" >
            <input type="submit" >
        </form>
    

 

 

二、HTML5新增表单控件

session:

  • 功能:定义网页的中的“区块”【比p多出语意“区块”,而又比div少出样式之意,div更多的用来定义样式,而session可以用来做结构划分】【如果article是一篇文章的话,那么session可以某块围绕一个论点的文章内容】
  • 示例:

    <section>
            <h3>小标题:如何学习马克思</h3>
            <p>...巴拉巴拉</p>
        </section>
    

    bet36365注册送奖金 17

 

 


8、address元素

用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等、address不只用来呈现电子邮箱或真实地址,还用来
展示跟文档相关的联系人的所有联系信息

<address>
    <a href="#">作者</a>
    <time datetime="2017-7-31">2017-7-31</time>
</address>

embed:

功能:embed标签用来定义插入的内容(媒体内容),比如可以插入swf

属性:

  • src:定义插入的内容的来源url
  • type:定义插入的内容的类型,值为各种MIME 类型

示例:

<embed src="动画演示.swf" ></embed>

如何在网页中插入“网易云音乐”:

<embed  src="//music.163.com/outchain/player?type=2&id=28293971&auto=0&height=66" ></embed>

 


3、可选择第三方播放器

  a、cyberplayer

  b、tencentPlayer

  c、youkuPlayer

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图