html css js是什么？
HTML 超文本标记语言 从语义的角度描述页面结构。提到HTML的作用，只能从语义方面从想，绝对不能想样式 。
CSS 层叠式样式表 从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。
下面来了解一下HTML、 CSS、 JavaScript三者的关系：
网页主要是由这三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
然而三个组成部分分别是由HTML CSS JS来实现：
HTML —— 结构， 决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
怎么把这三者联系在一起呢，当然得通过网页HTML,HTML是一直描述语言，它是对着浏览器描述自己的，那么它通常怎么描述具体的这个网页呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<p>段落</p>
</body>
</html>
这是一个最简单的HTML文档，遵循W3C标准XHTML1.0过渡版本规范（文件类型声明），采用的编码是utf-8,标题是“网页标题”，描述我的模样的样式表是我同目录的mycss.css文件，与我有关的javascript代码在我同级的myks.js文件中，我的内容有一个段落，段落的内容是“段落”。
2，HTML、CSS、JavaScript发展
HTML的版本：
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
html 5
html 5
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准[4]
CSS的版本（Level）
1996年W3C正式推出了CSS1；
1998年W3C正式推出了CSS2；
CSS2.1是W3C现在正在推荐使用的；
CSS3现在还处于开发中。
在 Web前端开发中，JavaScript一种直译式脚本语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript的历史思路：
1，借鉴C语言的基本语法；
2，借鉴Java语言的数据类型和内存管理；
3，借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
4，借鉴Self语言，使用基于原型（prototype）的继承机制。
所以，Javascript语言实际上是两种语言风格的混合产物，一个完整的 JavaScript 实现应由三个部分组成：核心（ECMAScript），文档对象模型（DOM），浏览器对象模型（BOM），在 Web前端开发中，后端有很多编程语言如python,java，c++等可以选择，但前端只有 JavaScript，JavaScript是所有浏览器唯一都支持的编程语言。
HTML：
什么是 HTML？
HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
1>:html不区分大小写，但推荐用小写。
2>:<style>…</style>定义CSS格式
1 <Script language=“”>…</Script>
2 用于定义脚本，Eg. Javascript
3>：常见标签：
1 超级链接，跳转到另一文件
2 <a href=“url” target=“TargetWindow”>文字
3 </a>
4 标题字体大小--<h#> #=1、2、3、4、5、6
5 分隔线--<hr>
6 ：空格
7 <p>…</p>：分段落现实
8 <div>…</div>(一层) <span>…</span>（行内块）
9 分块显示：
10 <ul>…</ul>(列表)
11 <li type=“disc circle square”>…
12 符号列表：
13 <ol>…</ol>
14 <li>…
15 数字列表
16 <br> 换行
17 <nobr>…</nobr> 不换行
18 <pre></pre>保留原有格式
19 <marquee></marquee>跑马灯效果
20 <blockquote></blockquote>
21 <dl><dt><dd>
22 对齐—align
23 <h1 align=“”>
24 <div align=“”>
25 <table align=“”>
26 <hr align=“”>
27 ……
28 取值:left right center top middle bottom
29 <img src=“” align=“” alt=“” border=“”>
30 Src 图片路径，一般使用相对路径
31 Alt 图片无法显示时显示的文字
32 Border 边框的厚度
33 Align = left right top middle bottom 图文混排时用于和图片的对齐
4>表单：<form>……</form>
1 <form>的属性
2 Method: (get post)
3 Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
4 Post 数据长度无限制，不会显示在url中
5 Action:Form中数据交给服务器端哪个程序进行处理
6 eg:<form method=“post” action=“user.jsp>……</form>
7 位于<form>之中，接收用户输入:
8 格式：<input type=“” name=“”>
9 type:
10 text radio checkbox password hidden select submit reset button textarea image
11 name:
12 提交到服务器端的变量的名字
13 文本框 text
14 <input type=“text” name=“” value=“” maxlength=“” size=“”>
15 maxlength – 最大字符长度
16 size – 文本框宽度（字符）
17 密码区域—特殊的单行文本输入框 password
18 <input type=“password” name=“” value=“” size=“” maxlength=“”>
19 单选按钮
20 <input type=“radio” name=“” value="" checked>
21 典型用法 : 同一名字，不同的值
22 错误的用法 : 不同的名字
23 复选框
24 <input type=“checkbox” name=“” value=“” checked>
25 典型的用法 : 同一name，不同的value
26 隐藏域
27 <input type=“hidden” name=“” value=“”>
28 不显示在网页中
29 通常用作向下一个页面传输已知信息或表单的附加信息
分块：
1 <frameset cols=“20%,”> <frame name=“left” src=“a.htm”> <frameset rows=“40%,”> <frame name=“righttop” src=“b.htm”> <frame name=“rightbottom”
2
3 src=“c.htm”> </frameset> </frameset>
4
5 html中username表单的验证：
6 <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
7 <span id="usernameErr"></span>
8 js代码：
9 function checkUserName(ssn){
10 if( ssn.length<3 || ssn.length>18 ) {
11 document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";
12 form.username.focus()
13 return false;
14 }
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'
HTML颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
HTML参考手册
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
________________________________________
CSS:(不用记忆，会改即可)
CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
1>字体属性：
1 属性 含义 属性值
2 font-family 字体 各种字体
3 font-style 字体样式 italic、oblique
4 font-variant 小体大写 small-caps
5 font-weight 字体粗细 bold、bolder、lighter…
6 font-size 字体大小 absolute、relative、%
7 color 字体颜色 颜色值
2>颜色与背景属性：
1 属性 含义 属性值
2 Color 颜色 颜色值
3 Background-color 背景色 颜色值
4 Background-image 背景图案 图片路径
5 Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
6 Background-attachment 背景的滚动 Scroll | fix
7 Background-position 背景图案初始位置 % | n em | top | left | right | bottom
3>文本属性:
1 属性 含义 属性值
2 word-spacing 单词间距 n em
3 letter-spacing 字母间距 n em
4 text-decoration 装饰样式 underline| overline| line-through| blink
5 vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom
6 text-transform 转为其他形式 capitalize| uppercase| lowercase
7 text-align 对齐 left| right| center| justify
8 text-indent 缩进 n em| %
9 line-height 行高 pixels、n em、%
4>边距属性:
1 属性 含义 属性值
2 margin-top 上边距 n em | %
3 margin-right 右 n em | %
4 margin-bottom 下 n em | %
5 margin-left 左 n em | %
5>边框属性:
1 属性 含义 属性值
2 Border-top-width 上边框宽度 n em | thin | medium | thick
3 Border-right-width 右 同上
4 Border-bottom-width 下 同上
5 Border-left-width 左 同上
6 Border-width 四边 同上
7 Border-color 边框颜色 Color
8 Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
9 Border-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color
6>图文混排:
1 属性 含义 属性值
2 Width 宽度 n em | %
3 Height 高度 n em
4 Float 文字环绕 Left | right
5 clear 去除文字环绕 Left | right | both
7>列表属性:
1 属性 含义 属性值
2 Display 是否显示 Block | inline | list-item | none
3 White-space 空白部分 Pre | nowrap | normal（是否合并)
4 List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
5 List-style-image 项目前图片 Img-url
6 List-style-position 第二行位置 Inside | outside
7 List-style 全部属性 Keyword | position | url
8>鼠标属性:
1 属性值 含义 属性值 含义
2 Auto 自动 N-resize 上箭头
3 Crosshair "+" Se-resize 右下
4 Default 默认 Sw-resize 左下
5 Hand 手形 S-resize 下箭头
6 Move 移动 W-resize 左箭头
7 E-resize 右箭头 Text "I"
8 Ne-resize 右上 Wait 沙漏
9 Nw-resize 左上 help 帮助
________________________________________
JavaScript
1>:JavaScript (ECMAScript) ：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
1 基础语法
2 DOM
3 Document Object Model：用以访问 HTML 元素的正式 W3C 标准。
4 BOM
5 Brower Object Model
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树:
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应
2>:JavaScript:
1 通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，将JavaScript代码放到<Script>…</Script>之间
2 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名
3 原则上，放在<head></head>之间。但视情况可以放在网页的任何部分
4 一个页面可以有几个<Script>…</Script，不同部分的方法和变量，可以共享。
3>JavaScript基本语法：
1 变量：
2 JavaScript是一门弱类型的语言，所有的变量定义均以var来实现
3 JavaScript的变量建议先定义，再使用
4 JavaScript区分大小写
5 虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做
6 数组定义：
7 var arr = new Array(3);
8 通过arr.length取得数组的长度
9 注释的写法－－》和java的一样
4>Date对象：
1 创建方式：
2 myDate = new Date();
3 日期起始值:1970年1月1日00:00:00
4 主要方法
5 getYear(): 返回年数 setYear(): 设置年数
6 getMonth(): 返回月数 setMonth():设置月数
7 getDate(): 返回日数 setDate():设置日数
8 getDay(): 返回星期几 setDay():设置星期数
9 getHours():返回小时数 setHours():设置小时数
10 getMinutes():返回分钟数 setMintes():设置分钟数
11 getSeconds():返回秒数 setSeconds():设置秒数
12 getTime() : 返回毫秒数 setTime() :设置毫秒数
5>JavaScript事件处理：
1 onFocus：在用户为了输入而选择select、text、textarea等时
2 onBlur：在select、text、password、textarea失去焦点时
3 onChange：在select、text、textarea的值被改变且失去焦点时
4 onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等）
5 onLoad：出现在一个文档完成对一个窗口的载入时
6 onUnload：当用户退出一个文档时
7 onMouseOver：鼠标被移动到一个对象上时
8 onMouseOut：鼠标从一个对象上移开时
9 onSelect：当form对象中的内容被选中时
10 onSubmit：出现在用户通过提交按钮提交一个表单时
如下为一个javacript的一个重要功能应用，利用onsubmit表单认证
1 <html>
2 <head>
3 <script type="text/javascript">
4 fuvtion check(){
5 if(document.text.t.value==""){
6 alert("字符不能为空");
7 return false；
8 }
9 return true；
10 }
11 </script>
12 </head>
13 <body>
14 <from name="test" action="test.html" onsubmit ="return check()">
15 <input type="text" name="t">
16 <input type="submit" value="OK">
17 </body>
18 </html>
6>:JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证
被JavaScript 验证的这些典型的表单数据有：
• 用户是否已填写表单中的必填项目？
• 用户输入的邮件地址是否合法？
• 用户是否已输入合法的日期？
• 用户是否在数据域 (numeric field) 中输入了文本？本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
