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

简介

本文简要讲解了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>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java】log4j和slf4j区别

【Java】log4j和slf4j区别

log4j&#xff1a;Apache Software Foundation 开源 slf4j&#xff1a;不支持日志滚动等高级功能 在开源库或内部库中使用 SLF4J&#xff0c;将使其独立于任何特定的日志记录实现&#xff0c;这意味着无需为多个库管理多个日志记录配置&#xff0c;您的客户端将会很需要这一点…
阅读更多...
5G智慧港口简述

5G智慧港口简述

港口作为交通运输的枢纽，在促进国际贸易和地区发展中起着举足轻重的作用，全球贸易中约 90% 的贸易由海运业承载，作业效率对于港口至关重要。在“工业 4.0”、“互联网 +”大发展的时代背景下，港口也在进行数字化、全自动的转型升级。随着全球 5G 技术浪潮的到来，华为、振华…
阅读更多...
LOAM: Lidar Odometry and Mapping in Real-time 论文阅读

LOAM: Lidar Odometry and Mapping in Real-time 论文阅读

论文链接 LOAM: Lidar Odometry and Mapping in Real-time 0. Abstract 提出了一种使用二维激光雷达在6自由度运动中的距离测量进行即时测距和建图的方法 距离测量是在不同的时间接收到的&#xff0c;并且运动估计中的误差可能导致生成的点云的错误配准 本文的方法在不需要高…
阅读更多...
javascript 常见事件

javascript 常见事件

简介&#xff1a; JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式…
阅读更多...
02 HAL库驱动按键响应外部中断

02 HAL库驱动按键响应外部中断

引言&#xff1a;这里我采用的实验平台可能跟大家的不太一样&#xff0c;文章的图像是一块资源拓展板&#xff0c; 主控板式fs_mp1a, 该板子的SOC是stm32mp157a&#xff0c; 有两个内核一个A7&#xff0c; 一个M4.但是实验的流程肯定都是一样的&#xff0c; 因为都是裸机程序嘛…
阅读更多...
html文件Js写输入框和弹框调接口jQuery

html文件Js写输入框和弹框调接口jQuery

业务场景&#xff1a;需要使用写一个html文件&#xff0c;实现输入数字&#xff0c;保存调接口。 1、使用 JS原生写法&#xff0c; fetchAPI调接口&#xff0c;使用 alert 方法弹框会阻塞线程&#xff0c;所以写了一个弹框。 <!DOCTYPE html> <html lang"en"…
阅读更多...
Android Studio下载gradle失败

Android Studio下载gradle失败

1、打开Android Studio设置Gradle的地方&#xff0c;点击左上角的File->Settings查看gradle存放路径 C:\Users\Administrator.gradle\wrapper\dists\gradle-5.4.1-all\3221gyojl5jsh0helicew7rwx 2、找到正在下载的gradle版本&#xff0c;Android Studio取消下载gradle&…
阅读更多...
JVM的生命周期

JVM的生命周期

1.加载&#xff08;Loading&#xff09;&#xff1a; 在加载阶段&#xff0c;JVM会找到并加载Java字节码文件。加载阶段分为三个步骤&#xff1a;通过类的全限定名找到对应的字节码文件&#xff0c;创建一个与该类相关的Class对象&#xff0c;将类的静态数据结构存储在方法区中…
阅读更多...
uniapp中uview组件库的丰富Upload 上传上午用法

uniapp中uview组件库的丰富Upload 上传上午用法

目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组&#xff0c;元素为对象)&#xff0c;显示预置的图片。其中元素的url属性为图片路径 <template>…
阅读更多...
【Image】超硬核数学推导——WGAN的先“破”后“立”

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…
阅读更多...
Vscode —— 解决Vscode终端无法使用npm的命令的问题

Vscode —— 解决Vscode终端无法使用npm的命令的问题

在cmd中可以正常执行npm -v等指令,但是在vs code终端中,无法执行npm -v,node -v等指令 出现报错 解决办法&#x1f447; 方法一&#xff1a;【右键单击Vscode】以【管理员身份运行】&#xff0c;【重启Vscode】 方法二&#xff1a;①【用户变量】的【path】添加npm所在路径的…
阅读更多...
使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

在使用yarn部署flink任务时&#xff0c;yarn自动代理了flink web ui&#xff0c;通过yarn的地址即可访问任务web页面。 k8s模式下想访问flink web ui&#xff0c;要么使用NodePort的方式启动任务&#xff0c;然后通过k8s主机IPNodePort端口来进行访问。但是这种方法&#xff0…
阅读更多...
LoongArch指令集-特权指令系统——摘抄自胡伟武体系结构和龙芯架构32位精简版参考手册

LoongArch指令集-特权指令系统——摘抄自胡伟武体系结构和龙芯架构32位精简版参考手册

例外与中断 1 中断 1.1 中断类型 龙芯架构 32 位精简版下的中断采用线中断的形式。每个处理器核内部可记录 12 个线中断&#xff0c;分别是&#xff1a;1 个核间中断&#xff08;IPI&#xff09;&#xff0c;1 个定时器中断&#xff08;TI&#xff09;&#xff0c;8 个硬中断…
阅读更多...
【Kubernetes】kubectl 常用命令

【Kubernetes】kubectl 常用命令

kubectl 常用命令 1.基础命令2.部署命令3.集群管理命令4.故障诊断与调试命令5.高级命令6.设置命令7.其他命令 kubectl 是 Kubernetes 提供的命令行管理工具。通过使用 kubectl&#xff0c;可以管理和操作 Kubernetes。 1.基础命令 命令 说明 create通过文件名或标准输入创建 …
阅读更多...
迅软科技助力高科技防泄密：从华为事件中汲取经验教训

迅软科技助力高科技防泄密：从华为事件中汲取经验教训

近期&#xff0c;涉及华为芯片技术被窃一事引起广泛关注。据报道&#xff0c;华为海思的两个高管张某、刘某离职后成立尊湃通讯&#xff0c;然后以支付高薪、股权支付等方式&#xff0c;诱导多名海思研发人员跳槽其公司&#xff0c;并指使这些人员在离职前通过摘抄、截屏等方式…
阅读更多...
centos7安装nginx并安装部署前端

centos7安装nginx并安装部署前端

目录&#xff1a; 一、安装nginx第一种方式&#xff08;外网&#xff09;第二种方式&#xff08;内网&#xff09; 二、配置前端项目三、Nginx相关命令 好久不用再次使用生疏&#xff0c;这次记录一下 一、安装nginx 第一种方式&#xff08;外网&#xff09; 1、下载nginx ng…
阅读更多...
Servlet入门

Servlet入门

目录 1.Servlet介绍 1.1什么是Servlet 1.2Servlet的使用方法 1.3Servlet接口的继承结构 2.Servlet快速入门 2.1创建javaweb项目 2.1.1创建maven工程 2.1.2添加webapp目录 2.2添加依赖 2.3创建servlet实例 2.4配置servlet 2.5设置打包方式 2.6部署web项目 3.servl…
阅读更多...
关于蚁剑（AntSword）的溯源反制

关于蚁剑（AntSword）的溯源反制

中国蚁剑(AntSword) RCE漏洞 此漏洞在AntSword2.7.1版本上修复 &#xff0c;所以适用于AntSword2.7.1以下版本。 下面介绍被低版本蚁剑攻击后如何进行溯源反打 以物理机为攻击机&#xff0c;虚拟机kali模拟受害者&#xff0c;之后使用kali进行溯源反制 物理机内网ip地址&…
阅读更多...
Spring Data Redis对象缓存序列化问题

Spring Data Redis对象缓存序列化问题

相信在项目中&#xff0c;你一定是经常使用 Redis &#xff0c;那么&#xff0c;你是怎么使用的呢&#xff1f;在使用时&#xff0c;有没有遇到同我一样&#xff0c;对象缓存序列化问题的呢&#xff1f;那么&#xff0c;你又是如何解决的呢&#xff1f; Redis 使用示例 添加依…
阅读更多...
24、Qt使用QCustomPlot

24、Qt使用QCustomPlot

一、下载文件 进入官网&#xff0c;选择“Download”、QCustomPlot.tar.gz Qt Plotting Widget QCustomPlot - Download 二、创建项目 创建一个"Qt Widget Application"项目&#xff0c;基类选择“QMainWindow”&#xff0c;把刚才下载的压缩包里的“qcustomplot.…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发