- video(html5)
- src属性
- autoplay属性自动播放
- controls属性控制条
- poster 属性显示视频未播放显示的图片
- loop属性循环播放
- preload 属性预加载和autoplay冲突
- muted属性静音
- width/height
- source标签
- src属性
- type属性 =“video/ogg” =“video/mp4” 针对浏览器对视频格式的兼容问题
- audio (html5) 标签和video类似，没有poster、width、height属性
- details详情概要标签
- summary概要标签
- progress标签进度
- min属性
- max属性
- value属性
- marquee 标签 （不在w3c标准）
- direction属性滚动方向
- scrollamount属性滚动速度，数值越大越快
- loop属性滚动次数
- behavior属性滚动类型， slide 滚动到边界停止，alternate滚动边界弹回
没有语义，只是样式，废弃的标签
<br> <hr> <font> <b> <u> <i> <s>
有语义新增标签<strong> <ins> <em> <del>
- 字符实体
- < >©
< >©
#css#
###文字设置###
修改样式使用CSS优于标签属性设置，方便改变需求，减少属性的记忆。
- CSS格式
- style标签或属性对应的值，以key:value;形式呈现，值无需双引号。
- css语句以；结尾。
- CSS语句以{}包裹
- CSS文件以.css结尾，内容就是style标签或属性的内容
- CSS注释// 多行注释 /**/
####选择器####
####属性####
##文本##
- 文字样式
- font-style：normal；正常的 默认
- font-style：italic;倾斜的
- 文字的粗细
- font-weight：bold；加粗
- font-weight：bolder；加粗+
- font-weight：lighter；细线 默认
- font-weight：100-900；粗细程度
- 文字大小
- font-size:12px;最小值12px
- 文字字体
- font-family：“Arial”，“微软雅黑”；如果取值是汉字加双引号或单引号。后面的值是备选方案，常用用于英、中文设置不同字体。中文、宋体/黑体/微软雅黑，英文、Time New Roman/Arial
- font:italic bold 20px “楷体”； 简写前两个的属性可以省略，后两个属性size在family前面。
-文本装饰
- text-decoration:underline;下划线 overline上划线 none 无
- text-align:left; center right
- text-indent:2em; 缩进2个文字单位 20px
- color:red; rgb(255,0,0) #F00 #FF0000 rgba(255,0,0,0.4)
- background-color:blue;背景色
选择器
- 标签选择器 p{color:red; } 选择所有p标签，无论多少嵌套
- 类选择器 .demo{background-color:blue; }
- 一个标签可以绑定多个类名 class=“demo demo2”
- id选择器 #item{font:30px “黑体”；}
-id="item"的值具有唯一，id命名符合变量命名，不能用html标签名。
关系选择器
- 后代标签选择器
- .dome div p { } 类dome标签中div所有的p元素,可以多种标签种类组合 - 子代标签选择器
- div>span 选择子代span标签,不会迭代查找span标签
- div>p>div - 交集选择器 .demo#item
- 之间没有空格，使用较少 - 并集选择器 div,span
- 使用逗号链接 - 相邻选择器 h2+div 选择h2标签紧跟的div标签
- 通用选择器 h3～p 选择h3后面所有的p标签，无论有没有间隔
- css3 中的序选择器
- p:first-child{} 同级别标签的如果是第一个是P标签
- p:last-child{} 同级别标签的如果是最后一个是P标签
- p:first-of-type{} 同级别中同类型的第一个P标签
- p:last-of-type{} 同级别中同类型的最后一个P标签
- p:nth-child(3){}同级别标签的如果是第三个是P标签
- p:nth-last-child(3){}同级别倒数第三个P标签
- p:nth-of-type(3){} 同级别中同类型的第三个P标签
- p:nth-last-of-child(3){} 同级别中同类型的倒数三个P标签
- p:only-child{} 选中父元素只有一个子元素，如果为p的元素
- p:only-of-type{} 元素是父元素中唯一的P
<style>
.dome > span{color:blue;
font-style:italic;}
</style>
<div class="bank">
<p class="dome">
<span>选择子代内置标签元素</span>
<ul>
<li><span>子代内置标签元素</span></li>
</ul>
<span>选择子代内置标签元素</span><!--为什么此处没有变蓝-->
</p>
</div>