2019-08-17 HTMl 5 开始

1.1新标签

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

注意:

1.这种语义化标准主要是针对搜索引擎的

2.这些新标签页面中是可以使用多次的

3.在IE9中 需要把这些元素转换为块级元素

4.其实我们移动端更喜欢使用这些标签


1.2新媒体标签

音频: audio (ogg,mp3)

<audio src = "文件地址" controls = "controls" autoplay = "autoplay" loop= "loop"></audio>

autoplay谷歌浏览器禁用

loop:无限循环

因为不同浏览器支持不同音频格式 所以我们准备多个格式

<audio controls = "controls">

    <source  src = "happy.mp3" type  ="audio/mpeg">

    <source  src = "happy.ogg"  type = "audio/ogg">
    
    您的浏览器不支持audio标签。

</audio>

视频: video

<video src = " 文件地址" controls="controls" ></video>

controls: 播放控件

<video src = "文件地址" controls = "controls" muted = "muted" loop = "loop" poster = "封面图片地址(没有自动播放时才添加)">

    <source  src = "happy.ogg" type  ="video/ogg">

    <source  src = "happy.mp4"  type = "video/mp4">

     您的浏览器不支持video标签。

    自动播放  静音播放  muted

<video>


1.4 表单新属性

type = "email" 可以验证输入内容是否符合邮箱格式

type = "url" 可以验证输入内容是否符合网址格式

type = "data" 带有日期控件

type = "time" 时间

type = "month" 月份

type = "week" 周

type = "number" 数字

type = "tel" 手机号码

type = "week" 周

type = "search" 搜索框

type = "color" 颜色控件

required:表单拥有该属性表示其内容不能为空 必填

placeholder: 提示文字/占位符

autofocus:自动聚焦属性

autocomplete :(值: on/off)当用户在字段开始输入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,默认已经打开,需要放在表单内同时加上name睡醒 同时成功提交

multiple:可以多选文件提交


2 css3


2.1 css3属性选择器

鼠标样式:小手 ---- cursor:pointer

属性能够选择器使用方法:

元素[属性名]{

}

属性选择器的权重要比标签选择器高

类选择器,属性选择器,伪类选择器,权重为10

input[type = submit]{
type = submit的
}

div[class^="icon"]{
class属性以icon开头的
}
div[class$="icon"]{
以icon结尾的
}
div[class*="icon"]{
包含"icon"的
}


2.2 css3 结构为类选择器

E:first-child ------------ 匹配父元素的第一个子元素

E:last-child ------------ 匹配父元素的最后一个子元素

E: nth-child(n) ------------- 匹配父元素的第n个子元素

E: nth-child(n) -------------- n可以是关键词 even 是偶数 odd 是奇数

E: nth-child(n) -------------- n可以是公式 从0开始计算

2n : 偶数 2n + 1:奇数

E:first-of-type ------------- 指定类型的第一个

E:last-of-type ------------- 指定类型的第一个

E:nth-of-type(n) ------------- 指定类型的第一个


2.3 伪类选择器(常用)

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

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

注意:

  1. 两者内部必须有属性:content

  2. 两者会创建一个元素,行内元素

3 不是一个真正意义上的元素 dom里面看不到

4 伪元素选择器权重为1

字体图标

demo 里面的 @font-face复制一份到style里面 然后复制小方框

给元素指定字体图标

font-family:"icomoon"


3 css 3 2d转换

转换(transform) 可以实现元素的位移,旋转,缩放等效果

移动(translate)-----------transform:translate(x,y)
x y不能省略

transform : translateX/Y(100px)

优点:不会影响其他元素

可以做子元素在父元素水平垂直居中

子元素绝对定位 上 左值: 50%

然后translate的(X,Y)值偏移-50%

p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

对行内标签没有效果


旋转

旋转(rotate)----------- transform:rotate(xdeg)

过渡写到本身上 谁做动画给谁加

xdeg度数


缩放(scale)

byebye
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,478评论 0 5
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,569评论 1 13
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,591评论 0 6
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,334评论 0 7