HTML学习笔记
时间：2016-10-23 17:25
——常用标签
字体标签：
<font> </font>
size：范围1 ~ 7，当超出最大值，默认为7。
color：两种表示方式，1、英文单词 red green black等，2、十六进制表示方法，第一位为#，每两位表示一个颜色。
标题标签：
h1 ~ h6
<h1> </h1>
从h1到h6，大小为从小到大，是行级元素。
水平线标签：
<hr />
size：表示水平线粗细。
color：表示水平线颜色。
特殊字符：
< <
> >
空格
& amp;
© &cpy;
列表标签：
定义列表：
<dl> </dl>
<dt> </dt>：标题
<dd> </dd>：列表
有序列表：
<ol> <li> </li> </ol>
type：1、a、i
无序列表：
<ul> <li> </li> </ul>
type：空心圆circle、实心圆disc、实心正方形square、默认disc。
图片标签：
<img src="URL" />
width：图片的宽度。
height：图片的高度。
alt：图片上显示的文字，当图片正常显示时，鼠标移入显示文字，当图片非正常显示时，则显示该文字。
超链接标签：
<a> </a>
链接资源：
<a href="连接到资源的路径">显示在页面上的内容</a>
href：链接的资源地址
target：设置打开方式，默认在当前页打开。
_blank：在新窗口打开。
_self：在当前页打开（默认）。
当href不设置值时，需要加一个占位符“#”。
定位资源：
如果想要进行定位，则需要先定义一个锚点：
<a name="top">顶部</a>
回到锚点：
<a href="#top">回到顶部</a>
原样输出：
<pre> </pre>
表格标签：
对数据进行格式化，使数据显示更加清晰。
<table> </table>
border：表格线粗细。
bordercolor：表格线颜色。
cellspacing：单元格线间隙。
width：表格宽。
height：表格高。
<tr> </tr>
align：center、left、right
<td> </td>
<th> </th>
自动加粗、居中。
<caption> </caption>
标题标签。
合并单元格：
rowspan：合并行
colspan：合并列
表单标签：
可以将数据提交到服务器。
<form> </form>：定义一个表单的范围。
输入项：可以输入内容或者选择内容的部分。
大部分输入项可以使用input标签进行封装。
<input type="输入项的类型" />
type：
text：普通文本框。
password：密码框。
radio：单选框。
必须有name属性和value属性，并且name值必须相同。
默认值：checked="checked"，表示默认选中。
checkbox：复选框
必须有name属性和value属性，并且name值必须相同。
默认值：checked="checked"，表示默认选中。
file：文件上传
button：普通按钮
submit：提交按钮
提交时如果表单元素没有name值，则无法提交。
reset：重置按钮
下拉框：
<select>
<option></option>
<option></option>
</select>
select必须有那么，option必须有value。
默认值：selected="selected"，表示默认选中。
multiple：将所有的option全部显示。
文本域：
<textarea></textarea>
col：列
row：行
隐藏项：
不会显示在页面上，但是存在于HTML代码中。
<input type="hidden" />
form表单中的属性：
action：提交地址，如果不写，则默认提交到当前页面。
method：提交方式
常用的方式：get和post，默认get请求。
面试题：
get请求和post请求的区别：
get请求地址栏会显示提交的数据，而post不会携带。
get请求不安全，post请求安全性较高。
get请求有数据大小的限制，而post请求数据大小无限制，文件上传需要post请求。
enctype：
一般请求不需要这个属性，做文件上传时需要这个属性。
使用图片作为提交按钮：
<input type="image" src="图片路径" />
HTML中其他标签的使用：
<b>：加粗
<s>：删除
<u>：下划线
<i>：斜体
<pre>：原样输出
<sup>：上标
<sub>：下标
<p>：段落标签
<div>：行级元素
<span>：块级元素
头标签：
<head> </head>
<title>：网页标题
<base>：为页面上的所有链接规定标题栏显示的内容和默认地址或默认目标。（target属性）
<base href="http://www.baidu.com" />，则页面中所有的超链接地址都以"http://www.baidu.com"开始
如果没有base标签，则相对路径以当前文件开始，绝对路径根据指定路径进行访问。
<link>：定义文档与外部资源的关系。
<meta>：可以提供有关页面的基本信息。
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
框架标签：
<frameset> </frameset>
rows：按行划分。
<frameset rows="80,*"> //将页面划分为两行，第一行的值是80，其余为第二行。
cols：
<frameset cols="80,*" > //将页面划分文两列，第一列的值是80，其余为第二列。
<frame> </frame>
显示具体页面。
<frame name="页面名称" src="页面路径">
当使用框架标签时，标签不能写在body中，使用了框架标签时，需要把body标签删除。
如果点击左边的超链接想要让内容显示在右边的页面中，可以将超链接的target的值设置为右边frame的name值。
——路径
绝对路径：
从根路径开始，完整的路径。
相对路径：
一个文件相对于另外一个文件的位置。
三种写法：
在同一目录下：直接写文件名称。
图片在当前HTML文件的下层目录：从当前目录开始精确到图片文件。
图片在当前HTML文件的上层目录：一个../就表示一个上层目录，两层目录用../../表示。
——HTML总结
1、HTML操作思想
使用标签把要操作的数据包围起来，然后通过修改标签的属性值，来实现标签内数据样式的变化。
2、font标签
属性：
size：取值范围1~7
color：可以使用英文单词，或者十六进制数字。
3、标题标签
h1~h6，由大到小。
4、注释
<!-- -->
5、列表标签
自定义列表：
<dl>
<dt> </dt>
<dd> </dd>
</dl>
有序列表：
<ol>
<li> </li>
</ol>
无序列表：
<ul>
<li> </li>
</ul>
6、图片标签
<img src="路径" width=" " height=" " alt=" "/>
alt属性浏览器兼容性差。
7、路径
相对路径：
同一级目录
下一级目录
上一级目录 ../
绝对路径
8、超链接标签
<a href="路径" > </a>
target属性：_blank和_self
9、表格标签
<table>
<tr>
<th> </th> 默认居中、加粗
</tr>
<tr>
<td> </td>
</tr>
</table>
10、表单标签
<form> </form> 表示表单范围
属性：
action：提交地址
method：提交方式
get和post的区别。
enctype：上传时使用
输入项：
必须写name属性，否则无法提交参数。
文本框：text
密码：password
单选框：radio
name必须相同，有默认值。
复选框：checkbox
下拉框：<select> <option> </option> </select>
文本域：<textarea> </textarea>
rows、cols、name
文件：file
提交按钮：submit
重置按钮：reset
使用图片提交：<input type="image" src="" />
隐藏项：hidden
普通按钮：button
11、div和span
div：行级元素，自动换行
span：块级元素，在一行显示
12、框架标签
<frameset> <frame> </frame> </frameset>
——CSS
1、CSS简介
Cascading Style Sheets是层叠样式表，用来定义网页的显示效果，可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能，简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
2、CSS和HTML的结合方式（四中结合方式）
（1）在每个HTML标签中都有一个style属性，可以通过这个属性把CSS和HTML结合在一起。
<div style="" > </div>
（2）使用HTML的<style>标签，<style>标签要写在head标签内。
<style type="text/css">
CSS代码;
</style>
（3）在style标签中使用语句
@import url(css文件的路径) //不需要双引号
需要创建一个css文件。
缺点：兼容性差
（4）使用<link>标签引入外部CSS文件。（常用）
<link rel="stylesheet" type="text/css" href="CSS文件路径" />
3、CSS样式优先级
样式优先级：
由上到下，由外到内，优先级由低到高。
4、CSS选择器
选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。
CSS选择器的类型：
标签选择器
类选择器
id选择器
选择器优先级：
style属性 > id选择器 > 类选择器 > 标签选择器
5、CSS扩展选择器
关联选择器：
标签是可以嵌套的，由两个多或多个选择器之间产生的关系，就是关联选择器。
关联选择器使用空格进行分隔。
如果指定为子元素的选择器，需要加“>”来指定。
组合选择器：
对多个不同选择器进行相同样式设置的时候使用组合选择器。
组合选择器使用逗号进行分隔。
伪元素选择器：
在HTML中预先定义好的一些选择器，或者说当前元素处于的状态。
伪元素选择器使用冒号进行定义。
比如超链接有四个状态：
原始状态：:link
悬停状态：:hover
点击状态：:active
点击之后的状态：:visited
6、CSS的盒子模型
边框：
border: 统一设置
border-top: 上边框
border-bottom: 下边框
border-left: 左边框
border-right: 有边框
取值：
width: 边框宽度
style: 边框样式
color: 边框颜色
内边距：
padding: 统一设置
padding-top: 上边距
padding-left: 左边距
padding-bottom: 下边距
padding-right: 右边距
属性只有一个：length
需要注意的是：
当实际长度超出容器长度时，以实际长度为准。
当实际长度不足容器长度时，以容器长度为准。
外边距：
margin: 统一设置
margin-top: 上边距
margin-bottom: 下边距
margin-left: 左边距
margin-right: 右边距
取值：
auto：取计算机值
length：自定义长度
7、浮动
float属性：
none： 默认值，对象不浮动。
left：向左浮动。
right：向右浮动。
8、定位
position属性
static：默认值，无特殊定位，对象遵循HTML定位规则。
absolute：将对象从文档流中脱出，使用left、right、top、bottom等属性进行绝对定位。
relative：对象不可层叠，但会根据left、right、top、bottom等属性在正常文档流中进行相对定位。
absolute和relative的区别：
absolute会把对象从文档流中脱出，相当于浮动，可以使用top等属性进行定位。
relative不会把对象从文档流中脱出，而是依然保留对象位置，也可以进行定位。
