一:HTML5

1.html中的meta标签

定义针对搜索引擎的关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
定义对页面的描述:
<meta name="description" content="免费的 web 技术教程。" />
定义页面的最新版本:
<meta name="revised" content="David, 2008/8/8/" />
每 5 秒刷新一次页面:
<meta http-equiv="refresh" content="5" />

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

二.CSS3主要应用

1.margin的应用

<!DOCTYPE html>
<html>
<head>
<title>css学习</title>
<style type="text/css">
.box{
background-color: #eee;
overflow: hidden;//不加上这句话垂直方向上的margin会与父容器发生重叠现象,如图一,加上如图二
}
.box1{
background-color: blue;
margin: 20px;
height: 50px;
}
.box2{
height: 50px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div> </body>
</html>

  图一:                                       图二:在父容器中加上overflow: hidden;

一般img标签打头的小图标与文字对齐的话,img{margin:0 3px -3px 0;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。(张鑫旭大神说的)

2.对于单选框和复选框与文字对齐的情况

在复(单)选框字体为14px的时候,页面上是对齐的,但是小于14px后,会有偏差

如图字体在12px时发生偏差:

<div class="box1">
<input class="checkbox" type="checkbox" id="checkbox1" name="" value="" />
<label for='checkbox1'>复选框1</label>
<input class="checkbox" type="checkbox" id="checkbox2" name="复选框" value="" />
<label for='checkbox2'>复选框2</label>
</div>
<div class="box1">
<input class="checkbox" type="radio" id="radio1" name="单选框"/>
<label for='radio1'>单选框1</label>
<input class="checkbox" type="radio" id="radio2" name="单选框"/>
<label for='radio2'>单选框1</label>
</div>
//复(单)选框样式
.checkbox{
font-size:12px;
vertical-align: -2px;
}

  

看到网上很多的方法,但是兼容性多不怎么好,直接写上用过的兼容性最好的一种方法给复(单)选框加上vertical-align: -2px;样式;能兼容谷歌、火狐、IE11,10,9,8。。。

未完待续。。。。。。。。。。。。。

html5+css3相关知识的更多相关文章

  1. HTML5 & CSS3 初学者指南(4) – Canvas使用

    介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新 ...

  2. HTML5 & CSS3初学者指南(4) – Canvas使用

    介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新 ...

  3. 第九十二节,html5+css3移动手机端流体布局,开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一.整体设计     首先 我们要了解一 ...

  4. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  5. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  6. 【Web前端HTML5&CSS3】11-定位

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 定位的简介 1. 相对定位 偏移量(offset) 相对定位的特点 2. 绝对定位 绝对定位的特点 包含块(co ...

  7. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  8. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  9. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

随机推荐

  1. JXLS生成excel并自定义单元格样式

    本人最近需要每天统计数据表,并每周一发送统计结果的邮件,所以写了个springboot老自动完成工作.项目地址为:https://github.com/707293891/springboot 其中某 ...

  2. 解决python3在sublim Text3中中文乱码的问题

    在Tool >> BulidingSystem 中  新建 python3 写入如下代码 { "cmd": ["C:/python3/python.exe&q ...

  3. C++基础 (9) 第九天 编译器对模板类的二次编译 类模板 自定义数组类

    1 昨日回顾 2 编译器对于模板的二次编译 写一个模板函数 然后进行调用 g++ template.cpp -o template // 汇编 g++ -S template.cpp –o templ ...

  4. BZOJ 3028 食物 (生成函数+数学题)

    题面:BZOJ传送门 题目让我们求这些物品在合法范围内任意组合,一共组合出$n$个物品的方案数 考虑把每种食物都用生成函数表示出来,然后用多项式乘法把它们乘起来,第$n$项的系数就是方案数 汉堡:$1 ...

  5. java:递归算法

    JAVA中的递归是只一个方法在(满足条件时(或不满足条件时[这里的判断根据业务的实际需求写]))自己调用自己的方法名,要求参数和方法名一致, 然后根据判断跳出该方法,返回相应的返回值! 实例: 我们要 ...

  6. Django入门--模板变量、过滤器及静态文件

    一.模板变量 我们登录页面后,在页面上会显示姓名等信息,姓名就是模板变量,用来显示登陆者的名字,Django对这些数据进行处理后,返回给前端页面,前端页面进行渲染. 1.模板变量语法规则 1)在htm ...

  7. CodeForcesGym 100676G Training Camp

    G. Training Camp Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces ...

  8. Ubuntu16.04添加源的地址

    打开terminal,输入sudo gedit /etc/apt/sources.list,向该文件中添加源的地址即可,如,可添加如下地址 deb-src http://archive.ubuntu. ...

  9. JavaScript 获取小数任一小数点后的位数的小数

    用Javascript取float型小数点后两位,例22.127456取成22.13,怎样做? 1.这样的方法最不推荐: function get(){ var s = 22.127456 + &qu ...

  10. tensorflow利用预训练模型进行目标检测(三):将检测结果存入mysql数据库

    mysql版本:5.7 : 数据库:rdshare:表captain_america3_sd用来记录某帧是否被检测.表captain_america3_d用来记录检测到的数据. python模块,包部 ...