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

尚硅谷html5+css3（1）html相关知识

news 2025/7/9 6:03:00

1.基本标签：

<h1>最大的标题字号

<h2>二号标题字号

<p>换行

2.根标签<html>

包括<head>和<body>

<html><head><title>title</title><body>body</body></head>
</html>

3.自结束标签与注释（注释不可嵌套）

<html><head><title>网页</title><body> 自结束标签：<img><img/><input><input/><!-- 注释：--></body></head>
</html>

4.标签的属性：

<html>
<head><title>标签的属性</title>
</head>
<body><!-- 属性font，在标签（开始标签或自结束标签）中设置属性属性是一个名值对结构属性用来设置标签中的内容如何显示属性和标签名或其他属性用"空格"隔开属性名和属性值不能瞎写--color，red，应该根据规定写有些属性有属性值，有些没有。若有属性值，则用引号引起来--><h1> 第 <font color="red" size="4">1</font> 个网页</h1>
</body>
</html>

5.文档属性:告诉网页是html5的

<!-- 文档声明:doctype-告诉浏览器当前网页版本-html5的文档声明（不区分大小写）<!doctype html>-->
<!doctype html>
<html><head><title>网页的基本结构</title></head>
<body>
</body>
</html>

6.字符集：使用万国码：UTF-8

<!doctype html>
<html>
<head><!--通过meta标签设置网页字符集，避免乱码--><meta charset="utf-8"><title>网页的基本结构</title>
</head>
</html>

7.语义化标签（1）

①标题标签：h1~h6共6级标签

从h1到h6重要性递减

h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1

一般用h1~h3

②块元素：在页面中独占一行的元素称为块元素（例如h1）

③p标签：表示页面中的一个段落

③hgroup：为标题分组，可以将一组相关的标题同时放入hgroup

④em：语音语调（使字体倾斜）

⑤strong：加粗字体

⑥blockquote：引用，缩进+独占一行

⑦q：短引用，为文字加双引号

⑧br：换行

8.结构化语义标签（2）(前8个了解即可，主要使用div)

①header:网页头部

②main:网页主体（一个页面只有一个main）

③footer:网页底部

④nav:网页导航

⑤aside:和主体相关的其他内容

⑥article:表示一个独立的文章

⑦section:表示一个独立区块，上面的标签都不能表示时使用section

⑧span:行内元素，没有语义，一般用于在网页中选中文字

⑨div:没有语义，只用来表示一个区块，主要使用div来布局元素

9.块和行内

块元素(block element):在网页中一般通过块元素对页面进行布局

行内元素(inline element):包裹文字

一般在块元素中嵌套行内元素（例:<h1><em>iii</em><h1/>）

p元素中不能放任何块元素

浏览器在解析网页时，会对网页中不符合规范的内容进行修正

10.列表list

在html中创建列表：（可以嵌套）

1.无序列表：ul标签：li表示列表项

   <ul><li>列表1</li><li>列表2</li><li>列表3</li></ul>

2.有序列表：ol标签：li表示列表项

    <ol><li>列表1</li><li>列表2</li><li>列表3</li></ol>

 

3.定义列表：dl标签：dt表示定义的内容，dd对内容进行解释说明（交互菜单）

    <dl><dt>dt</dt><dd>dd1</dd><dd>dd2</dd></dl>

 

11.超链接

使用a标签定义超链接。超链接也是一个行内元素，在其中可以嵌套除a以外的任何元素

属性:href:指定跳转的目标路径

<a href="https://www.baidu.com/">baidu</a>

12.相对路径

.或..开头：./   ../     ./可以省略不写

./当前文件所在目录

../上一级文件目录

13.超链接

(1)新建页面

target属性，用来指定超链接打开的位置

_self默认值，在当前页面打开超链接

_blank在一个新的页面打开超链接

<a href="https://www.baidu.com/" target="_blank">baidu</a>

(2)回到顶部

将超链接的href属性设置为#，这样点击超链接后页面不会跳转，而是转到当前页面的顶部

    <a href="#">回到顶部</a>

(3)跳转到任意地方:

使用id，给每个标签设置id属性（唯一标识）

href设为"#"+"id"

    <a href="#bottom">去底部</a><a id="bottom" href="#">--底部--</a>
 <a href="javascript:;">什么也不会发生</a>

14.图片标签

（1）img标签引入图片，它是一个自结束标签

属性：src 外部图片路径

img这种元素属于替换元素（被图片替换）

（2）alt，图片的描述，默认情况下不显示，在浏览器无法加载图片时显示

搜索引擎会根据alt中的内容识别图片（如果不写alt则不能被搜索引擎搜到）

（3）width图片宽度 height图片高度（单位：像素）

若两者只改一个，则会等比例缩放

若都改，则会改变图片长宽

（PC端一般不改图片大小，移动端经常对图片进行缩放）

  <img width="500 src="./img/1.gif" alt="图片1">

15.图片格式

jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图（一般用来显示照片）

gif 支持的颜色比较少，支持简单透明，支持动图（颜色单一的图片，动图）

png 支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生）

webp 谷歌专门用来表示网页中图片的一种格式，具备其他的有点，而且文件小（最完美的，但兼容性不好（ie浏览器不能用））

base64 将图片用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片

一般用于一些需要和网页一起加载的图片采用base64(同步加载)（使用场景不多）

16.内联框架

iframe  用于向其他页面引入一个其他页面  

用于向当前页面引入一个其他页面

<!-- frameborder="1" 有边框 ；="0" 无边框--><iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>

17.音视频播放

（1）音频

<!-- audio标签用来向页面中引入一个外部音频  音视频文件引入时，默认情况下不允许用户自己控制播放停止属性：controls 是否允许用户控制播放autoplay 音频文件是否自动播放，但大部分浏览器不会自动对音乐进行播放loop 音乐循环播放
--><audio src="./source/1.mp3" controls autoplay loop></audio>
    <!--除了用src指定外部文件的路径外，还可通过source指定文件路径--><audio>对不起，您的浏览器不支持播放音频，请升级浏览器！<!--支持的浏览器显示音频，不支持的输出该行文字--><source src="./source/1.mp3"><source src="./source/2.mp3"><source src="./source/3.mp3"></audio>
<!--优点：对用户友好，可以有多个音频（后面的音频只有前面的失效才会显示），若都失效，则显示文字-->
<!--用于老版本浏览器，自动播放(一般不用)--><embed src="./source/1.mp3" type="audio/mp3" width="200" height="100">

（2）视频

    <!--video使用方式基本与audio一致--><video><source src="./source/1.webm"><source src="./source/1.mp3"><source src="./source/3.mp3"><embed src="./source/3.mp3"></video>

相关文章：

尚硅谷html5+css3（1）html相关知识

1.基本标签&#xff1a; <h1>最大的标题字号 <h2>二号标题字号 <p>换行 2.根标签<html> 包括<head>和<body> <html><head><title>title</title><body>body</body></head> </html> 3…...

编程日记 2024/4/10 13:02:55

苍穹外卖11（Apache ECharts前端统计，营业额统计，用户统计，订单统计，销量排名Top10）

目录 一、Apache ECharts【前端】 1. 介绍 2. 入门案例 二、营业额统计 1. 需求分析和设计 1 产品原型 2 业务规则 3 接口设计 2. 代码开发 3. 功能测试 三、用户统计 1. 需求分析和设计 1 产品原型 2 业务规则 3 接口设计 2. 代码开发 3. 功能测试 四、订单统…...

编程日记 2024/4/10 12:59:52

大商创多用户商城系统 多处SQL注入漏洞复现

0x01 产品简介 大商创多用户商城系统是一个功能强大、灵活多变的新零售电商系统服务商。该系统支持平台自营和商家入驻，实现多元化经营模式，能够全面整合供应商、生产商、经销商和消费者等产业链资源，提高产品多样性，加快资金流动速度，并有助于减少不必要的成本输出。 0…...

编程日记 2024/4/10 12:57:49

美团一面4/9

面的时候自我感觉良好&#xff0c;复盘感觉答的一坨。。 0怎么比较两个对象 0Integer 不使用new会自动装箱&#xff0c;返回提前创建的。使用new就创建新对象。 1.Object类有什么方法 java中Object类中有哪些常用方法以及作用_java中object的方法有什么用-CSDN博客 2.hash…...

编程日记 2024/4/10 12:56:47

ubuntu下NTFS分区无法访问挂载-解决办法！

Ubuntu系统下&#xff0c;有的时候发现&#xff0c;挂载的NTFS文件系统硬盘无法访问。点击弹出类似问题&#xff1a; Error mounting /dev/sda1 at /media/root/新加卷: Command-line mount -t "ntfs" -o "uhelperudisks2,nodev,nosuid,uid0,gid0" "/…...

编程日记 2024/4/10 12:55:46

如何在 Ubuntu 14.04 上使用 Rsyslog、Logstash 和 Elasticsearch 实现日志集中管理

Elastic 的一篇文章 介绍 理解组织生成的数百万条日志行可能是一个艰巨的挑战。一方面&#xff0c;这些日志行提供了对应用程序性能、服务器性能指标和安全性的视图。另一方面&#xff0c;日志管理和分析可能非常耗时&#xff0c;这可能会阻碍对这些日益必要的服务的采用。 …...

编程日记 2024/4/10 12:54:45

mapbox 工作问题暂时记录

mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. mapbox样式修改 1. mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式 2. map.value.getStyle().layers这行代码可以获取页面中所有图层,可以判断图层id来做相应操作 3. map.value.setLayoutProperty(layer.id…...

编程日记 2024/4/10 12:51:41

Linux、Docker、Brew、Nginx常用命令

Linux、Docker、Brew、Nginx常用命令 Linuxvi编辑器文件操作文件夹操作磁盘操作 DockerBrewNginx参考 Linux vi编辑器 Vi有三种模式。命令模式、输入模式、尾行模式&#xff0c;简单的关系如下&#xff1a; i -- 切换到输入模式&#xff0c;在光标当前位置开始输入文本。&a…...

编程日记 2024/4/10 12:50:40

【Spring实战项目】SpringBoot3整合WebSocket+拦截器实现登录验证！从原理到实战

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…...

编程日记 2024/4/10 12:47:36

第二证券|政策利好不断，工业母机概念爆发，华东数控等涨停

工业母机概念10日盘中大幅走高&#xff0c;截至发稿&#xff0c;恒进感应、宏德股份、华东重机、华东数控等涨停&#xff0c;凯腾精工涨超20%&#xff0c;创世纪涨逾11%&#xff0c;华辰配备、盘古智能涨超9%&#xff0c;博亚精工涨逾8%。 音讯面上&#xff0c;工业和信息化部…...

编程日记 2024/4/10 12:45:33

Thinkphp5萤火商城B2C小程序源码

源码介绍 Thinkphp5萤火商城B2C小程序源码&#xff0c;是一款开源的电商系统&#xff0c;为中小企业提供最佳的新零售解决方案。采用稳定的MVC框架开发&#xff0c;执行效率、扩展性、稳定性值得信赖。 环境要求 Nginx/Apache/IIS PHP5.4 MySQL5.1 建议使用环境&#xff…...

编程日记 2024/4/10 12:44:32

PostgreSQL介绍

PostgreSQL是一个高度先进的对象关系型数据库管理系&#xff08;ORDBMS&#xff09;&#xff0c;其起源可以追溯到1986年&#xff0c;最初是加州大学伯克利分校计算机系的一个项目&#xff0c;名为POSTGRES。它是从Ingres项目演变而来的&#xff0c;目的是克服当时关系数据库系…...

编程日记 2024/4/10 12:43:31

简析数据安全保护策略中的十个核心要素

数据显示&#xff0c;全球企业组织每年在数据安全防护上投入的资金已经超过千亿美元&#xff0c;但数据安全威胁态势依然严峻&#xff0c;其原因在于企业将更多资源投入到数据安全能力建设时&#xff0c;却忽视了这些工作本身的科学性与合理性。因此&#xff0c;企业在实施数据…...

编程日记 2024/4/10 12:42:30

Python+Django+Html河道垃圾识别网页系统

程序示例精选 PythonDjangoHtml河道垃圾识别网页系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoHtml河道垃圾识别网页系统》编写代码&#xff0c;代码整洁&#xff0c;规…...

编程日记 2024/4/10 12:40:28

BUUCTF：BUU UPLOAD COURSE 1[WriteUP]

构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的&#xff0c;只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传&#xff0c;那就用MaxHacKBar来执行 …...

编程日记 2024/4/10 12:39:26

从零开始学习：如何使用Selenium和Python进行自动化测试？

安装selenium 打开命令控制符输入&#xff1a;pip install -U selenium 火狐浏览器安装firebug&#xff1a;www.firebug.com&#xff0c;调试所有网站语言&#xff0c;调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件&#xff0c;实现简单的浏览器操 作的录制与回…...

编程日记 2024/4/10 12:36:23

【linux基础】bash脚本的学习：定义变量及引用变量、统计目标目录下所有文件行数、列数

假设目的&#xff1a;统计并输出指定文件夹下所有文件行数 单个文件可以用 wc -l &#xff1b;多个文件&#xff0c;可以用通配符 / 借助bash脚本 1.定义变量名&#xff0c;使用引号 a"bestqc.com.map" b"Anno.variant_function" c"enrichment/GOe…...

编程日记 2024/4/10 12:35:21

算法四十天-删除排序链表中的重复元素

删除排序链表中的重复元素 题目要求 解题思路 一次遍历 由于给定的链表是排好序的&#xff0c;因此重复的元素在链表中的出现的位置是连续的&#xff0c;因此我们只需要对链表进行一次遍历&#xff0c;就可以删除重复的元素。 具体地&#xff0c;我们从指针cur指向链表的头节…...

编程日记 2024/4/10 12:33:19

Linux-等待子进程

参考资料&#xff1a;《Linux环境编程&#xff1a;从应用到内核》 僵尸进程 进程退出时会进行内核清理&#xff0c;基本就是释放进程所有的资源&#xff0c;这些资源包括内存资源、文件资源、信号量资源、共享内存资源&#xff0c;或者引用计数减一&#xff0c;或者彻底释放。…...

编程日记 2024/4/10 12:32:18

【LeetCode热题100】【二叉树】二叉树的最大深度

题目链接&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 最大深度等于左子树的最大深度和右子树的最大深度中的较大者加一 class Solution { public:int maxDepth(TreeNode *root) {if (!root)return 0;return max(maxDepth(root->left), max…...

编程日记 2024/4/10 12:31:17

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/7/8 19:49:47

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/6/21 15:57:46

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/7/7 18:26:16

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/7/8 18:17:48

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/7/5 12:54:36

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/7/8 18:59:18

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/6/21 3:02:00

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/6/21 16:18:00