（前端基础）HTML（一）

前提

W3C:World Wide Web Consortium（万维网联盟）

Web技术领域最权威和具有影响力的国际中立性技术标准机构

其中标准包括：机构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

HTML：超文本标记语言

建立html文件

利用浏览器打开该文件

若出现错误提示：

  • 打开文件设置：

  • 选择Tools：

HTML基本结构

  • DOCTYPE:告诉浏览器，我们要使用什么规范
  • <html>:整个网页
  • head：网页头部
  • body：网页主体
  • title：网页标题
  • meta：描述性标签，用来描述网站的信息

Ctrl+/:html文件的注释快捷键 

meta标签使用：

如网易云：

 网页基本标签

  • 标题标签<h1>
  • 段落标签<p>
  • 换行标签<br/>
  • 水平线标签<hr/>
  • 字体样式标签<strong>、<em>
  • 注释和特殊符号&nbsp;  &gt;    &lt;    &copy;

块元素：无论内容多少，该元素独占一行（p、h1-h6）

行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行（a、strong、em）

图像标签

常见图像格式JPG、GIF、PNG、BMP

利用img标签嵌入图像

<img src="图像地址" alt="图像的替换文字" title="鼠标悬停时提示文字" width="图像宽度" height="图像高度"/>

该处选择资源目录下的图片文件中的图片进行测试

src：图片地址

相对地址：../resources/image/apple.jpg

绝对地址：D:\学习资料\java\前端\resources\image\apple.jpg

图片不存在的情况：

链接标签

文本、图像超链接

<a href="链接路径" target="链接在哪个窗口打开"></a>

href:可以是html文件、URL地址

target：链接在哪个窗口打开

  • _blank:在新标签中打开
  • _self:默认值。在自己的网页中打开

锚标签

使用方法：

  • 需要一个锚标记
  • 跳转到标记#

页面跳转：

 

功能性链接

邮件链接：mailto：邮箱地址

列表标签

列表：信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者更快捷地获得相应的信息。

列表分类：

  • 无序列表
<ol><li></li>
</ol>
  • 有序列表
<ul><li></li>
</ul>
  • 定义列表
<dl><dt>列表名称</dt><dd>列表内容</dd>
</dl>

 表格

 表格简单通用，结构稳定。

基本结构有：单元格、行、列、跨行、跨列

如下：

  •  表格标签：table
  • 行row：tr
  • 列：td
  • 边框：border
  • 跨行：colspan，参数是跨的列数
  • 跨列：rowspan，参数使跨的行数
<table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

 媒体元素

视频元素标签：video

音频元素标签：audio

  • 属性src：所要选中的文件位置
  • 属性controls:控制播放
  • 属性autoplay:自动播放

<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>

 扩展：页面结构分析

header标题头部区域内容（页面或页面中的一块区域）
footer标记脚部区域内容（整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（侧边栏）
nav导航类辅助内容

iframe内联框架

<iframe src="页面地址" name="框架标识名" frameborder="0"></iframe>

使用方法：

width:宽度

height：高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>

该处跳转到百度

 也可以通过a标签往iframe加东西

name：框架标识名

target：链接在哪个窗口打开

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

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

相关文章

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析③】

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析③】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase03 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月15日 关键词&#xff1a;UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-003测试用例 用例ID测试场景验证要点参考条款预期…
阅读更多...
TDengine 客户端连接工具 taos-Cli

TDengine 客户端连接工具 taos-Cli

简介工具获取运行命令行参数 基础参数高级参数 数据导出/导入 数据导出数据导入 执行 SQL 脚本使用小技巧 TAB 键自动补全设置字符列显示宽度其它 错误代码表 简介 TDengine 命令行工具&#xff08;以下简称 TDengine CLI&#xff09;是用户操作 TDengine 实例并与之交互最简…
阅读更多...
Git高级用法

Git高级用法

GIT高级用法及实战案例解析 前言 作为现代开发者的必备工具&#xff0c;Git的基础操作&#xff08;add/commit/push&#xff09;早已深入人心。但当面对复杂场景时&#xff0c;掌握Git的高级用法将极大提升开发效率。本文将深入解析Git的高级功能&#xff0c;并配合真实场景案…
阅读更多...
9个用于测试自动化的最佳AI测试工具（2024）

9个用于测试自动化的最佳AI测试工具（2024）

选择一款优质的基于生成式AI人工智能的测试工具能够确保测试过程的准确性和效率&#xff0c;从而加速整个软件测试周期。相反&#xff0c;设计不佳的测试工具可能无法发现错误&#xff0c;并可能存在安全问题。它们可能产生误报或漏报&#xff0c;误导开发与测试团队&#xff0…
阅读更多...
vue-model如何自定义指令，及批量注册自定义指令

vue-model如何自定义指令，及批量注册自定义指令

一、在Vue.js中&#xff0c;v-model是一个用于在表单输入和应用状态之间创建双向绑定的指令。要编写自定义的v-model指令&#xff0c;你需要使用Vue的自定义指令API。以下是编写自定义v-model指令的步骤&#xff1a; 定义一个自定义指令对象。在指令对象的bind钩子函数中&…
阅读更多...
简单认识一下-Redis

简单认识一下-Redis

一、什么是Redis Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、基于内存的数据结构存储系统&#xff0c;它既可以用作数据库、缓存&#xff0c;也可以作为消息中间件使用。以下为你详细介绍 Redis&#xff1a; 基本特点 高性能&#xff1a;Redis 将数…
阅读更多...
LabVIEW的吞雨测控系统

LabVIEW的吞雨测控系统

本案例介绍了一种基于LabVIEW开发的吞雨测控系统&#xff0c;该系统通过建模仿真分析不同控制器模式下的阶跃信号响应&#xff0c;从而选择了最适合的控制器。为了有效解决在控制流量过程中出现的振荡收敛和流量信号大扰动问题&#xff0c;系统采用了改进的积分分离PID算法&…
阅读更多...
C++中的顺序容器（一）

C++中的顺序容器（一）

文章目录 顺序容器概述所有容器类型都支持的操作迭代器容器定义与初始化将一个容器初始化为另一个容器的拷贝标准库array具有固定大小 赋值和swap关系运算符 顺序容器的特有操作向顺序容器添加元素访问元素删除元素特殊的forward_list操作改变容器的大小容器操作可能是迭代器失…
阅读更多...
Javaweb中，使用Servlet编写简单的接口

Javaweb中，使用Servlet编写简单的接口

案例&#xff1a;网页提交用户名和密码信息&#xff0c;后端校验密码长度需在6-12位之间 后端部分 WebServlet("/valid") public class SimpleServlet extends HttpServlet{public void service(HttpServletRequest req, HttpServletResponse resp) throws IOExcepti…
阅读更多...
C语言实现的常见排序算法

C语言实现的常见排序算法

排序是计算机科学中非常重要的基础算法之一。无论是在数据分析、数据库查询还是图形界面中&#xff0c;我们都可能会遇到排序问题。本文将介绍几种常见的排序算法&#xff0c;并提供其C语言实现代码。排序算法的效率和应用场景有很大关系&#xff0c;不同的算法有不同的时间复杂…
阅读更多...
对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端

对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端

1. 使用Fetch API发送HTTP请求&#xff08;最简单的方式&#xff09;&#xff1a; //home.html // 示例&#xff1a;提交表单数据到后端 const submitForm async (formData) > {try {const response await fetch(http://your-backend-url/api/submit, {method: POST,head…
阅读更多...
[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

文章目录 一、前言二、主要贡献三、Introduction四、Methodology4.1 Motivation &#xff1a;4.2Framework Overview.** 一、前言 通信作者是香港理工大学 & OPPO研究所的张磊教授&#xff0c;也是图像超分ISR的一个大牛了。 论文如下 SeeSR: Towards Semantics-Aware Rea…
阅读更多...
案例-04.部门管理-删除

案例-04.部门管理-删除

一.功能演示 二.需求说明 三.接口文档 四.思路 既然是通过id删除对应的部门&#xff0c;那么必然要获取到前端请求的要删除部门的id。id作为请求路径传递过来&#xff0c;那么要从请求路径中获取&#xff0c;id是一个路径参数。因此使用注解PathVariable获取路径参数。 请求方…
阅读更多...
Blazor-父子组件传递任意参数

Blazor-父子组件传递任意参数

在我们从父组件传参数给子组件时&#xff0c;可以通过子组件定义的[Parameter]特性的公开属性进行传值&#xff0c;但是当我们需要传递多个值的时候&#xff0c;就需要通过[Parameter]特性定义多个属性&#xff0c;有没有更简便的方式&#xff1f; 我们可以使用定义 IDictionar…
阅读更多...
DeepSeek 的创新融合：多行业应用实践探索

DeepSeek 的创新融合：多行业应用实践探索

引言 在数字化转型的浪潮中&#xff0c;技术的融合与创新成为推动各行业发展的关键力量。蓝耘平台作为行业内备受瞩目的创新平台&#xff0c;以其强大的资源整合能力和灵活的架构&#xff0c;为企业提供了高效的服务支持。而 DeepSeek 凭借先进的人工智能技术&#xff0c;在自然…
阅读更多...
STM32创建静态库lib

STM32创建静态库lib

创建静态库lib 1. 新建工程1.1 创建工程文件夹1.2 编写用户相关代码1.2.1 stm32f4xx_it.h1.2.2 stm32f4xx_it.c1.2.3 标准库配置&#xff1a;stm32f4xx_conf.h1.2.4 HAL库的配置&#xff1a;stm32f4xx_hal_conf.h1.2.5 LL库配置&#xff1a;stm32f4xx_ll_conf.h 1.3 移植通用文…
阅读更多...
elabradio入门第二讲——BPSK数字调制与解调（插值、升余弦滤波、速率匹配、符号同步）

elabradio入门第二讲——BPSK数字调制与解调（插值、升余弦滤波、速率匹配、符号同步）

数字信号可以通过数字基带传输系统进行传输&#xff0c;而基带传输系统仅仅适用于低频信道下的数字信号传输。然而&#xff0c;在实际的通信系统中信道通常具有带通特性&#xff0c;因而需要将基带信号搬移到适合信道传输的高频载波上&#xff0c;使得信号与信道相匹配&#xf…
阅读更多...
汽车 OTA 升级：提升下载与升级速度，优化用户体验

汽车 OTA 升级：提升下载与升级速度，优化用户体验

摘要&#xff1a; 随着汽车智能化的飞速发展&#xff0c;OTA&#xff08;Over - the - Air&#xff09;升级已成为汽车行业的重要技术&#xff0c;它能为车辆持续带来功能更新与性能优化。然而&#xff0c;下载及升级速度较慢的问题常常影响用户体验。本文深入探讨在汽车 OTA …
阅读更多...
【Spring+MyBatis】留言墙的实现

【Spring+MyBatis】留言墙的实现

目录 1. 添加依赖 2. 配置数据库 2.1 创建数据库与数据表 2.2 创建与数据库对应的实体类 3. 后端代码 3.1 目录结构 3.2 MessageController类 3.3 MessageService类 3.4 MessageMapper接口 4. 前端代码 5. 单元测试 5.1 后端接口测试 5.2 使用前端页面测试 在Spri…
阅读更多...
SQLite Select 语句详解

SQLite Select 语句详解

SQLite Select 语句详解 SQLite 是一个轻量级的数据库管理系统&#xff0c;以其简洁的设计和高效的性能被广泛应用于各种场景。在 SQLite 中&#xff0c;SELECT 语句是用于查询数据库中的数据的命令。本文将详细介绍 SQLite 的 SELECT 语句&#xff0c;包括其基本语法、常用功…
阅读更多...
最新文章

Copyright @ 2022~2023