目录
一、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() 双击触发文章来源：https://www.toymoban.com/news/detail-835663.html
-
onmouseover() 鼠标移动上来了触发的事件文章来源地址https://www.toymoban.com/news/detail-835663.html
到了这里，关于前端基础自学整理｜HTML + JavaScript + DOM事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
