html-css-js基本理解

网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。

一、HTML、CSS、JavaScript简介

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。可以总结为：结构：html 数据:web框架(数据处理)+数据库(数据存储) 样式:css 动作:js

二、各部分详细解释：

（一）、html

html 代表包含一个网页文档，是一个网页的根元素(某些浏览器将body作为根元素)
head 代表文档的头部，包含控制信息
meta 代表控制信息，通过标签中的属性来提供页面控制，如:charset='UTF-8’控制编码格式
title 代表网页标题
link 外部文件链接，主要是css链接

body     代表文档的主体，包含数据、主体骨架、布局、样式、行为事件和回调函数等
script   代表一个js代码的引用,包含内联的js代码或一个js文件地址
a        代表一个链接，包含一个去往某链接的文字说明
h1-6     代表文章主题，h1的字体最大
p        代表一个段落，包含段落中的内容
img      代表一个图像，包含一个展示图像
i        代表一个图标，包含一个图标
div      代表一个盒子模型，一般用于布局
span     代表一个行内文本，一般用于需要特别处理的行内文本标记
hr/br    代表水平分隔符/换行符
button   代表一个按钮，button在form中会默认type=submit

form     代表一个表单，可以内含很多表单组件，一般用于用户数据提交
input    代表一个表单组件，通过type来切换不同功能，一般用于数据的输入
text       代表一个文本输入框，一般用于输入小段文本
email      代表一个email输入框,会对输入的邮件格式做格式判断
password   代表一个密码输入框，输入的密码会被转换成一个黑点或者星号
radio      代表一个单选框，多个相同name的单选框组成一个组，选项互斥
checkbox   代表一个复选框，多个项目name的复选框组成一个组
textarea   代表一个文本输入域，一般用于输入大段文本
select     代表一个下拉框，包含多个下拉选项
option     代表一个下拉选项
label      代表一个标记，一般用于指向对应的输入框用于实现点击label时输入框产生焦点
file       代表一个文件上传框
submit     代表提交表单，一旦点击，所属表单的所有组件值会被统一提交

table    代表一个表格，包含很多表格元素
thead      代表表格头部，一般是一行
tr     代表一行
th     代表表格数据的名称，即属性名，如：名字、年龄、学校、工资等
tbody      代表表格数据主体
tr     同上
td     代表数据单元格，包含一个单元格的数据

ul/ol    代表一个无序/有序列表，包含列表项目
li         代表一个列表项目

（二）、css
选择器
选择器的目的是为了得到对目标元素的引用，一旦得到引用，就可以在此引用上执行各类操作。一个元素有很多不同的表征，这些都可以作为寻找引用的依据。

1. 基本查找方式:
   id: id是一个标签元素在html中的唯一标识，使用id可以快速且唯一的寻找到元素引用
   class: class表示了一个标签元素所属的类，类和标签属于多对多关系，一个类可以有多个标签，一个标签也可以属于多个类，使用class会寻找到归属于此类的多个标签元素
   tagName: tagName是一个标签的名称，通过标签名可以找到文档中所有同名标签
   优先级: 使用id > 使用class > 使用tagName

2. 高级查找方式:
   div p: 表示文档中，所有div子树中的p都被抓取，不论p是div的儿子辈还是孙子辈
   div>p: 表示文档中，所有div子树中的直接后辈p都被抓取，即p必须是div的儿子辈
   div#box1: 表示文档中，所有id是box1的div(其实应该只有1个)，查询结果等价于#box1
   div.box1: 表示文档中，所有class中含有box1的div
   div, p, li: 表示组合，即对多个元素组合执行相同的操作

3. 属性查找
   [school]: 表示文档中，所有含有school属性的所有标签
   div[school]: 表示文档中，含有school属性的所有div
   div[school=‘abc’]: 表示文档中，含有school属性且值为’abc’的所有div
   div[school^=‘a’]: 表示文档中，含有school属性且值以’a’开头的所有div
   div[school$=‘a’]: 表示文档中，含有school属性且值以’a’结尾的所有div

4. 伪类选择器
   某元素:link 表示当此元素未被访问时的样式(即初始默认样式)
   某元素:hover 表示当鼠标移到此元素上时的样式
   某元素:active 表示当鼠标点击瞬间(未释放鼠标)时的样式
   某元素:visited 表示当此元素被访问过(释放鼠标后)时的样式
   以上4种伪类选择器定义了当发生某些动作时的样式改变，可以用于提供简单的界面交互

   p:first-child 表示当p是某一个父元素的第一个子元素时被获取
   p:last-child 表示当p是某一个父元素的最后一个子元素时被获取
   p:nth-child(x) 表示当p是某一个父元素的指定第x个子元素时被获取
   p:nth-child(2n) 表示当p是某一个父元素的指定偶数个子元素时被获取
   以上4种伪类的理解容易发生偏差，且使用时容易出错，产生意外结果

5. 伪元素选择器
   li:first-letter 表示此元素的第一个文本字符被获取
   li:before
   li:after
   以上2种一般配合content属性使用，表示此元素的原有文本前/后增加对应内容,first-letter不能应用于a等行内元素

(三)、js

数据类型

Number
数字类型，数字类型有一个特殊值:NaN，代表当尝试转换成Number类型失败时的值，如Number(‘abc’)
String
字符串类型，js中的字符串也是不可变对象，即所有尝试针对原字符串修改的操作都会返回一个新字符串
字符串可以使用[]和charAt()访问，也可以通过for来遍历
Boolean
布尔类型，true或者false，
注意Boolean(‘false’)的值是true,
注意Boolean([])的值是true，
以下值的布尔值是false:
0,-0,’’,NaN,undefined,null,false
其他值都是true
Array
数组类型，js的数组类型也是动态的，不仅长度可变，也可以涵盖多个不同类型的元素
注意，如下方式遍历数组，将会得到数组的元素下标
var arr = [‘a’,‘b’,c’];
for(var i in arr){
console.log(i);
}
Date
时间类型，用于表示时间，初始值是当前时间。时间对象有很多关于时间操作的函数可以使用。
Math
数学函数，使用Math.abs(x)获取绝对值等
RegExp
正则类型，用于表示一个正则表达式，一般用于处理字符串

undefined和null
undefined表示声明了，但是未定义值
null表示声明了，但是定义了一个空值

流程控制

判断
if [else if] else

分支判断
switch(x) {
case 1:
break;
default:
//code
}

for循环
for(var i = 0, len = x.length; i < len; i++) {
//code
}

while循环
while(condition){
//code
}

do循环（至少执行一次）
do{
//code
}while(condition)

函数 函数声明

–> 定义函数方法1 function f(args){ //code }

函数表达式 --> 定义函数方法2
var f = function(args){
//code
}

自定义对象

字面量方式 var stu = { name:‘xiaoming’, age:26 };

构造函数方式
function Stu(stuName, stuAge){
this.stuName = stuName;
this.stuAge = stuAge;
}

var stu = new Stu('xiaoming', 26);