前端基础自学整理|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() 鼠标移动上来了触发的事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1113662.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Linux---进程间通讯(上)

一、进程间通讯的目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;它们&#xff09;发生了某种事件&#xff0…

聚观早报 | OPPO公布全新AI战略;华为P70 Art影像细节曝光

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 2月22日消息 OPPO公布全新AI战略 华为P70 Art影像细节曝光 苹果正加速开发智能戒指 微软将大规模投资人工智能 …

ArcgisForJS如何访问Arcgis Server?

文章目录 0.引言1.准备ArcGIS相关工具2.创建含有ArcSDE地理数据库的MXD文件3.注册ArcSDE地理数据库4.发布数据到Arcgis Server5.ArcgisForJS访问ArcGIS Server数据 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。它…

[word] 如何使用Excel制作简单的流程图 #媒体#微信#学习方法

如何使用Excel制作简单的流程图 对于在职场办公的朋友们来说&#xff0c;经常要使用到Excel演示公式&#xff0c;制作各种图表等等&#xff0c;其实Excel还可以制作简单的流程图呢&#xff0c;估计许多小伙伴们还不知道吧&#xff0c;今天就来给大家演示一下&#xff0c;看完就…

在VSCode中新配置一个ros项目

如何从零开始配置一个ros项目 预先准备初始化ros工程运行hello_ros进行第一个示例进行编译测试 预先准备 首先要在vscode中安装&#xff08;必须安装的&#xff09;&#xff1a;ros&#xff0c;c&#xff0c;cmake&#xff0c;cmake tools&#xff08;补全camkelist文件&#…

一个C#开发的大小只有8KB的贪吃蛇开源游戏!

大家好&#xff0c;我是编程乐趣。 今天给大家推荐基于C#开发的、一个贪吃蛇开源项目&#xff0c;这个项目除了实现贪吃蛇的功能外&#xff0c;重点是讲解如何把编译后的程序&#xff0c;从65MB精简为8KB。 项目地址 https://github.com/MichalStrehovsky/SeeSharpSnake 编译…

openssl3.2 - 编译 - zlib.dll不要使用绝对路径

文章目录 openssl3.2 - 编译 - 编译时的动态库zlib.dll不要使用绝对路径概述测试zlib特性在安装好的目录中是否正常笔记70-test_tls13certcomp.t80-test_cms.t对测试环境的猜测从头再编译测试安装一次测试一下随便改变位置的openssl用到zlib时是否好使测试一下随便改变位置的op…

为全志D1开发板移植LVGL日历控件和显示天气

利用TCP封装HTTP包请求天气信息 Linux还真是逐步熟悉中&#xff0c;现在才了解到Linux即没有原生的GUI&#xff0c;也没有应用层协议栈&#xff0c;所以要实现HTTP应用&#xff0c;必须利用TCP然后自己封装HTTP数据包。本篇即记录封装HTTP数据包&#xff0c;到心知天气请求天气…

javaSE多态

文章目录 斜体样式1.1 面向对象三大特征 ?1.2 什么是多态 ?*斜体样式*1.3 多态的前提1.4 多态的成员访问特点1.5 多态的优缺点1.6 多态的转型1.7 多态的转型注意1.8 解决转型安全隐患 2 内部类2.1 内部类的分类什么是内部类 ?什么时候使用内部类 ?内部类分类 ? 2.2 成员内…

【医学大模型】大模型 + 长期慢病的预测和管理

大模型 长期慢病的预测和管理 提出背景长期慢病框架慢性疾病检测框架如何实现多提示工程为什么使用多提示 慢性疾病管理框架个性化提示工程医学知识注入 提出背景 论文&#xff1a;https://arxiv.org/abs/2401.12988 慢性疾病是指那些需要长期管理和治疗的疾病&#xff0c;包…

PyTorch深度学习实战(37)——CycleGAN详解与实现

PyTorch深度学习实战&#xff08;37&#xff09;——CycleGAN详解与实现 0. 前言1. CycleGAN 基本原理2. CycleGAN 模型分析3. 实现 CycleGAN小结系列链接 0. 前言 CycleGAN 是一种用于图像转换的生成对抗网络(Generative Adversarial Network, GAN)&#xff0c;可以在不需要配…

车灯裂了用什么胶修复?

当车灯出现裂缝、破口、缺损、裂痕、破裂、破损、崩角、掉角等问题时&#xff0c;可以使用车灯无痕修复专用UV胶进行修复。车灯无痕修复专用UV胶是一种经过处理的UV树脂胶&#xff0c;主要成份是改性丙烯酸UV树脂。应用在车灯的专业无痕修复领域。 具有如下特点&#xff1a; 1…

详细描述一下CrossOver2024版本的用途和作用?

当然可以。CrossOver 是一款由 CODE WEAVERS 公司开发的软件&#xff0c;其主要目标是在 macOS 和 Linux 系统上实现与 Windows 应用程序的兼容性。它不同于传统的虚拟机&#xff0c;如 Parallels 或 VMware&#xff0c;因为它并不在 macOS 上创建一个完整的 Windows 环境。相反…

基于机器学习的青藏高原高寒沼泽湿地蒸散发插补研究_王秀英_2022

基于机器学习的青藏高原高寒沼泽湿地蒸散发插补研究_王秀英_2022 摘要关键词 1 材料和方法1.1 研究区概况与数据来源1.2 研究方法 2 结果和分析2.1 蒸散发通量观测数据缺省状况2.2 蒸散发与气象因子的相关性分析2.3 不同气象因子输入组合下各模型算法精度对比2.4 随机森林回归模…

安卓系统签名方法

首先在源码中创建key目录用来存放我们需要的文件&#xff0c;一般需要build/target/product/security/platform.pk8&#xff0c;build/target/product/security/platform.x509.pem&#xff0c;然后执行命令openssl pkcs8 -inform DER -nocrypt -in platform.pk8 -out platform.…

9.vue学习笔记(组件传递Props校验+组件事件-组件传递数据+组件事件-配合“v-model”使用)

文章目录 1.组件传递Props校验1.1.默认值1.2.必选项1.3.注意事项&#xff1a;props 是只读的 2.组件事件-组件传递数据2.1.温馨提示&#xff1a;组件之间传递数据的方案 3.组件事件-配合“v-model”使用 1.组件传递Props校验 Vue组件可以更细致地声明对传入的 props 的校验要求…

重铸安卓荣光——复选框ButtonCheckBox

痛点&#xff1a; 公司打算做安卓软件&#xff0c;最近在研究安卓&#xff0c;打算先绘制样式 研究发现安卓并不像前端有那么多组件库&#xff0c;甚至有些基础的组件都需要自己实现&#xff0c;记录一下自己实现的组件 成品展示 一个复选框样式 选中时背景橙色&#xff0c;带…

升级到PHP8.X的原因和方法

上周有一个使用Hostease美国主机服务器多年的客户&#xff0c;反馈需要升级到PHP8.x&#xff0c;原因是站点程序已升级&#xff0c;并希望站点运行在更高也稳定的PHP8.x上。在升级PHP8.x的过程中&#xff0c;联系我们并反馈在升级过程中遇到了问题&#xff0c;需求解决方案。 升…

利用LaTex批量将eps转pdf、png转eps、eps转png、eps转svg

1、eps转pdf 直接使用epstopdf命令&#xff08;texlive、mitex自带&#xff09;。 在cmd中进入到eps矢量图片的目录&#xff0c;使用下面的命令&#xff1a; for %f in (*.eps) do epstopdf "%f" 下面是plt保存eps代码&#xff1a; import matplotlib.pyplot as…

新手学习Cesium的几点建议

Cesium是当前非常火热的三维数字地球开发框架&#xff0c;很多公司基于Cesium做项目以及形成了自己的产品&#xff0c;关于Cesium的学习&#xff0c;有诸多网站、书籍、学习资料甚至培训教材&#xff0c;这里不再详细推荐&#xff0c;从学习Cesium的角度&#xff0c;资料和教程…