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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Java jsp+mysql+Spring的汽车出租平台租赁网站平台设计和实现

基于Java jspmysqlSpring的汽车出租平台租赁网站平台设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留…

使用JDBC操作数据库(IDEA编译器)

目录 JDBC的本质 ​ JDBC好处 JDBC操作MySQL数据库 1.创建工程导入驱动jar包 2.编写测试代码 ​相关问题 JDBC的本质 官方(sun公司) 定义的一套操作所有关系型数据库的规则&#xff0c;即接口各个数据库厂商去实现这套接口&#xff0c;提供数据库驱动jar包我们可以使用这…

【数据库】达梦数据库DM8开发版安装

目录 一、达梦数据库概述 1.1 达梦数据库简介 1.2 产品特性 1.3 产品架构 二、安装前准备 2.1 新建 dmdba 用户 2.2 修改文件打开最大数 2.3 挂载镜像 2.4 新建安装目录 2.5 修改安装目录权限 三、数据库安装 3.1 命令行安装 3.2 配置环境变量 四、配置实例 4.1…

离散数学(一) 集合

属于关系 表示 枚举法; 叙述法; 文氏图法 基数 空集 全集 全集是相对唯一的

LaunchPad 市场的复苏,Penpad 成新兴生力军

以 Fair Launch 为主要启动方式的铭文市场的爆发&#xff0c;推动了 LaunchPad 市场的复苏&#xff0c;绝多数所铭文项目都能通过 Fairr Launch 的方式筹集资金实现启动&#xff0c;该赛道的爆发不仅推动了数百亿美元的热钱开始在链上不断涌动&#xff0c;同时也进一步形成了新…

智慧工地uniapp项目管理系统源码

目录 智慧工地的核心 智慧工地特点 智慧工地的优势 智慧工地应用场景 智慧工地平台---项目版&#xff08;端&#xff09; 智慧工地数字栾生平台 三位一体全数据贯通 智慧工地是指应用物联网、大数据、云计算、人工智能等新兴技术&#xff0c;对建筑工地进行数字化、信息…

Maven的环境搭建

前提: 安装 jdk Maven 工作时需要通过网络下载各种插件以完成任务&#xff0c;因此应保证网络的通 畅。 1,下载maven服务器 官网:http:// maven .apache. org 下载如图 2,安装,配置Maven 点击下载二进制的 apache-maven -3.6.0-bin.zip 进行解压&#xff0c;”然后在系统环境…

【鸿蒙 HarmonyOS 4.0】网络请求

一、介绍 资料来自官网&#xff1a;文档中心 网络管理模块主要提供以下功能&#xff1a; HTTP数据请求&#xff1a;通过HTTP发起一个数据请求。WebSocket连接&#xff1a;使用WebSocket建立服务器与客户端的双向连接。Socket连接&#xff1a;通过Socket进行数据传输。 日常…

万字干货-京东零售数据资产能力升级与实践

开篇 京东自营和商家自运营模式&#xff0c;以及伴随的多种运营视角、多种组合计算、多种销售属性等数据维度&#xff0c;相较于行业同等量级&#xff0c;数据处理的难度与复杂度都显著增加。如何从海量的数据模型与数据指标中提升检索数据的效率&#xff0c;降低数据存算的成…

无线充电器沦为帮凶,不仅操纵语音助手,还能烧毁手机

据BleepingComputer消息&#xff0c;佛罗里达大学和 CertiK的一项学术研究表明&#xff0c;名为“VoltSchemer”的新攻击利用电磁干扰&#xff0c;不仅可以让现成的无线充电器操纵智能手机的语音助手&#xff0c;还能够对设备以高热的形式进行物理破坏。 这种近乎有些科幻的方…

干货分享丨我用过超有效的英语学习资料

这两天陈楚都提到了精读《经济学人》的事情&#xff0c;我来谈谈自己的感想吧。 学习本身就是反人性的事情&#xff0c;所以别指望世上有什么超牛的技巧可以七天精通外国语言。 当然了&#xff0c;随着现代技术的发展&#xff0c;这个愿望还真有可能实现。 前段时间&#xff0c…

Aigtek高压放大器是什么东西做的

在许多电子应用中&#xff0c;需要将低电压信号放大到较高电压以满足特定的需求。为了实现这个目标&#xff0c;高压放大器被广泛采用。高压放大器是一种专用电子设备&#xff0c;使用特定的电路和器件来增益输入信号的电压。它通常由以下几个主要组成部分构成。 电源供应 高压…

bugku3

前女友 md5 进去又是讴歌乱进的东西 源代码 看到code.txt,访问一下 <?php if(isset($_GET[v1]) && isset($_GET[v2]) && isset($_GET[v3])){$v1 $_GET[v1];$v2 $_GET[v2];$v3 $_GET[v3];if($v1 ! $v2 && md5($v1) md5($v2)){if(!strcmp($v3,…

OpenWRT部署web站点并结合内网穿透实现无公网ip远程访问

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器&#xff0c;目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器&#xff0c;并且和…

Promise中的链式流

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 本人会很热心的阐述自己的想法&#xff01;谢谢&#xff01;&#xff01;&#xff01; 携手共进&#xff01; 文章目录 前言深入Promise链式流 前言 在探索Promise链式流之前我们要知道两个Promise固有…

c++类和对象新手保姆级上手教学(下)

目录 前言&#xff1a; 初始化列表&#xff1a; explicit关键字&#xff1a; static成员&#xff1a; 友元函数&#xff1a; 友元类&#xff1a; 内部类&#xff1a; 匿名对象&#xff1a; 前言&#xff1a; 类和对象下篇中剩余的部分较为简单易理解&#xff0c;认真记住…

程序员接私活还不知道这几个平台?那你亏到老家了!

程序员接私活现在已经是一个老生常谈的话题了&#xff0c;现在市面上各种程序员接单平台层出不穷&#xff0c;也参差不齐&#xff0c;有比较老牌的知名平台&#xff0c;也有比较好的新兴平台&#xff0c;如此多的平台就容易让人眼花缭乱&#xff0c;不知道该如何选择。 这期文…

day04_流程语句_if_while_for

今日内容 1.if 2.switch 3.while,do-while,for 零、复习 1算术运算符中除法特性 整数相除不保留小数 10/33 2什么作用,i和i什么区别 让数据自增1i,是在后先使用后自增i,是在前先自增后使用 3&& 和 & 有相同点和不同点 相同点: 两边判断式子,一错就错全对才对不同点…

Docker Desktop 4.27.1 Windows 10 安装 教程

Docker Desktop 4.27.1 Windows 10 安装 版本要求windows 版本要求wsl 版本要求docker desktop 版本 安装首先确保系统版本符合要求前提下安装wsl安装 Dockers Desktop安装说明 安装问题docker Desktop 无法正常启动&#xff0c;提示wsl 相关信息wsl --install 执行输出帮助日志…

[Flink01] 了解Flink

Flink入门系列文章主要是为了给想学习Flink的你建立一个大体上的框架&#xff0c;助力快速上手Flink。学习Flink最有效的方式是先入门了解框架和概念&#xff0c;然后边写代码边实践&#xff0c;然后再把官网看一遍。 Flink入门分为四篇&#xff0c;第一篇是《了解Flink》&…