HTML
1、概述：超文本标记语言，描述页面
2、特点
（1）语法宽松
（2）标签不区分大小写（建议使用小写）
（3）标签是预定义好的，每个标签都有特殊的含义
3、语法
（1）标签：由尖括号包裹起来的关键字，比如：、
等
（2）标签体：也就是开始标签和结束标签包裹的中间的内容，可以是不同的文本也可以是嵌套的其他标签
（3）属性：给元素提供更多的信息，可以改变元素的信息，都是以名称和值得形式存在，相当于键值对
（4）注释：<!-- 内容-->
（5）特殊字符： 空格 < < > >（其他的特殊字符参见文档，w3school）
4、标签分类
（1）行级标签：如果上一行有空间,就在上一行显示,如果没有空间,才另起一行显示(例如：font,span,a)（span是纯粹的行级标签,默认是不可以换行的,主要用来存放少量的数据）
（2）块级标签：不管上一行有没有空间,直接另起一行显示(例如：h1,div)（div是纯粹的块级标签,默认是自动换行的,主要用于布局）
5、常用标签
（1）结构标签（这块固定不变）
<html>
<head>文件标题</head>
<body>文件正文</body>
</html>
（2）排版标签
<h1> - <h6> ------ 标题标签
<br> ------ 换行标签
<hr> ------ 水平线标签
<b> <strong> ------ 字体加粗标签
<i> <em> ------ 字体倾斜标签
（3）段落标签： <p>
（4）列表标签
a) 有序列表： ol
b) 无序列表： ul
c) 自定义列表： dl
d) 注意：有序列表和无序列表的列表项是<li>；自定义列表的列表项是<dt>，每个自定义列表项的定义以<dd>开始。
（5）图片标签
a) 标签名： <img>
b) 重要属性
| 属性名 | 备注 |
|---|---|
| src | 设置图片的地址 |
| height | 设置高度 |
| width | 设置宽度 |
| alt | 在图片无法显示的时候替代图片 |
c) 注意：
aa) 当图片和当前页面在同一个目录下的时候，src属性里面可以直接使用 “图片名”
bb) 当图片在当前页面所在目录下的另一个文件夹的时候，src属性里面使用 “目录名/图片名”
cc) 如果图片在当前的页面的上一个目录，src属性中使用 “…/图片名”
dd) 上级目录使用“…/”表示，所以数文件位置的时候，上级目录的数量要确定。
（6）链接标签
a) 标签名： <a>
b) 属性
| 属性名 | 备注 |
|---|---|
| href | 定义要跳转的资源 |
c) 注意：
aa) 内部地址
aaa) 如果要访问的资源和当前的页面在同一个目录下，href直接使用资源名称就可以访问
bbb) 如果要访问的资源在当前的页面的下一级目录下，href可以使用“目录名称/资源名”来访问
ccc) 如果要访问的资源在当前的页面的上一级目录下，可以使用 “…/资源名” 来访问
bb) 外部地址：直接使用url地址，但是需要加上协议的名称
CSS
1、概述：层叠样式表,用于设置样式,布局控制
2、语法：
（1）选择器：选定指定的元素,给它设置样式（常见的是下面三种，其他的还有伪类选择器，子选择器等，详见w3school）
a) id选择器：一般用于选择唯一的元素(#id的值)
b) 类选择器：选择一批元素,批量设置样式(.class属性值)
c) 元素选择器：选择一批元素,批量设置样式(直接使用标签名)
（2）常见属性
a) 字体属性
| 属性名 | 备注 |
|---|---|
| font-size | 字体大小 |
b) 背景属性
| 属性名 | 备注 |
|---|---|
| background | 背景 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
c) 尺寸属性
| 属性名 | 备注 |
|---|---|
| width | 宽度 |
| height | 高度 |
d) 盒子模型
| 属性名 | 备注 |
|---|---|
| margin | 外边距 |
| padding | 内边距 |
内外边距谨慎使用，特别是内边距，像素大小不合适可能会撑大外层边框，增大排版难度
3、CSS浮动
（1）概述：div+css是现在的主流的布局方式，可以提高网页的加载速度，提高代码后期的维护效率，div默认的排版方式从上到下显示的，需要从左到右排版,就需要使用到float
（2）设置浮动
a) 格式
选择器{
float:属性值
}
b) 取值
left: 元素向左浮动
right: 元素向右浮动
none: 元素不浮动(默认值)
（3）清除浮动
由于浮动元素不占用源文档的位置,所以它会对他后面的元素产生一些影响,可以使用clear来清除浮动
a) 格式
选择器{
clear:属性值
}
b) 取值
left: 清除左浮动的影响
right: 清除右浮动的影响
both: 清除左右两侧浮动的影响
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
