码迷,mamicode.com
首页 > Web开发 > 详细

前端html5

时间:2016-07-19 13:23:47      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

一、基础

 
 
在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 oninput="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>
 
 
源自:流浪男笔记整理。后期自己以实例完善具体不懂的。

前端html5

标签:

原文地址:http://www.cnblogs.com/zlj1027/p/5684126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!