HTML和CSS基础
html文件的结构：
<html>
<head>...</head>
<body>...</body>
</html><html></html>称为根标签，所有的网页标签都在<html></html>中。<head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。- 在
<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
HTML注释：
<!--注释文字 -->CSS注释:
/*注释语句*/头标签：
<head>
<title>文档的标题</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>`段落标签：
<p>段落文本</p>标题标签：
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>【注意】h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。
并且依据重要性递减。h1是最高的等级。
强调标签：
<em>需要强调的文本</em> <strong>需要强调的文本</strong> 【注意】<em>的内容在浏览中显示为斜体，<strong>显示为加粗。
单独样式标签：
<style>
span{ <!--样式设置--> }
</style>
<span>文本</span>【注意】<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
短文本引用标签：
<q>引用文本</q>【注意】这里用<q>标签的真正关键点不是它的默认样式双引号，而是它的语义：引用别人的话。
长文本引用标签：
<blockquote>引用文本</blockquote>【注意】浏览器对<blockquote>标签的解析是左右两边缩进样式。
分行显示文本标签：
xhtml1.0写法：<br />
html4.01写法：<br>
【注意】在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />或者<br>。
添加一些空格:
添加水平横线:
html4.01版本： <hr>
xhtml1.0版本：<hr />
地址信息标签：
<address>联系地址信息</address>短代码标签：
<code>代码语言</code>【注意】如果是多行代码，可以使用<pre>标签。
大段代码标签：
<pre>语言代码段</pre>【注意】<pre>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
无顺序信息列表标签：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>【注意】每项li前都自带一个圆点。
有顺序信息列表标签：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>【注意】每项<li>前都自带一个序号，序号默认从1开始。
独立的逻辑部分标签：
<div>…</div><div id="版块名称">…</div>表格标签：
<table summary="摘要">
<caption>表格标题</caption>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>创建表格的5个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
【注意】1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
用css样式，为表格加入边框：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>超链接标签：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>【注意】默认情况下，链接的网页是在当前浏览器窗口中打开。
如果想在新的浏览器窗口中打开：
<a href="目标网址" target="_blank">click here!</a>发送Email：
<a href="mailto:邮件地址1;邮件地址2 ?cc=抄送地址 &bcc=密件抄送地址 &subject=邮件主题 &body=邮件内容">发送</a>【注意】1、如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
2、多个邮件地址用”;”隔开。
插入图片标签：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">表单标签：
<form method="传送方式" action="服务器文件"></form>【注意】1. ：标签是成对出现的，以开始，以结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
4.所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
输入框标签：
<input type="text/password" name="名称" value="文本" />【注意】1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
文本输入域标签：
<textarea rows="行数" cols="列数">文本</textarea>【注意】1、标签是成对出现的，以开始，以结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></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"时，该选项被默认选中
5、同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
下拉列表框标签：
<label>选择：</label>
<select multiple="multiple">
<option value="选择1">选择1</option>
<option value="选择2" selected="selected">选择2</option>
<option value="选择3">选择3</option>
<option value="选择4">选择4</option>
</select>【注意】设置selected="selected"属性，则该选项就被默认选中。
设置multiple="multiple"属性，则下拉列表也可以进行多选操作：
在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
提交按钮：
<input type="submit" value="提交">【注意】type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
重置按钮：
<input type="reset" value="重置">【注意】type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
label标签：
<label for="控件id名称">...</label>【注意】当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
内联式css样式：
<p style="color:red;font-size:12px">这里文字是红色。</p>嵌入式css样式：
<style type="text/css">
span{ color:red; }
</style>【注意】嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
外部式css样式：
<link href="base.css" rel="stylesheet" type="text/css" />【注意】1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、标签位置一般写在标签之内。
类选择器：
.类选器名称{css样式代码;}
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>第二步：使用class=”类选择器名称”为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/【注意】1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
ID选择器：
#ID器名称{css样式代码;}第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>第二步：使用id=”id名称”为标签设置一个id，如下：
<span id="stress">胆小如鼠</span>第三步：设置id选择器css样式，如下：
#stress{color:red;}/*前面要加入一个'#'*/【注意】1、ID选择器只能在文档中使用一次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
子选择器：
.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代)选择器：
.first span{color:red;}总结：’>’作用于元素的第一代后代，空格作用于元素的所有后代。
【注意】子选择器（child selector）仅是指它的直接后代，
而后代选择器是作用于所有子后代元素。
通用选择器：
* {color:red;}【注意】”*”的作用是匹配html中所有标签元素
伪类选择符：
选择标签:hover{样式;}【注意】它允许给html不存在的标签（标签的某种状态）设置样式，
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
提高权重：
p{color:red!important;}【注意】!important要写在分号的前面
文字排版
1、字体：
body{font-family:"Microsoft Yahei";}2、字号、颜色
body{font-size:12px;color:#666}3、粗体
p span{font-weight:bold;}4、斜体
p a{font-style:italic;}5、下划线
p a{text-decoration:underline;}6、删除线
.oldPrice{text-decoration:line-through;}7、缩进
p{text-indent:2em;}【注意】2em的意思就是文字的2倍大小。
8、行间距
p{line-height:1.5em;}9、文字间距
h1{letter-spacing:50px;}10、对齐
h1{text-align:center;} <!-- center:居中 , right:右对齐 ,left:左对齐 -->元素分类
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：
<img>、<input>块状元素:
a{display:block;}<!-- 转换为块状元素 -->【注意】1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，和父元素的宽度一致，除非设定一个宽度。
内联元素：
div{display:inline;}<!-- 转换为内联元素 -->【注意】1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素：
div{display:inline-block;}<!-- 转换为内联块状元素 -->【注意】1、和其他元素都在一行上。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型-边框（一）：
div{
<!-- 边框三个属性 -->
border-width:2px;
border-style:solid;
border-color:red;
}或者缩写：
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-top:1px solid red;<!-- 上边框 -->
border-right:1px solid red; <!-- 下边框 -->
border-left:1px solid red;<!-- 左边框 -->
border-bottom:1px solid red;<!-- 右边框 -->
}盒模型–宽度和高度：
div{
width:200px;
height:30px;
padding:20px;
border:1px solid red;
margin:10px;
}【注意】1、盒子的宽度=左/右边界（margin）+左/右边框（border）+左/右填充（padding）+内容宽度（width）。
2、css内定义的宽（width）和高（height），指的是填充以里的内容范围。
盒模型–填充（padding）/边界（margin）边框（border）：
div{padding:20px 10px 15px 30px;} <!-- 上、右、下、左（顺时针） -->或者：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}或者：
div{padding:10px;} <!-- 上、右、下、左的填充都为10px -->或者：
div{padding:10px 20px;} <!-- 上下填充一样为10px，左右一样为20px -->【注意】padding、border的缩写方法和margin是一致的。
css布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
层模型有三种形式：
①绝对定位(position: absolute)
②相对定位(position: relative)
③固定定位(position: fixed)
浮动模型：
div{
float:left; <!-- float:right; -->
}【注意】div、p、table、img 等元素都可以被定义为浮动。
层模型–绝对定位：
div{
position:absolute;
left:100px;
top:50px;
}【注意】如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，
这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接
近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，
即相对于浏览器窗口。
层模型–相对定位：
div{
position:relative;
left:100px;
top:50px;
}【注意】如果想为元素设置层模型中的相对定位，
需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性
确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)
方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动
的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
层模型–固定定位：
div{
position:fixed;
left:100px;
top:50px;
}【注意】fixed：表示固定定位，与absolute定位类型类似，
但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
水平居中
1、分为两种情况：行内元素 还是 块状元素 ，
块状元素里面又分为定宽块状元素，以及不定宽块状元素。
2、如果被设置元素为文本、图片等行内元素时，
水平居中是通过给父元素设置 text-align:center 来实现的。
.txtCenter{
text-align:center;
}3、如果被设置元素为 定宽块状元素 时，用width和margin实现。
div{
border:1px solid red;/* 为了显示居中效果明显为 div 设置了边框 */
width:200px;/* 定宽 */
margin:auto;/* margin-left 与 margin-right 设置为 auto */
/* width和margin缺一不可 */
}4、如果被设置元素为 不定宽块状元素 时，有3种实现方法。
①加入 table 标签
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>②设置 display: inline方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
.container{text-align:center;}
.container ul,li{display:inline;}
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>③通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，
子元素设置position:relative和 left: -50% 来实现水平居中。
wrap{
background:#abc;
clear:both;
float:left;
position:relative;
left:50%
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>垂直居中：
1、分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
2、父元素高度确定的单行文本的竖直居中的方法是通过设置
父元素的 height 和 line-height 高度一致来实现的。
.container{
height:100px;
line-height:100px;
background:#999;
}
<div class="container">
hi,imooc!
</div>3、父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
①方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
table td{height:500px;background:#ccc}
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>【注意】因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
②在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell
（设置为表格单元显示），激活 vertical-align 属性
.container{
height:300px;
background:#ccc;
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}隐性改变display类型：
1、position : absolute
2、float : left 或 float:right
【注意】只要html代码中出现以上两句之一，元素的display显示类型就会自动变为
以display:inline-block（块状元素）的方式显示，当然就可以设置元素
的 width 和 height 了，且默认宽度不占满父元素。
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
