1.什么是 HTML ？
- HTML（HyperText Markup Language） 的学名是超文本标记语言。
- 标记用来表示网页内容要如何显示，自身不显示 。<我就是标记>
- 标记成对出现，内容放在中间，标记对可以简写。 <开始标记>我是内容</结束标记> <我是简写的标记/>
- 标记的尖括号内一般包括 标记名 和 属性。
<标记名 属性名 = "属性值">内容</标记名>
简写 <标记名 属性名 = "属性值"/>
<a>内容</a> 表示其内容是可以点击的链接文字
<img / > 标记表示这是一个图片
2.Html 网页文件的结构
- Html 网页文件都以 <!DOCTYPE html> 开始
- 网页内容从<html>开始到</html >结束
- 网页内容分为 头部<head> 和主体<body> 两部分
Head 可以放置标题 title 和其他信息，帮助浏览器解析网页。
Body 标记内的内容才会显示在网页上，网页的主体，
3. head 标记里面可以放什么？
- 页面的标题 <title> <title>我的网页</title> 这个标题将显示在浏览器页面顶部的标签卡上面
- 元信息标记 <meta> meta 标记的属性可以包含页面的各种信息
格式为 <meta 属性名="属性值"/> 或 <meta name = "属性名" content = "属性值"/>
- 页面的编码 <meta charset = "utf-8"/> 设置页面编码为 utf-8 模式，确保中文的 title 显示正常
- 页面作者信息 <meta name = "author" content = "小明"/>
- 加载外部文件 <link rel = "icon" href = "图片链接"/> 表示链接中的图片将作为标题栏的小图，注意图片的地址只能是自己网站的图片
- 其他信息
- 页面内容介绍
- 所关键字
- 页面使用哪国语言
- 页面在移动设备上如何显示
- 加载其他文件（CSS JS）
4.Body标记 里面可以防放什么？
- div 容器盒子 <div> 任何东西</div> 常用的将页面划分为多个框架的标记，整个页面 body 被分割成多个 div 容器盒子
- img 图片 <img src="图片地址"/>
还可以添加下面两个属性设置图片大小 宽度 width = "100" 高度 height = "200"
alt = "如果图片找不到就显示这里的文字"
- a 超链接 <a herf = "要打开的网页地址">显示的文字</a>
如果需要在新的窗口中打开页面，需要添加 target =" _black"
- input 输入框 <input type = "text"/>
类型 type 还可以是别的，比如 password 密码框，显示成星号或点 checkbox 勾选框
- 演示更多标记
- 不换行的 span
- 换行的 br
- 标题从大到小的 h1~h6
- 段落标签 p
- 有序列表 ol 和无序列表 ul
4.什么是 CSS？
CSS（Cascading Style Sheets）的学名是层叠样式表。
- 样式 Style <div style = "background:red">文字</div>
样式描述标记内容如何显示或者表示，比如元素的颜色（color 和 background）、文字（front-size）、边框（border）、位置和边距（外边距 margin 、内边距 padding）等。
样式可以写在 html 标记的属性中 <style = "样式名：样式的值；样式名：样式的值 "/>
5.CSS选择器一起改变多个元素的样式
- 选择器
- 选择器就是把符合某个规则的元素（标记对）都选出来
这些规则可以是：
- 都是同类型的标记，比如 div
- 具有某个相同属性名，或者属性值也相同的标记
- CSS 选择器可以写在<style></style> 标记中 ，格式如下
- 常见的 CSS 选择器
- 标记选择器：可以修改所有相同标记名元素的样式
- .class 类选择器：可以修改具有指定 class 属性值的元素的样式
- #ID 选择器:可以修改具有指定 id 属性值的元素的样式
- [属性] 选择器：可以修改具有任意属性的元素的样式
- CSS 选择器的组合使用
- 选择后代元素 ：可选出所有嵌套的内部元素
- 常见的 CSS 选择器
- 选择子层的元素 ：可选出所有嵌套的子层元素，不包括孙层或更低后代
- 选择相邻的兄弟元素 ：可选出同层的后面一个元素
- 使用伪类选择器选择某状态的元素 ：改变元素不同状态的样式
5.使用 CSS 样式做动画
- 设计动画
- 定义动画
- 指定到需要动画的元素
6.html 文件中加载 css 文件
- 可以在三个地方编写 css 样式
- html 文件的元素的 style 属性内
- html 文件的 style 标记内
- 单独的 css 文件里
- html 文件内使用 <link> 标记加载
7.什么是 js？
- JavaScript 是一种编程语言，是最通用的网页编程语言。
- js 可以直接指挥 html 和 css，让网页动起来和用户交互。
- html、css、js 的关系
- html 定义网页上的内容，即网页上有什么。
- css 定义网页上元素的外观，即看上去什么样。
- js 即网页的行为，可以操控一切，创造动态效果，让网页可以响应用户的操作，即决定了网页怎么动，怎么用。
- 可以在三个地方编写 js 代码
- 直接写在标记的事件属性值内，如 onclick = "js 代码"
- 直接写在 html 文件的 <script><script/> 标记内
- 写在单独的 js 文件中，再在 html 文件内用 <script src= "js文件地址">载入
8.数据和变量
- 什么是数据？
- 数据是用来描述物体属性或动作参数的值
- 最基本的三种数据：数字、字符串（文字）、数组（集合）
- 可以对数据进行操作
- 常用的格式
- 什么是对象？
- 对象用来描述整个物体
- 格式
属性值可以使数据也可以是另一个对象
- 什么是变量？
- 变量就是给对象或者数据起的临时外号、别名
- 格式
9.用 js 操纵 html 和 css
- 创建 html 元素（标记对）
- 把创建的元素添加到页面上
如果要添加其他元素
- 获取页面上的元素
- 修改元素的文字
- 修改元素的属性
- 修改元素的 css 样式
- 删除元素
10.用函数为元素添加点击动作
- 函数
- 函数是多个命令的组合
- 新建函数
- 运行函数
- 把函数指定到元素事件
11.数字的基本操作
- 指定小数位数和取整数
- 生成0-1 之间随机数
如果要0-10的随机数则 ×10 去掉小数部分
- 非数字类型数据或对象转化为数字对象 Number（任意数据类型）
12.字符串的基本操作
- 单引号和双引号
- 字符串可用单引号也可用双引号，但不能混用。
- 双引号内嵌套的字符串只能用单引号，反之亦然。
- 转义字符
- 显示带引号的字符串，应使用 \'' 或\'
- 回车换行 \n 表示新开一行 ； \r表示结尾回车
- 斜杠用 \\表示
- 非字符串数据或对象转化为字符串对象 String （任意数据类型）
- 截取字符串中间的一小段
注意下标是从0 开始的
- 查找字符串
如果找到了，n 是子字符串在字符串中的位置的数字
n = 0，从开头就找到了
n = -1，没有找到
- 替换字符串
13.操作数组
- 数组是一组数据或对象的集合
- 数组的长度
arr.length();
- 获取数组中的成员
- 单个成员 arr[下标]
- 多个成员
- 添加新成员
arr.push（新成员）
- 插入或删除多个成员
- 搜索成员
arr.indexOf(成员)；
- 字符串变为数组
str.spilt("分隔符")； 以某种分隔符将字符串拆分成一个数组
14.日期和时间数据
- 获取当前时间和日期
var now = new Date(); Date 是一个对象，是一种数据格式
- 单个获取各个数值
- 单独修改各个时间数值
15. js 操作颜色数据
- 颜色表示格式
- 'rgb(红色值，绿色值，蓝色值)
- 增加不透明度 alpha 值 0-1 'rgba(红色值，绿色值，蓝色值，不透明度值)
- 颜色的 16进制表示法
- 格式 ' #红色绿色蓝色' 是字符串 这里的红色绿色蓝色都是16进制，满红满绿是黄，满红半绿是橙
- 十进制转十六进制
- n.toString（16）；
- 16 进制表示的颜色与随机颜色值
16. js动画与计时器
- 用计时器制作动画
- 使用 setInterval 命令使代码每隔一段时间执行一次
- 使用 setTimeout 命令使代码等待一段时间后执行（不重复）
- 使用 clearInterval 和 clearTimeout 取消定时器
17.再看数据、函数和对象
- 均可用变量指代
- 函数
- 对象的属性可以是数据，也可以是函数（方法）
- return什么 函数当作什么用
方法执行后返回值 为 小明
- 对象['属性名']