HTML+CSS基础

1. <em></em>斜体强调，便于让搜索引擎搜到
1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
3.<q>（短文本引用）标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
4.<blockquote>标签，长文本引用
5.<br/>:回车换行
6.&nbsp;--> 空格显示  &amp;-->   &  、&lt;-->     < 、 &gt;-->      > 、&quot;-->   "    、&qpos;-->   '
7.<hr>标签，添加水平横线
8.<address>标签，为网页加入地址信息(电子邮箱地址等)
9.<code></code>：加入一行代码
10.<pre>语言代码段</pre>：加入一段代码
11.<ul>无序列表：<ol>有序列表
12.table:<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，
但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
13.caption标签，为表格添加标题和摘要(<tablesummary="表格简介文本">),摘要的内容是不会在浏览器中显示出来的。
它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
14.<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>(title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。)
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，
有时我们需要在新的浏览器窗口中打开--><a href="目标网址"target="_blank">click here!</a>
15.使用mailto在网页中链接Email地址:(如果mailto后面同时有多个参数的话，
第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。)
<a href="mailto:[e-mail] ?cc=xiao.com &bcc=kk.com &subject=主题 &body=邮件"></a>
cc：抄送地址、bcc密件抄送地址、多个收件人、抄送、密件抄送人用分号；隔开
subject：主题 body:内容
16.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
17.表单：<form   method="传送方式"   action="服务器文件">
18.<textarea  rows="行数" cols="列数">文本</textarea>：文本域
19.单选框、复选框：<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
20.下拉列表框
（拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，
在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项）
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
21.form表单中的label标签：<label for="控件id名称">
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。
如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
（就自动选中和该label标签相关连的表单控件上）
22.还有一个比较有用的选择器子选择器，即大于符号(>),
用于选择指定标签元素的第一代子元素。.first>span{color:red}
.first span{color:red}空格作用于元素的所有后代。
23.通用选择器是功能最强大的选择器，它使用一个（*）号指定，
它的作用是匹配html中所有标签元素
24.伪类选择符:它允许给html不存在的标签（标签的某种状态）设置样式
a:hover{color:red;}-->鼠标滑过的状态
25.分组选择符：(,)  h1,span{color:red;}-->
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
26.继承
CSS的某些样式是具有继承性的，继承是一种规则，
它允许样式不仅应用于某个特定html标签元素，而且应用于其后代.
但注意有一些css样式是不具有继承性的。如border:1px solid red;
27.层叠->后面的样式会覆盖前面的样式
p{color:red;}
p{color:green;}
p{color:pink;}
最后p为粉色
28.重要性(!important)-->最高权值
p{color:red!important;}-->p的颜色为红
28.文字排版
1）斜体-》p a{font-style:italic;}
2）粗体： a{font-weight:bold}
3)字号颜色 body{font-size:20px;color:#666}
4)字体 p{font-family:"Microsoft Yahei"}
5)下划线：a {text-decoration:underline;}
6）删除线： .oldPrice{text-decoration:line-through;}
29.段落排版
1）缩进：p{text-indent:2em;}
2em的意思就是文字的2倍大小。
2）行间距（行高）：p{line-height:1.5em;}
3）中文字间距、字母间距：h1{letter-spacing:50px;}   
单词间距：word-spacing 
4）对齐：想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码


30.CSS盒模型


html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。


常用的块状元素有：


<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>


常用的内联元素(inline行内元素）有：


<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>


常用的内联块状元素有：


<img>、<input>
1)元素分类--块级元素
设置display:block就是将元素显示为块级元素
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。


 2)元素分类--内联元素
 块状元素也可以通过代码display:inline将元素设置为内联元素
 内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变


3）内联块状元素（inline-block）
就是同时具备内联元素、块状元素的特点，
代码display:inline-block就是将元素设置为内联块状元素
inline-block 元素特点：
1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

31.盒模型：子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
1）border-style（边框样式）常见样式有：


dashed（虚线）| dotted（点线）| solid（实线）。




2）、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:


border-color:#888;//前面的井号不要忘掉。


3）、border-width（边框宽度）中的宽度也可以设置为：


thin | medium | thick（但不是很常用），最常还是用象素（px）。
4）.只设置一个方向的边框样式
div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
5）盒模型-》填充
元素内容与边框之间是可以设置距离的，称之为“填充”。
填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
6）盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
padding和margin的区别，padding在边框里，margin在边框外。


32.在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）


1）流动模型，流动（Flow）是默认的网页布局模式。
流动布局模型具有2个比较典型的特征：


第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
（内联元素可不像块状元素这么霸道独占一行）a、span、em、strong都是内联元素。
3）层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
1）如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，
这条语句的作用将元素从文档流中拖出来，然后使用
left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。会随浏览器窗口的滚动条滚动而变化
2）相对定位
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，
使用position:relative可以相对于其它元素进行定位，但是必须遵守下面规范：


1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
3）固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，
或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，
不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
4）盒模型代码简写
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;
颜色缩写：
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：
p{color:#000000;}可以缩写为：p{color: #000;}
字体缩写：
网页中的字体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 中间要加入“/”斜扛。


颜色值：
颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法：
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，
其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}


长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）
。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。


2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，
那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。


 css样式设置小技巧
 1）水平居中设置-行内元素
 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的
 2）水平居中设置-定宽块状元素
 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的；
 div{border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}
也可以写成：
margin-left:auto;
margin-right:auto;
水平居中总结-不定宽块状元素方法（一）
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：


1-加入 table 标签--------- display:table;
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td>)。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
2-设置 display;inline 方法
第二种方法：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果
3-设置 position:relative 和 left:50%;
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，
子元素设置 position:relative 和 left:-50%(/right:50%) 来实现水平居中。


垂直居中--父元素高度确定的单行文本
1）父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
垂直居中-父元素高度确定的多行文本（方法一）
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：


方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。


说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：


html代码：


<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <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>
        <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 个句之一：


position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

body {
 position:relative;
 height:100%;
 background:#fff url('../assets/loginbg.png') left top repeat-x;
 font-family:Tahoma, Arial, sans-serif;
}

通过background属性，将一个只有一条竖着的线变成一个长方形的背景图。

-->