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

HTML与CSS的学习

news 2025/6/30 9:35:54

什么是HTML,CSS？

HTML(HyperText Markup Language):超文本标记语言。

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等
标记语言:由标签构成的语言

>HTML标签都是预定义好的。例如:使用<a>展示超链接，使用<img>展示图片，<vide0>展示视

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式(表现)

HTML结构标签

<html><head><title>标题</title></head><body></body>
</html>

特点：

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

1.标题标签

标签:<h1>..</h1>(h1 →h6 重要程度依次降低)

注意:HTML标签都是预定义好的，不能自己随意定义。

2.水平线标签  <hr>

用于在网页界面添加一条水平线

3.图片标签

<img src "图片路径" width=""height="">

width大小有两种单位

一种是像素点（px)

另一种是百分比（%）

标签使用样例：

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title>
</head>
<body><img src="./img/news_logo.png" height="35px"> 新浪政务>正文<h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr>2023年03月02日21:50央视网<hr>
</body>
</html>

 运行后网页

 CSS引入方式

1.行内样式:写在标签的style属性中(不推荐)

 该方式只能使得h1一个标签有该属性，复用性较低

2.内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

 3.外联样式:写在一个单独的.css文件中(需要通过 1ink标签在网页中引入)

 代码样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title><!-- 方式二：内嵌方式 --><style>h1{/* 颜色描述方式 *//* 第一种：关键字 *//* color: red; *//* 第二种：RGB表示 *//* color: rgb(255,0,0); *//* 第三种：基于16进制 */color: #ff0000;}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="./img/news_logo.png"> 新浪政务>正文<!-- 方式一：行内样式 --><!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> --><h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr>2023年03月02日21：50央视网<hr>
</body>
</html>

CSS文件：

h1{color: red;
}

颜色表示的三种方式

1.关键字

如 red表示红色，green表示绿色，blue表示蓝色

2.rgb表示 

红绿蓝三原色，每项取值0-255。

3.十六进制表示法

#开头，将数字转换成十六进制表示

每两个表示rgb的一个数

若有两个相同可以缩写

#000000缩写#000

CSS选择器

作用：用来选取需要设置样式的元素(标签)

1.元素选择器

2.id选择器

为标签设置id:

 3.类选择器

为标签设置类:

 优先级

id选择器>类选择器>元素选择器

CSS属性

color:设置文本的颜色

font-size:字体大小 (注意:记得加px)

text-decoration:规定添加到文本的修饰，none表示定义标准的文本

 text-decoration: none;/* 设置没有下划线 */

text-align:规定元素中的文本的水平对齐方式（左，中，右）

 text-align: right;/* 靠右对齐 */

text-indent:定义第一个行内容的缩进

 text-indent: 35px;/* 设置首行缩进 */

4.<pane>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

5.超链接

标签: <a href=" "target="...">央视网</a>

属性:

href:指定资源访问的ur1(路径）

target:指定在何处打开资源链接

_self:默认值，在当前页面打开

_blank:在空白页面打开

代码样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title><!-- 方式二：内嵌方式 --><style>h1{color: #4D4F53;}#time{/* 颜色 */color: rgb(151,142,144);/*  字体大小 */font-size: 12px;}a{color: black;text-decoration: none;}</style>
</head>
<body><img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文<!-- 方式一：行内样式 --><!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> --><h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr><span class="cis" 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>
</body>
</html>

6.视频标签：<video>

属性：

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

 <!-- 视频 --><video src="video/1.mp4" controls width="950px"></video>

7.音频标签：<audio>

属性：

src:规定音频的url

controls:显示播放控件

 <!-- 音频 --><audio src="audio/1.mp3" controls></audio>

8.段落标签：<p>

<P>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</P>

9.文本加粗标签：<b>/<strong>

<b>单纯加粗

<strong>有强调的意思

盒子布局

盒子:页面中所有的元素(标签)，都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

 

10.<div>标签

特点：

一行只显示一个(独占一行)

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高(width、height)

 代码样例：

<!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>

11.表格标签：<table>

场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表。

<th>具有加粗效果

 代码样例：

<!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>

运行效果：

 12.表单标签<form>

表单属性:

action:表单数据提交的url地址

method:表单提交方式

get:表单数据拼接在url后面，?username=java,大小有限制

post:表单数据在请求体中携带，大小没有限制

表单项

<input>:表单项，通过type属性控制输入形式。

 姓名: <input type="text" name="name"> <br><br>

<select>:定义下拉列表，<option>定义列表项。

学历: <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>:文本域

 <textarea name="description" cols="30" rows="10"></textarea>  <br><br>

  • cols 属性定义了文本输入框的列数，即水平方向上的字符数。一个列相当于一个等宽的字符，但实际上显示的字符宽度可能会根据字体而变化。这个属性的值是一个正整数，表示文本输入框的列数。

  • rows 属性定义了文本输入框的行数，即垂直方向上的文本行数。一个行相当于一行文本，但实际上显示的行高可能会根据字体和浏览器而变化。这个属性的值也是一个正整数，表示文本输入框的行数。

代码样例：

<!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>

运行效果：

相关文章：

HTML与CSS的学习

什么是HTML,CSS&#xff1f; HTML(HyperText Markup Language):超文本标记语言。 超文本:超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等 标记语言:由标签构成的语言 >HTML标签都是预定义好的。例如:使用<a>…...

编程日记 2024/5/27 0:45:38

【单片机】STM32F070F6P6 开发指南（一）STM32建立HAL工程

文章目录 一、基础入门二、工程初步建立三、HSE 和 LSE 时钟源设置四、时钟系统&#xff08;时钟树&#xff09;配置五、GPIO 功能引脚配置六、配置 Debug 选项七、生成工程源码八、生成工程源码九、用户程序下载 一、基础入门 f0 pack下载&#xff1a; https://www.keil.arm…...

编程日记 2024/5/27 0:44:37

源码编译安装Rsync数据同步

源码编译安装 RPM软件包&#xff1a;rpm -ivh 或者 yum -y install 需要开发编译工具gcc、gcc-c、make等... 源码包----开发工具gcc与make----》可以执行的程序-----》运行安装 •主要优点 –获得软件的最新版&#xff0c;及时修复bug –软件功能可按需选择/定制&#xff…...

编程日记 2024/5/27 0:43:35

SQL Server2019安装步骤教程(图文)_最新教程

一、下载SQL Server2019 1.到微软官网下载SQL Server Developer版本&#xff0c;官网当前的2019版本下载需要注册账号。 不想注册的朋友&#xff0c;可以选择从网盘下载&#xff1a;点击此处直接下载 2.下载之后先解压&#xff0c;解压后执行exe安装程序。打开之后的界面如下…...

编程日记 2024/5/27 0:42:34

【SpringBoot】SpringBoot中防止接口重复提交（单机环境和分布式环境）

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f33c;前言 &#x1f512;单机环境下防止接口重复提交 &#x1f4d5;导入依赖 &#x1f4c2;项目结构 &#x1f680;创建自定义注解 ✈创建AOP切面 &#x1f697;创建Conotroller &#x1f4bb;分布…...

编程日记 2024/5/27 0:41:33

零基础学Java（全170集）

课程概述 本课程旨在全面深化对 Java 语言的核心技术理解&#xff0c;并提升编程实践能力。课程内容涵盖以下关键领域&#xff1a; 掌握Java核心语法&#xff0c;为后续学习打下扎实的基础。熟练运用Java常用的类库与开发工具&#xff0c;提高开发效率与质量。解决面向对象编…...

编程日记 2024/5/27 0:40:32

摄像头应用测试

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…...

编程日记 2024/5/27 0:39:31

Golang框架HTTP客户端框架zdpgo_resty发送表单请求

核心代码 这里通过字典传递了一个简单的表单数据。 发送的是POST请求。 resp, err : client.R().SetFormData(map[string]string{"username": "jeeva","password": "mypass",}).Post("http://127.0.0.1:3333/login")fmt.P…...

编程日记 2024/5/27 0:38:30

【机器学习300问】99、多通道卷积神经网络在卷积操作时有哪些注意事项？

一、多通道卷积神经网络示例 还是以图像处理为例&#xff0c;如果你的目标不仅是分析灰度图像特性&#xff0c;还打算捕捉RGB彩色图像的特征。如下图&#xff0c;当面对一张66像素的彩色图像时&#xff0c;提及的“3”实际上是指红、绿、蓝三种颜色通道&#xff0c;形象地说&am…...

编程日记 2024/5/27 0:37:29

Rust之函数、单元测试

1、函数 类似于C函数。 1.1、普通函数 在Rust中&#xff0c;函数的定义使用fn关键字&#xff0c;后跟函数名、参数列表、返回类型和函数体。函数体由一系列语句组成&#xff0c;用于执行特定的操作和计算。 函数定义&#xff1a; 使用fn关键字定义函数&#xff0c;函数由函数…...

编程日记 2024/5/27 0:36:27

Linux环境下TensorFlow安装教程

TensorFlow是学习深度学习时常用的Python神经网络框 下面以Mask R-CNN 的环境配置为例&#xff1a; 首先进入官网&#xff1a;www.tensorflow.org TensorFlow安装的总界面&#xff1a; 新建anaconda虚拟环境&#xff1a; conda create -n envtf2 python3.8 &#xff08;Pyth…...

编程日记 2024/5/27 0:35:26

基于Open3D的点云处理19-模拟生成点云

如果没有设备，怎么得到点云进行学习研究呢，一般通过以下方法： 模型采样+增加噪声：简单方便，但结果比较理想与真实扫描不一致；光线投射：简单方便，可以模仿传感器的一个扫描视角Blensor点云仿真：能够模仿传感器本身的一些噪声，适合激光雷达和tof相机的仿真，传感器较少…...

编程日记 2024/5/27 0:31:24

安全分析[1]之网络协议脆弱性分析

文章目录 威胁网络安全的主要因素计算机网络概述网络体系结构 网络体系结构脆弱性分组交换认证与可追踪性尽力而为匿名与隐私对全球网络基础实施的依赖无尺度网络互联网的级联特性中间盒子 典型网络协议脆弱性IP协议安全性分析IPSec&#xff08;IP Security)IPv6问题 ICMP协议安…...

编程日记 2024/5/27 0:30:24

数据湖对比（hudi,iceberg,paimon,Delta）

Delta 数据湖 Delta 更新原理 update/delete/merge 实现均基于spark的join功能。 定位 做基于spark做流批一体的数据处理 缺点 本质为批处理。强绑定spark引擎。整体性能相较其他数据湖比较差 hudi 数据湖 hudi 更新原理 通过hudi自定义的主键索引hoodiekey 布隆过…...

编程日记 2024/5/27 0:29:23

基于ssm的蛋糕商城系统java项目jsp项目javaweb

文章目录 蛋糕商城系统一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 蛋糕商城系统 一、项目演示 蛋糕商城管理系统 二、项目介绍 系统角色 : 管理员、用户 一&#xff0c;管理员 管理员有…...

编程日记 2024/5/27 0:28:22

vue3父组件使用ref获取子组件的属性和方法

在vue3中父组件访问子组件中的属性和方法是需要借助于ref: 1.<script setup> 中定义响应式变量 例如&#xff1a; const demo1 ref(null) 2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( <demo1 ref"demo1"/>)。 父组件代码如下&…...

编程日记 2024/5/27 0:27:20

加入MongoDB AI创新者计划，携手MongoDB共同开创AI新纪元

加入MongoDB AI创新者计划&#xff01; MongoDB对AI创新和初创企业的支持既全面又广泛&#xff01;无论您是领先的AI初创企业还是刚刚起步&#xff0c;MongoDB Atlas都是支持您愿景的最佳平台。 AI 初创者计划The AI Startup Track AI初创者计划为早期初创企业提供专属福利&…...

编程日记 2024/5/27 0:24:18

3. CSS的色彩与背景

3.1 CSS3中的色彩 CSS3扩展了颜色的定义方式&#xff0c;使得开发者能够使用更多样化和灵活的颜色表达方式。这包括RGB、RGBA、HSL、HSLA等格式&#xff0c;以及支持透明度和渐变的特性。 3.1.1 颜色格式 十六进制颜色 十六进制颜色是最常用的颜色表示法&#xff0c;以#开头…...

编程日记 2024/5/27 0:23:17

MiniCPM-Llama3-V-2_5-int4

MiniCPM-Llama3-V-2_5-int4大模型部署使用环境&#xff1a; python3.8cuda11.8其它要求&#xff0c;按照安装文档要求下载即可 我是在算力平台用4090跑的&#xff0c; GPU 显存&#xff08;8GB&#xff09;可以部署推理 int4 量化版本&#xff0c;如果推理非量化版本需要更高显…...

编程日记 2024/5/27 0:20:14

压缩能力登顶 小丸工具箱 V1.0 绿色便携版

平常录制视频或下载保存的视频时长往往都很长&#xff0c;很多时候都想要裁剪、 截取出一些“精华片段”保留下来&#xff0c;而不必保存一整个大型视频那么浪费硬盘空间… 但如今手机或电脑上大多数的视频剪辑软件&#xff0c;切割视频一般都要等待很长时间导出或转换&#…...

编程日记 2024/5/27 0:19:13

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/6/29 15:04:47

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/6/25 13:36:37

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/6/28 14:27:12

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/6/29 11:37:02

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/6/22 11:13:14

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/6/15 11:28:43

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/6/22 5:07:54

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/6/24 2:54:07

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/6/26 1:50:36