html&css基础笔记
有道笔记：http://note.youdao.com/noteshare?id=a6d7eab195085655bbfce86665524e35
一 HTML结构标签
HTML基本标签
标题标签 <h1>~<h6>
段落 <p></p>
换行 <br/>
水平线 <hr/>
粗体 <strong></strong>
斜体<em></em>
图像（images）
<img src="相对路径\绝对路径" alt="" width="" height="">
超链接
几个页面之间的跳转 <a href="跳转后页面的路径">热点文本/图像</a>
锚链接
跳转到同一个页面的固定位置
<a href="#me">点击我</a>
<a name="me">跳转到这里来</a>
跳转到不同页面的固定位置
1.html
<a href="2.html#me">点击我</a>
2.html
<a name="me">跳转到我这里来</a>
功能链接
<a href="mailto:邮箱地址">给站长写信</a>
特殊字符与HTML注释
<!--注释内容--> 规范意识 *****
二 美化 漂亮的衣服 --CSS样式
怎么写？
选择器{
属性：值;
属性: 值；
}
（1）标签选择器：选择器写法和标签是一致的。所有的这些标签会使用统一的样式
如果有个别某些h1不想使用这个样式怎么办？--》肯定不能使用h1这个标签选择器了
如果某些段落p也想使用h1的那个样式怎么办？
(2)类选择器
.red{
color:#ff0000;
}
<h1></h1>
<h1 class="red"></h1>
<h1></h1>
<p></p>
<p class="red"></p>
(3)ID选择器
#green{
color:#00ff00;
}
<p id="green"></p>
怎么用？
(1)内部样式表
<style></style>
(2)内联样式
<p style=""></p>
(3)外部样式表
创建一个外部的css文件:*.css,把样式写在这个文件中
谁想用这个样式，谁就引入这个css文件即可
<link rel="stylesheet" href="样式文件的路径"/> *****
<style>
@import "css/types.css";
</style>
链接式和导入式区别
二 如何编写自己样式声明？
******学习方法*********
（1）查看W3CSchool手册，定位到CSS部分
（2）编写CSS样式时，可以借助工具的提示来调错
**********常见问题及错误**************
(1)CSS文件中设置的中文字体类型不起作用，怎么解决?
css文件编码重新设置为utf-8即可
（2）如果页面中既有中文又有英文，怎么修饰字体类型？
font-family:cursive,"微软雅黑";
***请把英文字体类型写在中文字体类型之前
h1{
font-size:23px;
color:red;
}
字体
font 简写,可以按顺序设置如下属性：
font-style
font-weight
font-size/line-height
font-family
补充讲解：****
span和p不一样
（1）span不会独占一行，p会独占一行
行内元素span，很常用，记住
块级元素p ，很常用的块级元素<div>
（2）块级元素可设置宽高，行级（行内）元素设置宽高不起作用
文本
color
text-align
text-indent:(em)
line-height
text-decoration
三 如何设置页面中超链接的样式？
超链接未选中
鼠标定位上去之后
鼠标点下去之后
访问过以后
伪类语法
标签名：伪类名{声明；}
a:hover{
color:#B46210;
text-decoration:underline;
}
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
常见的开发中的使用：超链接未被访问，鼠标悬浮到超链接上面
a{
color: black;
text-decoration: none;
}
a:hover{
color:red;
text-decoration: underline;
}
鼠标形状
cursor:default/pointer/wait/help/text/crosshair;
span{
cursor:pointer;
}
背景属性
背景颜色：
背景图像
图像路径：background-image:url("images/buy.png");
重复方式：background-repeat:no-repeat;
背景定位：background-position:10px center;
简写形式：background:#B70447 url("images/buy.png") no-repeat 10px center;
列表
有序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>桃子</li>
<li>菠萝</li>
</ul>
无序列表
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>桃子</li>
<li>菠萝</li>
</ol>
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果 香蕉 西瓜 桃子 菠萝</dd>
</dl>
列表样式
list-style-type
list-style-image
list-style-position
list-style
table表格
tr行
td列
<table border="1px" width="400px">
<tr>
<td colspan="3">三年级五班学员的语文成绩和数学成绩</td>
</tr>
<tr>
<td rowspan="2">白杨</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>96</td>
</tr>
<tr>
<td rowspan="2">杨晨</td>
<td>语文</td>
<td>92</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
跨行：rowspan="2"
跨列：colspan="2"
表单
<form action="#" method="post">
<fieldset>
<legend>个人简历</legend>
<input type="hidden" name="info" value="register"/>
<p>用户名：<input type="text" name="username" value="请输入用户名" readonly="readonly"/></p>
<p>密码：<input type="password" name="pwd"/><p>
<p>性别：<input type="radio" name="sex" id="man" checked="checked"/><label for="man">男</label>
<input type="radio" name="sex" id="female"/><label for="female">女</label></p>
<p>爱好：<input type="checkbox" name="hobby" value="1"/>运动
<input type="checkbox" name="hobby" value="2"/>看电影
<input type="checkbox" name="hobby" value="3"/>美食
<input type="checkbox" name="hobby" value="4"/>看书</p>
<p>上传简历：<input type="file"/></p>
<p>所在城市：
<select name="citys" id="citys">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
</select>
</p>
<p>个人简介：<br/>
<textarea name="jianjie" id="jianjie" cols="30" rows="10">我喜欢电脑，喜欢前端</textarea>
</p>
</p><input type="submit" value="登录" disabled="disabled"/>
<input type="reset"/></p>
<p><input type="image" src="image/login.gif"/></p>
<p><input type="button" value="提交表单"/></p>
</fieldset>
</form>
action属性：表单提交给谁
method属性：get/post
get方式提交表单：表单数据能通过地址栏获得，数据提交是不安全的
post方式提交表单
表单数据并不是通过地址栏来传递的，因此表单数据是安全的
表单元素
<input type="text" name="fname" value=""/>
type:text/password/checkbox/radio/submit/reset/file/image/button
size:元素的宽度，当type为text或password时
maxlength:当type为text或password时,输入的最大字符数
checked:当type为radio或checkbox时，知道按钮是否被选中
多行文本域：
<textarea name="showText" id="" cols="30" rows="10"></textarea>
表单的高级应用
隐藏域：type="hidden"
只读：readonly="readonly"
禁用：disabled="disabled"
<label for="female">女</label>
css高级选择器
并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同的样式
p,h1{color:red;}
交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，
第一个选择器必须是标签选择器，第二个选择器是类选择器或者ID选择器
h1.first{color:yellow}
后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分离，
标签嵌套时，内层的标签成为外层标签的后代
h1 span{color:green;}
子元素选择器：通过>连接在一起而成，仅作用于子元素
h1>span{color:green;}
属性选择器：选取带有指定属性的元素，或者取带有指定属性和值的元素
input[type="password"]{
border:1px solid red;
}
<body>
<p>段落</p>
<h1 class="first">this <span>is </span><span>the </span>first</h1>
<span>yyyyyy</span>
<h1>this is <em><span>the </span></em>second</h1>
<p class="first">段落</p>
<p>用户名：<input type="text"/></p>
<p>密码：<input type="password"/></p>
<p>重复密码：<input type="password"/></p>
</body>
盒子模型
边框 border
边框样式 border-style
边框颜色 border-color
边框粗细 border-width
border-top-style: solid;
border-right-style:dashed ;
border-bottom-style: double;
border-left-style: dotted;
/*上下 左右*/
/*border-style:dashed double;*/
/*上 右 下 左*/
border-style:solid dashed double dotted;
border:5px solid red;
border-top:5px dotted blue;
外边距 margin
margin-top
margin-right
margin-bottom
margin-left
margin
margin-top:1px;
margin-right:2px;
margin-bottom:2px;
margin-left:1px;
margin:3px 5px 7px 4px;
margin:3px 5px;
margin:8px;
内边距 padding
padding-top
padding-right
padding-bottom
padding-left
padding
box-sizing属性
content-box 盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框，和原来计算方式一样
border-box 盒子的实际高度和宽度包括元素内容、边框和内边距，总宽度和高度不变
box first box-sizingborder-box-moz-box-sizingborder-box/*Firefox*/
-webkit-box-sizingborder-box/*Ssfari*/
padding20pxbox second box-sizingcontent-box-moz-box-sizingcontent-box/*Firefox*/
-webkit-box-sizingcontent-box/*Ssfari*/
padding20px
块级元素 <h1>...<h6> <div> <p>
内联（行内）元素 <a> <img> <span> <strong>...
display属性
控制元素的显示和隐藏
块级元素与行内元素的转变
none:设置元素不会被显示
inline:元素会被显示为内联元素
block:元素会被显示为块级元素
inline-block:行内块元素，不会换行，但是可以设置宽高
常见的网页布局
上下结构
上中下结构
上左右下结构：1-2-1结构
上左中右下机构：1-3-1结构
浮动 float属性
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动
clear属性
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both:在左、右两侧不允许浮动元素
none:默认值。允许浮动元素出现在两侧
如何让父容器随子元素自适应高度：
1.在父容器中添加一个空的子元素
.clear{
clear:both;
}
<div class="clear"></div>
2.给父容器加一个样式
overflow:hidden;
overflow属性
visible:默认值。内容不会被修剪，会呈现在盒子之外
hidden:内容会被修剪，并且其余内容是不可见的
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
position属性
static:默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed:固定定位
relative:相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
#first{
position:relative;
top:-20px;
left:20px;
}
设置相对定位的盒子会相对它原来的位置，通过制定偏移，达到新的位置
设置了相对定位的网页元素，无论是在标准流中还是浮动流中，都不会对它的父级元素和相邻元素有任何影响，
它只针对自身原来的位置进行偏移
absolute属性值
偏移设置：top、left、right、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。
如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了position属性时，z-index属性可以
设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
