day01 - 移动web开发_H5C31.1 语义化标签1.1 语义化标签

• 
  header 头部标签
  
• 
  nav 导航标签
  
• 
  article 内容标签
  
• 
  section 块级标签
  
• 
  aside 侧边栏标签
  
• 
  footer 尾部标签
  
  

1、这种语义化标准主要针对搜索引擎的 2、 这些新标签页面中可以使用多次

1.2 新增input表单（输入标签、表单属性和表单时间）


1.2.1 h5表单标签


text password radio checkbox button file submit reset image email


新的输入类型 type=“email”

1.2.2 h5表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
multiple	multiple	可以选中多个文件提交

1.3 新增多媒体标签


1.3.1 audio音频标签（双标签）


常见属性（单标签）

[size=14.6667px]属性	[size=14.6667px]值	[size=14.6667px]描述
[size=14.6667px]autoplay	[size=14.6667px]autoplay	[size=14.6667px]音频自动播放
[size=14.6667px]controls	[size=14.6667px]controls	[size=14.6667px]向用户显示控件 eg：播放按钮
[size=14.6667px]loop	[size=14.6667px]loop	[size=14.6667px]音频循环播放
[size=14.6667px]preload	[size=14.6667px]preload	[size=14.6667px]页面加载时预备播放
[size=14.6667px]src	[size=14.6667px]url	[size=14.6667px]文件路径

eg：


1.3.2  video 视频标签(双标签）


常见属性

[size=14.6667px]属性	[size=14.6667px]值	[size=14.6667px]描述
[size=14.6667px]autoplay	[size=14.6667px]autoplay	[size=14.6667px]视频就绪自动播放
[size=14.6667px]controls	controls	[size=14.6667px]向用户显示播放控件
width	px	宽
height	px	高
loop	loop	[size=14.6667px]循环播放
preload	auto
src	url
poster	imgurl	[size=14.6667px]加载等待时的画面图片
muted	muted	静音播放

CSS3


1.4结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

1.3.2 E:nth-child(n)
n可以是数字（选择第n个），关键字（even偶数和odd奇数）和公式（如果n是公式，则从0开始计算）


1.5 属性选择器

• 
  E[att] 选择具有att属性的E元素。
  
• 
  E[att="val"] 选择具有att属性且属性值等于val的E元素。
  
• 
  E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
  
• 
  E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素
  
• 
  E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。
  
  

1.6 伪元素选择器


1.6.1 伪元素种类


::before 在元素内部前面插入内容
::after 在元素内部的后面插入内容


before和after必须有content属性
before和after创建一个元素，但是属于行内元素
权重为1




1.7 2D转换transform（元素的位移、旋转、变形、缩放）


1.7.1 2D移动translate（类似定位）


eg：transform:translate(50px,50px);


translate中的百分比是相对于自身元素的宽和高
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

day01 - 移动web开发_H5C31.1 语义化标签1.1 语义化标签

• 
  header 头部标签
  
• 
  nav 导航标签
  
• 
  article 内容标签
  
• 
  section 块级标签
  
• 
  aside 侧边栏标签
  
• 
  footer 尾部标签
  
  

1、这种语义化标准主要针对搜索引擎的 2、 这些新标签页面中可以使用多次

1.2 新增input表单（输入标签、表单属性和表单时间）


1.2.1 h5表单标签


text password radio checkbox button file submit reset image email


新的输入类型 type=“email”

1.2.2 h5表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
multiple	multiple	可以选中多个文件提交

1.3 新增多媒体标签


1.3.1 audio音频标签（双标签）


常见属性（单标签）

[size=14.6667px]属性	[size=14.6667px]值	[size=14.6667px]描述
[size=14.6667px]autoplay	[size=14.6667px]autoplay	[size=14.6667px]音频自动播放
[size=14.6667px]controls	[size=14.6667px]controls	[size=14.6667px]向用户显示控件 eg：播放按钮
[size=14.6667px]loop	[size=14.6667px]loop	[size=14.6667px]音频循环播放
[size=14.6667px]preload	[size=14.6667px]preload	[size=14.6667px]页面加载时预备播放
[size=14.6667px]src	[size=14.6667px]url	[size=14.6667px]文件路径

eg：


1.3.2  video 视频标签(双标签）


常见属性

[size=14.6667px]属性	[size=14.6667px]值	[size=14.6667px]描述
[size=14.6667px]autoplay	[size=14.6667px]autoplay	[size=14.6667px]视频就绪自动播放
[size=14.6667px]controls	controls	[size=14.6667px]向用户显示播放控件
width	px	宽
height	px	高
loop	loop	[size=14.6667px]循环播放
preload	auto
src	url
poster	imgurl	[size=14.6667px]加载等待时的画面图片
muted	muted	静音播放

CSS3


1.4结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

1.3.2 E:nth-child(n)
n可以是数字（选择第n个），关键字（even偶数和odd奇数）和公式（如果n是公式，则从0开始计算）


1.5 属性选择器

• 
  E[att] 选择具有att属性的E元素。
  
• 
  E[att="val"] 选择具有att属性且属性值等于val的E元素。
  
• 
  E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
  
• 
  E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素
  
• 
  E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。
  
  

1.6 伪元素选择器


1.6.1 伪元素种类


::before 在元素内部前面插入内容
::after 在元素内部的后面插入内容


before和after必须有content属性
before和after创建一个元素，但是属于行内元素
权重为1




1.7 2D转换transform（元素的位移、旋转、变形、缩放）


1.7.1 2D移动translate（类似定位）


eg：transform:translate(50px,50px);


translate中的百分比是相对于自身元素的宽和高
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果