html5新标签。(三类多媒体标签往上)都是div标签的衍生物
都不要嵌套在自身里面的标签
级别最高,通常放在最外层
<header>标记定义一个页面或一个区域的头部
<section>一个区域
<footer>一个页面或一个区域的底部
<article>标记定义一篇文章 <br>
<aside>页面内容部分的侧边栏,和article配合使用
<nav>导航链接
<hgroup>文件中一个区块的相关信息
<figure>一组媒体内容以及他们的标题
<figcaption>figure元素的标题
<dialog>一个对话框(会话框)类似微信
三类多媒体标签。标签意义:<br><br>多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验。
video 标记定义一个视频
src:提取音频地址
autoplay:是否自播放(值为autoplay自动播放)
loop:是否自动重复播放(值为-1则重复)
controls:是否显示控制器(值为controls显示控制器 )
width:设置宽度
height:设置高度
audio 标记定义音频内容。
src 提取音频地址
autoplay 是否自播放 值为autoplay则自动播放
loop 是否自动重复播放 值为-1则重复
controls 音频播放控制器 值为controls
不存在宽高
source 标记定义媒体资源。
<canvas>标记定义图片,但本意是:画布。他有强大的API,通过API可以定义很多很炫的特效。
<embed>标记定义外部的可交互的内容或插件,比如快销声匿迹的flash。(了解即可)
Web应用标签
<meter> 状态标签(实时状态显示:气压,气温)(双标签)
value 必需。规定度量的当前值。
min 规定范围的最小值。
max 规定范围的最大值。
optimum 最佳值
high 规定被视作高的值的范围。
low 规定被视作低的值的范围。
<progress>状态标签, 表示示任务的进度(进程),常见有下载,安装(单标签)
max 最大值
value 当前值
<datalist>----->>为input标记定义一个下拉列表,配合option,支持输入搜索选择。定义选项列表,需要通过input元素中的list属性和datalist中的id属性进行绑定,用来定义input可能的值
<details>----->>标记定义一个元素的详细内容,配合summary,里面第一行写summary标签,summary的内容会作为它显示的标题
open="open"内容展开
其他标签
<ruby>标记定义注释或音标
<rt>标记定义对ruby的注释内容文本
<rp> 告诉那些不支持ruby元素的浏览器如何去显示,一般是用rp把左括号和右括号分别抱起来
!!!!!!!注:<rp>不要放在<rt>标签内
<mark>----->>标记定义有标记的文本(黄色选中状态)
<output>----->>标记定义一些输出类型,计算表单结果配合oninput事件
*oninput 事件可以实时监听文本框的输入变化<br><br>*input type属性为number表示数值型<br><br>*input type属性为range表示范围(最大到100)
input新增类型
email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交,但是并不检查email地址是否存在。提交时该文本框可以为空,除非加上required属性。
email类型的文本框具有一个mutiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。
tel类型的input元素被设计为用来输入电话号码的专用文本框。
number类型的input元素是一种专门用来输入数字的文本框,并且在提交时进行检查,检查其中内容是否为数字,如果其中内容不为数字,则将文本框中的内容作为空白进行提交。框右边会有上下箭头点击能+和-
min
max
step
<input type="date" />
<input type="month" />
<input type="week" /><!-- IOS不兼容 -->
<input type="time" />
<input type="datetime" /> Pc端和手机端皆不兼容,IOS版本越高越不兼容)
<input type="datetime-local" />(手机端不兼容)
PC端新增
range (拖动杆)<br><br><input type="range" name="range" min="1" max="10">【若不设置min和max,默认0-100】
search (类似于搜索框,应用于搜索引擎)<br><br><input type="search" name="search">
color (全色彩选择,可用来在线文本编辑器)<br><br><input type="color" name="color"><br><br>(ESL色调,饱和度,亮度)
删除了的标签
一,纯表现的元素 { 注: html(结构层)css(表现层)}<br><br>Basefont(最基本的字体),big(放大后的字体),center(居中对齐),font(定义字体的),s,strik,tt,u。
二,对可用性产生负面影响的元素(注:html5是向下兼容的)(后台经常用到,属于框架型元素)<br><br>frame,frameset,noframes;(取而代之的是iframe。)
三,产生混淆的元素<br><br>acronym,applet,isindex,dir;
重定义标签
<b>粗体,无意义
<i>斜体,无意义
<dd>同details与figure使用包含文本 dialog也可用
<dt>可以同details和figure一同使用,汇总细节,dialog也可用(标题)
<hr> 不仅表示水平线,还表示主题结束,显示效果相同
<menu> 重新定义用户界面的菜单,配合command或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
新属性
input和form的
placeholder 属性:让提示文字,在用户输入时,自动清除、用户清除输入的文字时,自动显示。
required属性用于表单提交验证,required 属性规定必需在提交之前填写输入字段。大大滴减少js代码!<br><br>eg:<input type="text" required="required"/><br><br>使用了该属性,则此输入框是必填(或必选)的。<br><br>PS:适用于input标签type属性值为:text/search/url/tel/email/password/date pickers/number/checkbox/radio/file
autocomplete自动完成:<br>用在form或者input<br><br><br><form action="audio.html" autocomplete="on"><!-- 默认为ON -->
可以使刷新页面后,点输入框显示之前输入的历史并选择,若不想显示,input里也可以使用置为off
autofocus<br><br>规定页面在加载的时候,域自动地获得焦点,就是会自动点击这个域
multiple属性:规定输入域可选择多个值<br><br>PS:multiple 属性适用于以下类型的<input>标签:<br><br><input type="file/email" multiple="multiple"/><br><br><br><br><br>
email
也可用于email属性上传多个邮箱,邮箱之间用,逗号隔开:通过“,”逗号的分隔,分为两个字段
链接a的新增属性
sizes:<br><br>icon:图像,所以type是image,格式是gif,根绝不同分辨率引入不同的sizes,显示也不同。例如sizes:<link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"/>
target:<br><br>base标签写在<head></head>标签内,自动加上这段,target="_blank",默认所有超链接都弹出一哥新窗口,不添加target属性时默认_slef
media: <br><br>a:media=" " (表示对设备进行优化,handheld和tv分别对 手持 和 电视 设备进行支持)
hreflang: <br><br>a:hreflang="zh" (设置语言,这里设置语言是中文,如接下来跳转的页面是中文,增加页面渲染性能)<br><br>zh-cn简体中文,zh-uk香港 , zh-tw台湾<br>
rel:<br><br>a:rel="external" (设置超链接的引用,这里超链接为外部链接,即对超链接的语义化说明)
其他属性
script 新增属性
defer : 全部页面加载完后执行(只兼容IE),好处是速度快<br><br><script defer src="URL" ></script>
async:脚本加载完后执行,双线程加载,加载脚本同时加载网页(主流都支持)<br><br><script async src="URL"></script>
ol有序列表 新增加的属性
start——起始值,就是改变标签数字从几开始
reversed——倒序排列,就是改变标签数字变成倒序
html新增属性
.html中<br><br>manifest="cache.manifest" (定义页面离线应用文件)<br><br><html manifest="cache.manifest"><br><br>----------------解决断网问题<br><br>index.manifest 给出一个列表,包含css,html,js,<br><br>我们在联网的时候,index.manifest就会自动我们所需要的三个文件放在本地,离线时依旧可以正常显示网页
style新增属性。没事别用,违背了结构和表现分离
style :内嵌css.在文档的任意部分都可以写css,<style scoped></style><br><br>一般提倡html与css分开两个文件写,不赞成这么写,与结构表现分离是背道而驰的<br><br> 看大图
新布局
新布局的意义<br><br>1.语义化<br><br>H5可以让很多更语义化的结构化代码标签代替大量的无意义的div标签。<br><br>(1)这种语义化的特性提升了网页的质量和语义<br><br>(2)减少了以前用于CSS调用的class和id属性<br><br>2.对搜索引擎的友好:<br><br>新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
结构层html
li标签是最不利于搜索引擎搜索的尽可能少用。
导航条直接用nav标签来设置(h5新增)
<samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。以浅色显示
表现层css
header
footer 加一个大于号> 子选择器。css3新增的
banner横幅
1.overflow:hidden指的是溢出的部分隐藏(它也可以清除浮动)
2.父级ul设置为position: relative;,子级设置position: absolute;,是为了方便定位(居中妙计):
3.设置了position: absolute;之后,可以用lrtb来控制位移,包括负值(-)
main主体
text-decoration:underline下划线
first-of-type:选择其父元素中的第一个元素
last-of-type: 选择其父元素中的最后个元素(这里是第二个也是最后一个)
footer