【前端设计】HTML+CSS+JavaScript基本特性

请添加图片描述


👉博__主👈:米码收割机
👉技__能👈:C++/Python语言
👉公众号👈:测试开发自动化【获取源码+商业合作】
👉荣__誉👈:阿里云博客专家博主、51CTO技术博主
👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。


系列文章目录


目录

  • 系列文章目录
  • HTML (HyperText Markup Language)
    • 标签与属性
    • 表单
  • CSS (Cascading Style Sheets)
    • 选择器
    • 盒模型
  • JavaScript
    • 数据类型
    • 函数
    • 事件
    • DOM (Document Object Model)
  • <center>本期好书推荐


HTML (HyperText Markup Language)

标签与属性

HTML 使用标签来定义内容。每个标签通常都有一个开始标签和结束标签。例如,<p> 是段落标签的开始标签,</p> 是其结束标签。

<p>这是一个段落。</p>

许多标签还可以有属性,属性为标签提供额外的信息。例如,<a> 标签可以有 href 属性指定链接地址。

<a href="https://www.example.com">访问 example.com</a>

表单

HTML 中的表单允许用户输入数据:

<form action="/submit" method="post"><input type="text" name="username" placeholder="输入用户名"><input type="password" name="password" placeholder="输入密码"><input type="submit" value="登录">
</form>

CSS (Cascading Style Sheets)

选择器

CSS 使用选择器来确定哪些元素应该应用哪些样式:

  • 元素选择器:如 h1, p, a 等。
  • 类选择器:以.开头,如 .highlight
  • ID 选择器:以#开头,如 #header

盒模型

每个 HTML 元素都可以视为一个盒子,并且有 padding, border, margincontent。这被称为 CSS 盒模型。


JavaScript

数据类型

JavaScript 中有几种基本的数据类型:

  • Number: 如 123, 12.3
  • String: 如 “Hello”, ‘World’
  • Boolean: truefalse
  • Object: 如 { name: 'John', age: 30 }
  • Array: 如 [1, 2, 3]

函数

函数是一组代码,可以接受参数并返回一个值:

function add(x, y) {return x + y;
}

事件

JavaScript 可以响应各种事件,例如点击、键盘按键、鼠标移动等。这使得网页具有交互性。

document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击了!');
});

DOM (Document Object Model)

DOM 是一个编程接口,它表示页面的结构。通过 DOM,JavaScript 可以访问和修改页面内容。

// 获取一个元素
var elem = document.getElementById('myDiv');// 修改元素内容
elem.innerHTML = '新的内容';

本期好书推荐

《HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)(清华社“视频大讲堂"大系 网络开发视频大讲堂)》

京东:https://item.jd.com/13524363.html
当当:http://product.dangdang.com/29482128.html

在这里插入图片描述

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

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

相关文章

小程序使用echarts(超详细教程)

小程序使用echarts第一步就是先引用到小程序里面&#xff0c;可以直接从这里下载 文件很多&#xff0c;我们值下载 ec-canvas 就好&#xff0c;下载完成后&#xff0c;直接放在pages同级目录下 index.js 在我们需要的页面的 js 文件顶部引入 // pages/index/index.js impor…

BUUCTF RSA4

BUUCTF RSA4 下载题目&#xff0c;可见文件给出了3组n和c N 331310324212000030020214312244232222400142410423413104441140203003243002104333214202031202212403400220031202142322434104143104244241214204444443323000244130122022422310201104411044030113302323014101…

从零开始的目标检测和关键点检测(三):训练一个Glue的RTMPose模型

从零开始的目标检测和关键点检测&#xff08;三&#xff09;&#xff1a;训练一个Glue的RTMPose模型 一、重写config文件二、开始训练三、ncnn部署 从零开始的目标检测和关键点检测&#xff08;一&#xff09;&#xff1a;用labelme标注数据集 从零开始的目标检测和关键点检测…

Java自学第1课:安装JDK+Eclipse

1 引言 在学习前&#xff0c;我想说一句&#xff0c;那就是为什么要学习Java。 每个人的出发点都不同&#xff0c;对于做信息化的工程技术人员来说&#xff0c;java不懂&#xff0c;就没法干项目。 尽管有c和matlab等基础&#xff0c;但java看起来与这些语言都不太一样。 做…

PXI-6608 185745H-02 PXI-6527 185633D-01

PXI-6608 185745H-02 PXI-6527 185633D-01 人工智能技术并不新鲜&#xff0c;但运行它的数据和计算却很新鲜 对于那些对人工智能技术历史感兴趣的人来说&#xff0c;一些今天正在使用的技术从20世纪50年代和60年代就已经存在了。 但是&#xff0c;如果人工智能已经存在了这么…

智能电表瞬时电量是什么意思?

智能电表已经成为我们进行能源管理的重要工具。其中&#xff0c;瞬时电量这一概念逐渐走进大众视野。那么&#xff0c;智能电表瞬时电量究竟是什么意思&#xff1f;它对我们的生活和能源管理又有哪些影响呢&#xff1f;下面&#xff0c;小编就来为大家介绍一下瞬时电量&#xf…

安卓毕业设计:基于安卓Android的仓库货物管理app

项目介绍 本文介绍了仓库货物管理APP软件开发建设的意义和国内外发展现状&#xff0c;然后详细描述了所开发手机APP的可行性分析&#xff0c;并分析了手机APP所要实现的功能。因为仓库货物管理设施较多&#xff0c;而且人口密集&#xff0c;不能更好的管理仓库货物&#xff0c…

django毕业设计基于python企业资产管理系统

项目介绍 本文首先介绍了企业资产管理系统的发展背景与发展现状&#xff0c;然后遵循软件常规开发流程&#xff0c;首先针对系统选取适用的语言和开发平台&#xff0c;根据需求分析制定模块并设计数据库结构&#xff0c;再根据系统总体功能模块的设计绘制系统的功能模块图&…

【LeetCode刷题-链表】--146.LRU缓存

146.LRU缓存 方法一&#xff1a;哈希表双向链表 使用一个哈希表和一个双向链表维护所有在缓存中的键值对 双向链表按照被使用的顺序存储了这些键值对&#xff0c;靠近头部的键值对是最近使用的&#xff0c;而靠近尾部的键值对是最久使用的哈希表即为普通的哈希映射&#xff0…

文心一言 VS 讯飞星火 VS chatgpt (127)-- 算法导论11.2 2题

二、用go语言&#xff0c;位向量(bit vector)是一个仅包含0和1的数组。长度为m的位向量所占空间要比包含m个指针的数组少得多。请说明如何用一个位向量来表示一个包含不同元素(无卫星数据)的动态集合。字典操作的运行时间应为 O(1)。 文心一言&#xff0c;代码正常运行&#x…

HTML5+CSS3+JS小实例:简约的黑色分页

实例:简约的黑色分页 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…

【计算机网络】数据链路层——以太网协议

目录 1.完整的数据传输流程2.以太网以太网通信原理以太网帧格式MAC地址对比MAC地址和IP地址MTU 3.ARP协议ARP协议的作用ARP协议的格式ARP协议的原理 1.完整的数据传输流程 IP拥有将数据跨网络从一台主机送到另一台主机的能力&#xff0c;但IP并不能保证每次都能够将数据可靠的送…

docker中安装rabbitMq并配置启动

目录 1. 拉取镜像并安装&#xff08;此处实例安装的是最新版&#xff09;2.查看docker中已安装的镜像和版本3.启动RabbitMq4.配置管理端5.安装完成 1. 拉取镜像并安装&#xff08;此处实例安装的是最新版&#xff09; docker pull rabbitmq2.查看docker中已安装的镜像和版本 …

06、如何将对象数组里 obj 的 key 值变成动态的(即:每一个对象对应的 key 值都不同)

1、数据情况&#xff1a; 其一、从后端拿到的数据为&#xff1a; let arr [1,3,6,10,11,23,24] 其二、目标数据为&#xff1a; [{vlan_1: 1, value: 1}, {vlan_3: 3, value: 1}, {vlan_6: 6, value: 1}, {vlan_10: 10, value: 1}, {vlan_11: 11, value: 1}, {vlan_23: 23, v…

linux环境下编译,安卓平台使用的luajit库

一、下载luajit源码 1、linux下直接下载&#xff1a; a、使用curl下载&#xff1a;https://luajit.org/download/LuaJIT-2.1.0-beta3.tar.gz b、git下载地址&#xff1b;https://github.com/LuaJIT/LuaJIT.git 2、Windows下载好zip文件&#xff0c;下载地址&#xff1a;https…

银河麒麟x86版、银河麒麟arm版操作系统编译zlmediakit

脚本 # 安装依赖 gcc-c.x86_64 这个不加的话会有问题 sudo yum -y install gcc gcc-c libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git openssl-devel gcc-c.x86_64mkdir -p /home/zenglg cd /home/zenglg git clone --depth 1 https://gitee.com/xia-chu…

快速了解:什么是优化问题

1. 定义 数学优化问题是&#xff1a;在给定约束条件下&#xff0c;找到一个目标函数的最优解&#xff08;最大值或最小值&#xff09;。 2. 快速get理解 初学者对优化技术陌生的话&#xff0c;可以把 “求解优化问题” 理解为 “解一个不等式方程组”&#xff0c;解方程的。…

基于深度学习的植物识别算法 - cnn opencv python 计算机竞赛

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 MobileNetV2网络4 损失函数softmax 交叉熵4.1 softmax函数4.2 交叉熵损失函数 5 优化器SGD6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的植物识别算法 ** …

Git 删除本地和远程分支

目录 删除本地和远程分支分支删除验证验证本地分支验证远程分支 开源项目微服务商城项目前后端分离项目 删除本地和远程分支 删除 youlai-mall 的 dev 本地和远程分支 # 删除本地 dev 分支&#xff08;注&#xff1a;一定要切换到dev之外的分支才能删除&#xff0c;否则报错&…