zoukankan      html  css  js  c++  java
  • HTML5 CSS3

    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 表示阴影的颜色

  • 相关阅读:
    托付和事件的使用
    在使用supervisord 管理tomcat时遇到的小问题
    无法安装vmware tools的解决方PLEASE WAIT! VMware Tools is currently being installed on your system. Dependin
    (转)Openlayers 2.X加载高德地图
    (转)openlayers实现在线编辑
    (转) Arcgis for js加载百度地图
    (转)Arcgis for js加载天地图
    (转) 基于Arcgis for Js的web GIS数据在线采集简介
    (转) Arcgis for js之WKT和GEOMETRY的相互转换
    (转)Arcgis for Js之Graphiclayer扩展详解
  • 原文地址:https://www.cnblogs.com/kyhboke/p/11840437.html
Copyright © 2011-2022 走看看