前端html5

在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- 650px)" srcset="images/demo1.png">

   <source media="(min- 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>

源自：流浪男笔记整理。后期自己以实例完善具体不懂的。

一、基础