HTML学习20Word格式文档下载.docx
《HTML学习20Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《HTML学习20Word格式文档下载.docx（17页珍藏版）》请在冰豆网上搜索。
H1:
一级标签
H6:
六级标签
HTM内容
html>
<
head>
title>
页面标题<
/title>
!
--外部样式文件-->
linktype="
text/css"
rel="
stylesheet"
href="
css文件路径"
/>
styletype="
内嵌样式
/style>
/head>
body>
/body>
/html>
Body属性
bodybgcolor="
背景颜色"
background="
背景图片"
Img
imgsrc="
图片的路径"
width="
宽度"
height="
高度"
alt="
描述"
align="
图片周围文字的对齐方式"
alt:
图片路径错误时，显示文字，图片路径正确时正常显示图片鼠标移到图片上时提示信息
images/bg.jpg"
200"
这是一张图片"
images/错误路径.jpg"
marquee跑马灯
direction:
方向up|down|left|right
scrolldelay:
多少毫秒移动一次（1000毫秒=1秒）
scrollamount:
每次移动多少像素
marqueedirection="
方向"
scrolldelay="
时间"
scrollamout="
步长"
要移动的内容
/marquee>
up"
30"
scrollamount="
100"
内容滚动标签
特殊符号
&
nbsp;
空格
lt;
小于
gt;
大于
quot;
引号
copy;
版权符号
Pre
*
**
*******
pre>
/pre>
超链接
用法一:
页面之间的跳转
ahref="
要跳转的页面路径"
文字<
/a>
font.html"
点此跳转<
用法二:
锚标记效果
aname="
锚名称"
使用a标签定义锚标记
#锚名称"
跳转到锚标记处<
用法三:
启动电子邮箱发送邮件
mailto:
电子邮箱地址"
联系我们<
xxxx@"
错误的写法:
mailto:
xxx@
//xxx@
atarget="
打开目标"
target:
_self:
在本页面打开（默认的）
_blank:
在新窗口打开
_parent:
在父窗口打开
_top:
在整个框架打开
框架页的name:
在指定的框架页打开
framename="
frameName"
a.html"
target="
在框架页面打开<
hr水平线
hrcolor="
长度（宽度）"
size="
粗细"
noshade="
noshade"
/>
hrnoshade="
noshade="
是否有阴影效果
#FF0000"
5"
table表格
tr行
td单元格
th表头
caption表格标题
3行3列的表格
table>
tr>
td>
/td>
/tr>
/table>
table
bgcolor="
width="
height="
bordercolor="
边框颜色"
border="
边框粗细"
cellpadding="
单元格填充"
cellspacing="
单元格间距"
background="
align="
对齐方式"
align比较特殊是直接将表格布局对齐
caption>
表格的标题（表格的外面）
th>
表头tablehead（把内容居中并字体加粗）
这是表格标题<
/caption>
这是表头<
/th>
tr
对齐方式（文字、图片内容）"
td
rowspan="
跨行"
colspan="
跨列"
valign="
垂直对齐方式"
内容的水平对齐方式"
注意练习跨行和跨列
表单
接收用户输入的数据并提交到服务器的一种界面
fromaction="
提交地址"
method="
提交方式（get和post）"
get:
显示提交提交时数据会显示在地址栏上
不安全（有提交大小限制）
post:
隐式提交提交时不会显示出数据
安全（没有提交大小限制）
注意Post和Get之间的区别
name属性是由服务器使用的
告知服务器提交的数据是做什么用途的
inputtype="
text"
name="
userName"
当服务器得到该数据时则知道数据是userName（用户名）
每个表单控件都有name属性
-----------------------------------
表单元素
input>
通过设置不同的type值来显示出不同的效果
文本框
数据名称"
value="
默认值"
相同（因为默认type的值是text）默认文本框
inputname="
密码框
password"
maxlength="
最大长度"
readonly="
readonly"
userPassword"
只读（只能看不能修改）
maxlength="
只能输入多少个字
单选按钮
在多个选项中只能选择一个
radio"
sex"
值"
关键点要让多个单选按钮产生互斥必须将它们的name属性设置为一样的（作为一组）
checked="
checked"
男"
女"
checked="
默认选中
复选框
可以选择多个
名字不相同（可选）
checkbox"
"
文件上传
用于上传文件
file"
face"
普通按钮
button"
按钮上显示的文本"
检查帐号是否存在"
bottom（下）
button（按钮）
下拉菜单
selectname="
optionselected="
selected"
每项的值"
菜单项<
/option>
optionvalue="
/select>
selected="
默认选中的项
多行文本框
textarearows="
显示多少行"
cols="
显示多少列"
值是本标签包围在里面的
/textarea>
重置按钮
reset"
重新再来"
所有按钮的value都是按钮上要显示的文字
提交按钮
提交按钮分两种
1.普通提交按钮
submit"
文字"
普通提交按钮
2.图片提交按钮（不等于图片按钮）
image"
src="
图片路径"
普通图片按钮是通过css样式修饰出来的
和图片提交按钮是两种不同的事物
重要区别
提交按钮可以提交数据
普通按钮是不能提交数据的
提交按钮必须和form表单一起使用
普通按钮是可以单独使用的
Css
css样式定义分三种
1.内嵌样式
....
这里写样式
2.行内样式
标签style="
样式定义"
/标签>
3.外部样式
1.定义*.css样式文件
2.在页面中使用
导入外部样式文件
样式定义区别
内嵌样式和外部样式定义的样式可以反复使用
而行内样式只能使用在标签中无法反复使用
divstyle="
color:
red"
/div>
必须在写一次
-------------------------------
.red{
color:
red;
}
divclass="
css优先顺序
优先使用行内样式
其次内嵌样式
最后外部样式
-----------------------------------------
选择器分三种
标签选择器
标签名{
样式定义
所有的div都会使用该样式（比较绝对）
div{
.类选择器
应用时需要通过class属性对样式进行调用
类样式可以有选择的使用
使用效果
div>
不用效果
#Id选择器
#red{
通过id对样式进行调用
可以自由选择
divid="
div>
#000000;
字体颜色
background:
url（:
背景图片路径）或背景颜色;
既可以设置:
背景图片又可以设置背景颜色
background-color:
背景颜色;
background-image:
背景图片
background-repeat:
设置背景图片的重复
repeat（默认）水平和垂直都重复
no-repeat不重复
repeat-x水平重复
repeat-y垂直重复
-------------------------------------
border:
1pxsolid颜色;
设置四边边框粗细、边框效果、边框颜色
顺序没有要求
设置各边的边框
border-left:
border-right:
border-top:
border-bottom:
border-left-width:
边框粗细;
border-left-color:
边框颜色;
border-left-style:
边框样式;
可以任意组合
border-top-width:
border-top-color:
border-top-style:
设置四边的颜色
border-color:
边框颜色
border-style:
边框样式
border-width:
边框粗细
--------------------------------------
border设置边框
left|right|top|bottom边框方向
color|style|width边框特征
进行任意组合
font-family:
字体类型
font-size:
字体大小
font-style:
正常或倾斜
font-weight:
粗体
间距
margin:
上右下左;
margin-top:
100px或20%
margin-right:
margin-bottom:
margin-left:
填充
padding:
上右下左;
padding-top:
padding-right:
padding-bottom:
padding-left:
浮动
float:
left或right;
左右浮动
clear:
bothleftright;
清除浮动
text-decoration:
文字的下划线上划线等效果
text-align:
水平对齐方式
vertical-align:
垂直对齐方式
list-style:
列表效果针对（ul和ol）
框架集
frameset框架集
frame框架页
要实现框架效果页面数量等于框架页数量+1
总页面数=框架页数+1（主框架）
在使用frameset时不能写到body中
framesetrows="
100,*"
framesrc="
top.html"
framesetcols="
300,*"
left.html"
right.html"
/frameset>
frameset属性
rows按行拆分
cols按列拆分
bordercolor:
framespacing:
框架页的间距
frameborder:
是否有边框yes|no|1|0
frame属性
scrolling:
是否有滚动条yes|no|1|0
noresize="
noresize"
是否可以拖动大小
src:
默认显示的框架页
name:
框架页的名字
leftFrame"
page1.html"
在框架页中打开页面
升级会员 