记录个人的学习内容，学习路线，有不对的地方希望得到指点。
因为是学习 记忆的内容，只是针对我个人使用，所以写的会潦草一些。需要补充或者写错的内容，一定要和我说！！！！有评论必回！！！！
目录
目录
list-style-type控制无序列表和有序列表的项目符号
超链接标记的伪类
第一章 HTML和css的网页概述
标题标签
h1-h6
<hn align="对齐方式"> 标题文本</hn>
对齐方式有：
left
center
right
段落标签
<p align="">段落文本</p>
水平线标签
<hr 属性="属性值"></hr>
属性有：align：left right center
size水平线的粗细：npx
color:#RGB
width:可以是确定的像素值，也可以是浏览器窗口的百分比
换行标签 （强制换行的作用）
</br>
第二章 从零开始构建HTML网页
页面表头部分内容的意思
<title></title>意思是头部标签，就是网页的名字存放在这里
<meta/>用于定义页面的元信息，但元信息不会显示在页面中，本身不包含任何内容，仅仅表示网页的相关信息。
<meta name="名称" content="值"/>可为搜索引擎提供信息，name用于提供搜索内容的名称 content提供对应的搜索内容的值
<meta name="keywords" content="千图网，免费素材下载">
<meta name="description content=""_">
<meta name="author" content=" ">
@@@@不懂p29页
<meta hettp-equiv="名称" content="值">
文本样式标签
<font 属性="属性值">文本内容</font>
属性：
face字体：微软雅黑 宋体 黑体
size文字大小：1-7取整数值
color颜色
文本格式化标签
<b></b>和<strong></strong>粗体
<u></u>和<ins></ins>下划线
<i></i>和<em></em>斜体
<s></s>和<del></del>删除线
2.3图文混排
图像标签<img/>
属性：
src路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标指针悬停时显示的内容
width 像素值 图像的宽度 如果width和height同时设置，则会扭曲原图的大小；如果只设置一个值，则另一个属性会依据前一个设置的属性自动调整
height 像素值 图像的高度
border 数字 图像边框的宽度 通常情况下是没有边框的，通过border可以设置边框的宽度
vspace 像素值 图像顶部和底部的留白
hspace 像素值 设置图像左侧和右侧的留白
aligh："对齐方式"
left
right
top图像的顶部和文本第一行对齐
middle图像的中间和文本第一行对齐
bottom图像的底部和文本第一行对齐
绝对路径和相对路径
绝对路径一般是指带有盘符的路径或者有完整的网络地址
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
相对路径举例:
1.图像文件和html文件位于同一文件夹：<img src="logo.gif"/>
2.图像文件位于html文件的下一文件夹：<img scr="img/img01/logo.gif"/>
3.图像文件位于html文件的上一级文件夹,在文件名之前加../：<img scr="../logo.gif"/>,如果是上两级，则加../../
特殊字符标签
常用的： 空格符
其他的看课本p37
第三章 使用CSS技术美化网页
CSS样式规则
h1{color:green; font-size:14px;}
1.属性和属性值之间用冒号链接
2.键值对之间用分号间隔
3.属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号
如:p{font-family:"Time New Roman"}
4.注释的格式：/*...*/
5.空格在CSS中是不被解析的，因此可以利用空格进行排版
引入CSS样式表的三个方法
行内式
通常CSS是写在<head>头部标签中下，行内式却是写在<html>根标签中
<h1 style="font-size:20px; color:blue;">
内嵌式
就是将CSS代码集中写在html文档的<html>头部标签中，并用style标签定义类型
<head>
<style type:"text/css">
<h1 style="font-size:20px; color:blue;">
</style>
</head>
外链式
是将所有的样式放在一个或多个以".css"为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到html文档中
<head>
<link href="CSS文件路径" type="text/css" rel="stylesheet">
</head>
href:URL可以是绝对路径，可以是相对路径
type:文档类型
rel:定义当前文档和被链接文档之间的关系，这里需要指定为"stylesheet"表示被链接的文档是一个样式表文件
外链式成功后，在DW的标签栏会自动出现 style.css 表示被成功链入
CSS基础选择器
1.标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器最大的优势是可以为元素对象定义单独的样式。
3.id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素id名是唯一的，只能对应于文档中某一个具体的元素
4.通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
在实际的网页开发中不建议使用通配符选择器，因为会对所有的html标签都生效
CSS字体样式属性
font-size
字号大小 最常用单位px像素 其他可用单位P51
font-family
字体
font-weight
字体粗细
属性：normal默认值
bold粗体
bolder更粗
lighter更细
100~900定义由细到粗字符，其中400等于normal
font-style
字体风格
属性：normal标准
italic斜体
oblique倾斜
日常使用italic
font综合设置字体样式
选择器{font:font-familt font-size font-style font-weight font-size/line-height(行高) font-family}
@font-face规则
用于定义除服务器以外喜欢的字体
用法
@font-face{
font-family:字体名称;
src:字体路径
}
2.CSS文本外观属性
color:
文本颜色
取值方式：
1.red green blue
2.十六进制，如：#FF0000
3.RGB代码 rgb(255,0,0)
p{color:red}
letter-spacing
:字间距
允许使用负值，默认是normal
使用单位是像素
h2{letter-spacing:-0.5px}
word-spacing:单词间距
允许使用负值，默认值是normal
line-height行间距
使用单位有 px像素 em相对值 %百分比
text-transform文本转换
属性：
none不转换
capitalize 首字母大写
uppercase全部字符转化为大写
lowercase全部字符转化为小写
text-decoration文本装饰
none
underline下划线
overline上划线
line-through删除线
并可以同时设置多个值
text-align水平对齐方式
left左对齐
right右对齐
center居中对齐
如
h2{text-align:center;
}
@@[注意text-align只适用于块级元素，对行内元素无效，如果需要对图像设置对齐，则可以添加一个父biaoqian<p></p>]
text-indent首行缩进
可以设置不同的单位 px em %
white-space空白符处理
normal空格空行无效，满行后自动换行
pre空格空行原样展示
nowrap空格空行无效，强制文本不能换行，除非遇到<br/>内容超出边界则会自动增加滚动条
text-shadow阴影效果
选择器{text-shadow:h-shadow v-shadow blur color;}
水平偏移距离 垂直偏移距离 模糊半径 阴影颜色
p{text-shadow:10px 10px 10px red}
也可以给文字增加多个阴影效果
p{text-shadow:10px 10px 10px red,20px 20px 20px green}红色绿色阴影效果叠加
text-overflow标示对象溢出文本
属性：
clip修剪溢出文本，不显示省略标签"..."
ellipsis用...标签替代文本
【需要注意的是：white-space:nowrap 样式不能换行; overflow:hidden隐藏溢出文本 text-overflow:ellipsis样式显示隐藏标签】
word-wrap用于实现长单词和URL地址内部进行换行
属性
normal 浏览器默认处理
break-word在“文本框”内部进行换行
CSS复合选择器
1.标签指定式选择器
主要由两个选择器组成 一是标签选择器 二是class选择器或id选择器，中间不能有空格
例如"h3.special","p#one"
2.后代选择器
后代选择器是指按照就近原则，且后代选择器不限于使用两个元素，如果需要加入更过的元素，只需在元素之间加上空格即可。
3.并集选择器
只不同的段 类型 id之间同时选择，只需要用英文逗号间隔开就行了
例如：h3,.special,#one{color:red;}
CSS的层叠性和继承性
所谓层叠性是指多种CSS样式的叠加
继承性是指子标记会继承父标记的某些样式，并不是所有的CSS属性都可以继承
CSS的高级特性
CSS的优先级
两个或更多规则应用在同一元素上，就会出现优先级的问题
1.继承样式的权重为0
2.行内样式优先
3.权重相同时，CSS遵循就近原则
4.CSS定义了一个!important命令，该命令被赋予最大的优先级
注意：复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。
第四章 CSS盒子模型
认识盒子模型
边框 边框样式 边框宽度 边框颜色单侧边框 边框的综合属性
border-top
border-right
border-bottom
border-left
border-top-style 样式
border-top-width 宽度
border-top-color 颜色
border-style 上 左右 下
none
solid
dashed虚线
dotted点线
double 双实线
border-color颜色
#ccc
rgb(r,g,b)
border-width 宽度 px为单位
内边距
padding-top
padding-right
padding-bottom
padding-left
padding
auto自动 默认值
px 百分比%
外边距
margin-top
margin-right
margin-bottom
margin-left
margin
块级元素居中：
当块级元素应用宽度属性width
并将左右的外边距都设置为auto，
可使块级元素水平居中
margin：0 auto 利用margin实现块元素水平居中
margin：5px auto 利用margin实现块元素水平居中
且上下拉开5像素边距
为了更方便的控制网页中的元素，在制作网页时
通常先清除元素的默认内外边距
*{padding:0;margin:0}
背景 背景颜色 背景图像的控制：平铺固定等
background-color背景颜色属性
background-image背景图像属性
background-image：url(图片路径)
background-repeal图片平铺属性
repeat沿水平垂直两个方向平铺
no-repeat不平铺，图像只位于左上角
repeat-x只沿水平方向平铺
repeat-y只沿竖直方向平铺
background-position:图像位置属性
单位数值：设置图像左上角为元素中的坐标
background-position：20px 20px
预定义关键字：
水平方向 left center right
垂直方向 top center bottom
百分比
图像50% 50%
中心点与元素50% 50%的中心点对齐
0% 0%
图像左上角与元素的左上角对齐
background-attachment图像固定属性
scroll:图像随着页面一起滚动（默认）
图像固定在屏幕上，不随页面元素滚动
背景属性的综合运用：
background：背景色 url("图像") 平铺 定位 固定
4.2盒子模型相关的属性
网页是由多个盒子排列而成
宽度和高度决定了盒子的大小
块级元素和行内元素
块元素
块级元素比较霸道，是自己独占一行的
它是有高度和宽度的
例如：div p li ul ol dl table
行内元素
行内元素一行可以显示放置多个元素
行内元素是没有高度和宽度的
例如：strong em i b span font
元素类型的转换
display:[显示]
inline此元素将显示为行内元素
block块级元素
inline-block行内块元素
意思是在同一行内显示多个，有宽高度
比如input img
none该元素将被隐藏，不显示，也不占用页面
空间
外边距合并
外边距合并只出现在垂直外边距
出现情况：
1.两个并列关系的上下盒子
合并后这两个盒子会以外边距最大的为准
2.父子级盒子外边距合并
合并后这两个盒子会以外边距最大的为准
若需要小盒子距离大盒子有个上外边距
解决办法：给大盒子来个上外边框就可以
@@@【无法理解】
第五章 列表与超链接
列表分为 无序列表，有序列表，定义列表
无序列表
顺序不分前后，
<ul>
<li></li>【用于描述具体的列表项】
<li></li>
</ul>
用于定义无序列表。
无序列表的type属性值
disc(默认值)黑圈
circle白圈
square黑方块
有序列表
即为有排列顺序的列表
<ol>
<li></li>
<li></li>
</ol>
无序列表的相关属性
type属性值:1 a i/I
stare:数字
value:数字
定义列表
以百度百科为例，定义列表通常是图文混排
<dt></dt>标记中插入图片
<dd></dd>标记中放入对图片解释说明的文字
<dl>
<dt>名词1</dt>
<dd></dd>
<dd></dd>
</dl>
列表嵌套
在列表项中可能包含若干子列表项
列表样式
list-style-type控制无序列表和有序列表的项目符号
list-style-image 设置项目图像
基本格式ul{list-style-image:url(图片路径);}
list-style-position列表项目符号的位置
综合属性
5.3超链接标记
<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像</a>
锚点连接
<a href="#id名">连接文本</a>
‘’‘
<h3 id="one">连接文本</h3>
5.4链接伪类控制超链接
伪类不是真正意义上的类，它的名称是由系统定义的，通常由标记名，类名或id名加“：”构成
超链接标记的<a>伪类
第六章 HTML表单
表格标记
创建table表格，离不开
<table></table>定义一个表格
<tr></tr>定义表格中的一行
<td></td>定义表格中的单元格
table标记属性
在表格中创建一个table,相当于
<tr>标记属性
table标签只能控制行的高度，不能控制表格的宽度
<td>标记属性
注意：
当对某一个<td>标记应用width属性设置宽度时，该列中所有的单元格均会以设置的宽度显示
当对某一个<td>标记应用height属性设置宽度时，该列中所有的单元格均会以设置的高度显示
<th>标记
<th></th>标记用来设置表头，其文本默认加粗居中显示
为了更好的区分网页的头部，主体页脚
通常会设置<thead></thead><tfoot></tfoot><tbody></tbody>
这个只是为了给网页的结构标记，方便更好理解网页内容
但表格的实际效果并不会改变
CSS控制表格样式
表单
类似注册页面，就是表单
表单控件
表单控件是表单的核心
创建表单
用<from></from>标记来创建表单
method一般使用post,
表单控件
input控件
textarea控件
可以创建多行文本输入框
select控件
使用select控件定义下拉菜单
CSS控制表单样式
使用CSS可以轻松控制表单控件的样式，主要体现在控制表单控件的 字体，边框，背景 和 内边距 等。
第七章 浮动与定位
元素的浮动
所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素指定的位置的过程。
选择器{float：属性值；}
float属性值
注意！为了避免浮动对其他元素影响，需要清除浮动
overflow属性
元素的定位
元素的定位包括定位模式和边偏移两部分。
定位模式
边偏移
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
