初入门 HTML

---恢复内容开始---

1.h标签(标题标签）
　　h1~h6
2.br标签（换行标签）
　　<br/>
3.hr标签(水平线标签）
　　<hr/>
4.strong（加粗）
　　em（倾斜）
5.特殊
　　&nbsp；（空格）
　　&gt；(大于)
　　<（小于）
　　"（引号）
　　&copy；（版权符号）
6.图片标签img
　　<img src="" alt="" title="" width="" height="">
　　　　src:图片的地址（路径+图片名称)
　　　　alt:图片找不到时的提示信息
　　　　title：当鼠标悬停在图片上的提示信息
　　　　width：宽度.（px）
　　　　height：高度.（px）
注意：怎么找图片
　　　　第一步：确定当前html的位置
　　　　第二步：如果图片在同级目录直接写图片名称
　　　　如果图片在上级目录就用../图片名称
　　　　如果是在下级就用目录名称/图片名称
7.超链接
　　<a href=" target="">跳转到***</a>
　　href:要跳转的文件路径名称
　　target：_self(目标页面覆盖当前页面）
　　_blank(目标页面弹出新的框来显示）

8.锚链接
　　创建步骤
　　第一步：创建锚点 <a name=“ding”>xxx</a>
　　第二步：访问锚点链接 <a href=“#ding”>访问锚点</a>
9.功能性作用

　　<href="mailto:邮箱地址”></a>

10.第二章
11.无序列表
　　<ul>.......声明无序列表
　　<li></li>......列表项
　　</ul>
补充：type属性：circle,square...
12.有序列表
　　<ol>.........声明有序列表
　　<li></li>.......列表项
　　</ol>
补充：type属性：1,a,A....

13.定义列表
　　<dl>......声明定义列表
　　　　<dt></dt>......列表项内容声明
　　　　<dd></dd>.....列表项内容
　　</dl>
14.表格
　　<table>...表格标签...
　　　　<tr>...行标签...
　　　　　　<td></td>...单元格
　　　　</tr>
　　</table>

table属性： align水平 left 左对齐 center 居中对齐 right 右对齐
valign 垂直： top 顶端对齐 middle 居中对齐 bottom 低端对齐 baseline 基线对齐
callspacing：单元格与单元格之间的距离 cellpadding：单元格边界与单元格文字之间的距离
bgcolor：背景颜色
td属性：colspan：表示这一单元格占几格 rowspan：跨行

15. 框架标签
　　<frameset> 　　　　　　　　 <!+/....框架标签....>
　　<frame src="html的路径加名称"></frame> 　　　　 <!....引用html标签....>
　　</frameset>

16.刷新框架指定区域
　　第一步：在指定的frame中指定name属性值
　　第二步：在超链接部分指定target的值为name的属性值
17.内联框架<iframe>
　　<iframe src="html路径+名称" frameborder="0|1" scrolling="yes|no >

　　.......

　　frameborder:0表示无边框 1表示有边框
　　scrolling:yes表示有滚动条 no表示没有滚动条

刷新内联框架步骤
　　第一步：在指定的feame中指定name属性值
　　第二步：在超链接部分指定target的值为那么的属性值

第三章：表单
1.语法
　　<form action="" method="get|post>
　　　　<p><input type="" name="" value=""/></p>

　　</form>
　　post：规定如何发送表单数据

2.type属性的值
　　text:表示输入框（文本框）
　　password：表示密码框
　　submit：表示提交按钮
　　reset：表示重置按钮
　　radio：单选按钮
　　checkbox：复选按钮

3.下拉框
　　<select name="">　　　　　　　　　　　　　　 
　　　　<option value=""></option> 　　　　　　　 
　　</select>

注意：

　　a.默认选中<option selected="selected"></option>
　　b.radio,checkbox的默认选中是checked="checked"

4.图片按钮
　　<input type="image" src="图片路径+名称"/>
5.文本域
　　<input type="file"/>
注意：提交方式是post，并且在form中指定enctype="multipart/form-data"
6.多行文本域
<textarea cols="多列" rows="多行"> </textarea>
7.域
　　<fielsdet> 　　　　　　　　　　　　 //域标签
　　　　<legend>xxxx</legend> 　　 //域标题
　　　　<input type="xxx">
　　</fielsdet>
8.表单元素标注
　　<label for="id属性值"></label>标注
步骤：
　　第一步：给指定的标签加上id属性
　　第二步：在label中加上for="id的属性的值"
9.只读和禁用
　　只读：readonly="readonly"
　　禁用：disabled="disabled"

第四章css
1.css的语法
1.位置

　　<head>
　　　　<style type="text/css"
　　　　//css代码
　　　　</style>
　　</head>
2.语法
　　选择器{ 属性值1：属性值1；
　　属性值2：属性值2；
　　}
　　例：
　　h1{ 　　font:size:12px; --字体大小　　color：red； --字体颜色
　　注意：多个属性用分号分隔
2选择器
1.标签选择器
　　　语法：
　　　　标签名{
　　　　　　...
　　　　}
2.类选择器
　　语法：
　　　　class属性值{
　　　　　　....
　　　　}
　　步骤：
　　　　第一步：给指定的html标签加上class属性
　　　　第二步：在stlye中写
　　　　　　class属性值{
　　　　　　　　.....
　　　　　　}
3.id选择器
语法：
　　#id属性值{
　　.....
　　}
步骤：
　　第一步：给指定的html标签加上id属性
　　第二步：在style中写
　　#id属性值{
　　　　....
　　　}
3.引用样式的方法
1.行内样式
　　使用style属性引入样式
　　例：<h1 style="font-size: 60px;color: chartreuse;">进进进进</h1>
2.内部样式表
　　在head中写style
　　例：h1{
　　　　xxx
　　　　}
3.外部样式表
　　把css代码保存在css结尾的文件中（层叠样式文件）
　　把css引入html

引入方法有两种：
第一种：链接方式
　　<link rel="stylesheet" href="文件路径" type="text/css"/>
第二种：导入方式
　　<style>
　　@import url("文件路径");
　　</style>
1.优先级
　　行内样式>内部样式>外部样式（就近原则）
　　id选择器>class选择>标签选择器
2.交集选择器
　　标签选择器（class选择器|id选择器）{
　　....
　　}
3.并集选择器
　　选择器1，选择器2，选择器3，选择器4....选择器n{
　　...
　　}
1.字体样式
　　font-family:字体类型
　　font-size:字体大小
　　font-weight:字体粗细（bold）
　　font-style:字体倾斜(italic)
　　font:倾斜粗细大小类型
2.文本样式
　　color：颜色
　　text-align:文本对齐方式
　　text-indent:文本缩进
　　line-height：行高
　　text-decoration：装饰
　　vertical-align：垂直对齐方式
注意：vertical-align用于td中
3.超链接伪类
　　a:link：表示没有访问
　　a:visited：表示被访问后
　　a:hover：鼠标悬浮
　　a:active：鼠标按下了松开
填写顺序：link>visited>hover>active
4.背景样式
　　background-color：背景颜色
　　background-image:url（图片路径）
　　background-repeat:图片平铺方式
　　background-position:图片的位置
　　简：background：颜色，图片位置，平铺方式
5.列表样式
　　list-style-type:列表样式
　　list-style-image:url（图片路径）
　　list-style-position:位置（inside|outsid）
　　list-style：样式图片位置

第六章盒子模型
1盒子模型属性
　　width：宽
　　height：高
　　border：边框
　　padding：内边框
　　margin：外边框
2边框
　　border：简写
　　border-color:颜色
　　border-边框宽度
　　border-style:边框风格
注意：边框可以分为上，下，左，右可以分别设置值

3外边距
　　margin:外边距
　　margin-left:左外边距
　　margin-top:上外边距
　　margin-right：右外边距
　　margin-bottom：底外边距

4内边距
　　padding:内边距
　　padding-top：上内边距
　　padding-left：左内边距
　　padding-right：右内边距
　　padding:-bottom：底内边距

5 display
　　display:none:表示的隐藏元素
　　display:block；块级元素（显示）
　　display:inline；内联元素（显示）

第七章：浮动
1浮动
　　float：left，right，none，
　　注意：a.浮动元素会把当前的块级元素变成内联元素
　　b.不在标准文档流中.（不会被普通元素排版）
2清除浮动
　　clear：both（清除左右浮动），
　　left（清除左浮动），
　　right（清除右浮动），
3溢出处理
　　overflow：none（moren）
　　hidden（隐藏）
　　scroll（滚动）
　　auto（自动（滚动效果））
　　注意：可以通过overflow：hidden设置浮动元素的父元素
　　　　的高度，使它包裹整个浮动元素.

第八章
1 元素定位（position）
　　static：默认
　　relative：相对定位
　　absolute：绝对定位
　　fixed：固定（建议不要使用，部分浏览器必兼容）
　注意：a.相对布局和绝对布局如果它的直接父标签是body，那么相对
　　位置和绝对位置的起始点不同，如果他们的直接父标签是div，那么
　　他们的起始点都在父标签的左上角
　　　　b.绝对布局都是从父标签的左上角开始，
　　相对布局遵从标准文档流格式。
　　　　c.绝对布局一定设置top或者left才会生效。
2重叠关系（z-index）
　　默认关系为0
　　值可以是任何整数
　　值越大，位置在越前面
3透明度
　　opacity：0~1值越小越透明

---恢复内容结束---