当前位置: 移动技术网 > IT编程>网页制作>Html5 > H5新标签(适合新手入门)

H5新标签(适合新手入门)

2019年01月01日  | 移动技术网IT编程  | 我要评论

h5新标签

文档类型设定

document

html: sublime 输入 html:4s

xhtml: sublime 输入 html:xt

html5 sublime 输入 html:5 <!doctype html>

字符设定

<meta http-equiv="charset" content="utf-8">:html与xhtml中建议这样去写

<meta charset="utf-8">:html5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : /

header:定义文档的页眉 头部

nav:定义导航链接的部分

footer:定义文档或节的页脚 底部

article:定义文章。

section:定义文档中的节(section、区段)

aside:定义其所处内容之外的内容 侧边

 

 

 

 

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义: 定义区域</section>
<aside> 语义: 定义其所处内容之外的内容 侧边</aside>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
            <option>刘德华</option>
            <option>刘若英</option>
            <option>刘晓庆</option>
            <option>郭富城</option>
            <option>张学友</option>
            <option>郭郭</option>
</datalist>

fieldset 元素可将表单内的相关元素分组,打包 legend 搭配使用

<fieldset>
            <legend>用户登录</legend>  标题
            用户名: <input type="text"><br /><br />
            密 码: <input type="password">
</fieldset>

 

新增的input type属性值:

类型

使用示例

含义

email

<input type="email">

输入邮箱格式

tel

<input type="tel">

输入手机号码格式

url

<input type="url">

输入url格式

number

<input type="number">

输入数字格式

search

<input type="search">

搜索框(体现语义化)

range

<input type="range">

自由拖动滑块

time

<input type="time">

小时分钟

date

<input type="date">

年月日

datetime

<input type="datetime">

时间

month

<input type="month">

月年

week

<input type="week">

星期 年

常用新属性

属性

用法

含义

placeholder

<input type="text" placeholder="请输入用户名">

占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回

autofocus

<input type="text" autofocus>

规定当页面加载时 input 元素应该自动获得焦点

multiple

<input type="file" multiple>

多文件上传

autocomplete

<input type="text" autocomplete="off">

规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字

required

<input type="text" required>

必填项 内容不能为空

accesskey

<input type="text" accesskey="s">

规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式

综合案例

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="username">姓名:</label>
    <input type="text"

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网