做支付行业招代理一般上什么网站,山东潍坊新闻,镇江抖音seo,简历网站有哪些一、HTML5新增元素
1.HTML5语义化元素
在HMTL5之前#xff0c;我们的网站分布层级通常包括哪些部分呢#xff1f;
header、nav、main、footer
◼ 但是这样做有一个弊端#xff1a;
我们往往过多的使用div, 通过id或class来区分元素#xff1b;对于浏览器来说这些元素不…一、HTML5新增元素
1.HTML5语义化元素
在HMTL5之前我们的网站分布层级通常包括哪些部分呢
header、nav、main、footer
◼ 但是这样做有一个弊端
我们往往过多的使用div, 通过id或class来区分元素对于浏览器来说这些元素不够语义化对于搜索引擎来说, 不利于SEO的优化
◼ HTML5新增了语义化的元素
header头部元素nav导航元素section定义文档某个区域的元素article 内容元素aside侧边栏元素footer尾部元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- div classheader/div --header/header!-- div.nav --nav/nav!-- section --sectionarticle1/articlearticle2/articlearticle3/article/section!-- aside --aside/aside!-- footer --footer/footer/body
/html二、video、audio元素
Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易. 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题; 比如无法很好的支持HTML/CSS特性, 兼容性问题等等;
HTML5增加了对媒体类型的支持 音频audio 视频video
Video和Audio使用方式有两个 一方面我们可以直接通过元素使用video和autio 另一方面我们可以通过JavaScript的API对其进行控制
1.HTML5新增元素 - video
HTML video 元素 用于在HTML或者XHTML文档中嵌入媒体播放器用于支持文档内的视频播放。 video常见的属性: 2.video支持的视频格式
每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式 3.video的兼容性写法
在video元素中间的内容是针对浏览器不支持此元素时候的降级处理。 内容一通过source元素指定更多视频格式的源; 内容二通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容; !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- img src alt --!-- 基本使用 --!-- video src./assets/fcrs.mp4 width600 controls muted/video --!-- 兼容性写法 --video src./assets/fcrs.mp4 width600 controls mutedsource src./asset/fcrs.oggsource src./asset/fcrs.webmp当前您的浏览不支持视频的播放, 请更换更好用的浏览器!/p/video/body
/html4.HTML5新增元素 - audio
HTML audio 元素用于在文档中嵌入音频内容, 和video的用法非常类似
常见属性: 5.audio支持的音频格式
每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式
具体的支持的格式可以通过下面的链接查看:
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
在audio元素中间的内容是针对浏览器不支持此元素时候的降级处理 三、input、全局data-*元素
1.input元素的扩展内容
◼ HTML5 对 input 元素也进行了扩展在之前我们已经学习过的其中几个属性也是HTML5的特性
placeholder输入框的占位文字multiple多个值autofocus最多输入的内容
◼ 另外对于 input 的 type 值也有很多扩展
datetimenumbertelcoloremail等等…
◼ 查看MDN文档:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
2.新增全局属性 data-*
在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:
data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到通常用于HTML和JavaScript数据之间的传递
在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {}/style
/head
bodydiv classbox age18 data-namewhy data-age18 data-height1.88/divh1 classtitle/h1scriptconst boxEl document.querySelector(.box)console.log(boxEl.dataset)/script/body
/html四、white-space、text-overflow
1.CSS属性 - white-space
white-space用于设置空白处理和换行规则 normal合并所有连续的空白允许单词超屏时自动换行 nowrap合并所有连续的空白不允许单词超屏时自动换行 pre阻止合并所有连续的空白不允许单词超屏时自动换行 pre-wrap阻止合并所有连续的空白允许单词超屏时自动换行 pre-line合并所有连续的空白但保留换行允许单词超屏时自动换行 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;background: orange;/* white-space *//* nowrap不换行, 合并: 会合并 *//* pre: 不换行, 合并: 不合并 *//* pre-wrap: 换行, 合并: 不合并 *//* pre-line: 换行, 合并: 合并连续的空白, 但保留换行符 */white-space: pre-line;}/style
/head
bodydiv classbox我是box kobe boxboxbox哈哈哈哈哈 呵呵呵呵和 my name is why/div/body
/html2.CSS属性 - text-overflow
text-overflow 通常用来设置文字溢出时的行为
clip溢出的内容直接裁剪掉字符可能会显示不完整ellipsis溢出那行的结尾处用省略号表示
text-overflow 生效的前提是 overflow 不为 visible
常见的是将white-space、text-overflow、overflow一起使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 150px;background-color: #f00;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/style
/head
bodydiv classboxmy name is why, nickname is box, age is 18/div/body
/html五、CSS 常见函数扩展
在前面我们有使用过很多个CSS函数:
比如rgb/rgba/translate/rotate/scale等;CSS函数通常可以帮助我们更加灵活的来编写样式的值
下面我们再学习几个非常好用的CSS函数:
var: 使用CSS定义的变量;calc: 计算CSS值, 通常用于计算元素的大小或位置;blur: 毛玻璃(高斯模糊)效果;gradient颜色渐变函数
1.CSS函数 - var
CSS中可以自定义属性
属性名需要以两个减号–开始;属性值则可以是任何有效的CSS值; 我们可以通过var函数来使用: 规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
所以推荐将自定义属性定义在html中也可以使用 :root 选择器;
2.CSS函数 -calc
calc() 函数允许在声明 CSS 属性值时执行一些计算。
计算支持加减乘除的运算 和 -运算符的两边必须要有空白字符。 通常用来设置一些元素的尺寸或者位置 3.CSS函数 - blur
blur() 函数将高斯模糊应用于输出图片或者元素;
blur(radius)radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;
通常会和两个属性一起使用
filter: 将模糊或颜色偏移等图形效果应用于元素;backdrop-filter: 为元素后面的区域添加模糊或者其他效果; 4.linear-gradient的使用
linear-gradient创建一个表示两种或多种颜色线性渐变的图片 radial-gradient创建了一个图像径向渐变该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成 六、理解浏览器前缀
有时候可能会看到有些CSS属性名前面带有-o-、-xv-、-ms-、mso-、-moz-、-webkit-
官方文档专业术语叫做vendor-specific extensions供应商特定扩展
为什么需要浏览器前缀了
CSS属性刚开始并没有成为标准浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀
上述前缀叫做浏览器私有前缀只有对应的浏览器才能解析使用
-o-、-xv-Opera等-ms-、mso-IE等-moz-Firefox等-webkit-Safari、Chrome等 注意不需要手动添加后面学习了模块化打包工具会自动添加浏览器前缀 七、深入理解BFC
1.FC – Formatting Context
什么是FC呢
FC的全称是Formatting Context元素在标准流里面都是属于一个FC的 块级元素的布局属于Block Formatting ContextBFC
也就是 block level box 都是在BFC中布局的
行内级元素的布局属于Inline Formatting ContextIFC
而inline level box都是在IFC中布局的
2.BFC – Block Formatting Context
block level box都是在BFC中布局的那么这个BFC在哪里呢拿出来给我看看。 MDN上有整理出在哪些具体的情况下会创建BFC
根元素html浮动元素元素的 float 不是 none绝对定位元素元素的 position 为 absolute 或 fixed行内块元素元素的 display 为 inline-block表格单元格元素的 display 为 table-cellHTML表格单元格默认为该值表格标题元素的 display 为 table-captionHTML表格标题默认为该值匿名表格单元格元素元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group分别是HTML table、 row、tbody、thead、tfoot 的默认属性或 inline-tableoverflow 计算值(Computed)不为 visible 的块元素弹性元素display 为 flex 或 inline-flex 元素的直接子元素网格元素display 为 grid 或 inline-grid 元素的直接子元素display 值为 flow-root 的元素
3.BFC有什么作用呢
◼ 我们来看一下官方文档对BFC作用的描述 简单概况如下
在BFC中box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中相邻两个box之间的margin会折叠collapse在BFC中每个元素的左边缘是紧挨着包含块的左边缘的
那么这个东西有什么用呢
解决margin的折叠问题解决浮动高度塌陷问题
4.BFC的作用一解决折叠问题权威
在同一个BFC中相邻两个box之间的margin会折叠collapse
官方文档明确的有说 The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse. 那么如果我们让两个box是不同的BFC呢那么就可以解决折叠问题。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* .box {overflow: auto;} */.container {overflow: auto;}.box1 {height: 200px;width: 400px;background-color: orange;margin-bottom: 30px;}.box2 {height: 150px;background-color: purple;margin-top: 50px;}/style
/head
bodydiv classcontainerdiv classbox1/div/divdiv classbox2/divpa href/aspan/span/p/body
/html5.BFC的作用二解决浮动高度塌陷权威
网上有很多说法BFC可以解决浮动高度塌陷可以实现清除浮动的效果。
但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明他们也压根没有办法解释为什么可以解决浮动高度的塌陷问题但是不能解决绝对定位元素的高度塌陷问题呢
事实上BFC解决高度塌陷需要满足两个条件
浮动元素的父元素触发BFC形成独立的块级格式化上下文Block Formatting Context浮动元素的父元素的高度是auto的
BFC的高度是auto的情况下是如下方法计算高度的
如果只有 inline-level是行高的顶部和底部的距离如果有 block-level是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离如果有绝对定位元素将被忽略如果有浮动元素那么会增加高度以包括这些浮动元素的下边缘
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {overflow: auto;background-color: #ccc;}span {display: inline-block;width: 50px;height: 50px;background-color: #aaa;}.box1 {float: left;width: 200px;height: 200px;background-color: #666;}.box2 {float: left;width: 100px;height: 100px;background-color: #999;}/style
/head
bodydiv classcontainerspan我是span内容/spandiv classbox1/divdiv classbox2/div/div
/body
/html
