个人的一些html、css笔记

font-style：normal 不斜体
转行<br /> 水平横线<hr/>
font-weight bold 粗体
text-decoration：
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　删除线
overline : 　上划线
code 小段代码 pre 大段代码
<ul><li></li></ul>无序
<ol><li></li></ol>有序
每个div只能有一个id
给表格加边框
1.<style> table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;} </style>
border-collapse: collapse（边框合并）
cellspacing单元格间距 边距是单元格间，左右的距离；
间距是单元格间，上下的距离；
cellpadding单元格边距
min-height元素的最小高度
ine-height 属性设置行间的距离（行高）。
表格标题
<caption>标题文本</caption>
<table summary="表格简介文本"> 摘要
超链接：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
让链接在新窗口打开
<a href="目标网址" target="_blank">click here!</a>

 

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
form 表单
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" /><br/>
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form> required=“required” 要求必定输入
<form>
<input type="text/password" name="名称" value="文本" />
</form> （value 为输入框设置默认值）
文本域
<textarea rows="行数" cols="列数" placeholder=“可删除提示语”>文本</textarea>
单选框 复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
同一组的单选按钮，name 取值一定要一致
下拉列表框

selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
格式：<select>
<option value="看书">看书</option>
<option value="旅游"selected="selected">购物</option></selected>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select> 实现多选功能只要 <select multiple="multiple">

<label for="控件id名称">注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

如<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
CSS代码

内联式：
<p style="color:red">这里文字是红色</p>
嵌入式：
<style type="text/css">
span{
color:red;
}
</style>
外部式：最常用
<link href="base.css" rel="stylesheet" type="text/css" />
三种方式 就近原则
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。.food>li{border:1px solid red;}
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color :red;}
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red!important;}
字体body{font-family:"Microsoft Yahei";}
斜体p a{font-style:italic;}
开头两空格p{text-indent:2em;}
字母与字母间距  letter-spacing
单词间距word-spacing
为块状元素中的文本、图片设置居中样式可以使用text-align样式代码
设置display:block就是将元素显示为块级元素
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
display:inline将元素设置为内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。
display:inline-block就是将元素设置为内联块状元素<img>、<input>标签就是这种内联块状标签。
边框
div{
border:2px solid red;
}1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
只设置一个方向
div{border-bottom:1px solid red;}
实现水平垂直双居中的两种方式

 

 

流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

层模型
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后

 

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。
小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：2、参照定位的元素必须加入position:relative;3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}可以简写为body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block

除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/

vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
list-style:none 消去ul的圈
border-radius:1px 圆边框
ul的序号倒过来 reversed=“reversed”
计算机的同步 异步与生活中相反
清除浮动 两种方法
为父元素设置overflow:hidden。
添加一空标签，设置clear：both。
cursor 光标

越大越靠近你

给父元素加

 

清除浮动的常用方法

单行显示多的用。。。表示

 

实现 文字图片双功能的两种方法
背景图片的设置

p里不能套div

a不能套a