做为一名想学习前端技能的小白，仅仅看视频是不够的，更要用真实案例去实践，才能真正学到，这是我最近几天整理的小笔记，期间也写了几个小案例，包括：用div堆积木、写三角形等等。在篇幅的最后会附上截图，如果有写的不对的地方，还请大家多多指教。。。
一、什么是HTML
可扩展超文本标记语言，是HTML语言向XML过渡的一种语言
二、XHTML页面结构
1.定义文档类型
DOCTYPE.文档类型，该元素的名称和属性必须大写
2.XHTML 1.0提供的三种DTO文档类型
(1)过渡型(Transitional):允许继续使用HTML4的元素
(2)严格型(Strict):不能使用任何描述性的元素和属性
(3)框架型(Frameset):针对的是框架页面设计
3.声明命名空间
<html Xmlns=”http://www.w3.org/1999/xhtml”>
Xmlns, 命名空间，名字空间，名称空间
4.meta头元素
本标签用于网页的<head> </head>中，有属性name和http-equiv.
声明一种合适的编码语言，页面上的文本内容才能在浏览器中正常显示。
编码语言声明的代码如下：
<meta http-equiv=”content-type” content=”text/html; charset=gb2312”/>
Gb2312是简体中文在页面中常用的语言编码。当在制作不同语种的页面时，要声明不同的语言编码。
例中：英文中可以使用”ISO-8859-1” “UTF-8”
(1)关键字(keywords)：是为搜索引擎提供的关键字
结构：<meta name=”keywords” content=”关键词1, 关键词2, …”>
说明：各关键词间用” , ”分隔开。
(2)简介(description)：简介用来为搜索引擎声明网站的主要内容。
结构：<meta name=”description” content=”网站简介”>
(3)站点作者信息(author)：站点作者信息是为站点声明作者。
结构：<meta name=”author” content=”八维”>
(4)站点版权信息(copyright)：站点版权信息时为站点声明版权
结构：<meta name=”copyright” content=”陈刚所有”>
(5)刷新页面：<meta http-equiv=”refresh” content=”n;url=http:/19/urlink”>定时让网页在一定的时间n内，跳转到页面http://yourlink;
三、XHTML规范
1.区分大小写；
2.正确嵌套所有元素；
3.元素必须要结束；空标签在结束方法<标记 />
4.属性必须加上双引号；
5.明确所有属性的值；
6.特殊字符要用编码表示：©
7.使用页面注释: <!-- -->
8.推荐使用外部链接来调用样式及脚本
四、XHTML基本语法
1.在文档开始要定义文档类型
2.在根元素中应声明命名空间
3.所有标签需闭合的，空标签加” / ”来关闭
4.所有属性值必须用””括起来
5.所有标签必须合理嵌套
6.所有的属性都必须被赋值
7.所有的元素和属性都必须小写
8.注释语句：<!-- -->
五、XHTML常用元素: div, p, span, ul li, dl dt dd, a, img, h, strong, em.
1.div
<div> 划分结构 规划网页 </div>
2.p
<p>大段的说明性文字，用来写网页中的内容页</p>
P { line-height:1.5; text-indent:2em; }
3.Span
<span> 没有任何作用，只是用来挂css样式（处理一小段文字） </span>
4.ul
<ul>
<li> 一级菜单 </li>
<li> 一级菜单 </li>
<li> 导航和新闻列表 </li>
<li>
<ul>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
<li> 二级菜单 </li>
</ul>
</li>
</ul>
5.dl
<dl>
<dt> 图文混排 </dt>
<dd> 可以是左图右字，也可以是上图下字 </dd>
</dl>
<dl>
<dt> <a href=”http://www.baidu.com” target=”_black”> </dt>
<dt> <a href=”http://www.baidu.com” target=”_new”> </dt>
<dt> <a href=”http://www.baidu.com” target=”_parent”> </dt>
<dt> <a href=”http://www.baidu.com” target=”_self”> </dt>
<dt> <a href=”http://www.baidu.com” target=”_top”> </dt>
</dl>
6.h
<h1> 一个页面当中只能有一个 </hl>
<h2> 用来做标题性的文字，注意：不能使用默认字体大小 </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
7.加粗和倾斜
<strong> 加粗 </strong>
<em> 倾斜 </em>
备注:当标签用就是倾斜；在文本中用于首行缩进时，就是单位
六、css基本语法
层叠样式表，用于控制网页样式的一种标记性语言
1.使用css可以简单概括为：
(1)选择符
(2)选择属性
(3)定义属性值；
2.每个css样式都必须由两部分组成：
3.语法
选择符selecor {属性property：属性值value;}
4.说明：
(1)属性必须要包含在{ }号之中
(2)属性和属性值之间用“：”分隔
(3)当有多个属性时，用“；”进行区分
(4)在书写属性时，属性之间使用空格换行等，并不影响属性的显示
(5)如果一个属性有几个值，则每个属性值之间用空格分隔开
七、样式表的定义
1.内联样式（嵌入式样式，行间样式表）
语法：<标记 style=”属性:属性值 属性:属性值;”> </标记>
2.内部样式
语法：<style type=”text/css”>
选择符{属性:属性值; 属性:属性值;}
</style>
说明：①内部样式表必须定义在<head>和</head>;
②页面所有样式都可以写在<style>和</style>之间
3.外部样式
(1)使用link元素
<link rel=”stylesheet” href=”css文件路径” type=”text/css”>
说明：rel=”stylesheet”指这个link和href之间的关联样式为样式表文件
type=”text/css”指文件类型是样式表文本
(2)使用@inport
<style type=”text/css”> @import url{css文件路径}; </style>
说明: @import的调用方法也可以写在css文件中，用来调用其他的css
八、选择符
1.通配符
语法:*{属性:属性值;} （如：text{font-size:15px;}）
说明：通配选择符的写法是”*”，其含义就是所有元素。
2.类型选择符
语法：元素名称{属性:属性值;}
说明：
1) 类型选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符，例如:body、div、p等；
2) 所有的页面元素都可以作为类型选择符。
用法：
1) 改变某个元素的默认样式
ul{margin:0; list-style:none;}
2) 当统一文档某个元素的显示效果时
body{font-size:12px;line-height:18px;}
3.ID选择符
语法：#ID名{属性:属性值;}
应用：<div id=”id选择符名称”></div>
说明：
1) id选择符的语法格式是”#”加上自定义的id名称
2) 当使用id选择符时，应先为每个元素定义一个id属性，<div id=”red”></div>
3) 一个id名称只能对应于文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象
4.class选择符
语法：.类名{属性:属性值;}
应用：<div class=”类选择符名称”> </div>
说明：
1) 类选择符的语法格式是” . ”加上自定义的类名称
2) 当我们使用类选择符时，应先为每个元素定义一个类属性，如<div class=”red”> </div>
注意：一个标记上可以同时使用多个类，语法为<标记 class=”类名 类名”>，即：在一个标记上同时使用多个类时，类名与类名之间用空格隔开
5.群组选择符
语法：选择符1, 选择符2, 选择符3{属性: 属性值;}
说明：当多个选择符应用相同的样式，可以将选择符用英文逗号分隔的方式，合并为一组
6.包含选择符
语法：选择符1 选择符2{属性:属性值;}
说明：选择符1和选择符2之间用空格隔开，含义就是所有选择符1中包含的选择符2
7.伪类选择符
语法：
1) a:link{属性:属性值:}
2) a:visited{属性:属性值:}
3) a:hover{属性:属性值:}
4) a:active{属性:属性值:}
说明：
- 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中
- 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正确顺序如下：a:link, a:visited, a:hover, a:active,错误的顺序有时会使超链接的样式失败
- a:link可以定义未访问过的超链接样式，有些浏览器会把它解析为任何超链接，包括访问过的和未访问过的，因此，我们可以使用a选择符样式来代替a:link选择符样式
- 使用与超链接相关的伪类选择符时，应为a元素定义href属性
十、关于文本的css样式
1.文本大小：{font-size:12px;}
说明：
1) 属性值为数值时，必须给属性值加单位，属性值加0除外
2) 单位还可以是pt, 9pt(点数)=12px;
3) 使用绝对大小关键字
4) 为了减小系统间的字体显示差异，IE浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值
5) 1em=16px
0.75em=12px;
2.文本颜色：
{color:#f5e5f5;}
3.文本字体：
{font-family:字体1,字体2,字体3;}
- 当字体是中文字体时需加引号
- 当英文字体中有空格时需加引号如”Times New Roman”;
- 中文默认体为宋体或新宋体，英文字体默认为Arial
4.加粗
{font-weight:bolder/bold/normal;}
说明：
1) 字体的粗细分为9个等级，100-900，100最轻，900最重
2) 一般400=normal, 700=bold
5.倾斜
{font-style: normal(无) / italic(倾斜) / oblique(倾斜);}
说明：italic和oblique都表示倾斜，后者幅度更大，但一般浏览器对它们的区分不是很明显
6.首行缩进
{text-indent:24px;}{text-indent:2em}
说明：
- text-indent可以取负值
- Text-indent属性只对第一行起作用，不受换行符<br/>影响
7.水平对齐方式 {text-align:left/right/center;}
说明：text-align属性作用于块元素
8.垂直对齐方式
{verlical-align:top/bottom/middle;}
9.行高
{line-height:normal/数值;}
说明：
- 当行高=容器高时，可实现垂直中齐效果
- 当行高<容器高时，可实现文本内容在垂直中齐以上任意位置的定位
- 当行高>容器高时，将撑大容器
10.字间距
{letter-spacing:10px;}控制英文字母和汉字的字距
{word-spacing:10px;}控制英文单词字距
11.下划线
text-decoration: none / overline / underline / line-through
去掉下划线 上划线 下划线 删除线
十一、cursor属性用来定义当鼠标在元素上悬念时鼠标显示的样式
cursor: auto / crosshair / hand / move / help / wait / text / pointer
默认 + 手 十字箭头 帮助 等待忙 Ⅰ 手
说明：hand和pointer同为手的状态，但pointer兼容性很强
十二、背景的设置
1.背景颜色
语法：background-color:#ff0000;
2.背景图片的位置
语法：background-image:url(路径及全称)
3.背景图片不平铺
语法：background-repeat:no-repeat/repeat/repeat-x/repeat-y
4.背景图片的位置
语法：background-position: right/loft/center水平方向的对齐方式
background-position: top.bottom垂直方向的对齐方式
说明：
1) 属性取值的数目是两个，前者代表横向位置的值，后者代表纵向位置的值
2) Background-position属性所使用的两个值之间用空格分隔开
5.背景图的固定
语法：background-attachment: scroll(滚动) / fixed(固定)
6.各属性的缩写
语法：bakcground:背景颜色/背景图像/背景位置/背景重复/背景附件
注意：各个值的顺序是可以随意交换的
十三、列表
1.有序列表
<ol>
<li> </li>
<li> </li>
</ol>
2.无序列表
<ul>
<li> </li>
<li> </li>
</ul>
3.自定义列表
<dl>
<dt> 标题 </dt>
<dd> 正文 </dd>
</dl>
4.定义列表符号样式
(1)list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(无)
常用的几个值的含义介绍：
|
disc: 实心圆 |
circle: 空心圆 |
square: 实心方块 |
|
decimal:阿拉伯数字 |
lower-roman小写罗写字 |
upper-roman大写罗马字 |
|
lower-alpha小写英文 |
upper-alpah大写英文 |
none不使用项目符号 |
(2)使用list-style-position：属性
结构：list-style-position: outside / inside
项目符号放置在 文本以内 文本以内
(3)使用图片作为列表符号:list-style-image:url(路径及全称)
(4)缩写
list-style:list-style-type/list-style-image/list-style-position
十四、浮动属性详解
语法：float:none / left / right
注意：相邻的多个元素会按照出现的顺序和各自的属性值排列在同一行，直到宽度超出包含它们的容器宽度时才换行显示
十五、XHTML元素分类
1.块状元素(block element):
块元素是指div/dl/from/h1-h6/ol/ul/li/p等这样的元素
特点：每个块元素都是以新的一行开始，一般可以包含其他的块元素和内联元素，可以设置宽和高等。（在css中，可以给块元素加上浮动等属性，控制块元素的显示位置，而不是总是以新的一行开始）
2.内联元素(inlink element)：
内联元素是指如:a/b/br/em/i/img/input/span/strong/sub/sup等这样的元素
特点：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示（内联元素可以做其他元素的子元素，没有固定的形状，定义它的width和height属性无效，但它会遵循模型基本规则，如可以定义边界、补白和边框，可以定义背景，它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定）
3.可变元素
转换元素：display:block/inline/none; display:inline-block;
说明：
- 在内联元素中，加入display:block;即可成为块状元素，设定宽高起作用
- 在内联元素中，加入display:inline-block;在不成为块状元素的情况下，也能起到块状元素的作用
- 在块状元素中，加入display:inline;可成为内联元素。给设定的宽高将不起任何作用
十六、边框
border,网页中很多修饰性线条都是由边框来实现的
1.边框样式属性
结构：border-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;
|
none: 没有边框即忽略所有边框的宽度 |
|
|
hidden: 隐藏边框(IE不支持) |
|
|
dotted: 点线 |
groove : 3D凹槽 |
|
dashed : 虚线 |
ridge : 菱形边框 |
|
solid : 实线 |
inset : 3D凹边 |
|
double : 双线 |
outset: 3D凸边 |
|
备注：加下划线部分 这四个属性是和边框颜色属性有关，并且IE浏览器并不以能正常显示 |
|
2.边框宽度
结构：border-medium/thin/thick/长度值
|
medium: 默认值 |
thin: 比默认值细 |
|
thick: 比默认值粗 |
长度值：可以使用所有长度值 |
|
注意：使用medium、thin、thick时，并没有一个确定的值，其显示效果和用户的设置有关，所以建议使用长度值 |
|
3.边框颜色
结构：border-color:颜色值
4.边框的综合定义
在css中，可以使用border属性定义边框的所有属性，语法结构如下：
border:border-style; border-width; border-color;
其中，各个属性的顺序可以随意交换，每个属性之间用空格分隔
5.单侧边框的综合定义
该属性包含4个具体属性：
|
border-top:属性 |
说明： 同border属性一样，其中每个属性的顺序可以随意交换，每个属性间用空格分隔开 |
|
border-right:属性 |
|
|
border-bottom:属性 |
|
|
border-left:属性 |
十七、边界属性
margin,在元素外边的空白区域，被称为边界
语法：margin:auto / 长度值 / 百分比值
当取值为百分比值时是相当于元素所在的父元素的密度
1.水平auto值：达到水平方向居中显示
2.垂直auto值：垂直的auto值，一般会被处理为0（即没有边界）
十八、补白
padding,在元素内容与边框之间的空白边框，也称填充
结构：
|
padding:长度值/百分比值（百分比是相对于父元素来说的） |
|
|
padding-top: 属性 |
padding-bottom: 属性 |
|
padding-left: 属性 |
padding-right: 属性 |
|
总结：
|
|
十九、关于元素宽和高的定义
元素的总宽度=左边界+左边框+左填充+右填充+右边框+右边界
元素的总高度=上边界+上边框+上填充+下填充+下边框+下边界
说明：凡是加在了当前div中的属性，都归当前div管；规定了宽高的div, 如果还加了padding值的话，必须从宽高里减去padding的值
二十、定位
position: absolute | relative
定位 绝对 相对
定位属性只能对块元素定义：
static: 不定位（默认）
fixed: 固定定位，固定在视图窗口中，IE不支持
absolute: 绝对定位，将元素从文档流中拖出来，然后使用left/right/top/bottom属性对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素，则相对于body元素，即根据浏览器窗口
relative: 相对定位，它通过left/right/top/bottom属性对于其原位置进行定位，原位置还保留不变
1.绝对定位
层叠定位属性（即z-index属性）用来定义元素层叠的顺序
结构：z-index:”数字值”
注意：z-index属性的取值为没有单位的数字值，它的默认值是0，值越大越靠前显示
2.相对定位
3.不占位的相对定位
注意：父元素必须设定有效的宽高值，否则将参照父元素中最后一个元素的右上角位置进行定位（常用的定位方法）
二十一、表单<from></from>是块元素(block)
1.块元素
有固定大小（可直接设置宽width和高height）
常见的块元素：div, ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd.
表单的属性：3个
value属性值根据type类型的不同表达的意义也不一样
当type类型为hidden和possword时它代表了标签的初始值
当type类型为botton, reset和submit时，它代表了标签的显示内容
当type类型为checkbox, image, rodio时他的标签
2.表单的内部结构
(1)文本框
- 文本框(单行文本框)：<input type=”text” name=”user”/>
- 密码框<input type=”password” name=”pwd”/>
- 文本区域(多行文本框)<textarea></textarea>
(2)按钮
- 提交：<input type=”submit” value=”提交”/>
- 重置按钮：<input type=”reset” value=”消除”/>
- 交互按钮：<input type=”button” value=”验证”/>
(3)单选按钮及复选框
- 单选按钮：<input type=”radio” name=”sex”/>
- 复选框：<input type=”checkbox” name=”sport”/>
(4)列表菜单
<select></select>
表单项：<option>北京</option>
<textarea> </textarea>
Checked=”checked” (初始值设定)
(直接写在input)
当鼠标经过文本框内容被选中onmousever=”this.select();”
当鼠标被点击时清空内容onclick=”this.value=’ ’ ”;
实例一：用div写三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>triangle</title>
<style>
.sanjiao{0px;height:0px;
border-bottom: 100px red solid;
border-top: 100px yellow solid;
border-left: 100px blue solid;
border-right: 100px green solid;
margin-bottom: 50px; }
.sanjiao-2{0px;height:0px;
border-bottom: 100px #fff solid;
border-top: 100px #fff solid;
border-left: 100px #f85087 solid;
border-right: 100px #fff solid;}
</style>
</head>
<body>
<!--四个三角形-->
<div class="sanjiao"></div>
<!--四个三角形，只显示一个-->
<div class="sanjiao-2"></div>
</body>
</html>
实例二：用div堆积木
