开始于2021年8月3日09点59分
课程学习路线:HTML5-> CSS3->H5C3提高->项目拼优购电商网站
仅更新到H5C3提高的C3提高部分(新增选择器),忙于其他事情,暂不继续更新
文章目录 HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. 列表8. 表单 CSS基础1. 简介2. 选择器3. 字体属性4. 文本属性5. 引入方式6. chorme调试工具 CSS入门1. Emmet语法1.1 快速生成HTML结构语法1.2 快速生成css样式语法 2.复合选择器2.1 复合选择器2.2 后代选择器2.3 子选择器2.4 并集选择器2.5 伪类选择器2.6 链接伪类选择器2.7 :focus伪类选择器2.8 复合选择器总结 3. 元素显示模式3.1 什么是元素显示模式3.2 块元素3.3 行内元素3.4 行内块元素3.5 元素显示模式总结3.6 元素显示模式转换 4. 背景4.1 背景颜色4.2 背景图片4.3 背景平铺4.4 背景图片位置4.5 背景固定4.6 背景复合写法4.7 背景颜色半透明4.8 背景总结 CSS三大特性1. 层叠性2. 继承性3. 优先级 盒子模型1. 盒子模型1.1 网页布局本质1.2 盒子模型组成1.3 边框 border1.4 表格的细线边框1.5 边框影响盒子的实际大小1.6 内边距 padding1.7 padding会影响盒子实际大小1.8 外边距 margin1.8.1 外边距的典型应用:1.8.2 外边距合并 1.9 清除内外边距 2. PS基本操作3. 综合案例4. 圆角边框5. 盒子阴影6. 文字阴影 CSS浮动1. 浮动 float1.1传统网页的三种布局1.2 标准流1.3 为什么需要浮动1.4 什么是浮动1.5 浮动特性(重难点)1.6 浮动元素经常和标准流父级搭配使用 2. 常见网页布局2.1 常见网页布局2.2 浮动布局注意点 3. 清除浮动3.1 为什么需要清除浮动3.2 清除浮动本质3.3 清除浮动的方法3.3.1 额外标签法3.3.2 父级添加overflow属性3.3.3 :after 伪元素法3.3.4 双伪元素清除浮动 3.4 清除浮动总结 4. PS切图4.1 常见的图片格式4.2 图层切图4.3 切片切图4.4 PS插件切图 5. 学成在线案例5.1 准备素材和工具5.2 案例准备工作5.3 CSS属性书写顺序(重要)5.4 页面布局整体思路5.5 确定版心5.6 头部制作 CSS定位1. 定位1.1 为什么需要定位1.2 定位组成1.2.1 定位模式1.2.2 边偏移 1.3 静态定位 static(了解)1.4 相对定位 relative (重要)1.5 绝对定位 absolute (重要)1.6 子绝父相的由来1.7 固定定位 fixed (重要)1.8 粘性定位 sticky (了解)1.9 定位总结1.10 定位叠放次序 z-index1.11 定位的拓展 2. 案例——淘宝焦点轮播图3. 网页布局总结4. 元素的显示和隐藏4.1 display属性4.2 visibility 可见性4.3 overflow 溢出 CSS高级技巧1. 精灵图1.1 为什么需要精灵图1.2 精灵图(sprites)的使用 2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加 3. CSS三角4. CSS用户界面样式4.1 什么是界面样式4.2 鼠标样式 cursor4.3 轮廓线 outline4.4 防止表单拖拽 5. 垂直居中 vertical-align5.1 属性应用5.2 解决图片底部默认留白 6. 溢出文字显示为省略号6.1 单行文本溢出6.2 多行文本溢出 7. 常见布局技巧7.1 margin负值的运用7.2 文字围绕浮动元素7.3 行内块的巧妙运用7.4 CSS制作直角三角形 8. CSS初始化 HTML5和CSS3提高1. HTML5的新特性1.1 HTML5新增的语义标签1.2 多媒体标签1.2.1 视频\1.2.2 音频\1.2.3 多媒体标签总结 1.3 新增input表单1.4 新增表单属性 2. CSS3的新特性2.1 CSS3的现状2.2 新增选择器2.3 属性选择器2.4 结构伪类选择器1.2.3 多媒体标签总结 1.3 新增input表单1.4 新增表单属性 2. CSS3的新特性2.1 CSS3的现状2.2 新增选择器2.3 属性选择器2.4 结构伪类选择器 HTMLHTML简介
网页
什么是网页什么是HTML网页的形成常用浏览器及内核
Web标准
为什么需要Web标准Web标准构成 结构(Structure)、表现(presentation)、行为(behavior) 1. HTML标签 1.1 语法规范1.2 标签关系 包含关系、并列关系 2. HTML基本结构标签 2.1 第一个HTML <html></html> <head></head> <body></body> <title></title> 3. 网页开发工具 3.1 VSCode3.2 网页声明标签 <!DOCTYPE>3.3 lang语言种类<html lang = 'en'> or <html lang = 'zh-CN'>3.4 charset 字符集 常用的 GB2312 BIG5 GBK UTF-8 4. 标签语义4.1 标题<h1> - <h6>
4.2 段落<p></p>
文本在一个段落中会根据浏览器大小自动换行段落与段落之间会保有比较大的空隙4.3 换行<br />
4.4 文本格式化标签
4.5 <div>和<span> 没有语义,只是一个盒子
<div>今日头条</div> <span>今日价格</span> div是division的缩写,表示分割、分区。span意为跨度、跨距。特点:
<div>标签用来布局,一行只能放一对。大盒子 <span>标签用来布局,一行可以放多个。小盒子4.6 图形标签和路径
4.6.1 图片标签<img src = ‘图片url’/>
属性间部分先后顺序,采用空格分开,采取键值对的格式。
4.6.2 路径
4.6.2.1 相对路径
以文件所在的位置参考基础,而建出的目录路径
4.6.2.2 绝对路径
指目录下的绝对路径,通常以盘符开始。或者完整的网络地址。
4.7 链接标签<a></a>
4.7.1语法规范<a herf="https://·/zh/cutterman">http://·/zh/cutterman
注意: Cutterman插件要求PS是完整版. 即可以使用扩展功能的版本.
5. 学成在线案例 5.1 准备素材和工具 学成在线PSD源文件。开发工具 :PS(切图)/cutterman插件+vscode (代码) + chrome(测试)。 5.2 案例准备工作我们本次采取结构与样式相分离思想∶
创建study目录文件夹(用于存放我们这个页面的相关内容)。用vscode打开这个目录文件夹.study目录内新建images文件夹,用于保存图片。新建首页文件index.html (以后我们的网站首页统一规定为index.html).新建style.css样式文件。我们本次采用外链样式表。将样式引入到我们的HTML页面文件中。样式表写入清除内外边距的样式,来检测样式表是否引入成功。 5.3 CSS属性书写顺序(重要)建议遵循以下顺序∶
布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写,毕竟关系到模式)自身属性: width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient .示例:
.jdc { diaplay: block; position: relative; float: left; /*布局定位*/ width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; /*自身属性*/ font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; color: #333; /*文本属性*/ background: rgba(0,0,0,0.5); border-radius: 10px; /*其他rgba属于CCS3新增的内容*/ } 5.4 页面布局整体思路为了提高网页制作的效率,布局时通常有以下的整体思路:
必须确定页面的版心(可视区),我们测量可得知分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要.所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累 5.5 确定版心这个案例的版心为1200px, 定义一个公共版心类:
.w { width: 1200px; margin: auto; } 5.6 头部制作 1号是版心盒子header 1200*42 的盒子水平居中对齐,上下给一个margin版心盒子里面包括2号盒子logo版心盒子里面包括3号盒子nav导航栏版心盒子里面包括4号盒子search搜索栏版心盒子里面包括5号盒子user个信息注意: 要求里面4个盒子必须都是浮动导航栏注意点:
实际开发中,我们不会之间用链接a而是用li包含链接的做法(li+a)
li+a 语义更清晰, 一看这就是有条理的列表型内容如果直接用a, 搜索引擎容易辨别为有堆砌关键字嫌疑,从而影响网站排名注意:
让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示.这个nav导航栏可以不给宽度,将来可以继续添加其余文字.因为导航栏里面文字不一样多所以最好给链接a左右padding撑开盒子,而不是指定宽度 CSS定位目标:
能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别
1. 定位 1.1 为什么需要定位提问:以下情况使用标准流或者浮动能实现吗? 1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。
所以:
浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。 1.2 定位组成定位:将盒子定在某一个位置,所以定位也是再摆盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移决定了该元素的最终位置。
1.2.1 定位模式通过CSS的position属性来设置,有四个值:
通过四个属性来设置:
静态定位是元素的默认定位方式,无定位的意思
选择器 { position: static; } 静态定位按照标准流特性摆放位置,它没有边偏移静态定位在布局时很少用到 1.4 相对定位 relative (重要)相对定位是元素在移动位置的时候,是相对于自身原来的位置来的
选择器 { position: relative; }相对定位的特点:(务必记住)
它是相对于自己原来的位置来移动的原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,原来的位置保留)因此,相对定位并没有脱标,最典型的应用是限制绝对定位的
1.5 绝对定位 absolute (重要)绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
选择器 { position: absolute; }绝对定位的特点:(务必记住)
如果没有祖先元素或者祖先元素没有定位,则以浏览器为准来定位如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。绝对定位不再占有原先的位置(脱标) 1.6 子绝父相的由来这句话的意思是:“子级是绝对定位的话,父级就要用相对定位”
子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子父盒子需要加定位限制子盒子在父盒子内显示父盒子布局时,需要占有位置,因此父元素只能是相对定位这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会用到
1.7 固定定位 fixed (重要)固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素位置不会改变。
选择器 { position: fixed; }固定定位的特点:(务必记住)
以浏览器的可视窗口为参照点移动
跟父元素没有任何关系
不随滚动条滚动
固定定位不再占有原先的位置
固定定位也是脱标的,可以看作是一个特殊的绝对定位小技巧:固定在版心右侧位置
让固定定位的盒子left: 50%、走到浏览器可视区(也可以看做版心)的一半位置。让固定定位的盒子**margin-left:**版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。 1.8 粘性定位 sticky (了解)粘性定位可以被认为是相对定位和固定定位的混合
选择器 { position: sticky; top: 10px; }粘性定位的特点:
以浏览器的可视窗口为参照点(固定定位特点)粘性定位占有原先位置(相对定位特点)必须添加top、left、right、bottom其中一个才有效跟页面滚动搭配使用。兼容性较差,IE不支持
1.9 定位总结绝对定位的盒子水平居中、垂直居中
加了绝对定位的盒子不能通过margin: 0 auto;水平居中,但是可以通过下面方法计算实现水平和垂直居中
left: 50%:让盒子左侧移动到父级元素的水平中心位置;margin-left: -100px;让盒子向左移动自身宽度的一半(假设盒子宽是200px)定位特殊特性
绝对定位和固定定位也和浮动类似
行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度块级元素添加绝对定位或者固定定位,如果不设置宽度或高度,默认大小就是内容的大小脱标的盒子不会触发外边距塌陷
用浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题
绝对定位、固定定位会完成压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住盒子里的内容
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以特殊,是因为浮动最初目的就是做文字环绕效果的。
2. 案例——淘宝焦点轮播图 3. 网页布局总结 通过盒子模型,清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
标准流 可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。浮动 可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。定位 定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。 4. 元素的显示和隐藏类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新显示
本质:让一个元素在页面中因此或者显示出来
display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏 4.1 display属性display属性用于设置一个元素如何显示
display: none; 隐藏对象;display: block; 除了转换为块级元素外,同时还有显示元素的意思display隐藏元素后,不在占有原来的位置
应用及其广泛,搭配JS可以做很多网页特效。
4.2 visibility 可见性visibility属性用于指定一个元素可见还是隐藏
visibility: visible; 元素可见;visibility: hidden; 元素隐藏visibility隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来位置,就用visibility: hidden;
如果隐藏元素不想要原来位置,就用display: none; (用处更多,重点)
4.3 overflow 溢出overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
目标:
能够使用精灵图能够使用字体图标能够写出CSS三角能够写出常见的CSS用户界面样式能够说出常见的布局技巧 1. 精灵图 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称css Sprites、CSS雪碧)。
核心技术:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。
1.2 精灵图(sprites)的使用使用精灵图核心:
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置,此时可以使用background-position.移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同因为一般情况下都是往上往左移动,所以数值是负值。使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。使用精灵图核心总结:
精灵图主要针对于小的背景图片使用主要借助于背景图片位置来实现一般情况下精灵图都是负值(网页的坐标:x轴右边走是正值,y轴下边走是正值) 2. 字体图标 2.1 字体图标的产生字体图标使用场景:主要用于显示网页中通用、常用的一些小图标
精灵图是有很多优点,但是缺点很明显:
图片文件还是比较大的。图片本身放大缩小会失真一旦图片制作完成想要更换非常复杂此时,字体图标iiconfont很好解决了以上的问题。
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
2.2 字体图标的优点 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等兼容性:几乎支持所有的浏览器,请放心使用注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标。如果遇到一些结构和样式复杂一点的小图片,就用精灵图。 2.3 字体图标的下载推荐下载网站:
iconmoon字库:https://iconmoon.io
icoMoon成立于2011年,推出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使它们成一字型。该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。
阿里 iconfont 字库 https://·
这个是阿里妈妈M2UX的一个iconfont字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用Al制作图标上传生成。重点是,免费!
2.4 字体图标的引入下载完成后,注意压缩文件不要删,后面会用
把压缩包解压,里面的fonts文件夹放入项目的根目录下;
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。
在CSS样式中全局声明字体︰简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?drjfm0'); src: url('fonts/icomoon.eot?drjfm0#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?drjfm0') format('truetype'), url('fonts/icomoon.woff?drjfm0') format('woff'), url('fonts/icomoon.svg?drjfm0#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }这段代码可以在压缩包里的style.css文件里找到!!!
直接link这个css文件html标签内添加小图标
在压缩包里打开demo.html文件,找到需要的图标复制字体图标到标签内给使用了字体图标的标签声明字体样式:font-family: ‘iconmoon’; 2.5 字体图标的追加把压缩包里面的selection.json 重新上传到网站,然后选中自己想要的新图标,重新下载替换源文件即可
3. CSS三角网页常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标
div { width: 0; height: 0; line-height: 0; font-size: 0; border: 10px solid transparent; border-left-color: pink; } 4. CSS用户界面样式 4.1 什么是界面样式所谓的界面样式,就是更改一些用户操作样式,以便提升用户的体验
鼠标样式表单轮廓防止表单域拖拽 4.2 鼠标样式 cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
选择器 { cursor: pointer; }给表单添加 outline: 0 或者outline: none;之后,就可以去掉表单默认的蓝色边框
input { outline: none; } 4.4 防止表单拖拽实际开发中,文本域右下角是不允许拖拽的,可以通过 resize属性取消
textarea { resize: none; } 5. 垂直居中 vertical-align 5.1 属性应用使用场景:设置图片或者表单(行内块元素)和文字垂直居中对齐
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效
vertical-align: baseline | top | middle | bottom;图片、表单都属于行内块元素、默认的 vertical-align是基线对齐的
设置为 vertical-align: middle;可以让文字与图片垂直居中对齐。
5.2 解决图片底部默认留白图片底侧会有一个空白空隙,原因是行内块元素默认是和文字基线对齐
主要的解决方法有两种:
给图片添加 vertical-align: middle | top | bottom;都行,只要不是基线对齐就行(推荐)把图片转换为块级元素 display: block; 6. 溢出文字显示为省略号 6.1 单行文本溢出必须满足下面三个条件:
文本强制单行显示;溢出隐藏省略号代替溢出部分 1. 强制单行显示 white-space: nowarp; 2. 溢出隐藏 overflow: hidden; 3. 省略号代替溢出部分 text-overflow: ellipsis; 6.2 多行文本溢出多行文本溢出显示省略号,有较大兼容性问题,适用于webkit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden; text-overflow: ellipsis; 弹性伸缩盒子模型显示 display: -webkit-box; 限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2; 设置或检索伸缩盒子对象的子元素的排列方式 -webkit-box-orient: vertical; 更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单 7. 常见布局技巧 margin负值的运用文字围绕浮动元素行内块的巧妙运用 7.1 margin负值的运用 让每个盒子 margin-left: -1px;正好压着相邻盒子边框鼠标经过某个盒子的时候,提高当前盒子的层级即可 如果没有定位,则加相对定位(保留当前位置)如果都有定位,则设置 z-index提高层级 7.2 文字围绕浮动元素文字标准流,会环绕浮动的元素
7.3 行内块的巧妙运用行内块元素之间默认会有间距,制作页码很方便,给父元素添加 text-align: center;后会很便捷的水平居中,十分方便
7.4 CSS制作直角三角形在原先CSS三角的基础上:(以直角在右边的直角三角形为例)
把底部、左侧边框的宽度设为0,颜色设为透明;把顶部边框的宽度调大,把等边直角三角形拉高,颜色设置为透明; border-width: 150px 100px 0 0; border-style: solid; border-color: transparent #ccc transparent transparent; 8. CSS初始化不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾刘览器的兼容,我们需要对CSS初始化
简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset )
每个网页都必须首先进行CSS初始化。
这里我们以京东css初始化代码为例。
Unicode编码字体∶
把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
HTML5和CSS3提高 能够说出3~5个HTML5新增布局和表单标签能够说出CSS3的新增特性有哪些 1. HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。
声明︰
新特性增加了很多,但是我们专注于开发常用的新特性。基础班我们讲解部分新特性,到了就业班还会继续讲解其他新特性。 1.1 HTML5新增的语义标签 <header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 底部标签注意:
这些语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中,需要把这些元素转化为块级元素移动端不存在兼容性,更喜欢使用这些标签HTML5新增了很多标签,需要慢慢学习 1.2 多媒体标签新增的多媒体标签主要包含两个:
音频:<audio>视频:<video>使用他们可以很方便的在页面中嵌入音频和视频,而不再去使用flash或其他浏览器插件
1.2.1 视频<video>HTML5在不使用插件的情况下,也可以原生地支持视频格式播放,但是支持的格式有限
兼容性写法:
<video width="300"> <source src="media.mp4" type="video/mp4"> <source src="media.ogg" type="video/ogg"> 您的浏览器暂不支持video标签播放视频 </video>常见的属性:
source写法:
<audio controls="controls"> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器暂不支持audio标签。 </audio>常见属性:
可以通过以下设置方式修改placeholder里面的字体颜色∶
input::placeholder { color: pink; } 2. CSS3的新特性 2.1 CSS3的现状 新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习∶新增选择器和盒子模型以及其他特性 2.2 新增选择器 属性选择器结构伪类选择器伪元素选择器 2.3 属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
属性:
可以通过以下设置方式修改placeholder里面的字体颜色∶
input::placeholder { color: pink; } 2. CSS3的新特性 2.1 CSS3的现状 新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习∶新增选择器和盒子模型以及其他特性 2.2 新增选择器 属性选择器结构伪类选择器伪元素选择器 2.3 属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
范围越小,权重越大 ??
添加在某一属性的后边 ??
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #pink老师前端笔记 #HTML标签2 #HTML基本结构标签3 #网页开发工具4