1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放
例:<video/audio src=“地址” controls=“controls” loop autoplay>
2.块级元素                 行内元素
  独占一行                 不独占一行
  设宽高                   不能设宽高
  内容不影响边框            内容影响元素大小
  可嵌套块级、行内           嵌套会乱
  margin四周都变           margin仅左右变
  padding四周都变          padding四周都变
3.html5语义化标签
  article文章 aside侧边栏 footer页脚 head页眉 nav导航 section节、区段
4.css引入方式
内联(内嵌) body里添加样式
例: <div style="border: 1px solid red;">我是一个div ,我想有一些css样式</div>

内部样式 head里添加
例:<style type="text/css">
        div{
            color: green;
        }

</style>

外部样式 head里添加 通过外部链接
例:<link rel="stylesheet" href="../css/css测试.css">

@import 不常用

内联最先显示;内部和外部看谁在前面谁就先显示。
5.css选择器
元素选择器 head里加div
<style type="text/css">
        div{
            color: red;
        }
class选择器 head里加.div
<style type="text/css">
        div1{
            color: red;
        }
id选择器    head里加#div
<style type="text/css">
        div1-id{
            color: red;
        }
后代选择器 head里加 h1空格span
<style type="text/css">
        h1 span{
        color: red;
        }
子元素选择器、相邻兄弟选择器(不常用)
通配符选择器 *(重置技术)现在都是用normalize技术解决兼容性问题。

web前端基础篇③的更多相关文章

  1. web前端基础篇⑨

    1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...

  2. web前端-基础篇

    该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...

  3. web前端基础篇⑧

    1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...

  4. web前端基础篇①

    html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...

  5. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  6. web前端基础篇⑦

    1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...

  7. web前端基础篇⑥

    LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...

  8. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  9. web前端基础篇④

    1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...

随机推荐

  1. VS2010中qDebug输出乱码的问题

    1.开发环境:安装Qt5.3.2(离线安装包安装):VS版本为:2010 SP1Rel:源代码默认保存格式为GB2312. 2.输出乱码的代码 #include <QtCore/QCoreApp ...

  2. Ajax中dataType数据类型

    今天项目中使用Ajax向后台保存数据,其中dataType为'json';当请求成功后,没有走success回调,反而走了error:数据库已经成功保存数据了. 后来搞半天才知道原来dataType指 ...

  3. C++高精度计算代码运行时间(转载)

    转载:http://blog.csdn.net/rrrfff/article/details/6583410 //在定时前应该先调用QueryPerformanceFrequency()函数获得机器内 ...

  4. java解析json与map,list相互之间的转换

    运行这个类需要加载jar包:ezmorph-1.0.6.jar.json-lib-2.4-jdk15.jar.jsoup-1.6.1.jar.commons-beanutils-1.8.0.jar.c ...

  5. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  6. 提取data.frame中的部分数据(不含列标题和行标题)

    ?unlist     Given a list structure x, unlist simplifies it to produce a vector which contains all th ...

  7. PHP-----二维数组和二分查找

    二维数组由行和列组成.由arr[$i][$j]表示,先后表示行和列,类似于坐标点. 打印二维数组-----通过两次遍历,第一次遍历每一行,第二次遍历每一行的具体元素,并且通过使用count($arr[ ...

  8. 《BI那点儿事》数据流转换——多播、Union All、合并、合并联接

    建立测试数据: CREATE TABLE FactResults ( Name ) , Course ) , Score INT ) INSERT INTO FactResults ( Name , ...

  9. HDU-4532 湫秋系列故事——安排座位 组合数学DP

    题意:有来自n个专业的学生,每个专业分别有ai个同学,现在要将这些学生排成一行,使得相邻的两个学生来自不同的专业,问有多少种不同的安排方案. 分析:首先将所有专业的学生视作一样的,最后再乘以各自学生的 ...

  10. javacsript Numnber 对象

    引子: initUppercent = (uploadedSize / file.size * 100).toFixed(2) + '%'; 一.javaScript Number对象 ------- ...