html/css学习随笔
对自己在学习html/css时遇到一些自己不熟悉的不会的知识点记录
1.标签tbody
<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示，
<table summary="表格简介文本">（summary的内容不会在浏览器中显示出来，它的作用是增加表格的可读性）
<caption>标题文本</caption> （用以描述表格内容，标题的显示位置：表格上方）
<tbody>
<tr>
<th></th> (表格的表头)
<td></td>
</tr>
</tbody>
</table>
2.超链接
(1)<a href="目标网址" title=“鼠标滑过显示的文本”>链接显示的文本</a>
(2)在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开，有如下代码：
<a href="目标网址" target="_blank">click here!</a>
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
(3)<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者向网站管理者
<a href="mailto:对方邮箱地址？cc=抄送地址&bcc=密件抄送的地址&subject=邮件主题&body=邮件内容">链接文本</a>
注意：如果mailto后面同时有很多个参数的话，第一个参数必须以“？”开头，后面的参数每一个都以“&”分隔。
(3)与浏览者交互，表单标签
语法：<form method="传送方式" action="服务器文件"></form>
使用复选框，单选框，让用户选择
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
1.type 当type=“radio”时，控件为单选框。
当type=“checkbox”时，控件为复选框。
2.value ：提交数据到服务器的值。
3.name：为控件命名，以备后台程序ASP,PHP使用。
4.checked：当设置为checked=“checked”时，该选项被默认选中。
使用下拉列表框，节省空间
<select>
<option value="提交值" selected=“selected”>选项</option> （设置selected=“selected”属性，则该选项被默认选中）
</select>
下拉列表也可以进行多选项操作，在<select>标签中设置“multiple=“multiple””属性，就可以实现多选功能，在windows系统下ctrl+单击进行多选。
使用重置按钮，重置表单信息
<input type="reset" value="重置">
form表单中的lable标签
lable标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在lable标签内点击文本，就会触发此控件，即用户单击lable标签时，就自动选中和该lable标签相关联的表单控件上。
语法;
<lable for="控件id名称"> 注意：标签的for属性中的值应当与相关控件的id属性值一定要相同。
css知识点
1.css样式有三种，①内联式css样式，直接写在现有的HTML标签中 ②嵌入式css样式，写在当前的文件中 ③外部式css样式，写在单独的一个文件中
三种方法的优先级：内联式>嵌入式>外部式
2.css选择器
（1）标签选择器
html中代码中的标签：如<body><p>等。
（2）类选择器
语法： .类选择器名称{css样式代码}
（3）ID选择器
语法： #ID选择器{css样式代码}
ID选择器和类选择器的区别：
1.标签设置分别是 id=“ID名称”，class=“类名称”。
2.ID选择符的前面是#，类选择器前面是圆点.
3.ID选择器在文档中只能使用一次
4.可以使用类选择器词列表方法为一个元素同时设置多个样式。
（4）子选择器
子选择器，即大于符号（>）,用于选择指定标签元素的第一代子元素。例如： .food>li{border:1px solid red} 这行代码会使class名为food的子元素li加入红色实线边框。
（5）包含（后代）选择器
包含选择器，即加入空格，用于选择指定标签元素下的后辈元素
总结：>作用于元素的第一后代，空格作用于元素的所有后代。
（6）通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素 * {css样式代码}
（7）伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;} a标签鼠标滑过是文字变为红色
（8）分组选择符
当你想为html中多个标签设置同一个样式的时候，可以使用分组选择符（，）。如：h1,span{css样式代码}相当于 h1{css}，span{css}
当要为某些样式设置具有最高权值时，可以使用 ！important解决。
css格式化排版
文字排版--字体
body{font-family:"宋体";}
文字排版--粗体
p span{font-weight:bold;}
文字排版--斜体
p a{font-style:italic;}
文字排版--下划线
p a{text-decoration:underline;
文字排版--删除线
.类名{text-decoration:line-through;}
段落排版--缩进
p{text-indent：2em} 2em意思是文字的两倍大小。
段落排版--行间距（行高）
p{line-height：1.5em；}
段落排版--中文字间距，字母间距
文字，字母间隔：letter-spacing实现
单词间距设置：word-spacing
段落排版--对齐
text-align：center / left /right
元素分类
常用的块状元素有：
<div>, <p>, <h1> ..<h6>, <ol>, <ul>, <dl> ,<table>, <address> , <blockquote> ,<form>
常用的内联元素有：
<a> , <span> ,<br>, <i> ,<em> ,<strong>, <lable>, <q>, <var>, <cite>, <code>
常用的内联块状元素有:
<img>, <input>
1.设置display：block ，就是将元素显示为块级元素。
块级元素特点：①每个块级元素都从新的一行开始，并且其后的元素也另起一行。
②元素的高度，宽度，行高以及顶和底边都可以设置。
③元素宽度在不设置的情况下，是它本身容器的100%
2.设置display：inline ，就是将元素显示为内联元素。
内联元素特点：①和其他元素都在一行上。
②元素的高度，宽度及顶部和底部边距不可设置。
③元素的宽度就是它包含的文字或图片的宽度，不可改变。
3 .设置display：inline-block 就是将元素显示为内联块状元素。
内联块状元素特点：①和其他元素都在一行上
②元素的高度，宽度及顶部和底部边距可设置。
盒子模型
表格的内边距padding （padding-top，bottom，left，right）
外边距margin （margin-top，bottom，left，right）
盒子模型--边框
1.边框border线可以设置粗细，样式，颜色。
①border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线） | solid （实线）
②border-color（边框颜色）
③border-width（边框宽度）
如果要单独设置一个边框，可以boeder-bottom / top
css布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
块状元素都是独占一行，使用 float 可以让两个块状元素并排显示，如以下代码可以使两个div并排显示，当然也可以单独设置元素
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
层模型
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
注意：fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
Relative与Absolute组合使用
使用position：absolute 可以实现被设置元素相对于浏览器（body）设置定位，也可以相对其他元素进行定位，使用position：relative帮忙，需遵循以下规定
1.参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
盒模型代码缩写
在盒模型外边距，内边距，和边框的设置中，设置上下左右的边距是按照顺时针方向设置的：上右下左，具体应用在margin和padding。
通常有下面三种缩写方法：
1, 如果top，right，bottom，left的值相同，如下面代码：
margin:10px 10px 10px 10px;
可缩写为：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：
margin：10px 20px；
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
颜色值缩写
例子1：
p{color：#000000；}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}
字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
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-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
长度值
1.像素 px
2.em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
3.百分比
水平居中设置
行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。
html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
定宽块状元素
当设置元素为块状元素时 用text-align：center 就不起作用了，这是也分两种情况：定宽块状元素和不定宽块状元素。
定宽块状元素（块状元素的宽度width为固定值）
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
不定宽块状元素方法
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1.加入table标签
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一 个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
html代码：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style> table{ border:1px solid; margin:0 auto; } </style>
2.设置display：inline方法：与第一种类似，显示类型为行内元素，进行不定宽元素的属性设置
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
3.设置position：relative和left：50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的。
通过给父元素设置float，然后给父元素设置position:relative和 left:50%，子元素设置 position:relative和 left: -50%来实现水平居中
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中
父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height与font-size的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
父元素高度确定的多行文本
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入table (包括tbody、tr、td)标签，同时设置vertical-align：middle。
css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码：
table td{height:500px;background:#ccc}
因为 td标签默认情况下就默认设置了 vertical-align为 middle，所以我们不需要显式地设置了。
方法二：
在 chrome、firefox及 IE8以上的浏览器下可以设置块级元素的 display为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7并不支持这个样式,兼容性比较差。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none除外）设置以下 2个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a标签是行内元素，所以设置它的 width是 没有效果的，但是设置为 position:absolute以后，就可以了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
css代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>