HTML文件格式

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

</body>

</html>

标签

<b></b>粗标签

<strong></strong>粗标签

<mark></mark>高亮强调

<em></em>斜体强调

<i></i>斜体

<p></p>文本，删除空格

<pre></pre>保留原来的文本

<form></form>表单

文本框（可在尖括号里添加value对其进行初始化）

<input type="text"/> 普通文本框

<input type="password"/>密码框

<input type="textarea"/>文本域

<textarea ></textarea>文本域（属性：readonly（只读），disable（不可使用））

按钮

<input type="submit" value="按钮"/>（触发提交）

<button></button>普通按钮

<input type="reset" value="重置按钮">(重置按钮)

下拉框

<select>

<option value="">""</option>

......

</select>

单选框

<label>""</label><input type="radio" name=""/>

<label>""</label><input type="radio" name=""/>

复选框

<label>""</label>

<label></label><input type="checkbox"/>

......

<span></span>包含文本的标签

<fieldset></fieldset>定义一个框

<legend>""</legend>在框上添加文字

HTML框架

iframe内联框架，用来嵌入另一个文档

<iframe src="文件路径"></iframe>

表格

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

colspan单元格列合并

rowspan单元格行合并

<div></div>布局

<table></table>布局

<ol></ol>有序列表

<ul></ul>无序列表

<dl></dl>自定义列表

css样式 h{第一个样式；第二个样式}

背景

background

-color;颜色

-image:url(图片路径);背景图片

-repeat背景重复（no-repeat默认左上角，repeat-y纵坐标平铺，rapeat-x横坐标平铺）

-position图片位置（center，right bottom...）

文本

text-indent缩进文本

text-align水平对齐（left，right，center）

word-spacing英文字符间隔

letter-spacing单词或汉字间隔

text-transform字符转换（uppercase大写，lowercase小写，none不改变，captialize首字母大写）

text-decoration文本装饰（underline...）

white-space处理空白符

direction文本方向（rtl靠右显示）

字体

font-family字体样式

font-style字体风格（italic 斜体，oblique文本斜体，normal正常）

font-varaint字体变形（small-caps小型大写字母,normal，inherient继承）

font-weight加粗

font-size字体大小

超链接

a:link{}链接默认

a:visited{}点完之后

a:hover{}鼠标放上去

a:active{}点击时　　

CSS列表

无序列表前的标识

p{list-style-square}正方形

p{list-style-image:url("路径")}图片

p{list-style-position}(inside将形状放于文本内，outside右偏移)

CSS表格

border-collapse边框合并

text-align水平设置（center,left,right）

vertical-align上下设置（middle，bottom，top）

CSS样式表优先级

内联>内部样式表>外部样式表

CSS框模型

padding内边距

padding:x x x x(上)（右）（下）（左）

padding：x x;（上下）（左右）

padding:x x x（上）（左右）（下）

pdding:x(上下左右)

margin外边距（同内边距）

border边框（left,right,top,bottom）

min-width:""当品目缩放到""时，会产生滚动条

定位

position:relative相对定位

1.使用相对定位不会影响元素本身

2.不会脱离文档流，只是发生了偏移

3.如果没有设置偏移量，不会对元素造成影响

4.还会占据原来的空间

position:absolute绝对定位

1.脱离文档流

2.使用绝对定位会设置当前元素为inline-block(可以设置宽高)

3.可以使坐标进行移动（

1.绝对定位没有定位父级，默认以文档作为父级

2.如果有定位父级，就以定位父级移动

3.如果有多个定位父级，找最近的定位父级

4.相对定位一定配合绝对定位使用）

z-index:1/2/3...提升模块优先级，但其必须配合position使用

！important可将其他权重设置为0

position:static静态定位

按照正常的文档流排版（默认属性）

position:fixed固定定位（可做导航，不会随着滚动条运动而运动）

浮动

float:left/right/none

1.使块元素在一行显示，为每个元素设置了inline-block

2.使行元素支持高、宽

3.不设置高宽，高宽由内容决定

4.left从左往右开始，right从右往左开始

浮动按照一定顺序排列，碰到父元素的边界就停止或者前一个兄弟元素也停止下来

浮动会脱离文档流

clear:（both消除两边的浮动,left,right）

html CSS 学习总结的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  3. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结（一） 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

  5. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  6. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. memcpy与memmove的区别

    在面试中经常会被问道memcpy与memove有什么区别? 整理如下: 其实主要在考C的关键字:restrict C库中有两个函数可以从一个位置把字节复制到另一个位置.在C99标准下,它们的原型如下: ...

  2. C语言里面捕获错误机制

    在C语言中异常处理一般有这么几种方式: 1.使用标准C库提供了abort()和exit()两个函数,它们可以强行终止程序的运行,其声明处于<stdlib.h>头文件中. 2.使用asser ...

  3. 安装PIL

    本来直接pip install PIL的,一直说找不到对应的版本,在廖雪峰老师的博客里发现原来PIL只更新到pytyon 2.7 后来就只有Pillow了,而我的版本是2.7.9 用的时候直接from ...

  4. Atom 和 markdown 基本使用

    Atom 和 markdown 基本使用 Atom 常用的快捷键 Cmd + Shift + P 打开命令窗口,可以运行各种菜单功能. Cmd + T 快速的多文件切换 Ctrl + G 文件内跳转到 ...

  5. 启动Tomcat服务器报错： Several ports (8005, 8080, 8009) required

    错误记录--更改tomcat端口号方法,Several ports (8005, 8080, 8009) http://blog.csdn.net/xinxin19881112/article/det ...

  6. Spring官网改版后下载

    Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...

  7. LoadRunner性能测试执行过程的问题

    LoadRunner做性能测试 从设计到分析执行 执行测试并分析调优: 测试中报错的信息解决: 1. Failed to connect to server "域名:80": [1 ...

  8. hdu 1030 Delta-wave

    Delta-wave Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. hdu 5446 Unknown Treasure Lucas定理+中国剩余定理

    Unknown Treasure Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  10. 在C#代码中应用Log4Net（二）典型的使用方式(转)

    不管用什么框架,学什么东西,最初的想法还不是尽快地用上这个框架,所以我们在这个章节还是不打算介绍具体配置节的应用,而是直接给出一个经典的使用样例,让你尽快上手.即使你对Log4Net的配置不熟悉也完全 ...