前端基础自学整理｜HTML + JavaScript + DOM事件

前端基础自学整理｜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)
```
html>                   
<html>                                   
<head>                                   
  <meta charset="utf-8">        
  <title>撕家title>                
head>
<body>                                  
  <h1>这是大标题h1>           
body>
html>
```
1、Html标签

HTML标记标签通常被称为HTML标签(HTML tag)
- 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>
```
下拉框

一、HTML

1、Html标签

2、Html元素

3、基本的HTML标签