Html5和CSS3遗漏点记录

作者:神秘网友 发布时间:2020-10-12 15:05:39

Html5和CSS3遗漏点记录

Html5和CSS3遗漏点记录

  1. 下载Chinese，即为中文版
    Html5和CSS3遗漏点记录

  2. 安装Live Server, open in browser，设置afterDelay自动保存更新网页
    Html5和CSS3遗漏点记录
    左下角设置，设置自动刷新时间，编辑字体大小（或Ctrl+，-）
    Html5和CSS3遗漏点记录

  1. <p>块元素
  2. <em>语调加重（斜体）
  3. <strong>强调（加粗）
  4. <blockquote>长引用
  5. <a href="" target=""></a>,
    (1) herf:#点击超链接后，页面不会发生跳转，回到当前页面的顶部
    (2) target:指定超链接打开的位置，可选值：
     _self默认值，在当前页面打开超链接
     _blank在新的页面中打开超链接
  6. audio引入外部音频文件（默认不允许用户自己控制播放停止）
    属性：
    controls是否允许用户控制播放
    autoplay音频文件是否自动播放
    loop是否循环播放
    通过sourse指定文件
<--支持各种浏览器播放音频-->
<audio controls>
    <source src="">
    <source src="">
    <source src="">
</audio>
  1. vidio引入外部视频，方式与audio方式一样
  1. 交集选择器(#id,.class)
    .a.b.c{},div.a{},div#red{}(若有元素选择器，则以此开头)
  2. 子元素选择器（选中指定父元素的指定子元素）
    语法：父元素>子元素
    Html5和CSS3遗漏点记录
  3. 后代元素选择器（选中指定元素内的指定后代元素）
    语法：祖先 后代

Html5和CSS3遗漏点记录

选择下一个兄弟：前一个+下一个（p+span）
选择下边所有的兄弟：兄~弟( p~span)
[属性名]：选择含有指定属性的元素
[属性名=属性值]：选择含有指定属性和指定值的元素
[属性名^=属性值]：选择属性值以指定值结尾的元素
[属性名$=属性值]：选择属性值以指定值结尾的元素
[属性名*=属性值]：选择属性值中含有某值元素的元素
Html5和CSS3遗漏点记录

伪类：(特殊的类)

用来描述一个(子)元素的特殊状态
比如:第一个子元素，被点击的元素，鼠标移入的元素
伪类一般情况下都是使用：开头
:first-child第一个子元素
:last-child最后一个子元素
:nth-child()选中第n个元素
特殊值：n 第n个，n的范围0~正无穷
2n 或 even ：选中偶数位的元素
2n+1 或 odd：选中基数位的元素
Html5和CSS3遗漏点记录
（同类）元素
:first-of-type
:last-of-type
:nth-of-type

:link：表示没访问过的链接
:visited：表示访问过的链接（由于隐私问题，只能修改颜色）
:hover：表示鼠标移入的状态
:active：表示鼠标点击的状态

伪元素：：

页面中一些特殊的并不真实存在的元素（特殊的位置）
::first-letter：表示第一个字母
::first-line：表示第一行
::selection：表示选中的内容
::before：元素的开始
::after：元素的最后
before和after必须结合content属性来使用，添加后无法用鼠标选中
Html5和CSS3遗漏点记录

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
当发生冲突时，由选择器的权重（优先级）决定

内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式

若在内联里加!important，即具有最高优先级，慎用！

Html5和CSS3遗漏点记录相关教程

  1. css3的3D旋转效果讲解

    css3的3D旋转效果讲解 代码绝大部分类似于我的3D平移，就是transform不同 为rotate !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title3D旋转的Demo/title style #experiment{ -webkit-perspective:800px ; -webkit-perspective-origin:50% 50% ; -webk

  2. 前端基础 HTML+CSS3笔记（三）HTML标签：下 表单标签

    前端基础 HTML+CSS3笔记（三）HTML标签：下 表单标签 欢迎收藏我的前端专栏，能力有限，有不足之处请多多包含 接上篇文章，将继续介绍HTML的其他标签属性：点击可跳转至上篇文章HTML标签：中篇 7.表单标签 我们在使用一个APP几乎都要经历的一步就是注册新用户

  3. css3那些事

    css3那些事 css3属性选择器 属性等于值 input[type=“search”]{} 以某个值开头的 属性值 div[class^=“icon”]{} 以某个值结尾的 div[class$=“icon”]{} 可以在任意位置的 div[class*=“icon”]{} css3结构伪类选择器 css3伪元素选择器 css3 2D转换 转换(t

  4. CSS3动画实现程序媛的小浪漫

    CSS3动画实现程序媛的小浪漫 不必多说，让我们来康康代码~ 首先我们要铺好HTML骨架 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 title小浪漫/title link rel=stylesheet href=css/p

  5. css3实现平移效果（transfrom：translate）--冯浩的博客

    css3实现平移效果（transfrom：translate）--冯浩的博客 我们使用translate这个参数来实现移动 translateX:向X轴平移，填正数往右平移，填负数，往左平移 translateY :向Y轴平移，填正数往下平移，填负数，往上平移 translateZ :填的值越大你看到的图像离你感

  6. CSS3transform 旋转效果 rotate() --冯浩的博客

    【CSS3】transform 旋转效果 rotate() --冯浩的博客 rotate：设置旋转的角度 旋转该元素，配合着transform-origin属性， transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center) tr

  7. css3实现透明度依次递减的动画效果

    css3实现透明度依次递减的动画效果 html部分： divdiv class=item/divdiv class=item/divdiv class=item/divdiv class=item/divdiv class=item/divdiv class=item/div/div css部分： div{display:flex;}div.item{margin-right:15px;width:100px;height:100px;

  8. 用CSS3写一个旋转魔方相册

    用CSS3写一个旋转魔方相册 这个旋转的魔方相册，是使用 transform 的 translate 属性写出来。一共是一大一小两个正方形，废话不多说，看代码 HTML代码 !--最简单的代码呈现最炫丽的页面，请忽略我的类型，懒得起名字--div id=mfdiv class=mf_d1 d1_top/divdiv