一 HEML简要分析
1.HTML介绍
HTML：超文本标记语言，主要作用是用来编写网站页面。
超文本：文本是含有完整含义的文字组成的段落或者文件，超文本是在表达形式上超出文字范围：
超链接，含有跳转的对象，图片，声音，视频
标记：指的的HTML的代码风格，HTML依赖标签进行内容的表述：
标签：分为单标签和双标签
单标签
<标签名称 属性=”值”>
双标签
<标签名称 属性=”值”></标签名称>
HTML基本结构：
创建一个txt文件
在index.txt当中输入下面的代码
<html>
<head>
<title>
首页
</title>
</head>
<body>
<h1> hello world </h1>
</body>
</html>
修改index.txt的后缀为.html
双击，在浏览器里看到了hello world的界面
1、 html标签是HTML文件的最大一个标签，也被称为根标签
2、 html的标签通过嵌套来声明层级
3、 在html标签内部把整个html分为了头部（head标签）和内容部分（body部分）
4、头部负责声明页面的属性，title就是页面的标题
5、 内容部分负责页面上的内容
编写的规范：
1、 html标签大小写不区分，约定俗成使用小写
2、 写标签的时候，先写完整再填充内容
2.常用的HTML标签
1）h标签
标题标签，一共是h1-h6六个等级，再html当中代表标题。
2）文本常用标签
p标签,文本标签，通常用来存放文字，一个p占一行，html当中大段的文字通常是用p标签表示的。
<br> 换行标签（单标签）
<hr>独立一行的一条线
HTML空格的代表符号，一次代表一共空格，文本当中敲多少个连续的空格，都代表一个空格。
< >， > <
3)文本修饰标签
i 倾斜具有语句含有，表示强调。
em 倾斜只是倾斜
b 加粗只是加粗，没有特殊函数，只是文本样式
strong 加粗，这个加粗带有强烈的强调涵义。
u 下划线下划线
del 删除线
案例：
<h1>有一些镜头温暖洋溢h1><hr>10月16日，皮海云在江西新干黎山林场连坑分场向记者介绍林地情况。<br>今年<strong>49岁strong>的皮海云是江西省吉安市新干县黎山林场的护林员，<u>1989年u>起开始从事护林、育林工作。他在林区巡视平均每天要走<strong>20多公里strong>，30年的时间里累计行走<strong>20余万公里strong>，黎山林场处处留下他的足迹。<br>30年来，皮海云看护的林区从未发生过大面积森林病虫害，以及重大侵占林地等案件。皮海云多次被林场评为劳动模范、优秀共产党员，<i>还于2018年荣获新干县“十佳最美职工”称号i>。
4)盒子标签
Html布局历史：
在最初html流行表格布局类似于现在的简历模板，将整个页面看成一共表格，然后进行表格的合并，最后形成网页布局。
后来随着网络的发展，表达的形式越来越复杂，表格布局有写苍白，就有了新的布局方式，盒子布局，将整个页面看作一共盒子，在里面嵌套小盒子，通过描述盒子的位置，边框，边距进行布局。
div 就是盒子模型一个元素，频繁使用在网页布局中
span 文本标签，和p标签相比，span不换行
不写标签，文字也不换行，但是当我们的一行文字有多种样式：
Hello
这个时候就需要用到span对文字做划分
5)图片（image）标签（单标签）
Image 图片，镜像，html当中的图片标签采用的是image的缩写img
和上面的标签相比，我们在图片标签就要接触到标签的属性了。
<img>
src 图片地址
可以使用绝对路径
Windows下以盘符开头 D:\\
Linux下以根开头/usr/root/
也可以使用相对路径
指的是以当前文件为参照，其他文件的位置
./当前路径默认可以不写
../代表上一层
/ 项目的根目录
当前代码中的路径指的是当前文件目录下的img下的bk.jpg图片
alt 图片加载失败的提示文字
title 图片的提示文字
height 图片高度
weight 图片宽度
1、 单独设置图片的高度或者宽度，html会自动的对图片进行等比例缩放，图片不会发生变形
2、高度和宽度的设置单位通常是像素（px），但是也可以用百分比，但是需要借助样式
6)超链接标签
我们单纯文本表述，就不需要有过多的属性，比如：span,h,p,br,hr
如果是超文本就需要属性：图片需要地址，标题，错误提示，高宽
在HTML当中a标签是超链接标签，a标签是一共双标签
<a></a>
超链接也是超文本，所以a标签也是需要参数：
href：超链接的地址，链接到哪里（超链接不只可以使用文本作为内容，也可以是其他类型）
target: 代表打开链接的方式
Target参数默认a标签打开网页是在当前页面打开当target=”_blank”就会先打开一个空白页，在空白页上打开链接
href在网页开发当中，还可以进行锚点操作
1、在需要跳转到的标签上设置id属性，id是标签的标识属性，在一个页面当中，id值不可以重复
2、 给a标签的href属性使用#id名称的形成进行指出
3、]这样就达成了效果
7)列表标签
有序列表
<ol type="a" start="2"> <li></li> </ol>
有序列表，之所以被称为有序列表，因为前面的标识是有顺序的序列，默认使用数字，也可以通过type属性进行跳转
Type:
a 代表小写字母
i 代表小写罗马数字
A 代表大写字母
I 代表大写的罗马数字
1 代表数字默认
有序列表的前面的符号只有以上几种，不可以自定义，但是可以自定义前面标识的开始字符，需要用到start属性
无序列表
<ul> <li></li> </ul>
无序列表也有type属性，
disc 实心圆点
circle 空心圆点
square 实现方块
自定义列表
<dl>
<dt></dt>
</dl>
1、 自定义列表没有前面的字符
2、自定义列表可以按照需求进行缩进
3、通常会用作导航栏
4、有序或者无序列表是可以嵌套的
8)表格标签
table这里学习表格正是上午讲述的表格。
tr 行
td 列
在html当中，我们通常说一行几列，就代表着行里面包含着列
1、table标签，本身有caption标签，作为表格的标题，标题居中显示
2、 table有一系列的属性
1、 cellspacing 单元格和单元格之间的距离
2、 cellpadding 单元格和内容的距离
3、 width 表格的宽度
4、 height 表格的高度，由于数据条数不固定，所以通常不设置高度
html标签属性之间用空格分开
3、 tr和td也有参数
align 水平对齐 left center right 左中右
valign 垂直对齐top middle bottom 上中下如果表格没有设置高度，展示不明显
4、 th是一种特殊的td，通常用来写字段名称，相比较一般的td，th对文字自动执行居中加粗
5、表格合并
colspan 跨列合并（水平合并）设置当前单元格占用几列高度
rowsapn 跨行合并（垂直合并）设置当前单元格占用几行宽度
9)表单标签
之前的内容都是为了在html上向用户展示数据，但是没有获取用户数据的地方，问题是web开发要实现用户和网站的交互。表单技术就是获取用户反馈的一个重要手段。
比如问卷就是由表单完成的。
表单和表格有类似，首先需要有表单标签。
<form></form>
Form有很多参数，但是这些参数大部分是描述表单数据提交的，在后端开发的时候会用，前端不长用
action: 就是数据提交的地址。
method: 提交的方式，参数是http请求方式，通常用到的有get和post两种。
enctype: 提交数据的格式。
然后需要有表单当中的元素标签。
Input元素 默认是一个文本框，但是可以通过type属性进行设置
type参数描述
默认就是，Text文本框,是
<input type="text" placeholder="请输入您要的信息">
Password密码框，输入内容以*代替，不可见
<input type="password">
Radio单选框，依赖name确定一组单选框
男:<input type="radio" name="gender" checked>女:<input type="radio" name="gender">
Checkbox复选框，依赖name确定一组，在后端开发可以看到效果
python:<input type="checkbox" name="gender">
php:<input type="checkbox" name="gender">
java:<input type="checkbox" name="gender">
c:<input type="checkbox" name="gender">
c++:<input type="checkbox" name="gender">
File文件框，用来上传文件
<input type="file">
hidden隐藏域，不显示，但是可以提交，后端校验使用居多
<input type="hidden>
submit提交按钮，自动提交表单里的数据，没有后台没有效果，需要value参数来定义按钮上的内容
button只是个按钮
<input type="submit" value="提交按钮>
<input type="button" value="正常按钮">
<input type="reset" value="重置按钮">
reset重置按钮 清空当前表单的所有输入
Input可以构造按钮，但是也可以用button标签来定制按钮
这个button按钮的内容可以更丰富，input的value只能是字符串，但是button的内容可以很丰富
<button type="button">常规按钮button>
<button type="submit">提交按钮button>
<button type="reset">重置按钮button>
<button type="button"> <img src="img/bike.jpg" width="100px"> button>
select标签，下拉框，需要结合option使用你
<select>
<option>河北option> <
option>山东option>
<option selected>河南option>
<option>陕西option>
<option>山西option>
select>
Textarea 双标签多行文本框，用于大段的文字
<textarea> textarea>
表单控件常用的属性：
Placeholder,再文本框当中展示提示字符
checked 代表选项选中
selected下拉框默认选中项
readonly 只读
通常用于修改信息部分
disabled 禁用，通常使用再按钮，不满足条件，不可以提交
单标签Doctype meta br hr img input
双标签Html head body title h p span b I em strong u del a table canption tr td th ul li ol dd dt dl form button select textarea div span
二、CSS的常用属性
1.CSS颜色
在css当中，颜色有三种表达方式：
计算机的颜色是按照工业三原色进行配色的，工业三原色：
R red 红色 G green 绿色 B blue 蓝色
理论上通过这三种颜色的混搭，通过不同比例可以形成所有的颜色
1、单词
常用的颜色单词
Red（红）white(白) black（黑） green(绿) blue(蓝色)
Yellow（黄） purple(紫色) gray（灰）
实际上用单词描述我们所有想要的颜色是不现实的。
2、 十六进制数
16进制数：0-F
使用6位16进制数表达颜色，没两位代表一种颜色
# FF FF FF
标识位 红 绿 蓝
16进制的颜色准确度高，通常需要借助取色工具进行取色。比如ps
3，十进制数
在css当中，也可以用10进制数来表达颜色，还是三原色：
每个颜色是0-255比如：
（255，255，255）白色
2. 文字的样式
文字比其他元素的样式还是有不同的，在之前的举例过程当中，我们使用了文字的颜色：color
文字常用的样式：
大小
Font-size 使用px
粗细
Font-weight
Normal 正常粗细
Bold 粗
Bolder 更粗
lighter 更细
自定义粗细,是指具体的数值 100-900
字体
Font-family 可以采用系统拥有的字体
文字样式
Font-style
文字倾斜，三个参数，只有italic是倾斜
首行缩进
Text-indent px
水平位置
Text-align
Left center right
垂直位置
Line-height
3.CSS背景
Background
背景其实可以细分
Background-color 背景颜色
Background-image 背景的图片
Background-position 背景图片定位
Left 左
Center 中
Right 右
Top 上
Botoom 下
Background-repeat 背景重复
No-repeat 不重复
Repeat-x 水平重复
Repeat-y 垂直重复
Background-size 背景图片的大小
宽
高
4，边框(border)
边框分为4个方向
Left 左
Right 右
Top上
Bottom下
直接写border代表4个方向。
三种参数
颜色，颜色的设置和CSS当中其他的颜色设置一样，单词，十六进制数，十进制数
线条类型solid实线 dotted点状线 dashed虚线
线条粗细，像素px
border-radius 圆角
5，边距
Html的边距分为两种
内边距：当前标签距离内部嵌套标签的距离。Padding
外边距：当前标签距离自己父标签的距离。margin
边距和边框一样也是分为4个方向的。
CSS将标签按照布局的特性分为三种
块级元素
1、 支持CSS全部的样式
2、 [如果不设置宽度，默认宽度占满全屏
3、 一个元素单独占据一行
行内元素
1、 不支持CSS的部分样式
2、 宽和高由内容决定
3、多个元素在一行
4、 代码换行的时候，盒子有间距
行内块元素
1、支持CSS全部的样式
2、如果没有设置宽高，宽高由内容决定
3、多个元素在一行
4、代码换行的时候，盒子有间距
6，CSS位置处理
文档流
常规情况下，html标签在页面上按照从上到下（块级元素）从左到右(行内元素)的顺序进行排列，这样的顺序我们叫做文档流。
CSS基于HTML的布局，其实还涉及到一个层次的问题。
浮动
就是将指定的标签浮动到指定的位置上，浮动之后，不在和之前的元素保持同一层。
Float:left 左right右
[if !supportLists]1、 [endif]浮动是将元素进行位置的移动
[if !supportLists]2、 [endif]浮动会导致元素脱离当前层
[if !supportLists]3、 [endif]浮动之后，父元素没有子元素撑开，布局容易出现问题
需要清除浮动：
1、 给父元素设置一个高度
2、 使用clean:both
浮动是为了左右布局标签，浮动之后，为了排版的稳定，需要清除浮动
定位
浮动可以解决左右布局问题，但是在页面布局过程当中，会遇到特定位置，这个时候需要用定位。之前的课程当中，
Position定位有四个参数
Absolute 绝对定位，参照物是整个页面
Relative 相对定位，参照物是父元素
Fixed 固定定位，参照物是浏览器窗口
Static 静态
三，JavaScript基础语法
JavaScript是一门运行在浏览器端的面向对象的高级的脚本语言
1 js的三种形式
.行内式： 写在标签上
<p onlick=”alert(‘hello world’)”>如触发按钮</p>
.嵌入式：使用script标签写到html中
如<script> alert(‘hello world’) </script>
.独立文件式：在script标签上链接外部jis文件，如果外联，则script内部的文件就失效了，不能共同使用
如 <script src=”index.js”> alert(“hello”) #失效 </script>
2 js语法格式
分割符：以 ; 分割
3 js的输出
. alert弹出提示框，展示内容，展示最为直接
console.log在浏览器调试部分展示 展示最为详细
document.write写在页面上，可以写html样式
4.数据类型
字符串类型string
数字类型number 直接包括 int整数和float小数
布尔值boolean true false
对象object 时间对象和数组对象
null 空类型
* js查看数据使用typeof
* js使用 var 声明变量
数据类型转换
转换为字符串string（要转换内容）
转换为整数parseint(要转换内容)
转换为小数parsefloat（要转换内容）
转换为布尔类型boolean（要转换内容）#空字符为false
# js中数字和字符串拼接，不会报错，形成一个新的字符串
5 js运算
数学运算+，- ， * ， /
赋值运算=
自增运算+=， -= ++a先赋值在自增 a++ 先自增再赋值
比较运算< , > , <=, >= , != , == , ===(全等于 值等于 且类型等于) ！==不全等于
逻辑运算&&（相当于and） || （相当于or） ！ （相当于not） 优先级|| > && > !
三目运算判断？第一个：第二个如果判断成立执行第一个否则执行第二个
如2>3? alert(“第一个数字大”)：alert（“第二个数字大”）
var number = 4 >3 ?3:2
6 流程控制
1. if（条件）{满足条件要执行的代码}
多条件判断时使用的为else if
var a =10
if（a>15） {
console.log(“<15”)}
else if (a <5){
console.log(“<5”)}
else{
console.log(“>15”)}
#不能论由于多少分支只要第一个执行成功 不会再继续向下判断
2.switch语句
switch（条件）{
case结果一
第一个结果执行的代码
break
case结果一
第一个结果执行的代码
break
}
var a=2
switch（a）{
case 0：
console.log(“0”)
break;
case 1：
console.log(“1”)
break;
case2：
console.log(“2”)
break;
case 3：
console.log(“3”)
break;
}
# break结束判断 如不结束则继续向下执行 输出 2 3
for in循环
for（ 变量 in 一串数据）{
要执行的代码
}
for( var i in “adsafsa”){
console.log(i)#此时的i为一串元素的索引而非元素
console.log(“adsafsa”[i]) #按索引输出数据 }
for循环
for（变量 条件 自增）{
执行的代码
}
for(var i =1 ; i < 10 ; i++){
console.log(“i”)
}
#如条件为i<1 则条件从开始就不成立 则为死循环
while循环
while（条件）{
满足条件执行的代码
}
var a=1
while（a<10）{
console.log(a)
a++
}
while死循环
var a = 1
while（1）{
console.log(a)
a++
}
break退出循环
continue跳出当次循环
js函数
（1）标准版
function名称(){
函数中的代码
}
名称() #调用
参数版
function名称(参数1，参数2){
函数中的代码# arguments# js内置变量存放所有参数
}
名称() #调用
默认值参数
function名称( 参数1 ，参数2= 默认值){
函数中的代码
}
名称() #调用 #参数按顺序传递 如不给参数2传递数据使用默认值
判断版
function text（num1， num2）{
num2=num2（arguments[1])? num2:10 }
返回值
function名称(){
函数中的代码
return返回值
}
名称() #调用
return将函数内的值返回出来作为执行的结果
匿名函数
var a =function (){
函数中的代码
}
a() #调用
2.JS对HTML的操作
在js基础部分，除了document.write方法，其他的js和html没有关系。：
当某个对象满足某个条件触发某个功能，功能通常是函数，函数进行了某种修改。
1、如何在js当中获取html标签
2、如何使用js修改html
3、如何在js当中表述网页事件：键盘按下，鼠标单机，鼠标滑过，摄像头打开
1)DOM(Document)对象
Document是html整个页面的文本内容的对象
Document当中的每一个元素都可以认为是一个element对象，在js当中需要对element对象进行操作。
首先要掌握的是dom对象的获取，Document给开发者提供了具体的获取对象的方法
document.getElementById 通过id获取单个标签的对象
document.getElementsByClassName 通过类名获取所有该class对象
document.getElementsByTagName 获取当前页面多有的指定标签
document.getElementsByName 获取当前页面所有指定name值的标签
其次要掌握对dom对象的修改
样式
document.style
可以通过style修改样式
style后面可以加当前标签可以用的所有的css属性
注意，只有document.getElementById 获取的是单个对象，可以直接使用style，其他三种选择方法获得的是对象的列表，需要通过索引或者循环之后加style
在当前代码的步骤：
1、获取元素
到底获取的是元素，还是包含元素的数组
2、 设置元素的样式
设置元素的样式，比如不要给span设置宽度
属性修改
在标签内以键等于值存在的，都是属性
hasAttribute 判断指定元素是否有指定属性
hasAttributes判断指定元素是否有属性
setAttribute 设置属性，属性名，值
getAttribute
removeAttribute
在js当中获取html标签，操作html标签的样式和属性
获取和修改html内容
innerHTML 插入内容，可以插入html
innerText 插入文本
获取和添加元素
createElement 创建对象，类型自己设置
createTextNode 创建文本节点，就是文本内容
cloneNode
注意，克隆之后，修改克隆对象的id或者克隆没有id的对象
reovmeChild
appendchild 在指定标签的子元素尾部添加元素
2)JS的事件
当点击发生之后，执行的函数。
