前端开发----html,css，js了解

html css js是什么？ 
HTML 超文本标记语言 从语义的角度描述页面结构。提到HTML的作用，只能从语义方面从想，绝对不能想样式 。
CSS 层叠式样式表 从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。
下面来了解一下HTML、 CSS、 JavaScript三者的关系：
网页主要是由这三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
然而三个组成部分分别是由HTML CSS JS来实现：
HTML —— 结构， 决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
怎么把这三者联系在一起呢，当然得通过网页HTML,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>:定义CSS格式 
1  
2 用于定义脚本，Eg. Javascript 
3>：常见标签： 
 
 1 超级链接，跳转到另一文件 
 2 文字 
 3  
 4 标题字体大小-- #=1、2、3、4、5、6 
 5 分隔线--
 
 6  ：空格 
 7 
…
：分段落现实 
 8 
…
(一层) …（行内块） 
 9 分块显示： 
10 
…
(列表) 
11 
… 
12 符号列表： 
13 
…
 
14 
… 
15 数字列表 
16 
   换行 
17 …   不换行 
18 
保留原有格式 
19 跑马灯效果 
20 
 
21 
 
22 对齐—align 
23 
 
24 
 
25  
26 
 
27 …… 
28 取值:left right center top middle bottom 
29  
30 Src 图片路径，一般使用相对路径 
31 Alt 图片无法显示时显示的文字 
32 Border 边框的厚度 
33 Align = left right            top middle bottom 图文混排时用于和图片的对齐 
 
4>表单：…… 
 
 1 的属性 
 2 Method: (get post) 
 3 Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe 
 4 Post 数据长度无限制，不会显示在url中 
 5 Action:Form中数据交给服务器端哪个程序进行处理 
 6 eg:…… 
 7 位于之中，接收用户输入: 
 8 格式： 
 9 type: 
10 text radio checkbox password hidden select submit reset button textarea image 
11 name: 
12 提交到服务器端的变量的名字 
13 文本框 text 
14  
15 maxlength – 最大字符长度 
16 size – 文本框宽度（字符） 
17 密码区域—特殊的单行文本输入框 password 
18  
19 单选按钮 
20  
21 典型用法 : 同一名字，不同的值 
22 错误的用法 : 不同的名字 
23 复选框 
24  
25 典型的用法 : 同一name，不同的value 
26 隐藏域 
27  
28 不显示在网页中 
29 通常用作向下一个页面传输已知信息或表单的附加信息 
 
分块： 
 
 1  
 4 
 5 html中username表单的验证： 
 6  
 7  
 8 js代码： 
 9 function checkUserName(ssn){ 
10 if( ssn.length<3 || ssn.length>18 ) { 
11 document.getElementById("usernameErr").innerHTML = "请输入正确的用户名,用户名长度为3-18位！"; 
12 form.username.focus() 
13 return false; 
14 } 
 
 始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'
HTML颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
HTML参考手册
HTML Basic Document

Visible text goes here

Text Elements
This is a paragraph
 (line break)
 (horizontal rule)
This text is preformatted
Logical Styles
This text is emphasizedThis text is strongThis is some computer code
Physical Styles
This text is boldThis text is italic
Links, Anchors, and Image Elements
This is a LinkSend e-mailA named anchor:
Useful Tips SectionJump to the Useful Tips Section
Unordered list

First item
Next item

Ordered list

First item
Next item

Definition list

First term
Definition
Next term
Definition

Tables


  
someheader
  
someheader


  
sometext
  
sometext


Frames

  
  

Forms









Apples
Bananas
Cherries



Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements


Text quoted from some source.


Address 1

Address 2

City


 
________________________________________
 
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 通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间 
2 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 
3 原则上，放在之间。但视情况可以放在网页的任何部分 
4 一个页面可以有几个 
12  
13  
14  
15  
16  
17  
18  
 
6>:JavaScript 表单验证
     JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证
     被JavaScript 验证的这些典型的表单数据有：
•	用户是否已填写表单中的必填项目？
•	用户输入的邮件地址是否合法？
•	用户是否已输入合法的日期？
•	用户是否在数据域 (numeric field) 中输入了文本？