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

【web前端HTML+CSS+JS】--- HTML学习笔记01

学习链接:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

学习文档:

Web 开发技术 | MDN (mozilla.org)

一、前后端工作流程

WEB模型:前端用于采集和展示信息,中间的数据请求由后端负责

CS架构:客服端-服务器,通过APP/软件访问

BS架构:浏览器-服务器,通过网站访问

浏览器内核用来解析前端代码

二、HTML5+CSS+JS

1.语言功能

HTML用来搭建页面内容和结构

CSS用来添加样式,比如字体颜色大小、背景颜色、字体间距等

JS用来实现网页的行为,让页面动起来

2.前端开发工具

常用vscode来开发

3.插件

vscode中可安装一些插件:Auto Rename Tag(自动修改尾标签),会了吧(翻译单词)

Live Server插件工作原理:html文件要放到文件夹里,用vscode打开文件夹,右键可以在vscode中打开页面,修改内容之后保存会在页面实时更新

三、HTML5

1.HTML和XHTML

具有根结构、头结构、体结构标签

HTML的语法较松散,可以没有根结构,XHTML的语法很严格,现有绝大多数还是用HTML

2.注释:快捷键ctrl+/

<!--注释-->

3.标签

(1)语法

所有的指令都需要标签(开始标签,内容/标签体,结束标签,元素),标签不区分大小写,推荐使用小写

(2)分类

按照标签的结构来分:①围堵标签,如段落<p></p>②自闭合标签,如水平分割线<hr>

按照标签效果来分:①行内(内联)标签:不会独占一行,会和其他标签共享一行。表示斜体

我是<em>第一名</em>

块级标签:会独立成为一行,不和其他标签共享一行。

(3)嵌套

一个标签中可以写另一个标签:行内嵌套行内,块级嵌套行内,块级嵌套块级

行内不可以嵌套块级,行内会失效

<!--行内嵌套行内-->
我是<em><strong>第一名<strong/></em>

(4)常见标签

标题标签:<h1></h1>  <h2></h2>.........字体大小不同

段落标签:<p></p>

4.常规属性(有值)

(1)单引号/双引号

属性是作用在标签上的,属性不会直接作用在内容上,属性值的引号可以省略,但不建议

属性的值可以用单引号或者双引号,但同类型的引号是不能嵌套的

(2)以超链接标签为例

href属性:表示跳转到哪个网址

title属性:给元素添加提示信息,鼠标悬停时可以提示内容

target属性:_blank 让页面在新的窗口打开,_self在当前页面加载(默认)

可以给图片、标题添加超链接

<a href="https://developer.mozilla.org/zh-CN/docs/Web" title="这是web开发文档" target="_blank">这是链接</a>

5. 布尔属性(无值)

是属性的一种简化写法,常见于表单标签中,没有值,比如下面的disabled

<!--表示输入框不可用-->
<input type="text" disabled> 请输入名字

6.实体字符

如何表示html语法中的字符

7.空格的处理

无论写多个空格,都会只展示一个空格,所以需要用实体字符&nbsp;

<p>My&nbsp;&nbsp;&nbsp;&nbsp;cat is very grumpy</p>

8.HTML结构

<!--<!DOCTYPE html> 是最短的有效文档声明-->
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的测试站点</title></head><body><p>这是我的页面</p></body>
</html>

meta标签(元标签):用于指定元数据,即网页的描述,关键词,文件的最后修改时间,作者及其他元数据,不会显示在客户端。

字符集:字符和二进制在计算机中的存储关系,英文用ascii,中文用gbk,通用用utf-8

9.列表(可以嵌套)

(1)无序列表

通过属性可以更换前面圆圈的样式,嵌套时自动更换图标

(2)有序列表

通过属性可以更换前面序号的样式,嵌套时不会自动更换图标

10.语义化

语义:表示该标签的意义,比如h1表示一级标题

标签效果:给用户看到的效果,可以通过css控制样式

任何效果都可以通过控制标签实现,所以语义是最重要的

<em>和<i>标签都可以表示斜体,更推荐使用<em>,因为不止有斜体效果

<strong>和<b>标签都可以表示加粗,更推荐使用<strong>,因为不止有加粗效果

11.插入图片

插入本地图片或链接指向的图片,推荐本地图片

一般不会直接修改图片的大小,会糊

12.相对路径和绝对路径

./当前路径  可省略

../上一级路径

13.表格

(1)结构

(2)属性与样式

cellspacing:设置每个数据边框之间的距离

cellpadding:设置数据与边框之间的距离

表头改为<th>:对数据加粗居中

align属性:数据居中

bgcolor属性:设置背景颜色

(3)跨行跨列(单元格合并)

跨列操作

跨行操作

14.表单

作用:采集信息

相关文章:

【web前端HTML+CSS+JS】--- HTML学习笔记01

学习链接&#xff1a;黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程_哔哩哔哩_bilibili 学习文档&#xff1a; Web 开发技术 | MDN (mozilla.org) 一、前后端工作流程 WEB模型&#xff1a;前端用于采集和展示信息&#xff0c;中…...

Go 语言入门(一)

Go Modules依赖包查找机制 下载的第三方的依赖存储在 $GOPATH/pkg/mod 下go install 生成的可执行文件存储在 $GOPATH/bin下依赖查找顺序&#xff1a; 工作目录$GOPATH/pkg/mod$GOPATH/src 一、Go语言基础 1.标识符与关键字 1.1 命名方式 ​ go变量、常量、自定义类型、包…...

爬虫笔记20——票星球抢票脚本的实现

以下内容仅供交流学习使用&#xff01;&#xff01;&#xff01; 思路分析 前面的爬虫笔记一步一步走过来我们的技术水平也有了较大的提升了&#xff0c;现在我们来进行一下票星球抢票实战项目&#xff0c;实现票星球的自动抢票。 我们打开票星球的移动端页面&#xff0c;分…...

DDR3(三)

目录 1 预取1.1 什么是预取1.2 预取有哪些好处1.3 结构框图1.4 总结 2 突发2.1 什么是突发2.2 突发与预取 本文讲解DDR中常见的两个术语&#xff1a;预取和突发&#xff0c;对这两个概念理解的关键在于地址线的低位是否参与译码&#xff0c;具体内容请继续往下看。 1 预取 1.1…...

JDK都出到20多了,你还不会使用JDK8的Stream流写代码吗?

目录 前言 Stream流 是什么&#xff1f; 为什么要用Steam流 常见stream流使用案例 映射 map() & 集合 collect() 单字段映射 多字段映射 映射为其他的对象 映射为 Map 去重 distinct() 过滤 filter() Stream流的其他方法 使用Stream流的弊端 前言 当你某天看…...

QT slots 函数

文章目录 概述小结 概述 在Qt中&#xff0c;slots 是一种特殊的成员函数&#xff0c;它们可以与对象发出的信号连接。当信号被触发时&#xff0c;连接的槽函数会被调用。 来个简单的示例吧&#xff0c;如下图&#xff1a; #include <QObject> #include <QDebug>…...

pycharm如何使用jupyter

目录 配置jupyter新建jupyter文件别人写的方法&#xff08;在pycharm种安装&#xff0c;在网页中使用&#xff09; pycharm专业版 配置jupyter 在pycharm终端启动一个conda虚拟环境&#xff0c;输入 conda install jupyter会有很多前置包需要安装&#xff1a; 新建jupyter…...

机器学习——无监督学习(k-means算法)

1、K-Means聚类算法 K表示超参数个数&#xff0c;如分成几个类别&#xff0c;K值就取多少。若无需求&#xff0c;可使用网格搜索找到最佳的K。 步骤&#xff1a; 1、随机设置K个特征空间内的点作为初始聚类中心&#xff1b; 2、对于其他每个点计算到K个中心的距离&#xff0c;…...

强化学习-6 DDPG、PPO、SAC算法

文章目录 1 DPG方法2 DDPG算法3 DDPG算法的优缺点4 TD3算法4.1 双Q网络4.2 延迟更新4.3 噪声正则 5 附15.1 Ornstein-Uhlenbeck (OU) 噪声5.1.1 定义5.1.2 特性5.1.3 直观理解5.1.4 数学性质5.1.5 代码示例5.1.6 总结 6 重要性采样7 PPO算法8 附28.1 重要性采样方差计算8.1.1 公…...

vue3实现多表头列表el-table,拖拽,鼠标滑轮滚动条优化

需求背景解决效果index.vue 需求背景 需要实现多表头列表的用户体验优化 解决效果 index.vue <!--/** * author: liuk * date: 2024-07-03 * describe:**** 多表头列表 */--> <template><el-table ref"tableRef" height"calc(100% - 80px)&qu…...

Micron近期发布了32Gb DDR5 DRAM

Micron Technology近期发布了一项内存技术的重大突破——一款32Gb DDR5 DRAM芯片&#xff0c;这项创新不仅将存储容量翻倍&#xff0c;还显著提升了针对人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、高性能计算&#xff08;HPC&#xff09;以及数…...

SQL Server时间转换

第一种&#xff1a;format --转化成年月日 select format( GETDATE(),yyyy-MM-dd) --转化年月日&#xff0c;时分秒&#xff0c;这里的HH指24小时的&#xff0c;hh是12小时的 select format( GETDATE(),yyyy-MM-dd HH:mm:ss) --转化成时分秒的&#xff0c;这里就不一样的&…...

kubernetes集群部署:node节点部署和CRI-O运行时安装(三)

关于CRI-O Kubernetes最初使用Docker作为默认的容器运行时。然而&#xff0c;随着Kubernetes的发展和OCI标准的确立&#xff0c;社区开始寻找更专门化的解决方案&#xff0c;以减少复杂性和提高性能。CRI-O的主要目标是提供一个轻量级的容器运行时&#xff0c;它可以直接运行O…...

03:Spring MVC

文章目录 一&#xff1a;Spring MVC简介1&#xff1a;说说自己对于Spring MVC的了解&#xff1f;1.1&#xff1a;流程说明&#xff1a; 一&#xff1a;Spring MVC简介 Spring MVC就是一个MVC框架&#xff0c;Spring MVC annotation式的开发比Struts2方便&#xff0c;可以直接代…...

玩转springboot之springboot注册servlet

springboot注册servlet 有时候在springboot中依然需要注册servlet&#xff0c;filter&#xff0c;listener&#xff0c;就以servlet为例来进行说明&#xff0c;另外两个也都类似 使用WebServlet注解 在servlet3.0之后&#xff0c;servlet注册支持注解注册&#xff0c;而不需要在…...

推荐好玩的工具之OhMyPosh使用

解除禁止脚本 Set-ExecutionPolicy RemoteSigned 下载Oh My Posh winget install oh-my-posh 或者 Install-Module oh-my-posh -Scope AllUsers 下载Git提示 Install-Module posh-git -Scope CurrentUser 或者 Install-Module posh-git -Scope AllUser 下载命令提示 Install-Mo…...

pydub、ffmpeg 音频文件声道选择转换、采样率更改

快速查看音频通道数和每个通道能力判断具体哪个通道说话&#xff1b;一般能量大的那个算是说话 import wave from pydub import AudioSegment import numpy as npdef read_wav_file(file_path):with wave.open(file_path, rb) as wav_file:params wav_file.getparams()num_cha…...

0803实操-Windows Server系统管理

Windows Server系统管理 系统管理与基础配置 查看系统信息、更改计算机名称 网络配置 启用网络发现 Windows启用网络发现是指在网络设置中启用一个功能&#xff0c;该功能允许您的计算机在网络上识别和访问其他设备和计算机。具体来说&#xff0c;启用网络发现后&#xff…...

使用Java构建物联网应用的最佳实践

使用Java构建物联网应用的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;越来越…...

价格预言机的使用总结(一):Chainlink篇

文章首发于公众号&#xff1a;Keegan小钢 前言 价格预言机已经成为了 DeFi 中不可获取的基础设施&#xff0c;很多 DeFi 应用都需要从价格预言机来获取稳定可信的价格数据&#xff0c;包括借贷协议 Compound、AAVE、Liquity &#xff0c;也包括衍生品交易所 dYdX、PERP 等等。…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...