html5和css3的学习笔记

H5结构知识点一:
body,nav,section需要h1-h6; header,div不需要h1-h6. h5结构
测试网站:https://gsnedders.html5.org/outliner/

移动端么meta格式:
移动端要加的标签<meta name="viewport&quot; content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

移动端图片自适应css(配合上述标签使用):
img{display:block;max-width:100%;}

css3标签:ouline:none 点击无虚线

css3内边距和边框的高度融合在高度里面的属性(防止变形 移动端流体布局)
div{box-sizing:border-box;}

H5标题组合标签hgroup

css3文本属性保持一行white-space:nowrap;
css3文本属性超出部分隐藏:overflow:hidden;
css3文本属性如果有半截字用...代替:text-overflow:ellipsis;
css3媒体查询@media (min-width:480px)and(max-width: 640px);
h5图片标签figure 图片描述内容标签figcaption

css3伪类元素
#tour .clearfix:after{
content: ".";//在某元素后添加内容
clear: both;
height: 0;
visibility: hidden;//隐藏区域内容;
}

css3谷歌私有属性
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:2//文本不得超出两行
-webkit-box-orient(属性规定框的子元素应该被水平或垂直排列。):vertical.从上向下垂直排列子元素。

水平居中的话就在img所在的标签设置text-align:center
垂直居中的话就在img上设置vertical-align:middle
至于水平垂直居中?这的问题与上面的已经重复了
例如:
<div style="text-align:center; width:100px; height:40px;"><img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>
css3改变播放器宽高时能做相应的改变
<video controls preload="auto" width="640" height="264"><video>

h5文本禁止拉伸
style="resize:none"

时间: 2024-10-28 07:28:58

html5和css3的学习笔记的相关文章

Win8 HTML5与JS编程学习笔记(二)

近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是一头雾水,于是又找到了官方的启蒙教程的布局一张,仔细阅读了一遍,又思考了代码,并在代码的基础上实验,终于是明白了布局方法.官方教程地址是:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj841108.aspx 微软基于CSS3开发了Gri

html5晋级之路-学习笔记

由于以后公司的ios项目中会涉及到h5,所以本人发奋图强,最近开始研究其h5,这是近几天的学习笔记.望可共同学习 html5基础 不同于编程语言,html语言的表达力较强,多以用于编写网页,编程语言的逻辑能力较强,用于编写软件 声明:<!doctype>为了让浏览器正确显示html5页面(这个声明不同的html语言是不一样的) 基础标签 <html>所有的文件都要包含其中 <header>头部 <head lang = “en”>设置中英文 <meta

javascript与css3动画学习笔记

当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,

《The Book of CSS3》学习笔记

一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ -webkit-name : value; /* WebKit */ name : value; /* 适应未来标准方式 */ } 二.媒体查询 1.使用媒体查询的3种方式 head部分 <link href="css.css" rel="stylesheet"

CSS3选择器学习笔记

CSS选择器总结: 一.基本选择器 1.通配选择器:[  *  ]        选择文档中所以HTML元素. *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/ 2.元素选择器:[  E  ]   选择指定类型的HTML元素. p{color:red;} /*选择p元素*/ 3.ID选择器: [  #id  ]  

CSS3基础学习笔记

1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow_test{ box-shadow:1px 1px 20px #888888; -moz-box-shadow: 1px 1px 20px #888888; } 前两个数值是阴影距离容器的偏移量,第三个数值是阴影的模糊程度,最后一个颜色数值是阴影的颜色 3.背景图片 .bg_test{ backgr

css3 3d学习笔记

几个属性: -webkit-perspective:0;景深(默认0), -webkit-perspective-origin:center center;景深基点(默认中间), -webkit-transform-style:preserve-3d;建立3D空间, -webkit-transform-origin:center center 0;3D变换基点(默认z轴0开始), 在3D空间里面,rotateX是绕着X轴翻转,正数逆时针翻转:rotateY绕着Y轴翻转. 动画几个属性: 动画持续

html5晋级之路-学习笔记表单

HTML表单 1.获取不同类型用户的输入 2.常用标签 <form>                              单表  (比如说用户名:密码:) <input>                             输入域 <textarea>                        文本域 <label>                             控制标签 <fieldset>              

HTML5+CSS3学习笔记(一)

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去.不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,话有一点小私心,就是想做一个个人网站出来.总而言之,Web的知识是必须得学的,最直接的,自然就是HTML.CSS和Java