HTML/CSS零碎点

苏图
245 阅读4分钟
  1. CSS3 新增特性
1、CSS3选择器
2、CSS3边框(Borders)
3、CSS3背景
4、CSS3渐变
5、CSS3文本效果
6、CSS3字体(@font-face规则)
7、CSS3转换和变形
1）2D转换方法
2）3D转换属性
8、CSS3过度（transition属性）
9、CSS3动画（@keyframes规则 animation属性）
10、CSS3多列
11、CSS3盒模型
12、CSS3伸缩布局盒模型(弹性盒子)（flexbox）
13、CSS3多媒体查询（@media）
  1. CSS 属性是继承
1. 所有元素可继承：visibility和cursor。 
2. 内联元素可继承：letter-spacing、word-spacing、
  white-space、line-height、color、font、font-family、
  font-size、font-style、font-variant、font-weight、
  text-decoration、text-transform、direction。
3. 终端块状元素可继承：text-indent和text-align。 
4. 列表元素可继承：list-style、list-style-type、
  list-style-position、list-style-image。
  1. 一些翻转转换的效果
rotateY：定义沿 Y 轴的 3D 旋转，可实现翻书的效果
translateY：沿着 Y 轴移动元素
scaleY：定义 2D 缩放转换时，改变元素的高度；
   定义 3D 缩放转换时，通过给定一个 Y 轴的值
perspective(n)：改变3D元素是怎样查看透视图
   （注：只影响 3D 转换元素）
  1. 空元素
<area>在图片上定义一个热点区域，可以关联一个超链接。
      只能<map>内使用
<base>一个文档中包含的所有相对 URL 的根 URL
<br>  定义表格中的列。它通常位于<colgroup>元素内。
<col>
<colgroup> when the span is present
<command>
<embed> 外部内容嵌入元素
<hr>
<img>
<input>
<keygen> 密钥公钥相关，已废弃
<link>
<meta>
<param>元素为<object>元素定义参数
<source>为<picture><audio>或者<video>指定多个媒体资源
<track>允许指定时序文本字幕
<wbr>换行
  1. HTML全局属性

image.png

  1. viewport
width - viewport的宽度 
width=device-width  - 宽度与设备的宽度保持1:1
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

  1. @media

  2. align和text-align

  • align ：规定 div 元素中的内容的水平对齐方式。
  • text-align：规定“元素中”的文本的水平对齐方式。

align只能用于div，是div的属性，而text-align是css属性 <div align="center"> hello </div>

 hello

<div style="text-align:center"> hello </div>

  1. css样式优先级 第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

!important的优先高于以上任意一种

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0

  1. 主流浏览器内核私有属性css前缀

mozilla内核 (firefox,flock等)    -moz
webkit内核(safari,chrome等)   -webkit
opera内核(opera浏览器)         -o
trident内核(ie浏览器)            -ms\

  1. input中的enctype 属性
值描述
application/x-www-form-urlencoded在发送前对所有字符进行编码（默认）。
multipart/form-data不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain将空格转换为 "+" 符号，但不编码特殊字符。
  1. 层级
  • 在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
  • 表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；
  • 非表单元素包括：连接（a），div,table,span等。
  • 所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
  • 有窗口元素包括：select元素，object元素，以及frames元素等等。
  • 无窗口元素：大部分html元素都是无窗口元素。
  1. 可省略结束标签的标签
  • 1、dd
  • 2、dt
  • 3、li
  • 4、p
  • 5、optgroup
  • 6、option
  • 7、rt
  • 8、rp
  • 9、thread
  • 10、tfoot
  • 11、tr
  • 12、td
  • 13、th
  1. HTML5新增特性 www.cnblogs.com/binguo666/p…
一、语义标签：
<section>：定义页面的区域     <header>：页面标题    <footer>：页面页脚      
<nav>：页面导航元素   
<article>：页面的文章或主要内容     <aside>：页面的附加内容，比如边栏     
<figure>：文章的配图
<figcaption>：<figure>元素的标题       <summary>：<details>元素的可视标题

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、地理定位:使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”

七、拖放API

八、WebWorker

九、WebStorage

十、WebSocke
  1. 自定义属性

  • 设置自定义属性
    1.<div data-index="1"></div>
    2.element.setAttribute('data-index',1)

  • 获取自定义属性
    element.getAttribute('data-index')
    element.dataset.index 或者 element.dataset['index']
    （注意用驼峰命名法） 第二种属于新增的，只能获取data-开头的属性

avatar
文章
阅读
粉丝