前端-HTML-day1

目录

1、标签语法

2、HTML基本骨架

3、标签的关系

4、注释

5、标题标签

6、段落标签

7、换行和水平线标签

8、文本格式化标签

9、图像标签-基本使用

10、图像标签-属性

11、相对路径

12、绝对路径

13、超链接

14、音频

15、视频

16、综合案例1--个人简介

17、综合案例2--Vue.js

1、标签语法

2、HTML基本骨架

3、标签的关系

4、注释

5、标题标签

6、段落标签

7、换行和水平线标签

8、文本格式化标签

9、图像标签-基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./cat2.jpg"><img src="./dog2.jpg">
</body>
</html>

10、图像标签-属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像-属性</title>
</head>
<body><img src="./cat2.jpg"><!--以前网速慢，可能导致图片加载不出来，不想影响网页内容的浏览，用alt替换，或者图片不存在--><img src="./cat.jpg" alt="这是一只猫"><img src="./dog2.jpg" title="这是一只狗"><br><!-- 浏览器缩放图片，默认是等比例缩放 --><img src="./cat2.jpg" width="100"><img src="./dog2.jpg" height="600">
</body>
</html>

11、相对路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对路径</title>
</head>
<body><!-- 1.jpg --><img src="./1.jpg">  <!-- 1.jpg 在当前文件夹 --><!-- 2.jpg --><img src="./images/2.jpg">  <!-- 2.jpg 在当前文件夹下的images文件夹下 --><!-- cat2.jpg --><img src="../cat2.jpg">  <!-- cat2.jpg 在当前文件夹的上一级文件夹下-->
</body>
</html>

12、绝对路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对路径</title>
</head>
<body><img src="D:\vscode_code\HTML\cat2.jpg">  <!-- 图片在自己电脑中 --><img src="D:/vscode_code/HTML/cat2.jpg"><!-- https://www.itheima.com/images/logo.png -->  <!-- 图片在网页中 --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>

13、超链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接</title>
</head>
<body><a href="https://www.baidu.com/">跳转到百度</a><!-- 跳转到本地文件：相对路径查找 --><!-- target="_blank" 新窗口跳转页面 --><a href="./01_标签.html" target="_blank">跳转到01_标签.html</a><!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 --><a href="#">空连接</a>
</body>
</html>

14、音频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音频</title>
</head>
<body><!-- 在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词 --><!-- controls 和 controls="controls" 是等价的 --><!-- <audio src="./media/music.mp3"></audio> 只写src一个属性，浏览器中不会有任何显示,需要加上controls --><!-- loop 循环播放 --><!-- autoplay 自动播放，浏览器一般会禁用 --><audio src="./media/music.mp3" controls loop autoplay></audio>
</body>
</html>

15、视频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频</title>
</head>
<body><!-- 在浏览器中，想要自动播放，必须有 muted 属性 --><video src="./media/video.mp4" controls loop muted autoplay></video>
</body>
</html>

16、综合案例1--个人简介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架<a href="./17_综合案例2.html" target="_blank">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="./youyuxi.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯 </ins>。</p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>

17、综合案例2--Vue.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js</title>
</head>
<body><h1>Vue.js</h1><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./16_综合案例1.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p><video src="./media/video.mp4" controls></video>
</body>
</html>

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

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

相关文章

OpenCV篇——项目（二）OCR文档扫描

OpenCV篇——项目（二）OCR文档扫描

目录 文档扫描项目说明 前言 文档扫描代码总体演示 OCR文档识别代码总体演示: ​编辑 代码功能详解 1. 预处理阶段 2. 边缘检测 3. 轮廓处理 4. 透视变换 5. 后处理 主要改进说明&#xff1a; 使用建议&#xff1a; 文档扫描项目说明 前言 本项目实现了一个自动…
阅读更多...
Java 中导出包含多个 Sheet 的 Excel 文件

Java 中导出包含多个 Sheet 的 Excel 文件

在 Java 中导出包含多个 Sheet 的 Excel 文件&#xff0c;可以使用 Apache POI 或 EasyExcel&#xff08;阿里开源库&#xff09;。以下是两种方法的详细实现&#xff1a; 方法 1&#xff1a;使用 Apache POI&#xff08;支持 .xls 和 .xlsx&#xff09; 1. 添加 Maven 依赖 …
阅读更多...
OneCode采用虚拟DOM结构实现服务端渲染的技术实践

OneCode采用虚拟DOM结构实现服务端渲染的技术实践

一、技术背景与挑战 随着企业级应用复杂度的提升&#xff0c;传统服务端渲染(SSR)面临页面交互性不足的问题&#xff0c;而纯前端SPA架构则存在首屏加载慢和SEO不友好的缺陷。OneCode框架创新性地将虚拟DOM技术引入服务端渲染流程&#xff0c;构建了一套兼顾性能与开发效率的企…
阅读更多...
变幻莫测：CoreData 中 Transformable 类型面面俱到（八）

变幻莫测：CoreData 中 Transformable 类型面面俱到（八）

概述 各位似秃似不秃小码农们都知道&#xff0c;在苹果众多开发平台中 CoreData 无疑是那个最简洁、拥有“官方认证”且最具兼容性的数据库框架。使用它可以让我们非常方便的搭建出 App 所需要的持久存储体系。 不过&#xff0c;大家是否知道在 CoreData 中还存在一个 Transfo…
阅读更多...
汽车LIN总线通讯：从物理层到协议栈的深度解析

汽车LIN总线通讯：从物理层到协议栈的深度解析

目录一、物理层&#xff1a;单线传输的信号奥秘1.1 电平定义与信号传输1.2 关键硬件组件作用二、数据链路层&#xff1a;帧结构与通信协议2.1 LIN帧的组成与功能2.2 主从式通信机制三、波特率同步&#xff1a;从节点的时钟校准原理四、软件实现&#xff1a;基于S32K144的主节点…
阅读更多...
马尔可夫链：随机过程的记忆法则与演化密码

马尔可夫链：随机过程的记忆法则与演化密码

本文由「大千AI助手」原创发布&#xff0c;专注用真话讲AI&#xff0c;回归技术本质。拒绝神话或妖魔化。搜索「大千AI助手」关注我&#xff0c;一起撕掉过度包装&#xff0c;学习真实的AI技术&#xff01; 一、核心定义&#xff1a;无记忆的随机演化 马尔可夫链&#xff08;M…
阅读更多...
【vue3+tauri+rust】如何实现下载文件mac+windows

【vue3+tauri+rust】如何实现下载文件mac+windows

项目背景&#xff1a;【vue3taurirust】 由于Safari对于下载总是有诸多阻拦&#xff0c;目前需求windowsmac可以实现&#xff1a; 后端返回的url文件可以下载;前端根据dom元素生成的PDF报告可以下载&#xff08;无远程URL&#xff09;&#xff1b; 我的尝试&#xff1a; 方法…
阅读更多...
SQL 快速参考手册-SQL001

SQL 快速参考手册-SQL001

SQL 快速参考手册&#xff1a; 为方便快速学习和实践&#xff0c;提供了一份 SQL 快速参考手册&#xff0c;您可以打印出来随时查看&#xff0c;了解常见 SQL 命令的语法和用法。 SQL 数据类型 SQL 数据类型根据不同的数据库系统&#xff08;如 Microsoft Access、MySQL、SQL…
阅读更多...
学习java集合

学习java集合

集合与数组的对比集合的长度可变, 数组的长度不可变集合实际上跟数组一样, 是一种容器, 可以存放数据数组可以直接存放基本数据类型和引用数据类型集合可以存放引用数据类型, 但是不能直接存放基本数据类型, 如果要存放基本数据类型, 需要变成一个包装类才行泛型: 限定集合中存…
阅读更多...
python训练day49 CBAM

python训练day49 CBAM

import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self, in_channels, ratio16):"""通道注意力机制初始化参数:in_channels: 输入特征图的通道数ratio: 降维比例&#xff0c;用于减少参数量&#xff0c;默认…
阅读更多...
在小程序中实现实时聊天：WebSocket最佳实践

在小程序中实现实时聊天：WebSocket最佳实践

前言 在当今互联网应用中&#xff0c;实时通信已经成为一个标配功能&#xff0c;特别是对于需要即时响应的场景&#xff0c;如在线客服、咨询系统等。本文将分享如何在小程序中实现一个高效稳定的WebSocket连接&#xff0c;以及如何处理断线重连、消息发送与接收等常见问题。 W…
阅读更多...
Python网络爬虫编程新手篇

Python网络爬虫编程新手篇

网络爬虫是一种自动抓取互联网信息的脚本程序&#xff0c;广泛应用于搜索引擎、数据分析和内容聚合。这次我将带大家使用Python快速构建一个基础爬虫&#xff0c;为什么使用python做爬虫&#xff1f;主要就是支持的库很多&#xff0c;而且同类型查询文档多&#xff0c;在同等情…
阅读更多...
LeetCode.283移动零

LeetCode.283移动零

题目链接&#xff1a;283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行…
阅读更多...
2025年7月4日漏洞文字版表述一句话版本(漏洞危害以及修复建议)，通常用于漏洞通报中简洁干练【持续更新中】，漏洞通报中对于各类漏洞及修复指南

2025年7月4日漏洞文字版表述一句话版本(漏洞危害以及修复建议)，通常用于漏洞通报中简洁干练【持续更新中】，漏洞通报中对于各类漏洞及修复指南

漏洞及修复指南 一、暗链 危害&#xff1a;攻击者通过技术手段在用户网页中插入隐藏链接或代码&#xff0c;并指向恶意网站&#xff0c;可导致用户信息泄露、系统感染病毒&#xff0c;用户访问被劫持至恶意网站&#xff0c;泄露隐私或感染恶意软件&#xff0c;被黑客利用进行…
阅读更多...
python --飞浆离线ocr使用/paddleocr

python --飞浆离线ocr使用/paddleocr

依赖 # python3.7.3 paddleocr2.7.0.2 paddlepaddle2.5.2 loguru0.7.3from paddleocr import PaddleOCR import cv2 import numpy as npif __name__ __main__:OCR PaddleOCR(use_doc_orientation_classifyFalse, # 检测文档方向use_doc_unwarpingFalse, # 矫正扭曲文档use…
阅读更多...
数据结构与算法：贪心（三）

数据结构与算法：贪心（三）

前言 感觉开始打cf了以后贪心的能力有了明显的提升，让我们谢谢cf的感觉场。 一、跳跃游戏 II class Solution { public:int jump(vector<int>& nums) {int n=nums.size();//怎么感觉这个题也在洛谷上刷过(?)int cur=0;//当前步最远位置int next=0;//多跳一步最远…
阅读更多...
【Redis篇】数据库架构演进中Redis缓存的技术必然性—高并发场景下穿透、击穿、雪崩的体系化解决方案

【Redis篇】数据库架构演进中Redis缓存的技术必然性—高并发场景下穿透、击穿、雪崩的体系化解决方案

&#x1f4ab;《博主主页》&#xff1a; 　　　&#x1f50e; CSDN主页__奈斯DB 　　　&#x1f50e; IF Club社区主页__奈斯、 &#x1f525;《擅长领域》&#xff1a;擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对…
阅读更多...
Docker 实践与应用案例

Docker 实践与应用案例

引言 在当今的软件开发和部署领域&#xff0c;高效、可移植且一致的环境搭建与应用部署是至关重要的。Docker 作为一款轻量级的容器化技术&#xff0c;为解决这些问题提供了卓越的方案。Docker 通过容器化的方式&#xff0c;将应用及其依赖项打包成一个独立的容器&#xff0c;…
阅读更多...
《论三生原理》以非共识路径实现技术代际跃迁‌？

《论三生原理》以非共识路径实现技术代际跃迁‌？

AI辅助创作&#xff1a; 《论三生原理》以颠覆传统数学范式的非共识路径驱动多重技术代际跃迁&#xff0c;其突破性实践与争议并存&#xff0c;核心论证如下&#xff1a; 一、技术代际跃迁的实证突破‌ ‌芯片架构革新‌ 为华为三进制逻辑门芯片提供理论支撑&#xff0c;通过对…
阅读更多...
一体机电脑为何热度持续上升？消费者更看重哪些功能？

一体机电脑为何热度持续上升？消费者更看重哪些功能？

一体机电脑&#xff08;AIO&#xff0c;All-in-One&#xff09;将主机硬件与显示器集成于单一机身。通常仅需连接电源线&#xff0c;配备无线键盘、鼠标即可启用。相比传统台式电脑和笔记本电脑&#xff0c;选购一体机的客户更看重一体机的以下特点。 一体机凭借其节省空间、简…
阅读更多...
最新文章

Copyright @ 2022~2023