关于html5:HTMLCSS知识点总结

13次阅读

共计 2089 个字符,预计需要花费 6 分钟才能阅读完成。

HTML

<meta> 标签

<video> 标签

自定义列表

<dl>(description list)




<dt> 名词 1 </dt> (description term)

<dd> 名词 1 解释 1 </dd> (description description)

<dd> 名词 1 解释 2 </dd>

<dt> 名词 2 </dt>

<dd> 名词 2 解释 1 </dd>

<dd> 名词 2 解释 2 </dd>

</dl>

HTML5 新个性

(不反对 ie8 及 ie8 以下版本的浏览器)

  1. 语义标签
  2. 增强型表单
  3. 视频和音频
  4. Canvas 绘图
  5. SVG 绘图
  6. 天文定位
  7. 拖放 API
  8. WebWorker
  9. WebStorage
  10. WebSocket

锚点跳转

以后页面 a.html: <a href="b.html#aaa"> 跳转到 b 页面 aaa 处 </a>

另一页面 b.html: <a name="aaa" id="aaa">aaa</a>

CSS

选择器品种

相邻选择器(h1 + p)、子选择器(ul > li)、后辈选择器(li a)

选择器优先级

!important > 内联 > id 选择器 (#id{}) > class 类选择器 (.class{}) = 属性选择器 (a[href="xxx"]{}) = 伪类选择器 (:xxx{}) > 伪元素选择器 (::before{}) = 标签选择器 (span{}) > 通配符选择器(*{})> 继承父元素 > 浏览器默认

款式继承

  • 可继承的款式:font-size font-family color, UL LI DL DD DT;
  • 不可继承的款式:width height、margin border padding ;

    将超出的文本内容替换成省略号

    graph TD
    设置宽度 &nbspwidth --> 设置文本不换行 &nbspwhite-space:nowrap--> 暗藏溢出内容 &nbspoverflow:hidden--> 省略溢出内容 &nbsptext-overflow:ellipsis

    CSS3 新个性

  • 色彩:新增 RGBA、HSLA
  • 文字暗影 text-shadow
  • 边框圆角 border-radius、边框暗影 box-shadow
  • 盒子模型 box-sizing
  • 背景 background-size
  • 设置背景图片尺寸 background-origin
  • 设置背景图片原点 background-clip
  • 设置背景图片裁剪区域,以“,”分隔能够设置多背景,用于自适应布局
  • 突变:linear-gradient、radial-gradient
  • 过渡:transition 可实现动画
  • 自定义动画
  • 在 CSS3 中惟一引入的伪元素是::selection
  • 多媒体查问、多栏布局
  • border-image
  • 2D、3D 转换

display: nonevisibility: hiddenopacity: 0

display: none; visibility: hidden; opacity: 0;
是否存在 ×
是否重绘 ×
是否重排 ×
是否复原子元素 × ×
是否反对 transition ×
是否触发本身绑定事件 ×
是否影响被遮挡元素触发事件 ×

布局

在网页中应用偶数的字体

偶数字号绝对更容易和 web 设计的其余局部形成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稠密

三栏布局

  1. 相对定位
  2. 左右浮动
  3. table-cell
  4. 圣杯布局
  5. 双飞翼布局
  6. Flex 布局
  7. Grid 布局

    革除浮动

  8. 在最初一个浮动标签后新增一个标签(不举荐)
    毛病:增加无意义标签,语义化差

    clear:both;
  9. 暗藏父元素溢出内容(不举荐)
    毛病:内容增多的时候容易造成不会主动换行导致内容被暗藏掉,无奈显示要溢出的元素

    overflow:hidden/auto; // 父元素
    *zoom: 1; // IE6 中须要触发 hasLayout, 只有 IE6-IE7 执行 
  10. 应用:after 伪元素革除浮动(举荐)
. 父元素:after {
    content: "";
    display: block;
    clear: both;
}

. 父元素 {*zoom: 1;}
  1. 应用 before 和 after 双伪元素(最举荐)
. 父元素:before,
. 父元素:after {
    content: "";
    display: table;
}

. 父元素:after {clear: both;}

. 父元素 {*zoom: 1;}

程度垂直居中

  1. 块级元素

    margin: 0 auto;
  2. 行内元素

    text-align: center;
  3. 单行

    line-height = height;
  4. 多行

    display:table-cell;
    vertical-align: middle;
  5. 应用 flex 布局

    display:flex;
    justify-content: center;
    align-items: center;
  6. 应用相对定位

    position:absolute;
  7. (1)

    left:50%;
    top:50%;
    transform:translateX(-50%);
    transform:translateY(-50%);
  8. (2)

    margin:auto;
    top:0; 
    right:0; 
    bottom:0; 
    left:0;

(遇到记得不太分明的概念大家也能够上菜鸟查查~)

正文完
 0