zoukankan      html  css  js  c++  java
  • Html5和Css3

    语义化标签:
    header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息
    nav 可以作为页面导航的链接组
    section 页面中的一个内容区块,通常由内容及其标题组成
    article 代表一个独立的、完整的相关内容块,可独立于页面其它内容使用
    aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
    footer 页面或页面中某一个区块的脚注

    input新增的type类型:
    <input type="color"> 选取颜色
    <input type="email"> 设置邮箱
    <input type="url"> 设置网址
    <input type="number"> 设置数字
    <input type="range"> 设置滑动条
    <input type="date"> 设置年月日
    <input type="month"> 设置年月
    <input type="time"> 设置时、分

    HTML新增的全局属性:
    contentEditable="true" 是否允许用户编辑内容 true表示允许 false表示不允许
    hidden 表示将该标签不占位隐藏 display:none;效果一致

    H5新增音频视频播放器:
    <video src="video/video.mp4"></video>
    <audio src="video/上河Lin、司南%20-%20盗将行.mp3"></audio>
    属性:
    controls 用于音频视频播放器添加控件
    autoplay 是否自动播放 (所有新式浏览器都不用允许直接自动播放,想要自动播放可以添加静音属性)
    muted 是否静音

    H5新增了哪些内容:
    1.语义化标签
    2.增加了很多表单的控件
    3.新增用于绘画的canvas标签
    4.媒介播放的 video 和 audio 元素
    5.新增本地存储和离线缓存

    CSS3新增内容;
    新增选择器:
    li:first-of-type 表示选择到第一个li标签
    li:last-of-type 表示选择到最后一个li标签
    li:nth-of-type(2) 表示选择到第2个li标签
    li:nth-of-type(odd) 表示选择到所有奇数li标签
    li:nth-of-type(even) 表示选择到所有偶数li标签

    一般的标签都会有样式的继承性,比如颜色,如果自己没设置颜色,会从最近的祖级元素开始找,
    如果祖级元素有设置过颜色,则会继承,如果都没有则是默认色,但是a标签无法继承颜色,因为本身自带颜色,
    想要设置a标签文字颜色必须选择到a标签本身来设置

    css3新增的常见样式设置:
    所有的css3新增样式都要添加不同的浏览器前缀
    -webkit- 谷歌和苹果
    -moz- 火狐
    -o- 欧朋
    -ms- IE

    设置边框圆角
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    设置盒子阴影:
    box-shadow: inset 5px 5px 10px 15px #333;
    inset: 表示设置内阴影 还可以改成outset 表示外阴影
    第一个像素值表示水平阴影偏移位置
    第二个像素值表示垂直阴影偏移位置
    第三个像素值表示阴影的模糊距离 不允许负数
    第四个像素值表示阴影的外延值
    #333 表示阴影的颜色
    设置文本阴影:
    text-shadow:5px 5px 5px #ccc;
    第一个像素值表示水平阴影偏移位置
    第二个像素值表示垂直阴影偏移位置
    第三个像素值表示阴影的模糊距离 不允许负数
    #ccc 表示阴影的颜色

  • 相关阅读:
    执行器模式设计和使用
    你知道怎么用Idea抽取方法、创建class吗?
    intellij构建多模块项目
    解决IDEA16闪退的问题
    TestNG参数化测试-数据提供程序 @DataProvider方式
    java第三节 面向对象(上)
    java第二节 基本数据类型
    memcache使用方法测试
    mysql Substr与char_length函数的应用
    《web与移动开发》征文活动
  • 原文地址:https://www.cnblogs.com/Nevermore-wangxiao/p/11690346.html
Copyright © 2011-2022 走看看