当前位置： 首页 > news >正文

前端三件套html/css/js的基本认识以及示例程序

news 文章来源：https://blog.csdn.net/killsime/article/details/135263124 2025/1/16 20:07:01

简介

本文简要讲解了html,css,js.主要是让大家简要了解网络知识

因为实际开发中很少直接写html&css,所以不必过多纠结,了解一下架构就好

希望深度学习可以参考MDN和w3school

HTML

基础

HTML (Hyper Text Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言.

主要用于页面结构的组织

最简单的一个内容是这样的

<p>welcome to html</p>

属性

使用属性来给元素设定额外信息,属性的基本写法为

<p class="foobar">EESAST</p>

用空格与元素名或前一个属性隔开,属性名="值"(单引号双引号都可)

比较典型的例子就是元素<a>,用来创建链接

<a href="https://eesast.com" title="科协官网">EESAST</a>

常用标签

  1. 文档结构标签:
    • <!DOCTYPE html>: 定义HTML文档类型和版本.
    • <html>: HTML文档的根元素.
    • <head>: 包含文档的元信息,如标题、字符集等.
    • <title>: 定义文档的标题,显示在浏览器的标题栏或标签页上.
    • <body>: 包含文档的主要内容.
  2. 文本标签:
    • <h1> to <h6>: 定义标题,h1为最高级标题,h6为最低级标题.
    • <p>: 定义段落.
    • <br>: 插入换行.
    • <hr>: 插入水平线.
  3. 链接和图像标签:
    • <a>: 定义超链接.
    • <img>: 插入图像.
  4. 列表标签:
    • <ul>: 无序列表.
    • <ol>: 有序列表.
    • <li>: 列表项.
  5. 表格标签:
    • <table>: 定义表格.
    • <tr>: 定义表格行.
    • <th>: 定义表头单元格.
    • <td>: 定义表格数据单元格.
  6. 表单标签:
    • <form>: 定义表单.
    • <input>: 定义输入字段.
    • <textarea>: 定义文本域.
    • <button>: 定义按钮.
    • <select>: 定义下拉列表.
    • <label>: 定义表单标签.
  7. 样式和格式标签:
    • <style>: 定义文档的样式信息.
    • <div>: 定义文档中的一个区块.
    • <span>: 定义文档中的内联元素容器.
    • <strong>: 定义强调文本.
    • <em>: 定义强调的文本.
  8. 其他常用标签:
    • <meta>: 定义文档的元信息,如字符集、关键词等.
    • <script>: 插入JavaScript代码.
    • <iframe>: 插入内联框架.
    • <head>: 定义文档的头部.
    • <footer>: 定义文档的页脚.

基本结构

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的测试站点</title></head><body><p>这是我的页面</p></body>
</html>

基本布局

  • <header>：页眉.
  • <nav>：导航栏.
  • <main>：主内容.主内容中还可以有各种子内容区段,可用<article>、<section> 和<div>等元素表示.
  • <aside>：侧边栏,经常嵌套在<main>中.
  • <footer>：页脚.

关于完整的 html 元素和属性,可以参考这里

应用 CSS 和 JavaScript

对于 CSS,需要加入一个<link>元素,rel="stylesheet"表明这是文档的样式表,而 href 包含了样式表文件的路径,这个元素一般放在head里

<link rel="stylesheet" href="my-css-file.css" />

对于 js 脚本,加入<script>元素,src 为脚本的路径.把它放在文档的尾部</body>标签之前是一个更好的选择,这样可以确保在加载脚本之前浏览器已经解析了 HTML 内容

<script src="my-js-file.js"></script>

这里 script 元素没有内容,但他不是一个空元素,你也可以直接把脚本写在元素里

CSS

基础

CSS (Cascading Style Sheets,层叠样式表),用于定义样式,实现很多炫酷的功能,如

h1 {color: red;font-size: 5em;
}

主要语法如下

选择器 : 语法由一个 选择器 (selector) 开头.它选择 (selects)了我们将要用来添加样式的 HTML 元素.在这个例子中我们为一级标题(主标题<h1>)添加样式.

样式修改 : 接着输入一对大括号{ }.在大括号内部定义一个或多个形式为 属性 (property):值 (value);

元素选择器

标签匹配

使用元素选择器来直接匹配一种 html 元素

p {color: green;
}

id匹配

#ID {color: red;
}

多标签匹配

不同的选择器可以用,隔开来使用多个选择器

p, li { color: green; }

这种直接指定元素类型的写法只能同时应用于所有同类元素,在实际使用的时候是十分不方便的,因此我们还可以使用类名来进一步指定作用的对象.前面说到 HTML 中的元素可以添加属性,这里的类名选择器就对应标签中的class属性,比如

<ul><li>项目一</li><li class="special">项目二</li><li>项目 <em>三</em></li>
</ul>

同标签特殊匹配

.special {color: orange;font-weight: bold;
}

这里指定了属于 special 类的元素进行设置,在在选择器的开头加.即为指定类,当然可以同时指定元素和类

li.special,
span.special {color: orange;font-weight: bold;
}

元素位置匹配

嵌套关系

li em {color: rebeccapurple;
}

表示选择嵌套在<li>内部的<em>

相邻关系

h1 + p {font-size: 200%;
}

表示选择跟在<h1>后面的<p>

例子

可以尝试下解读这个选择器

body h1 + p .special {color: yellow;background-color: black;padding: 5px;
}

盒模型

参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,可以帮助我们使用 CSS 实现准确布局、处理元素排列.

CSS 中组成一个块级盒子需要:

  • Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置.
  • Border box: 边框盒包裹内容和内边距.大小通过 border 相关属性设置.
  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域.大小通过 margin 相关属性设置.

如下图：

boxmodel.png

在标准模型中,如果你给盒设置 width 和 height,实际设置的是 content box. padding 和 border 再加上设置的宽高一起决定整个盒子的大小

.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black;
}

可以尝试计算一下这个盒子的大小

JS

简介

这里主要介绍浏览器对象模型,用于浏览器的日常开发,我们可以通过js方便的操控这些对象

BOM

BOM,一个基于js的浏览器对象,但并不是W3C(World Wide Web Consortium,万维网联盟)标准,不同浏览器存在差异

如图,是浏览器模型的基本结构,在浏览器环境下,一般可以省略window

我们主要控制的还是DOM对象

BOM.png

常用属性

  • open()/close()打开/关闭窗口

  • alert()弹窗警告

DOM

符合W3C标准,在日常开发更常见

添加/删除

// 添加/删除 HTML 元素
// appendChild(): 将新元素作为其它元素的子节点进行添加（添加到尾部）
// insertBefore(): 将新元素添加到其它元素的头部let para = document.createElement("p"); // 创建一个段落
let text = document.createTextNode("abc"); // 创建一个文本节点
para.appendChild(text); // 将该段落与文本合成一个元素 <p>abc</p>
x.appendChild(para); // 将新元素 para 添加到 x 的尾部
x.insertBefore(para); // 将新元素 para 添加到 x 的头部// 删除元素时需要知道该节点的父节点
// removeChild(): 将某元素的子节点移除
// 一般来说是这样删除节点的：
// child.parentNode.removeChild(child); // 先找父节点，再删除

查找

let x= document.getElementById ("content"); //通过id
let x = document.getElementsByClassName("content"); //通过

修改

通过查找然后赋值实现

// 利用 innerHTML 属性修改元素的内容：
let x = document.getElementById("content"); // 找到对应的元素
x.innerHTML = "hello world";// 利用 style 属性修改元素的 CSS 格式：
document.getElementById("content").style.color = "red";

使用

直接写在 HTML 中：

一般放在body最后面,避免阻塞

<script>console.log("Hello World!");
</script>

通过文件的路径引入：

defer表示在html解析完毕后执行,避免阻塞

<script src="___.js" defer></script>

示例

下面是一个使用了html,css,js的简单实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello World Example</title><style>body {display: flex;align-items: center;justify-content: center;height: 100vh;}#helloText {color: red;}</style>
</head><body><div><p id="helloText">Hello World</p><button id="changeColorButton" onclick="changeColor()">Change Color to black</button></div><script>function changeColor() {document.getElementById('helloText').style.color = 'black';}</script>
</body></html>

相关文章：

前端三件套html/css/js的基本认识以及示例程序

简介 本文简要讲解了html,css,js.主要是让大家简要了解网络知识 因为实际开发中很少直接写html&css,所以不必过多纠结,了解一下架构就好 希望深度学习可以参考MDN和w3school HTML 基础 HTML (Hyper Text Markup Language) 不是一门编程语言,而是一种用来告知浏览器如…...

编程日记 2023/12/30 12:01:36

云计算：OpenStack 配置云主机实例的存储挂载并实现外网互通

目录 一、实验 1. 环境 2.配置存储挂载 3.云主机实例连接外部网络&#xff08;SNAT&#xff09; 4.外部网络连接云主机实例&#xff08;DNAT&#xff09; 二、问题 1.云主机 ping 不通外部网络 2.nova list 查看云主机列表报错 3.nova list 与 virsh list --all有何区…...

编程日记 2023/12/30 12:00:35

python/selenium/jenkins整合

1、新建python项目&#xff0c;专门写selenium代码&#xff0c;建议用pytest框架写。 2、把代码上传到代码库中。 3、环境配置&#xff1a; 3.1 在跑jenkins的机器上配置好python环境&#xff0c;需要python --version能在任何地方运行&#xff08;配置好系统环境变量&#…...

编程日记 2023/12/30 11:59:34

华为路由器ACL操作SSH接口

ACL的定义 访问控制列表&#xff08;Access Control Lists&#xff0c;ACL&#xff09;是应用在路由器接口的指令列表。这些指令列表用来告诉路由器哪些数据包可以收、哪些数据包需要拒绝。至于数据包是被接收还是拒绝&#xff0c;可以由类似于源地址、目的地址、端口号等的特…...

编程日记 2023/12/30 11:57:32

Flutter 三点三：Dart Stream

Stream Stream用于接收异步事件Stream 可以接收多个异步事件Stream.listen()方法返回StreamSubscription 可用于取消事件订阅&#xff0c;取消后&#xff0c;不再接收事件 基本使用 Stream.fromFutures([Future.delayed(Duration(seconds: 1),(){return "事件1";})…...

编程日记 2023/12/30 11:55:30

centos 防火墙 设置 LTS

centos 防火墙 设置 LTS https://blog.csdn.net/m0_58805648/article/details/130671008...

编程日记 2023/12/30 11:54:29

SAP缓存 表缓存（ Table Buffering）

本文主要介绍SAP中的表缓存在查询数据&#xff0c;更新数据时的工作情况以及对应概念。 SAP表缓存的工作 查询数据 更新数据 删除数据 表缓存的概念 表缓存技术设置属性 不允许缓冲&#xff1a; 允许缓冲&#xff0c;但已关闭&#xff1a; 缓冲已激活&#xff1a; 已…...

编程日记 2023/12/30 11:52:27

Mybatis插件入门

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…...

编程日记 2023/12/30 11:48:23

DOA估计算法——迭代自适应算法(IAA)

1 简介 迭代自适应法 (Iterative Adaptive Approach&#xff0c;IAA)估计算法最早由美国的电气工程师和数学家Robert Schmidt和Roy A. Kuc在1986年的一篇论文"Multiple Emitter Location and Signal Parameter Estimation"中首次提出了这一算法&#xff0c; IAA DOA …...

编程日记 2023/12/30 11:46:21

Python If语句以及代码块的基本介绍

if语句 在编程中if语句是一种根据条件执行不同代码块的控制结构,他根据条件的真假来分支程序的执行路径,所以我们可以通过if语句根据不同情况而执行不同的程序 格式 if [条件(bool值或者计算结果为bool类型的算式)] : a11if a>10:print("a大于10") # --> a大…...

编程日记 2023/12/30 11:44:19

[嵌入式专栏](FOC - SVPWM扇区计算Part1)

文章目录 1 . 概要2 . 扇区计算2.1 扇区Ⅰ计算2.2 扇区Ⅱ计算2.3 扇区Ⅲ计算 3 . 小结 【极客技术传送门】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 概要 经过扇区判断后&#xff0c;就知道在哪个扇区进行输出了 【Q】但是每个扇区分别输出怎样的结…...

编程日记 2023/12/30 11:42:17

亚马逊美国站ASTM F2613儿童折叠椅和凳子强制性安全标准

ASTM F2613折叠椅和凳子安全标准 美国消费品安全委员会&#xff08;CPSC&#xff09;发布的ASTM F2613儿童折叠椅和凳子的强制性安全标准&#xff0c;已于2020年7月6日生效&#xff0c;并被纳入联邦法规《16 CFR 1232儿童折叠椅和凳子安全标准》。 亚马逊要求在美国站上架的儿…...

编程日记 2023/12/30 11:41:16

【机组期末速成】指令系统|机器指令概述|操作数类型与操作类型|寻址方式|指令格式

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;计算机组成原理&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 一、本章考点总览 二、考点分析 1、以下有关指令系统的说法中错误的是&#xff08; &#xff09;。 2…...

编程日记 2023/12/30 11:40:15

java美容管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web美容管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…...

编程日记 2023/12/30 11:39:14

Redis哨兵

1.哨兵介绍 1.1.为何需要哨兵&#xff1f; 为了解决master节点宕机问题&#xff0c;选举salve节点为新的master节点。 1.2.哨兵的作用 1.3.服务状态监控 1.4.选举新的master 1.5.如何实现故障转移 2.搭建哨兵集群 2.1.集群结构 这里我们搭建一个三节点形成的Sentinel集群&…...

编程日记 2023/12/30 11:38:13

面试算法78：合并排序链表

题目 输入k个排序的链表&#xff0c;请将它们合并成一个排序的链表。 分析&#xff1a;利用最小堆选取值最小的节点 用k个指针分别指向这k个链表的头节点&#xff0c;每次从这k个节点中选取值最小的节点。然后将指向值最小的节点的指针向后移动一步&#xff0c;再比较k个指…...

编程日记 2023/12/30 11:36:11

鸿鹄电子招投标系统：基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台源码与立项流程

在数字化时代&#xff0c;企业需要借助先进的数字化技术来提高工程管理效率和质量。招投标管理系统作为企业内部业务项目管理的重要应用平台&#xff0c;涵盖了门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理等…...

编程日记 2023/12/30 11:35:10

node.js对应npm安装和使用

介绍 node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;安装node后自带npm。NPM &#xff1a;Node Package ManagerNPM是Node.js标准的软件包管理器 。2010年底&#xff0c;Node.js 的包管理器 npm 诞生&#xff0c;是全球最大的开源库生态系统。 node 20…...

编程日记 2023/12/30 11:33:08

（self-supervised learning）Event Camera Data Pre-training

Publisher: ICCV 2023 MOTIVATION OF READING: 自监督学习、稀疏事件 NILM link: https://arxiv.org/pdf/2301.01928.pdf Code: GitHub - Yan98/Event-Camera-Data-Pre-training 1. Overview Contributions are summarized as follows: 1. A self-supervised framework f…...

编程日记 2023/12/30 11:32:07

关于个人Git学习记录及相关

前言 可以看一下猴子都能懂的git入门&#xff0c;图文并茂不枯燥 猴子都能懂的git入门 学习东西还是建议尽可能的去看官方文档 权威且详细 官方文档 强烈建议看一下GitHub漫游指南及开源指北&#xff0c;可以对开源深入了解一下&#xff0c;打开新世界的大门&#xff01; …...

编程日记 2023/12/30 11:31:06

【eclipse】eclipse开发springboot项目使用入门

下载eclipse Eclipse downloads - Select a mirror | The Eclipse Foundation 安装eclipse 其他一步一步即可 我们是开发java web选择如下 界面修改 Window->Preferences-> 修改eclipse风格主题 Window->Preferences->General->Appearance 修改字体和大小…...

编程日记 2023/12/30 11:30:05

Android 13 默认关闭 快速打开相机

介绍 在设置菜单的手势界面里&#xff0c;快速打开相机是默认开启的&#xff0c;此功能当开启时连续点击两次电源键会打开相机&#xff0c;现在客户需要默认关闭。 效果展示 修改 这里一开始想到的就是配置文件&#xff0c;在路径下果然找到了,从注释中看使我们需要的&#x…...

编程日记 2023/12/30 11:29:04

pytest pytest-html优化样式

conftest.py import pytest from pytest_metadata.plugin import metadata_keydef pytest_html_report_title(report):report.title"接口测试报告"def pytest_configure(config):# 获取命令行参数中的测试环境、测试版本、开始时间、测试人员config.stash[metadata_…...

编程日记 2023/12/30 11:28:03

Visual Studio 配置DLL

我们在用Visual Studio进行开发时&#xff0c;如果没有正确配置DLL&#xff0c;就会出现类似“丢失***.dll”的错误。DLL配置有哪些方法&#xff1f; 1、手动复制 将dll文件拷贝到生成的.exe所在的文件夹里 2、配置环境 在右键属性->配置属性->调试->环境&#xf…...

编程日记 2023/12/30 11:26:01

C/C++转WebAssembly及微信小程序调用

上一篇文章讲了C/C如何转WebAssembly&#xff0c;并测试了在Web端调用。本篇内容和上篇一样&#xff0c;介绍C/C包转的.wasm包如何在小程序中调用。 说明 本篇是在上一篇步骤1-4的基础上&#xff0c;再做修改&#xff0c;供微信小程序端调用的方法和步骤。 本篇操作手册可以…...

编程日记 2023/12/30 11:23:59

【WPF.NET开发】弱事件模式

本文内容 先决条件为什么要实现弱事件模式&#xff1f;应该由谁实现弱事件模式&#xff1f;如何实现弱事件模式 在应用程序中&#xff0c;附加到事件源的处理程序可能不会与将处理程序附加到源的侦听器对象一同销毁。 这种情况下会导致内存泄漏。 Windows Presentation Found…...

编程日记 2023/12/30 11:19:55

[Angular] 笔记 16：模板驱动表单 - 选择框与选项

油管视频&#xff1a; Select & Option (Template Driven Forms) Select & Option 在 pokemon.ts 中新增 interface: export interface Pokemon {id: number;name: string;type: string;isCool: boolean;isStylish: boolean;acceptTerms: boolean; }// new interface…...

编程日记 2023/12/30 11:18:54

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中&#xff0c;我们常常会遇到…...

编程日记 2023/12/30 11:14:51

扭蛋机小程序搭建：打造互联网“流量池”

随着互联网科技的发展&#xff0c;扭蛋机小程序成为了市场发展的重要力量。 扭蛋机市从日本发展流行起来的&#xff0c;玩法就是根据设置的概率&#xff0c;让玩家体验扭蛋机的乐趣。扭蛋机中有隐藏款和稀有款&#xff0c;为了获得稀有款商品&#xff0c;玩家便会进行扭蛋&…...

编程日记 2023/12/30 11:13:50

解决VNC连接Ubuntu服务器打开终端出现闪退情况

服务器环境 阿里云ECS服务器 操作系统&#xff1a;Ubuntu 20.0.4 如何使用VNC连接阿里云ECS服务器 1.阿里云官方指导&#xff1a;通过VNC搭建Ubuntu 18.04和20.04图形界面 2.新手入门ECS——ubuntu 20.04安装图形化界面和本地VNC连接 问题描述 使用VNC连接上新申请阿里云服…...

编程日记 2023/12/30 11:12:49

浙江网站建设网站优化/手游推广平台

【vue开发问题-解决方法】&#xff08;四&#xff09;vue Element UI使用中.$scopedSlots.default is not a function 报错参考文章&#xff1a; &#xff08;1&#xff09;【vue开发问题-解决方法】&#xff08;四&#xff09;vue Element UI使用中.$scopedSlots.default is …...

编程日记 2025/1/16 19:40:24

邢台千度网络科技有限公司/seo引擎搜索网站

我用的系统是ubuntu13.10&#xff0c;在进入hiveshell之后&#xff0c;输入showtables;显示&#xff1a;hive>showtables;FAILED:Errorinmetadata:java.lang.RuntimeException:Unabletoinstantiateorg.apache.hadoop....我用的系统是ubuntu13.10&#xff0c;在进入hive shel…...

编程日记 2025/1/16 19:08:26

网站后台登录界面下载/网站首页模板

English tutorial has been published.You can see here http://codeforces.com/blog/entry/5160 【A k-String】 http://www.codeforces.com/contest/219/problem/A 题目大意&#xff1a;给你一堆字母&#xff0c;问用这些字母能不能组成一个由某个循环节循环k次得到的字符串。…...

编程日记 2025/1/16 18:19:31

wordpress对话框模板/it行业培训机构一般多少钱

按照个人的要求来创建含有被研究信息的数据集&#xff0c;这是做任何数据分析的第一步&#xff0c;这个任务包括以下两步&#xff1a; 选择一种数据结构来存储数据&#xff1b;将数据输入或者导入到这个数据结构中。2.1 数据集的概念 数据集通常是由数据构成的一个矩形数组&…...

编程日记 2025/1/16 14:32:58

虚拟主机对网站seo有哪些影响/网站seo优化运营

phpmyadmin1、先下载一份最新版的phpMyAdmin MYSQL管理器&#xff0c;可以到天空软件站去下载&#xff0c;我刚下载的是2.8.2.1的版本2、解压后得到一个phpMyAdmin的目录(你可以改名)找到目录里的config.inc.php文件(最新版的在解压得到的文件夹中找不到了&#xff0c;其实你可…...

编程日记 2025/1/16 9:43:03

学做川菜网站/一元友情链接平台

面向对象使用class 关键字声明类class class_name:构造函数__init__(self):所有的方法必须加上self参数&#xff0c;self代表类的实例&#xff0c;在定义时必须有。通过.访问属性或方法&#xff0c;实例.方法&#xff08;&#xff09;&#xff0c;类名.属性&#xff08;相当于静…...

编程日记 2025/1/16 8:27:48