前端html5
2016-07-19 11:37
267 查看
一、基础
在css中，大多数标签都是默认属性，需要对其进行初始化，比如＊｛padding:0;margin:0;｝
在移动端布局时要采用响应式，响应式布局通常有两种方法，一是通过百分比控制，二十使用使用弹性盒子（flex）
一、写法，分组和嵌套
对于有相同属性的元素，可以使用分组的形式
h1{color:#ff9900}
h2{color:#ff9900}
h3{color:#ff9900}
-----------------
h1,h2,h3{color:#ff9900}
嵌套：
p {color:#ff9900;}
.demo {font-size:12px;}
.demo p { color:#ff6600;}
id选择器
#id
类选择器
.class
属性选择器
[title="text"]{}
input[type="text"]{}
派生选择器（也就是选择标签）
div{}
CSS 后代选择器 h1 em {color:red;}
CSS 子元素选择器 h1 > strong {color:red;}
CSS 相邻兄弟选择器 h1 + p {color:red;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
二、布局类
1、float（浮动）
CSS 的 Float（浮动），会使元素水平方向向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。代码：clear:both
2、定位（position）
Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于窗口是固定位置。
即使窗口是滚动的它也不会移动
Relative 定位
相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>Absolute定位使元素的位置与文档流无关，因此不占据空间。Absolute定位的元素和其他元素重叠。使用z-index可以控制层叠次序
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
3、边距／填充
margin 外边距
常用写法：
margin-top:100px;
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
margin:100px; (上下左右全部)
margin: 100px 200px; (上下／左右)
margin:25px 50px 75px;(上边距为25px 左右边距为50px 下边距为75px)
margin:0 auto; 在已知当前元素宽度时可以控制当前元素水平剧中
Padding（填充）
定义元素边框与元素内容之间的空间。
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
4、display／visibility 显示／隐藏
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display常用属性
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
inherit 规定应该从父元素继承 display 属性的值。
5、对齐类
margin: 0 auto;
position
text-align
二、样式类
1、background 背景
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像 - 水平或垂直平铺
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll(默认跟随滚动) fixed（固定）
background-position 设置背景图像的起始位置。
background-size 背景尺寸
background: transparent; 背景透明
2、color 颜色
color:色值
3、透明类
opacity:0.4;
只让背景色透明 background:rgba(0,0,0,0.5)
4、border边框
border: 1px solid #000000;
根据位置控制
border-left
border-right
border-top
border-bottom
border-color颜色
border-style样式 dotted点状 solid实线 double双线 dashed虚线
border-width粗细
5、字体
font-family:"Times New Roman", Times, serif; 字体
font-size 控制字体大小，常用值有px，em
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
三、伪类是用来添加一些选择器的特殊效果。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
CSS伪类
:first-child 伪类来选择元素的第一个子元素
:last-child 伪类来选择元素的最后一个子元素
:first-line 伪元素 用于向文本的首行设置特殊样式。
:before伪元素可以在元素的内容前面插入新内容。
:after" 伪元素可以在元素的内容之后插入新内容。
:first-letter 伪元素用于向文本的首字母设置特殊样式：
二、html5 语义化标签
<!DOCTYPE html> 定义当前页面为html5的标准模式
viewport 移动端响应式设置
format-detection 自动识别类的处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
</head>
<body>
</body>
</html>
html5的布局理解为排列块的布局。标签的使用上尽量使用语义化标签。
A、布局类
1、<header></header> 页眉，通常可以用来定义页面中的顶部导航栏,<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
等同于 <div></div>
2、<footer></footer>页脚，通常可用来定义页面中底部
等同于<div></div>
3、<section></section>定义区段，块，节，通常可以用来定义一个大的区间
等同于<div></div>
4、<article></article>常用在文章内容显示
等同于<div></div>
5、<aside></aside> 定义 <article> 标签外的内容，也可以作为侧栏
6、<nav></nav>用来定义导航
7、<details></details> ,使用时与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。
8、<meter></meter> 类型进度显示的度量类
<meter value="9" min="0" max="10">1</meter>
9、<audio></audio> 音频
10、<video></video> 视频 结合<track></track>可加载字幕
11、<picture></picture> 自适应图片
<picture>
<source media="(min-width: 650px)" srcset="images/demo1.png">
<source media="(min-width: 465px)" srcset="images/demo2.png">
<img src="images/demo.png">
</picture>
12、<canvas></canvas> 画布
html4
12、<div></div>
13、<p></p> 换行
14、<ul><li></li></ul> 无须列表
15、<ol><li></li></ol>有序列表
B、文字、标示类
1、<b></b>（bold）粗体
2、<big></big>（big）大字体
3、<em><em>（emphasized）强调字
4、<i></i>（italic）斜体
5、<small></small>（small）小字体
6、<strong></small>(strong)加重语气
7、<mark></mark> 重点标记
8、<time></time> 定义时间
9、<span></span>主要用来着色
10、<h1></h1>...<h6></h6> 标题类
11、<del></del>删除线
C、表单类
input： type常用属性
text 文本
number 数字
password 密码
email 电子邮箱
checkbox 多选
radio 单选
range 带有滑块的数字选择
reset 重置表单
hidden 隐藏
search 搜索框（带有清除按钮）
input时间类的可以调用原生控件
datalist
<input list="browsers"> 显示列表项
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
计算输出
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
D、表格类
<table border="1">
<caption>这事一个表格</caption>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>表格标题</td>
</tr>
</tbody>
</table> 源自：流浪男笔记整理。后期自己以实例完善具体不懂的。
转载于:https://www.cnblogs.com/zlj1027/p/5684126.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 后端springmvc，前端html5的FormData实现文件断点上传
- 国内HTML5前端开发框架汇总
- 从实战中学前端：打造自己的html5文件上传插件
- Web前端初步——HTML5
- 移动前端不得不了解的html5 head 头标签
- 学习：从零玩转HTML5前端+跨平台开发（无序列表(掌握)）
- 学习：从零玩转HTML5前端+跨平台开发（表格标签基本使用、属性(理解)）、细线表格(理解)、表格中的其它标签(理解)
- HTML5大前端学习过程第一周（Day03）
- 学习：从零玩转HTML5前端+跨平台开发（表单标签-按钮(掌握)）
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- 咸鱼前端—HTML5新标签与特性
- 转载：WEB前端开发实用HTML5开发框架和开发工具
- 移动前端的html5 head 头标签
- web前端笔记：html5的<b>标签
- 移动手机平台的HTML5前端优化指南
- 前端学习秘籍——HTML5
- 前端学习笔记html5（儒家学派）
- Web前端开发，利用HTML5 Canvas实现监控系统页面展示
- 讲给后台程序员看的前端系列教程(08)——HTML5标签(7)