1.背景:HTML不是变成语言,一种描述性的标记语言,全称是超文本标记语言,其中还有另一种XHTML,现在常用的HTML版本基本上是
HTML4.01和HTML5
2.编写工具:windows记事本、Editplus、notepad++、Dreamweaver....
3.编写规范:文件的后缀名为html或者htm
二、HTML的基本的标签和结构框架
1.基本框架
<html>
<head>
<title>test</title>
</head>
<body>
<marquee>welcome to huaxin</marquee>
</body>
</html>
其中head标签是头部标签基本上是标题,还有设置代码格式和搜索引擎关键字等等
body是整个页面的主体部分,网页的可视化部分
2.基本标签介绍:
<p></p> 为段落标记标签
<br> 换行标记标签
<hr> 分割线标记标签
<div></div> 区域布局标记标签
<marquee></marquee> 文字滚动标记标签
<center></center> 居中标记标签
<strong><B> 字体加粗
<I><VAR><CITE><DFN><ADDRESS> 字体添加倾斜效果
<H1><H2><H3><H4><H5><H6> 字体由大到小、由粗到细
<form><form> 数据提交标记标签
<ol><li> 有序清单
<ul><li> 无序清单
<MENU><DIR> 无序清单
<DL><DT><DD> 定义清单,仅仅只是列表清单,不做序号标识
<table><tr><td> 表格标记的三元素分别是:容器、列、单元格
<th> 等价于<td>,但是文字会自动加粗,用于显示主栏目
<caption> 表格标题列
<input> 输入框标记,种类分别是:Text、Radio、CheckBox、password、submit/reset、Image、file、hidden、button
<select><option> 下拉选单,select为选单对象,option为被选项
<textarea> 文本输入域
<a></a> 超链接标记标签
<frameset><frame> 框架标记标签
<noframes> 不支持框架则显示此标签内容
<iframe> 以框架模式插入另一个页面文件
二、div+css布局
1.css
a.基本定义:中文全称是层叠样式表,属于标记型语言,不需要编译,浏览器自动执行,div+css是web设计标准,是一种网页布局方法,
,css的最新版本是css3,是能购做到网页表现与内容分离的一种样式设计语言
b.作用:css是通过获取标签的标签名、name或者id属性来设置style属性,让代码清新,不冗余
几中style设置:标签内部属性设置、head标签style标签、外部css文件标签
c.css样式的基本语法:
行内模式(使用标签内部样式):<div style="设置样式代码">其他标签文本内容</div>
内联模式(适用于head标签里):<style type = "text/css"></style>
外部样式(外部css文件):<link href="样式文件路径" rel = "stylesheet" type = "text/css">
2.选择器:通用选择器、class选择器、id选择器、标签选择器、复合选择器、超链接选择器(主要是通过class和标签名来设置布局)
3.基本语法:
4.基本样式表:
属性名称 | 含义 | 取值范围 |
font-family | 使用什么字体 | 所有的字体 |
font-style | 字体是否斜体 | Normal、italic、oblique |
font-variant | 是否用小体大写 | Normal、small-caps |
font-weight | 字体的粗细 | Normal、bold、bolder、lithter等 |
font-size | 字体的大小 | Absolute-size、relative-size、length、percentage |
属性 | 含义 | 取值范围 |
Color | 定义前景色 | 颜色 |
Background-color | 定义背景色 | 颜色 |
Background-image | 定义背景图案 | 路径 |
Background-repeat | 重复方式 | Repeat-x、repeat-y、no-repeat |
Background-attachmen | 设置滚动 | Scroll、Fixed |
Background-position | 初始位置 | Percentage、length、top、left、right、bottom等 |
属性 | 含义 | 取值范围 |
Word-spacing | 单词之间的间距 | Normal <length> |
Letter-spacing | 字母之间的间距 | Normal <length> |
Text-decoration | 文字的装饰样式 | None|underline|overline|line-through|blink |
Vertical-align | 垂直方向的位置 | Baseline|sub|super|top|text-top|middle|bottom|text-bottom| |
Text-transform | 文本转换 | Capitalize|uppercase|lowercase|none |
Text-align | 对齐方式 | Left|right|center|justify |
Text-indent | 首行的缩进方式 | <length>|<percentage> |
Line-height | 文本的行高 | Normal|<number>|<length>|<percentage> |
属性 | 含义 | 取值范围 |
Margin-top | 外边距顶端边距 | Length|percentage|auto |
Margin-right | 外边距右侧边距 | Length|percentage|auto |
Margin-bottom | 外边距底端边距 | Length|percentage|auto |
Margin-left | 外边距左侧边距 | Length|percentage|auto |
Padding-top | 内边距顶端边距 | Length|percentage |
Padding-right | 内边距右端边距 | Length|percentage |
Padding-bottom | 内边距底端边距 | Length|percentage |
Padding-left | 内边距左端边距 | Length|percentage |
属性 | 含义 | 取值范围 |
Border-top-width | 顶端边框宽度 | Thin|medium|thick|length |
Border-right-width | 右侧边框宽度 | Thin|medium|thick|length |
Border-bottom-width | 底端边框宽度 | Thin|medium|thick|length |
Border-left-width | 左侧边框宽度 | Thin|medium|thick|length |
Border-width | 一次定义宽度 | Thin|medium|thick|length |
Border-color | 设置边框颜色 | Color |
Border-style | 设置边框样式 | None|dotted|dash|solid等 |
Border-top | 一次定义顶端 | Border-top-width|color等 |
Border-right | 一次定义右侧 | Border-top-width|color等 |
Border-bottom | 一次定义底端 | Border-top-width|color等 |
Border-left | 一次定义左侧 | Border-top-width|color等 |
属性 | 含义 | 取值范围 |
Width | 定义宽度属性 | Length|percentage|auto |
Height | 定义高度属性 | Length|auto |
Float | 文字环绕 | Left|right|none |
Clear | 哪一边环绕 | Left|right|none|both |
属性 | 含义 | 取值范围 |
Display | 定义是否显示 | Block、inline、list-item、none |
White-space | 怎样处理空白 | Normal、pre、nowrap |
List-style-type | 加项目编号 | Disc、circle、square等 |
List-style-image | 加图案 | <url>|none |
List-style-position | 第二行起始位置 | Inside、outside |
List-style | 一次定义列表 | <keyword>|<position> |<url> |
Cursor | 鼠标样式 | Auto、Crosshair 、efault、Hand、Move、e-resize、Ne-resize 、Nw-resize、n-resize、Se-resize、Sw-resize、s-resize、w-resize、Text、Wait、Help |
1、定义:可以自定义的切换效果,通过不同的事件监听来改变style属性
2.javascript编写规范:分为外部js和内部js
内部js编写格式:<script type="text/javascript">alert(1);</script>
外部js文件编写格式:<script type="text/javascript src="js文件路径"></script>
3.javascript基本语法:
定义变量的基本格式:var 变量名 = 字面量(定义字面量类型全部都用var关键字声明)
注释的基本格式:单行注释以双斜杠开头://
document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var code = e.keyCode;
}
document.onmousemove =function(event){
e= event|| window.event;
var x = e.pageX || e.clientX;
var y = e.pageY || e.clientY;
};