HTML5笔记

html5新增标签

结构标签（块状元素）---有意义的div

<article> ：标记定义一篇文章                                               1.header    section  aside  article    footer不嵌套使用

<header>：标记定义一个页面或一个区域的头部                  2.header  section   footer(优先级最高，写在外层)  aside  article   figure   hgroup  nav(写在内层  互不嵌套)

<nav>：标记定义导航链接　　　　　　　　　　　　　　备注：若还需要块级元素金额嵌入<div>   div与figcaption同级

<section>：标记定义一个区域

<aside>：标记定义页面内容部分的侧边栏

<hgroup>：标记定义文件中一个区块的相关信息

<figure>：标记定义一组媒体内容以及他们的标题

<figcaption>：标记定义figure元素的标题

<footer>：标记定义一个页面或一个区域的底部

<dialog>：标记定义一个对话框（会话框）类似微信

三类 多媒体标签：<video> 标记定义一个视频    <audio> 标记定义音频内容    <source>标记定义媒体资源

<audio src="地址"  autoplay="autoplay"(放大)   loop="1"(重复次数)    controls=“controls”（控制器）>放不出来就是浏览器版本过低</audio>

<source  src="地址">    type=“转码（格式变化）”>

video定义：

<video src="地址"   controls=“controls“可添加宽高

　　　　<source src="地址"  type=“video/.mp4”>

</video>

<canvas> 标记定义图片     <embed> 标记定义外部的可交互内容或插件  （比如flash）

Web应用标签

状态标签

<meter> 实时状态显示：气压、气温

<progress>  任务过程：安装   加载

<meter  value="220"  min="20"  max=“380”  low=“200” high=“240”  optimum=“220”><meter>

浏览器兼容：

<meter> :Firefox   Chrome    Opera   Safari6支持

<progress> IE10+   :Firefox   Chrome    Opera   Safari6支持

列表标签：

<datalist>   为input标记定义一个下拉列表  配合option

<details>  标记定义一个元素的详细内容，配合summary

<input  placeholder="提示信息"  list=“one”>

　　<datalist  id="one">

　　　　<option  value="">内容</option>

</datalist>

浏览器兼容

<datalist>  Chrome   Firefox   IE10及更高版本支持

<details>  Chrome   Firefox   Safari6及更高版本支持

<detalis    open="open">默认是open

　　<summary>标题名</summarry>

　　<p>内容</p>

</detalis>

注释标签

<ruby>  标记注释或音标

<rt>   标记定义对ruby的注释内容文本

<ruby>胡<rt>Hu</rt></ruby>

<rp>  告诉那些不支持ruby元素的浏览器如何去显示

<rp><rt>hu</rt></rp>

其他标签

<mark>  标记定义有标记的文本（黄色选中状态）

<output> 标记定义一些输出类型，计算表单结果配合oninput事件

Input

电子邮件Input类型

<input type="e-mail" name="e-mail">

统一资源定位符

<input  type="url" name="url">    只针对手机端，兼容性差

 电话号码

<input  type="tel" name="tel">

 数字

<input  type="number" name="number">

Date Pickers Input类型

Date——选取日、月、年

Month——选取月、年

Week——选取周和年

Time——选取时间（小时和分钟）

Datetime——选取时间，日、月、年（UTC时间）

Datetime-local——本地时间

 Range Input类型

<input type="range" name="range" min="1"  max="10">

Search Input类型

<input  type="search"  name="search">

Color Input类型

<input  type="color" name="color">

表单属性

1.autocomplete属性

form或input域应该拥有自动完成功能

<form autocomplete="on"></form>    on/off

适用于 <form>标签及以下类型的<input>标签：

text   search    url   tel   e-mail  password   datepickers   range   color

2.autofocus属性

规定在页面加载时，域自动获得焦点

autofocus适用于所有<input>标签类型

<input   autofocus="autofocus">

3.multiple属性

规定输入域中可选择多个值

ps：multiple属性适用于以下类型的<input>标签：e-mail和file

<input type="file" multiple="multiple">

4.placeholder属性

适用于<input>标签type属性值为：

text   search   url   tel   e-mail  password   

5.required属性

规定必须在提交之前填写输入域（不能为空）

<input  type="text"  required="required">

适用于：text  search  url  tel  e-mail   password  datepickes  number  checkbox   radio  file

链接属性：

size     <link  rel="icon"  href="icon.gif"  type="image/gif  size="16*16">

引用外部css：<link  rel="stylesheet"    href="css文件的URL"   type="text/css">

icon:引用图像

target

<base  href="http://localhost"   target="_blank">写在外部

 超链接：

a:media=""(表示对设备进行优化，handheld对“手持”设备进行支持，tv  对“电视”设备进行支持)

a:hreflang=“zh”  （设置语言，这里设置为中文）

a:rel=“external”（设置超链接引用，这里为外部链接）

其他属性

Script

defer：加载完脚本后并不执行，而是等整个页面加载完以后再执行.（只在IE浏览器兼容）

<Script  defer  src="URL"></Script>

async:加载完脚本后立即执行  属于异步执行

 

<Script  async src="URL"></Script>

双线层、同时加载body内容   兼容主流浏览器

 

OL有序列表

start:起始值

reversed：倒序排列

<ol  start="值"    reversed="reversed">

 

 

html

<html  mainfest="cache.mainfest">定义页面离线应用文件

style

scoped：内嵌css

<style  scoped>

...........

</style>                        可以在任何位置写css代码

 

posted @ 2021-04-29 19:14  guided  阅读(79)  评论(0)    收藏  举报