Web学习day05
html&css
目录
html&css
文章目录
一、web开发
1.1工作流程
1.2开发技术
二、HTML
2.1HTML规范
2.2基础标签
2.2.1标题
2.2.2水平线
2.2.3段落和换行
2.2.4文字效果
2.2.5超链接
2.2.6图像
2.2.7音频和视频
三、布局标签
3.1列表
3.2容器
3.3表格
3.4表单标签
四、CSS
4.1引入方式
4.2选择器
4.3样式
总结
一、web开发
1.1工作流程
1. 浏览器先向前端服务器请求前端资源,也就是我们所说的网页
2. 浏览器再向后台服务器发起请求,获取数据
3. 浏览器将得到的后台数据填充到网页上,然后展示给用户去看
1.2开发技术
1. html 用于构建网站的基础结构的
2. css 用于美化页面的,作用和化妆或者整容作用一样
3. Javascript 实现网页和用户的交互
二、HTML
HTML (Hyper Text Markup Language),指的是超文本标记语言
,是一种用来描述网页的语言。
超文本:比普通文本功能强大。它可以引入音频、视频、图片、文字、超链接等等……
标记语言:使用一批特殊的标签来表达某些特殊意义,进而组装出网页的语言
2.1HTML规范
<!DOCTYPE html>
用于声明这是一个HTML的文档,要求必须在页面的第一行
HTML页面主要由HTML标签和HTML文本两部分组成
HTML标签:由HTML定义好的一类固定文字,比如<html>
HTML文本:除了标签之外的其它文字
HTML标签分为两大类:双标签和单标签
双标签:通常是成对出现的,比如<html></html>
单标签:单个出现,比如<hr>
绝大多数的标签都具有属性,属性用来具体控制标签的某些特性。例如:<hr color="red">
HTML标签是不区分大小写的
2.2基础标签
2.2.1标题
作用:用于将普通文字变成标题
语法:<hn>普通文字</hn>
n表示范围:1~6 特点:数值越大,字体越小
属性: align:对齐方式 取值:left(默认值,左对齐) 、 center(居中) 、 right(右对齐)
2.2.2水平线
作用:在页面上生成一条横线
语法:<hr/>
属性:
color:颜色, 用于设置颜色线条颜色,通过英文字母或者RGB表示
width:宽度, 用于设置线条的长度,可以是用绝对像素或者百分百设置
2.2.3段落和换行
作用:用于文字的分段和换行
语法:
换行: <br/>
分段: <p>一段内容,使用这个标签的效果是一段文字的上下会留出空白</p>
2.2.4文字效果
<b>文字</b>
:加粗标签
<i>文字</i>
: 斜体标签
<u>文字</u>
:下划线标签,在文字的下方有一条横线
<center>文字</center>
: 文字居中显示
<font>文字</font>
: 定义文字字体(face),大小(size:1-7),颜色(color)
2.2.5超链接
作用:用于给文字添加超链接效果,点击文字是跳转一个目标页面
语法:<a>文字</a>
属性:
href:用于指定超链接的跳转地址,支持绝对路径和相对路径两种写法
target:用于指定页面打开方式(_self 使用当前页签打开, _blank 使用新页签打开)
2.2.6图像
作用:用于在HTML页面中引入一个图片
语法:<img/>
属性: src:用于指定图片资源的路径,支持绝对路径和相对路径两种写法
alt:用于在指定咋图片丢失时要显示的文字提示
width:用于设置图片宽度(浏览器会根据设置的宽度按照比例自动调整高度)
2.2.7音频和视频
audio:定义音频。支持的音频格式:MP3、WAV、OGG
video:定义视频。支持的音频格式:MP4, WebM、OGG
-
src:规定视频的 URL
-
controls:显示播放控件
三、布局标签
3.1列表
作用:用于文字排版
语法:
有序列表
<ol>
<li>文字</li>
<li>文字</li>
</ol>
无序列表
<ul>
<li>文字</li>
<li>文字</li>
</ul>
3.2容器
作用:存储内容的容器(盒子),通常与css技术结合使用,完成页面的布局和美化
语法:
<div>块级元素,独自占用一行</div>
<span>行内元素,内容有多大,就占用多少</span>
3.3表格
作用:表格可以让数据更有条理性的展示
table 表格
width: 设置宽度
height: 设置高度
border: 设置边框
align: 水平位置
cellspacing: 外边距
cellpadding: 内边距
tr
bgcolor 设置一行的背景色
td
bgcolor 设置一个单元格的背景色
align 设置单元格内文字的水平位置
height 设置单元格高度
3.4表单标签
HTML表单:用于采集用户数据,并发送给后端服务器
应用场景:用户注册、用户登录、个人信息修改...
form: 表示一个表单,里面会包含多个表单项,它的作用是收集表单项中的所有数据信息,发送到后台服务器
action:表单的提交地址,暂时使用#代替(#:表示当前页面)
method:表单的提交方式,有二种:get(默认值) | post
get:请求参数在地址栏拼接,不安全,对参数总长度有限制
post:参数不在地址栏拼接,相对安全,对参数总长度没有限制
表单项类型,支持文本框、下拉框、文本域
i)文本框
1)text:普通文本框
2)password:密码框
3)date:日期选择框
4)radio:单选框
5)checkbox:复选框
6)file:文件上传
7)submit:提交按钮
8)reset:重置按钮
9)button:普通按钮,通常与js结合使用
10) hidden: 隐藏
ii)下拉框
select 定义下拉框
option 定义下拉框中的具体内容
iii)文本域
textarea
四、CSS
CSS (Cascading Style Sheets) 翻译为指层叠样式表 ,用于HTML页面的美化
层叠样式是指对同一个HTML标签添加多种不同的样式(字号、字体、颜色等等),所有样式会叠加在一起展示出效果
4.1引入方式
HTML引入CSS的三种方式:
行内样式:定义在标签的属性中, 作用于当前标签
内部样式:定义在页面的head部分, 作用于当前页面中的所有(部分)标签
外部样式:定义在页面外部,通过link标签引入到页面中,作用于所有引入此样式文件的页面标签
CSS样式使用优先级: 行内样式 > 内部和外部样式(内部和外部样式,后面覆盖前面)
4.2选择器
选择器作用:找出页面一组特定的标签
标签选择器 使用标签名称选中一类标签 语法:标签名{css样式}
类选择器 使用class属性选中一类标签 语法:.class{css样式}
id选择器 使用id属性选中一个标签 语法:#id{css样式}
4.3样式
设置文字的颜色,大小,字体,风格,加粗
以及行高,缩进,有无下划线
等
font-size: 20px; /* 设置字号 */
font-family: '楷体'; /* 设置字体 */
font-weight: bold; /* 设置文字加粗( normal:正常[默认], bold:粗体, 数值 ) */
font-style: italic; /* 设置文字倾斜( normal:正常[默认], italic:倾斜 ) */
color:red; /* 设置字体颜色 */
line-height: 40px; /* 设置行高 */
text-indent: 40px; /* 设置段落的首行缩进 */
text-align: center /* 设置元素水平位置 */
text-decoration: none; /* 设置下划线( none:无, underline:下划线, overline:上划线, line-through:横穿线 ) */
总结
以上就是今天学习的内容。
相关文章:
Web学习day05
html&css 目录 html&css 文章目录 一、web开发 1.1工作流程 1.2开发技术 二、HTML 2.1HTML规范 2.2基础标签 2.2.1标题 2.2.2水平线 2.2.3段落和换行 2.2.4文字效果 2.2.5超链接 2.2.6图像 2.2.7音频和视频 三、布局标签 3.1列表 3.2容器 3.3表格 3…...

LINUX客户端client(socket、connect)实现客户端发送,服务器接收
SERVICE端见前一篇文章 5. 客户端连接函数 connect()(与前面的bind一样) int connect (int sockfd, struct sockaddr * serv_addr, int addrlen) 参数: sockfd: 通过 socket() 函数拿到的 fd addr:struct sockaddr 的结构体变量地址 addr…...

【网络安全科普】勒索病毒 防护指南
勒索病毒简介 勒索病毒是一种恶意软件,也称为勒索软件(Ransomware),其主要目的是在感染计算机后加密用户文件,并要求用户支付赎金以获取解密密钥。这种类型的恶意软件通常通过电子邮件附件、恶意链接、下载的软件或漏洞…...
TFHE库,fftw和googletest库安装
点个关注吧!本文主要关注于TFHE的安装与常见的问题 1.TFHE的git链接: https://github.com/tfhe/tfhe git clone --recurse-submodules --branchmaster https://github.com/tfhe/tfhe.git 2.安装 mkdir build cd build cmake ../src -DENABLE_TESTSon -D…...
关于Spring Boot IOCDC,看这一篇就够了
一,Spring是什么及常用注解 先说什么是spring,在前面的博客中已经知道了,spring是一个开源框架,为了让我们开发更加简单,那关于ioc呢,一句话概况一下:Spring就是包含了众多工具方法的Ioc容器 …...
Model Import Settings
前言 在可视化3D世界中,模型是3D世界的核心,你可以没有贴图,可以没有特效,甚至可以没有用户交互界面,但必须得有模型来描述世界的基本样貌。 在3D世界中,由点线面构成了模型的轮廓;由UV和纹理&a…...

腾讯云COS托管静态网站,以及如何解决访问出现了下载网页的情况
腾讯云对象存储(Cloud Object Storage,简称COS),与其他云厂商所提供的云对象存储都是面向非结构化数据,只是每个云厂商的叫法有别于他家,或许是更能彰显厂商的品牌吧! 但不管云厂商怎么给云对象…...
软件设计模式: 抽象工厂
抽象工厂 一、解决的问题 抽象工厂模式主要解决了在具有多个产品族的情况下,如何统一管理创建相关产品对象的问题。 当系统需要创建一系列相互关联或相互依赖的对象,并且这些对象可以形成多个不同的产品族时,如果直接由客户端去分别创建这…...

使用Vuepress搭建个人网站
网站地址:bloggo.chat...
lua 写一个 不同时区之间转换日期和时间 函数
这个函数用于调整时间戳以适应不同的时区。它接受五个参数:format、timeStamp、dontFixForTimeOffset、currentServerTimeZone和showLog。返回 os.date,可以转化成指定格式的年月日时间 ### 功能 该函数的主要功能是根据给定的时区偏移量调整时间戳&am…...
谷粒商城——session共享
问题1 一个系统中不同微服务的session共享。 问题1的解决办法 1. session复制的方法:微服务的副本之间通过通信共享session。这样每一个微服务的副本都会保存所有的session。(缺点:造成大量的通信,多处额外的通信开销。&#x…...
Java 语言及其常用集合类的操作,以及反射机制与注解
目录 一、Java 语言概述 二、Java 集合框架 ArrayList 操作示例: HashMap 操作示例: 三、反射机制 1. 反射的示例 五、总结 Java 是一种广泛使用的高级编程语言,因其平台独立性、简洁性及丰富的 API 而备受开发者青睐。 一、Java 语言…...

《系统架构设计师教程(第2版)》第12章-信息系统架构设计理论与实践-02-信息系统架构
文章目录 1. 概述1.1 信息系统架构(ISA)1.2 架构风格 2. 信息系统架构分类2.1 信息系统物理结构2.1.1 集中式结构2.1.2 分布式结构 2.2 信息系统的逻辑结构1)横向综合2)纵向综合3)纵横综合 3. 信息系统架构的一般原理4…...

用html做python教程01
用html做python教程01 前言开肝构思实操额外修饰更换字体自适应 最后 前言 今天打开csdn的时候,看见csdn给我推荐了一个python技能书。 说实话,做得真不错。再看看我自己,有亿点差距😟。 开肝 先创建一个文件,后缀…...
PHP接口与性状的优雅应用
本文由 ChatMoney团队出品 在PHP编程中,接口是一种定义对象之间交互契约的强大工具。其核心目的不是让一个对象紧耦合地依赖另一个对象的特定身份,而是基于另一对象的能力进行交互。通过接口,我们的代码可以实现与依赖的解耦,从而…...
R语言模型评估网格搜索
### 网格搜索 ### install.packages("gbm") set.seed(1234) library(caret) library(gbm) fitControl <- trainControl(method = repeatedcv,number = 10,repeats = 5) # 设置网格搜索的参数池 gbmGrid <- expand.grid(interaction.depth = c(3,5,9),n.trees =…...

Haproxy服务
目录 一.haproxy介绍 1.主要特点和功能 2.haproxy 调度算法 3.haproxy 与nginx 和lvs的区别 二.安装 haproxy 服务 1. yum安装 2.第三方rpm 安装 3.编译安装haproxy 三.配置文件详解 1.官方地址配置文件官方帮助文档 2.HAProxy 的配置文件haproxy.cfg由两大部分组成&…...
Unity VR开发入门:探索虚拟现实世界的无限可能
目录 引言 Unity VR开发基础 1. 安装Unity与VR SDK 2. 创建VR项目 3. 理解VR场景结构 Unity VR开发实战 1. 场景搭建 2. 交互设计 创建C#脚本 编写VRInteractor脚本 应用脚本到场景 注意 修改VRInteractor脚本 3. 用户体验优化 4. 测试与调试 引言 随着科技的飞速…...

系统架构设计师教程(清华第二版) 第3章 信息系统基础知识-3.2 业务处理系统-解读
教材中,一会儿“业务处理系统”,一会儿“事务处理系统”,语法毛病一堆。真是清华的水平!!! 系统架构设计师教程 第3章 信息系统基础知识-3.2 业务处理系统 3.2.1 业务处理系统的概念3.2.2 业务处理系统的功能3.2.2.1 数据输入3.2.2.2 数据处理3.2.2.2.1 批处理 (Batch …...

32_ConvNeXt网络详解
1.1 简介 ConvNeXt是一种计算机视觉模型,由Meta AI(前Facebook AI)的研究人员在2022年提出,它旨在探索卷积神经网络(CNN)在图像识别任务上的潜力,尤其是在与当时流行的Vision Transformer&…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...

uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量:setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...