html
html骨架
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
html标签 是所有标签的根节点
head标签 用于存放title meta base style script link
title标签 展示页面标题
body标签 页面的主题部分，用于存放所有标签
标签
- 单标签
<标签名 /> "/"为关闭符号
单标签较少
<hr /> <!-- 横线标签 --> <=这里是注释标签
<br /> <!-- 换行标签 -->
- 双标签
<标签名>内容</标签名>
多数标签都为双标签
文档类型<!DOCTYPE>
告诉我们使用html的版本
字符集
不注明会出现乱码
gb2312 简体中文 六千多个汉字
BIG5 繁体中文
GBK(扩展) 兼容GB2312，同支持繁体字
UTF-8 包含所有语言，全世界用的字符
标题标签
一般用于标题
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
段落标签
<p>内容</p>
图像标签
单标签
<img src="xx.jpg"/>
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 数字 | 设置图像边框宽度 |
链接标签
anchor缩写
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
href用于指定连接目标的url地址
target：指定链接页面打开方式，self为默认值，blank为在新窗口中打开
注意：
1.外部链接：“http：//www.baidu.com”
2.内部链接：直接链接页面名
3.没有确定即定义href="#"
锚点定位
创建锚点链接可以快速定位目标位置
1.使用 a href="#id名"建立链接文本
2.<标签 id=“id名”>标注跳转位置
base标签
设置整体链接打开方式
<base target="_blank">
特殊字符标签
  空格 两个 等于一个字节长度
¥ 人民币符号
© 版权符号
® 注册商标
路径
-
相对路径
- 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如
<img src=“logo.gif” />。 - 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如
<img src=“img/img01/logo.gif” />。 - 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如
<img src="…/logo.gif" />。
- 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如
-
绝对路径
“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
列表
- 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
没有顺序的显示，比如 新闻 后发布先显示
- 有序列表
有排列顺序的列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
属性同无序列表基本一致
- 自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表格table
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。
注意:
1.<tr></tr>中只能嵌套<td></td>
2.<td></td>标签，可以容纳所有的元素
- 表头标签
表头一般位于表格的第一行或第一列，其文本加粗居中，如下所示
<table>
<tr>
<th>表头</th>
<td>单元格内的文字</td>
...
</tr>
...
</table>
即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
- 表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
1.<thead></thead>：用于定义表格的头部。必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息。
2.<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
- 表格标题capition
<table>
<caption>表格标题</caption>
</table>
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
公式： 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
表单标签
现实中的表单，类似我们去银行办理信用卡填写的单子。 目的是为了收集用户信息。
在我们网页中， 跟用户进行交互，收集用户资料，此时也需要表单。
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
- 表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
- 表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input控件
在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| type | password | 密码输入框 |
| type | radio | 单选按钮 |
| type | checkbox | 复选框 |
| type | button | 普通按钮 |
| type | submit | 提交按钮 |
| type | reset | 重置按钮 |
| type | image | 图像形式的提交按钮 |
| type | file | 文件域 |
| name | 由用户自定义 | 控件名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示高度 |
| checked | checked | 默认选中 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
label标签
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控件(文本域)
textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
注意：
1.<select></select>中至少应包含一对<option></option>。
2.在option 中定义selected =" selected "时，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
1.Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2.method
用于设置表单数据的提交方式，其取值为get或post。
3.name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
常用新标签
w3c 手册中文官网 : http://w3school.com.cn/
CSS
CSS属性
- 字体属性
font 在一个声明中设置所有的字体属性
font- family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font- weight 指定字体的粗细。
- 文本属性
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line. height 设置行高
text- align 对齐元索中的文本
text -decoration 向文本添加修饰
text-indent 缩进元索中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical- align 设置元素的垂直对齐
white space 设置元素中空白的处理方式
word-spacing 设置字间距
- 链接样式
链接的样式，可以用任何CSS属性(如颜色，字体，背景等)。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是:
- a:link -正常,未访问过的链接
- a:visited -用户已访问过的链接
- a:hover -当用户鼠标放在链接上时
- a:active -链接被点击的那一刻
- 所有CSS列表属性
list-style 简写属性。用于把所有用于列表的属性设置于-个声明中
list-style image 将图象设置为列表项标志。
list- style-position 设置列表中列表项标志的位置。
list- style-type 设置列表项标志的类型。
- CSS边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。
border- bottom 简写属性,用于把下边框的所有属性设置到一个声明中
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border- bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到-一个声明中
- CSS伪类
:link, a:link
选择所有未访问链接
visited, a:visited
选择所有访问过的链接
active , a:active
选择正在活动链接
:hover, a:hover
把鼠标放在链接上的状态
:focus, input:focus
选择元素输入后具有焦点
:first-letter, p:first-letter
选择每个<p>元素的第一个字母
first-line, p:first-line
选择每个<p>元素的第一行
:first- child, p:first- child
选择器匹配属于任意元素的第一个子元素的<p>元素
:before, p:before
在每个<p>元素之前插入内容
after, p:after
在每个<p>元素之后插入内容
lang(language)p:lang(it)
为<p>元素的Iang属性选择一个开始值
- 基础选择器
元素选择器（选择元素名） \ 如：p{color:red;}
ID选择器（#号+ID名）\ 如：#csdn{color:black;}
类选择器（.+class名） \ 如：.csdn{color:blue;}
通配符选择器（选择全部元素，不建议使用）\如：* {color：green}
并集选择器/组合选择器（多个不同的标签，应用相同的样式/声明冲突时，需要分开计算）\如：p,h1,span{color:red;}
- 层次选择器
子级选择器 (元素之间用>分割)\如：p>span{color:red;}
后代选择器（元素之间用空格分隔)\如：section span{color:blue;}
兄弟选择武器（元素之间用+分隔)\如：h1+h2{color:green;}
- 伪类选择器
1.动态伪类选择器
动态伪选择器的书写顺序：
1、link和visited必须放在最前面（无先后顺序,静态伪类选择器）
2、link和visited只能用于a标签 3、link和visited后面是focus 4、focus后面是hover
5、hover后面是active
2.结构伪类选择器
元素名：first-child第一个元素。
元素名：last-child最后一个元素。
元素名：nth-child(n)某一个元素 想选择第几个，n就取值多少。
元素名：nth-child(-n+m)选中前m个元素 n起始值是0。
元素名：nth-of-type(n) 选中第n个元素。
元素名：nth-last-child(n)选中倒数第n个元素.
3.否定伪类选择器
元素名:not(n)除了某个元素,其他元素添加样式
- 伪元素选择器（CSS创建的元素,都是选中元素的子元素）
元素名：before(元素的第1个子元素)
元素名：after(元素的最后1个子元素)
元素名：first-letter(元素的第1个字)
元素名：first-line(元素的第1个行)
input::-webkit-input-placeholder（修改输入框提示信息样式）
- 属性选择器
元素名称[属性名+“属性值”]\如：input[type=“text”]
[扩展]
1.格式： 元素名[属性名^=属性值开头的内容]选中以XXX开头的元素
input[type^=“te”]+span{ color:red;}
2.格式： 元素名[属性名 $ =属性值结尾的内容]选中以XXX结尾的元素
input[type $ =“d”]+span{ color:blue;}
3.格式： 元素名[属性名* =属性值包含的内容]选中包含XXX的元素
input[type*=“i”]+span{ color:green;}
盒子模型
-
标准模型
盒子边框（border） -
语法：
border: border-width || border-style || border-color -
属性：
border-width 定义边框粗细，默认单位px
border-style 边框的样式
none 没有边框
solid 边框为单实线
dashed 边框为虚线
dotted 边框为点线
border-color 边框颜色
盒子边框单独指定样式
表格的细线边框
border-collapse:collapse
内边距
边框与内容的距离
- 简写
padding: 10px
上下左右都为10px
padding: 10px 20px
上下 10px 左右20px
padding:10px 20px 30px
上 10px 左右20px 下30px
padding:10px 20px 30px 40px
上 10px 右20px 下30px 左40px (顺时针)
记忆方法：先分上下，再分左右
注意:
添加内边距之后，盒子边距会变大
外边距
盒子和相邻盒子的距离
- 实现盒子居中对齐
div {
/*必须要有宽度*/
width:300px;
/*让块级盒子居中对齐水平,左右外边距设置为auto*/
margin: 0 auto;
/*其他写法*/
margin :auto;
/*其他写法*/
margin-left:auto;
margin-right:auto;
}
- 文字居中与盒子居中
p{
/*文本内容、行内元素、行内块元素*/
text-algin:center;
}
div {
/*块元素居中*/
margin:0 auto;
}
- 插入图片与插入背景图片区别
- 插入图片：常用，一般做产品展示类
移动位置只能靠盒子模型 padding margin - 背景图片：一般用作小图标或者超大图片
移动位置通过 background-position
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
