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

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()&#xff08;与前面的bind一样&#xff09; int connect (int sockfd, struct sockaddr * serv_addr, int addrlen) 参数&#xff1a; sockfd: 通过 socket() 函数拿到的 fd addr:struct sockaddr 的结构体变量地址 addr…...

【网络安全科普】勒索病毒 防护指南

勒索病毒简介 勒索病毒是一种恶意软件&#xff0c;也称为勒索软件&#xff08;Ransomware&#xff09;&#xff0c;其主要目的是在感染计算机后加密用户文件&#xff0c;并要求用户支付赎金以获取解密密钥。这种类型的恶意软件通常通过电子邮件附件、恶意链接、下载的软件或漏洞…...

TFHE库,fftw和googletest库安装

点个关注吧&#xff01;本文主要关注于TFHE的安装与常见的问题 1.TFHE的git链接&#xff1a; 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,看这一篇就够了

一&#xff0c;Spring是什么及常用注解 先说什么是spring&#xff0c;在前面的博客中已经知道了&#xff0c;spring是一个开源框架&#xff0c;为了让我们开发更加简单&#xff0c;那关于ioc呢&#xff0c;一句话概况一下&#xff1a;Spring就是包含了众多工具方法的Ioc容器 …...

Model Import Settings

前言 在可视化3D世界中&#xff0c;模型是3D世界的核心&#xff0c;你可以没有贴图&#xff0c;可以没有特效&#xff0c;甚至可以没有用户交互界面&#xff0c;但必须得有模型来描述世界的基本样貌。 在3D世界中&#xff0c;由点线面构成了模型的轮廓&#xff1b;由UV和纹理&a…...

腾讯云COS托管静态网站,以及如何解决访问出现了下载网页的情况

腾讯云对象存储&#xff08;Cloud Object Storage&#xff0c;简称COS&#xff09;&#xff0c;与其他云厂商所提供的云对象存储都是面向非结构化数据&#xff0c;只是每个云厂商的叫法有别于他家&#xff0c;或许是更能彰显厂商的品牌吧&#xff01; 但不管云厂商怎么给云对象…...

软件设计模式: 抽象工厂

抽象工厂 一、解决的问题 抽象工厂模式主要解决了在具有多个产品族的情况下&#xff0c;如何统一管理创建相关产品对象的问题。 当系统需要创建一系列相互关联或相互依赖的对象&#xff0c;并且这些对象可以形成多个不同的产品族时&#xff0c;如果直接由客户端去分别创建这…...

使用Vuepress搭建个人网站

网站地址&#xff1a;bloggo.chat...

lua 写一个 不同时区之间转换日期和时间 函数

这个函数用于调整时间戳以适应不同的时区。它接受五个参数&#xff1a;format、timeStamp、dontFixForTimeOffset、currentServerTimeZone和showLog。返回 os.date&#xff0c;可以转化成指定格式的年月日时间 ### 功能 该函数的主要功能是根据给定的时区偏移量调整时间戳&am…...

谷粒商城——session共享

问题1 一个系统中不同微服务的session共享。 问题1的解决办法 1. session复制的方法&#xff1a;微服务的副本之间通过通信共享session。这样每一个微服务的副本都会保存所有的session。&#xff08;缺点&#xff1a;造成大量的通信&#xff0c;多处额外的通信开销。&#x…...

Java 语言及其常用集合类的操作,以及反射机制与注解

目录 一、Java 语言概述 二、Java 集合框架 ArrayList 操作示例&#xff1a; HashMap 操作示例&#xff1a; 三、反射机制 1. 反射的示例 五、总结 Java 是一种广泛使用的高级编程语言&#xff0c;因其平台独立性、简洁性及丰富的 API 而备受开发者青睐。 一、Java 语言…...

《系统架构设计师教程(第2版)》第12章-信息系统架构设计理论与实践-02-信息系统架构

文章目录 1. 概述1.1 信息系统架构&#xff08;ISA&#xff09;1.2 架构风格 2. 信息系统架构分类2.1 信息系统物理结构2.1.1 集中式结构2.1.2 分布式结构 2.2 信息系统的逻辑结构1&#xff09;横向综合2&#xff09;纵向综合3&#xff09;纵横综合 3. 信息系统架构的一般原理4…...

用html做python教程01

用html做python教程01 前言开肝构思实操额外修饰更换字体自适应 最后 前言 今天打开csdn的时候&#xff0c;看见csdn给我推荐了一个python技能书。 说实话&#xff0c;做得真不错。再看看我自己&#xff0c;有亿点差距&#x1f61f;。 开肝 先创建一个文件&#xff0c;后缀…...

PHP接口与性状的优雅应用

本文由 ChatMoney团队出品 在PHP编程中&#xff0c;接口是一种定义对象之间交互契约的强大工具。其核心目的不是让一个对象紧耦合地依赖另一个对象的特定身份&#xff0c;而是基于另一对象的能力进行交互。通过接口&#xff0c;我们的代码可以实现与依赖的解耦&#xff0c;从而…...

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是一种计算机视觉模型&#xff0c;由Meta AI&#xff08;前Facebook AI&#xff09;的研究人员在2022年提出&#xff0c;它旨在探索卷积神经网络&#xff08;CNN&#xff09;在图像识别任务上的潜力&#xff0c;尤其是在与当时流行的Vision Transformer&…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...