前端基础自学整理｜HTML + JavaScript + DOM事件
目录
一、HTML
1、Html标签
2、Html元素
3、基本的HTML标签
二、CSS 样式 层叠样式表
三、JavaScript
使用示例
四、HTML DOM
通过可编程的对象模型，javaScript可以：
window
document
1、查找HTML元素
2、操作HTML元素
获取元素的属性
四、HTML DOM事件 ⚠️是DOM提供的API
一、HTML
Html是用来描述网页的一种语言
Html指的是超文本标记语言(Hyper Text Markup Language), Html不是一种编程语言，而是一种标记语言( Markup Language)
<!DOCTYPE html> <!-- 表示为html文档 -->
<html> <!-- 页面跟元素，之间的文本用于描述网页 -->
<head> <!-- head元素包含了元数据，如js、css等 --><meta charset="utf-8"> <!-- 声明编码--><title>撕家</title> <!-- 文档标题-->
</head>
<body> <!-- 页面可见内容--><h1>这是大标题</h1> <!-- 声明标题，标签成对出现-->
</body>
</html>1、Html标签
HTML标记标签通常被称为HTML标签(HTML tag)
-
HTML标签是由尖括号包围的关键词，比如<html>
-
HTML标签通常是成对出现的
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
2、Html元素
Html文档是由html元素定义的
Html元素指的是从开始标签到结束标签的所有代码，通常和Html标签表达的是一个意思。
Html元素语法：
-
Html元素包含了开始标签和结束标签
-
元素的内容是开始标签和结束标签之间的内容
-
大多数Html元素可拥有属性（属性，键值对）
3、基本的HTML标签
文本输入框
<input type="text" name="" value="第一个输入框">选择框
语文<input type="checkbox" name="">单选/复选按钮 ——————name属性表示同一种类型
这两个标签都表示性别，name都用sex表示；name属性表示同一种类型，达到单选的效果
男<input type="radio" name="sex">
女<input type="radio" name="sex">按钮
<input type="button" name="" value="登录">文件上传 ——————会调用电脑的文件选择框 chrome显示【选择文件】，firefox显示【浏览】
<input type="file" name="">密码输入框————输入密码后，会用......显示
<input type="password" name="">换行
<br>下拉框<select>
<select><option>四川省</option><option>辽宁省</option><option>吉林省</option>
</select>超链接———— target="_blank" 表示超链接另开窗口打开
<a href="https://www.baidu.com" target="_blank">百度一下</a>图片
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200">
有序列表
<ol><li>第一行</li><li>第二行</li><li>第三行</li>
</ol>无需列表
<ul><li>第一行</li><li>第二行</li><li>第三行</li>
</ul>文本域
<textarea rows="10" cols="20"></textarea><br>标题标签 通过<h1>...<h6>等标签进行定义的
<h1>这是大标题</h1><h2>这是中标题</h2><h3>这是小标题</h3>HTML段落 通过<p>标签进行定义
<p>this is a paragraph</p>HTML注释
<!-- -->代码注释 浏览器会忽略 不会显示注释
iframe 在一个页面内嵌另一个页面
<!-- iframe：内联框架 --><iframe src="https://www.baidu.com" width="1000" height="800"></iframe>HTML Div
<div>，元素是块级元素，用于组合其他html元素的容器，常用作进行页面布局二、CSS 样式 层叠样式表
样式
<style> 名称一般用.name命名，不写在body里面，一般是单独的.css文件或者是head里面也行
<style>.head{background-color: green;color: white;}.left{background-color: green;color: white;}</style><div class="head"><h1>页面顶部区域</h1>
</div>三、JavaScript
javascript是可插入HTML页面的编程代码
-
轻量级、功能强大编程语言
-
因特网上最流行的脚本语言
-
不能直接操作html元素，需要DOM提供的API间接操作
使用示例
脚本位置：
-
位于<script>与</script>标签之间
-
<body>和<head>（推荐）中
<script>alert("hello")</script>
四、HTML DOM
HTML DOM(Document object Model文档对象模型)
-
DOM是用于访问HTML元素的正式W3C标准
-
当网页被加载时，浏览器会创建页面的文档对象模型
-
通过HTML DOM 可以使用javaScrpt访问HTML文档的所有元素
通过可编程的对象模型，javaScript可以：
-
改变页面html元素
-
改变页面html元素属性
-
对页面中的事件作出反应
window
-
表示浏览器中打开的窗口
-
javascript层级中的顶层对象
-
window是document的父节点
document
-
代表窗口中显示的当前文档（页面）
-
通过document节点可以遍历到文档中的所有子节点
1、查找HTML元素
如下：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body><input type="text" id="test1" value="1"/><br><input type="text" id="test2" value="2"/><br><input type="text" id="test3" value="3"/><br>...<br></body>
</html>用document文档对象来定位HTML元素的几种常见方式（注意一般找元素都是在窗口window加载完成后）
通过id属性找到HTML元素，正常的前端规范中id属性是唯一的，不重复的
var element = document.getElementById("test1")通过tag 标签名找到元素 可能会找到多个,返回一个集合，可以通过下标找到一个
document.getElementsByTagName("input")——找到多个input标签的集合
document.getElementsByTagName("input")[0]——通过下标找到集合中的第一个——控制台输入document遍历语句
2、操作HTML元素
获取元素的属性
方式：元素.属性
获取id为test元素的value属性值
var value = document.getElementById("test").value;设置id为test元素的value属性值为“测试”
document.getElementById("test").value = "测试"；其他属性取值、赋值也是一样的
四、HTML DOM事件 ⚠️是DOM提供的API
-
onload() 当网页已加载完成时触发此事件
-
onblur() 当元素失去焦点时触发此事件
-
onfocus() 当元素聚焦时触发此事件
-
onchange() 当元素的value值改变时触发此事件
-
onclick() 单击触发 单击和获取焦点是不同的，有一些元素是获取不到焦点的，但是都可以单击
-
ondblclick() 双击触发
-
onmouseover() 鼠标移动上来了触发的事件