Web开发——HTMLCSS

1、概述

Web开发分前端开发和后端开发，前端开发负责展示数据，后端开发负责处理数据。
HTML&CSS是浏览器数据展示相关的内容。

1）网页的组成部分
文字、图片、音频、视频、超链接、表格等等
2）网页背后的本质
程序员写的前端代码
3）前端代码如何转换成用户眼中的网页
通过浏览器转化（解析和渲染）成用户看到的网页，浏览器中对代码进行解析和渲染的部分，称为 浏览器内核。浏览器多种多样，相同的网页如何让浏览器展示一致的观感，这依赖于Web标准：

  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
  • JavaScript：负责网页的行为（交互效果）

2 HTML & CSS

2.1 HTML和CSS概述

HTML：HyperText Markup Language，超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、
    视频等内容。
  • 标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
    CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
    以下就是html代码以及css样式搭配之后的显示效果
    在这里插入图片描述

2.2 快速入门

在这里插入图片描述
创建hello.html文件，并写入以下html代码

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/></body>
</html>

head用于定义浏览器头部，body用于定义主题部分
title标签用于定义标题，h1是1号标题，img用于引入一张图片，采用相对地址
浏览器展示效果如下：
在这里插入图片描述
HTML中标签的特点：

  • 不区分大小写
  • 标签中的属性值，采用单引号和双引号都可以
  • 语法松散（即使不写闭合也能运行），建议语义严谨

2.3 CSS引入方式

在这里插入图片描述

2.4 颜色表示

在这里插入图片描述

2.5 CSS选择器

选择器是选取需设置样式的元素（标签）
语法如下：

选择器名 {css样式名：css样式值;css样式名：css样式值;
}

2.5.1 元素（标签）选择器

元素名称 {css样式名:css样式值；
}

示例：

div{color: red;
}

2.5.2 id选择器

#id属性值 {css样式名:css样式值；
}

示例：

#did {color: blue;
}

2.5.3 类选择器

.class属性值 {css样式名:css样式值；
}

示例：

.cls{color: green;
}

2.6 盒子模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 内边距, 上 右 下 左 */border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px; /* 外边距, 上 右 下 左 */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

根据padding、border和margin来设置盒子相关属性

2.7 新浪新闻页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}/* 元素选择器 */p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}/* id选择器 */#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */margin: 0 auto;}</style>
</head>
<body><div id="center"><!-- 标题 --><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><span id="time">2023年03月02日 21:50</span><span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>央视网消息</strong> （焦点访谈）：*******************************************************</p><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg"><p>****************************************************************************</p><p id="plast">责任编辑：王树淼 SN242</p>  </div>
</body>
</html>

2.8 表格标签

  • <table> : 用于定义整个表格, 可以包裹多个 ， 常用属性如下：
    • border：规定表格边框的宽度
    • width：规定表格的宽度
    • cellspacing: 规定单元之间的空间
  • <tr> : 表格的行，可以包裹多个
  • <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>

展示效果如下
在这里插入图片描述

2.9 表单标签

2.9.1 表单

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
  • 表单标签:
  • 表单属性:
    • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
    • method: 规定用于发送表单数据的方式，常见为： GET、POST。
      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?
        username=Tom&age=12，url中能携带的表单数据大小是有限制的。
      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。
    • input: 定义表单项，通过type属性控制输入形式
    • select: 定义下拉列表
    • textarea: 定义文本域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

页面展示效果
在这里插入图片描述
get方式提交
在这里插入图片描述
参数直接拼接在url后面
post方式提交
在这里插入图片描述
并未直接拼接在后面

用户名: <input type="text" name="username">

表单项必须指定name属性才能够提交到服务端，否则无法提交该表单。

2.9.2 表单项

在这里插入图片描述
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>

展示效果
在这里插入图片描述

3 文档查阅

文档地址：https://www.w3school.com.cn/index.html

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

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

相关文章

重大活动网络安全保障建设及运营指南

重大活动网络安全保障建设及运营指南

在当今高度数字化的社会中&#xff0c;各类重大活动如会议、展览、赛事及庆典等正面临着日益复杂和严峻的网络安全威胁。这些威胁不限于网络入侵或数据泄露&#xff0c;更涉及到对基础设施、关键信息系统和公众舆论的复杂攻击&#xff0c;需要国际社会的密切合作和长期关注。因…
阅读更多...
一张图看懂大模型性价比：能力、价格、并发量全面PK

一张图看懂大模型性价比：能力、价格、并发量全面PK

最近&#xff0c;国内云厂商的大模型掀起一场降价风暴。火山引擎、阿里云、百度云等纷纷宣布降价&#xff0c;部分模型价格降幅据称高达99%&#xff0c;甚至还有些模型直接免费。 五花八门的降价话术&#xff0c;一眼望去遍地黄金。但事实真的如此吗&#xff1f;今天我们就拨开…
阅读更多...
统计信号处理基础 习题解答10-2

统计信号处理基础 习题解答10-2

题目 两个随机变量x和y&#xff0c;如果联合PDF分解为&#xff1a; 那么称他们为条件独立的。在上式中z是条件随机变量。 我们观察 其中, , 是相互独立的。证明和是条件独立的。给出条件变量是A。和是无条件独立么&#xff1f;也就是 成立么&#xff1f;为了回答这个问题&…
阅读更多...
如何使用jmap工具生成堆内存快照

如何使用jmap工具生成堆内存快照

1、确保已安装JDK&#xff1a; 首先&#xff0c;确保你的系统上安装了Java Development Kit (JDK)。 2、找到Java进程的PID&#xff1a; 你需要知道你想要生成堆内存快照的Java进程的进程ID&#xff08;PID&#xff09;。你可以使用命令行工具如ps&#xff08;在Unix/Linux系…
阅读更多...
Redis Cluster 集群搭建

Redis Cluster 集群搭建

1. 安装 Redis sudo apt-get update sudo apt-get install redis-server2. 创建配置文件 为每个 Redis 实例创建独立的配置文件和数据目录&#xff1a; mkdir -p /usr/local/redis-cluster/{7000,7001,7002,7003,7004,7005}3. 配置文件内容 每个 Redis 实例的配置文件内容如…
阅读更多...
秋招突击——算法打卡——5/24——两数之和

秋招突击——算法打卡——5/24——两数之和

题目描述 实现代码 ListNode* addTwoNumbers(ListNode* l1, ListNode* l2) {int addNumber 0;// 表示进位ListNode* res ListNode();ListNode* curNode res;while(l1 && l2){curNode.value (l1.value l2.value addNumber) % 10 addNumber (l1.value l2.value…
阅读更多...
python3序列化模块之pickle

python3序列化模块之pickle

官方文档 简介 pickle 是 Python 中用于对象序列化和反序列化的标准库模块。它可以将 Python 对象转换为字节流,并将其保存到文件或通过网络传输,在需要时再将其恢复为原来的 Python 对象。 模块 pickle 实现了对一个 Python 对象结构的二进制序列化和反序列化。 “pickling…
阅读更多...
如何快速增加外链？

如何快速增加外链？

要快速增加外链并不难&#xff0c;相信各位都知道&#xff0c;难的是快速增加外链且没有风险&#xff0c;所以这时候GNB外链的重要性就出现了&#xff0c;这是一种自然的外链&#xff0c;何谓自然的外链&#xff0c;在谷歌的体系当中&#xff0c;自然外链指的就是其他网站资源给…
阅读更多...
mysql 、oss 结合使用

mysql 、oss 结合使用

以下是一个使用 Express、MySQL、OSS 和 axios 的 Node.js 示例。这个示例创建了一个 Express 服务器&#xff0c;该服务器有一个路由用于处理视频上传的请求。视频文件首先被上传到 OSS&#xff0c;然后视频的 OSS URL 被存储到 MySQL 数据库。 首先&#xff0c;我们需要安装必…
阅读更多...
c++-内存四区-栈区

c++-内存四区-栈区

阅读更多...
最大负载1kg！高度模块化设计！大象机器人智能遥控操作机械臂组合myArm MC

最大负载1kg！高度模块化设计！大象机器人智能遥控操作机械臂组合myArm MC

引入 近年来&#xff0c;市面上涌现了许多类似于斯坦福大学的 Alopha 机器人项目&#xff0c;这些项目主要通过模仿人类的运动轨迹来进行学习&#xff0c;实现了仿人类的人工智能。Alopha 机器人通过先进的算法和传感技术&#xff0c;能够精确复制人类的动作&#xff0c;并从中…
阅读更多...
【stm32】——使用HAL库点灯

【stm32】——使用HAL库点灯

目录 一、安装STM32CubeMX 二、HAL库点亮LED灯 1.STM32CubeMX创建项目 2.进入Keil编写代码 三、采用中断控制LED灯的亮灭 1.创建项目 2.Keil中编写代码 四、Keil波形分析 总结 一、安装STM32CubeMX 具体操作可以参考下面链接&#xff1a; 搭建STM32开发环境——STM32CubeMX&a…
阅读更多...
用Python pynput库捕捉每一次组合键的优雅舞步

用Python pynput库捕捉每一次组合键的优雅舞步

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 一、初识pynput&#xff1a;键盘与鼠标的监控利器 当谈论计算机交互时&#xff0c;键盘和鼠标无疑是最常用的设备。无论是编写代码、浏览网页还是玩游戏&#xff0c;都依赖于这些输入设备与机器沟通。但在一些特殊的…
阅读更多...
蓝桥杯单片机-国赛5——各外设时序记忆方法及手册重点提取

蓝桥杯单片机-国赛5——各外设时序记忆方法及手册重点提取

蓝桥杯涉及三个通讯外设&#xff0c;时序很难记忆&#xff0c;因此本文重点在于记录如何不背时序&#xff0c;直接看手册 注意&#xff1a;本文参考2024年第15届比赛手册讲解&#xff0c;没有英文基础也没关系 每一个外设会在第一张时序图中详细讲解&#xff0c;后续简写&…
阅读更多...
【DevOps】深入理解 Nginx Location 块：配置示例与应用场景详解

【DevOps】深入理解 Nginx Location 块：配置示例与应用场景详解

目录 一、location 块的基本概念 二、location 块的语法 三、location 块的匹配方式 四、location 块的优先级 五、location 块的应用场景 六、location 块的嵌套 七、location 块的指令 八、示例配置 Nginx 是一个高性能的 Web 服务器和反向代理服务器&#xff0c;它广…
阅读更多...
网站工作原理

网站工作原理

web发展史 1.0时代不可修改 2.0可修改&#xff0c;比如发微博 有以下问题&#xff1a; 课程2&#xff1a; 静态页面 html 动态页面 php 经过服务端的语言解释器&#xff0c;解析成html文件&#xff0c;剩下的就和静态流程一样 后面三个是web服务器&#xff0c;语言解释器&…
阅读更多...
边缘人工智能中的视频目标检测方法详解

边缘人工智能中的视频目标检测方法详解

随着边缘计算和人工智能技术的发展&#xff0c;视频目标检测在边缘设备上的应用变得越来越普遍。这些应用包括智能监控、自动驾驶、无人机巡检等。为了在资源受限的边缘设备上实现高效的目标检测&#xff0c;选择合适的算法和工具至关重要。本文将详细介绍几种适用于边缘设备的…
阅读更多...
算法刷题day53：树形DP

算法刷题day53：树形DP

目录 引言一、没有上司的舞会二、树的重心三、树的最长路径四、树的中心五、数字转换 引言 关于这个树形 D P DP DP 啊&#xff0c;其实感觉就是对树进行 D F S DFS DFS 只不过有一个返回值罢了&#xff0c;这个返回值一般代表的就是以该结点为根的子树的一个属性&#xff0…
阅读更多...
[Spring Boot]baomidou 多数据源

[Spring Boot]baomidou 多数据源

文章目录 简述本文涉及代码已开源 项目配置pom引入baomidouyml增加dynamic配置启动类增加注解配置结束 业务调用注解DS()TransactionalDSTransactional自定义数据源注解MySQL2 测试调用查询接口单数据源事务测试多数据源事务如果依然使用Transactional会怎样&#xff1f;测试正…
阅读更多...
dubbo复习: （6）和springboot集成时的条件路由

dubbo复习: （6）和springboot集成时的条件路由

根据指定的条件&#xff0c;对不满足条件的请求进行拦截。 比如拦截ip地址为192.168.31.227的请求。只需要在dubbo admin中的条件路由菜单创建相应的规则 enabled: true force: true runtime: true conditions:- host ! 192.168.31.227
阅读更多...
最新文章

Copyright @ 2022~2023