前端基础---HTML笔记汇总一

HTML定义

HTML超文本标记语言——HyperText Markup Language。

  • 超文本是什么？ 链接
  • 标记是什么？ 标记也叫标签，带尖括号的文本

标签分类
  • 单标签:只有开始标签，没有结束标签(<br>换行 <hr>水平线 <img> 图像标签)
  • 双标签:成对出现的标签(但凡需要包裹内容的都是双标签 因为需要包裹内容需要开头和结束 )
  • 标签成对出现，中间包裹内容
  • <>里面放英文字母(标签名)
  • 结束标签比开始标签多/

HTML基本骨架

  • html：整个网页
  • head：网页头部，用来存放给浏览器看的信息，例如CSS
    • title：网页标题
  • body：网页主体，用来存放给用户看的信息，例如图片、文字

VS Code快速生成骨架：

在HTML文件(.html)中，!(英文)配合Enter/Tab键

标签关系

作用：明确标签的书写位置；让代码格式更整齐

  • 父子关系（嵌套关系）

  • 兄弟关系（并列关系)

  • * 代码格式
    • 父子关系：子级标签换行且缩进（Tab键）
    • 兄弟关系：兄弟标签换行要对齐

注释

作用:对代码的解释说明,能提高代码的可读性.(学习和工作中,关键代码都需要加注释)

<!-- 这是注释，不显示在浏览器 -->

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + / .

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名:h1~h6(双标签)

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- h1标签在一个网页中只能使用一次，用来放新闻标题或者网页logo --><!-- h2~h6没有使用次数限制 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

显示特点：

• 文字加粗

• 字号逐渐减小

• 独占一行（换行）

tips:

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

段落标签

一般用在新闻段落、文章段落、产品描述信息等等

标签名：p（双标签）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 段落之间有空隙 --><!-- p标签 段落的意思 --><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</body></html>

显示特点：

• 独占一行

• 段落之间存在间隙

换行和水平线

换行：<br>（单标签）

浏览器不识别代码中的 Enter 键换行

水平线：<hr>（单标签）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- br强制换行 --><p>天苍苍野茫茫， <br>我是隔壁的老王</p><!-- hr 水平线 了解即可 --><hr>
</body></html>
文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- strong 加粗 --><!-- i经常用于制作小图标  icon--><!-- del 删除线 --><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><ins>下划线</ins><u>下划线</u><del>删除线</del><s>删除线</s>
</body>
</html>

strong、em、ins、del 标签自带强调含义（语义）。

important:

  1. strong 加粗
  2. i经常用于制作小图标  icon
  3. del 删除线

*图像标签

作用：在网页中插入图片.

<img src="图片的URL">

src用于指定图像的位置和名称，是 <img> 的必须属性。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 元素>>>标签 --><!-- 属性alt src... --><!-- 属性值 引号里面的内容 --><!-- 属性='属性值'   键值对 --><!-- src 图片的路径 --><img src="tupian.jpg">
</body></html>
图片标签的其他属性

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片其他属性</title>
</head><body><!-- src 图片路径 --><!-- alt图片加载失败时，替换的文本 --><!-- title 鼠标悬停在图片上显示的文本 --><!-- width 宽度，当写一个值的时候，另一个会等比缩放 --><!-- height高度，当写一个值的时候，另一个会等比缩放 --><img title='图片' src="tupian.jpg" alt="这是一张图片" width="500" height="500"><h1 title="真不错">我</h1><!-- title是属性时，属性值是：鼠标悬停在图片上显示的文本 --><!-- title是标签/元素时，title是网页名 -->
</body></html>

  • 属性名="属性值"
  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

路径指的是查找文件时，从起点到终点经历的路线

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件(Windows 电脑从盘符出发 Mac 电脑从根目录出发)

*相对路径---从当前文件位置出发查找目标文件

  • . /表示当前文件所在文件夹
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="./images/tupian.jpg" alt="">
</body></html>
  • .. /表示当前文件的上一级文件夹
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../images/tupian.jpg" alt="">
</body></html>
  • 不能跨盘符找文件
绝对路径 -从盘符出发查找目标文件

应用场景:友情链接

  • Windows 电脑从盘符出发
  • Mac 电脑从根目录（/）出发

<img src="C:\images\tupian.jpg">
  • Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  • 文件的在线网址：https://www.itheima.com/images/logo.png

*超链接

作用：点击跳转到其他页面。

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面

链接分类:
  • 外部链接,注意要添加协议(https://等)
<!-- 跳转到百度 -->
<a href="https://www.baidu.com">百度</a>
  • 内部链接,注意路径问题
 <a href="./04.段落标签.html">跳转到段落标签</a>
  • 空链接 #(或者空格) 点击完会回到页面顶部(不确定跳转地址)
    <a href="#">空链接</a><h1>跳转</h1><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2><h2>跳转</h2>
  • 死链接 点击后没有任何效果(适用于不确定跳转地址)
 <a href="javascript:;">死链接</a>
  • *图片标签
<a href="https://www.baidu.com"><img src="./tupian.jpg" alt="">
</a>
  • 下载
<a href="下载文件路径">下载</a>
  • 在新窗口打开页面
 <a href="https://www.itcast.cn" target="_blank">传智播客</a><a href="图片路径" target="_blank">图片标签</a>

音频标签

<audio src="音频的 URL"></audio>

常见属性:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- src 路径 --><!-- controls 控制面板--><!-- loop 循环播放 --><!-- autoplay 自动播放 一般浏览器会禁止自动播放 --><!-- 书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词 --><audio src="./media/music.mp3" controls loop autoplay></audio><!-- 以下是为了以前照顾兼容性写法 现在不需要了 --><audio><source src="./media/music.mp3"><source src="./media/music.ogg"><source src="./media/music.wav">你的浏览器版本也太low了，赶紧更新一个吧 <a href="">点我啊</a></audio>
</body></html>

视频标签

<video src="视频的 URL"></video>

常见属性:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- muted 静音 可以用来设置视频的自动播放 搭配 autoplay --><video src="./media/vue.mp4" controls loop autoplay muted width="500"></video>
</body></html>

案例一:

目的:制作如下网页(tips:网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 → 写代码 → 保存 → 刷新浏览器，看效果)

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架<a href="javascript:;">Vue.js</a>的作者，<a href="javascript:;">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于GoogleCreative Labs和MeteorDevelopmentGroup。由于工作中大量接触开源的项目<a href=" ">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="javascript:;">Vue.js</a>。</p><img src="./photo.jpg" alt=""><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>

案例二

目的:实现图片页面跳转(tips:实现图片页面跳转需要用到img标签和a标签 两者结合即可完成)

解答详情步骤:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 可以先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址) --><a href="#">搜索</a><a href="#">目录</a><a href="#">详情</a><a href="#">登录</a>
</body></html>
  1. 先建一个超链接页面,里面先放空链接(因为此时我们还不确定跳转地址,浏览器显示画面如下,此时我们点击链接没有任何变化

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"><img src="图片路径"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</body></html>

2. 再建一个搜索图片界面,之后我们返回第一个建的页面,将图片界面文件路径加到刚才我们填的空链接(<a href="#">搜索</a>),点击发现能够实行跳转

3.再建一个目录图片界面,之后我们返回第一个建的页面,将目录图片文件路径加到刚才我们填的空链接(<a href="#">目录</a>),点击发现能够实行跳转(剩下两个界面也是如此)

  • 完整代码如下(需要分为五个文件,第一个文件用来做跳转页面首页,剩下四个分别是各自的超链接图片标签):

文件一:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="./work2.html" target="_blank">搜索</a><a href="./work3.html" target="_blank">目录</a><a href="./work4.html" target="_blank">详情</a><a href="./work5.html" target="_blank">登录</a>
</body></html>

文件二:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"><img src="../images/index.png"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</body></html>

文件三:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"><img src="../images/list.png"></a><a href="#"></a><a href="#"></a></html>

文件四:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"></a><a href="#"><img src="../images/details.png"></a><a href="#"></a></body></html>

文件五:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"><img src="../images/login.png"></a></body></html>

大家快去试试吧!

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

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

相关文章

完美解决 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

完美解决 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

拉取代码时报错&#xff1a; # Mac 报错WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key …
阅读更多...
JavaScript关于函数的小挑战

JavaScript关于函数的小挑战

题目 回到两个体操队&#xff0c;即海豚队和考拉队! 有一个新的体操项目&#xff0c;它的工作方式不同。 每队比赛3次&#xff0c;然后计算3次得分的平均值&#xff08;所以每队有一个平均分&#xff09;。 只有当一个团队的平均分至少是另一个团队的两倍时才会获胜。否则&…
阅读更多...
jumpserver堡垒机添加资产配置

jumpserver堡垒机添加资产配置

目录 jumpserver堡垒机添加资产配置 1、创建jumpserver管理用户&#xff0c;登录jumpserver堡垒机 2、创建普通用户&#xff0c;管理资源服务器 3、创建特权用户&#xff0c;登录资源服务器 4、添加资源 5、资产授权 6、登录jumpserver&#xff0c;创建的jumpserver用户 7、…
阅读更多...
MyBatis-Plus 总结

MyBatis-Plus 总结

MyBatis-Plus简介 官网&#xff1a;https://baomidou.com/ GitHub&#xff1a;https://github.com/baomidou/mybatis-plus Gitee&#xff1a;https://gitee.com/baomidou/mybatis-plus 简介 MyBatis-Plus &#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#x…
阅读更多...
摄像头的调用和视频识别

摄像头的调用和视频识别

CV_tutorial3 摄像头调用实时播放保存视频 运动目标识别帧差法背景减除法 摄像头调用 创建视频捕捉对象&#xff1a;cv2.VideoCapture() 参数为视频设备的索引号&#xff0c;就一个摄像投的话写0默认&#xff1b; 或者是指定要读取视频的路径。 实时播放 import cv2 import …
阅读更多...
SAP_ABAP_FUNCTION_ALV案例

SAP_ABAP_FUNCTION_ALV案例

SAP ABAP顾问能力模型梳理_企业数字化建设者的博客-CSDN博客SAP Abap顾问能力模型https://blog.csdn.net/java_zhong1990/article/details/132469977 一、Function ALV 1.1 基于退货采购订单创建&#xff0c;解释 FUNCTION_ALV开发的程序结构与代码模板参考 1.2 程序结构 to…
阅读更多...
YOLOv5、YOLOv8改进：BoTNet Transformer

YOLOv5、YOLOv8改进：BoTNet Transformer

目录 1.简介 2.YOLOv5改进 2.1增加以下yolov5s_botnet.yaml文件 2.2common.py配置 2.3 yolo.py配置修改 1.简介 论文地址 Paper 本文提出的BoTNet是一种简单高效的网络&#xff0c;有效的将SA应用到多种视觉任务&#xff0c;如图像识别、目标检测、实例分割任务。通过将R…
阅读更多...
06-基础例程6

06-基础例程6

基础例程6 01、WIFI实验—WebServer 实验介绍 ​ 连接路由器上网是我们每天都做的事情&#xff0c;日常生活中只需要知道路由器的账号和密码&#xff0c;就可以使用手机或电脑连接到路由器&#xff0c;然后上网。 ​ 连接路由器&#xff0c;将ESP32的IP地址等信息通过shell…
阅读更多...
自动化运维：Ansible脚本之playbook剧本

自动化运维：Ansible脚本之playbook剧本

目录 一、理论 1.playbooks 2.YAML 3.使用ansible批量安装apache服务 4.定义、引用变量 5.指定远程主机sudo切换用户 6.when条件判断 7.迭代 8.Templates 模块 9.tags 模块 10.Roles 模块 二、实验 1.使用ansible批量安装apache服务 2.定义、引用变量…
阅读更多...
【STM32】学习笔记-江科大

【STM32】学习笔记-江科大

【STM32】学习笔记-江科大 1、STM32F103C8T6的GPIO口输出 2、GPIO口输出 GPIO&#xff08;General Purpose Input Output&#xff09;通用输入输出口可配置为8种输入输出模式引脚电平&#xff1a;0V~3.3V&#xff0c;部分引脚可容忍5V输出模式下可控制端口输出高低电平&#…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(单选题：101-120）

华为数通方向HCIP-DataCom H12-821题库(单选题：101-120）

第101题 可用于多种路由协议,由 ​​if-match​​​和 ​​apply​​子句组成的路由选择工具是 A、​​route-policy​​ B、​​IP-Prefix​​ C、​​commnityfilter​​ D、​​as-path-filter​​ 答案&#xff1a;A 解析&#xff1a; Route-policy&#xff08;路由策…
阅读更多...
Oracle数据传输加密方法

Oracle数据传输加密方法

服务器端“dbhome_1\NETWORK\ADMIN\”sqlnet.ora文件中添加 SQLNET.ENCRYPTION_SERVER requested SQLNET.ENCRYPTION_TYPES_SERVER (RC4_256) 添加后新的链接即刻生效&#xff0c;服务器无需重新启动。 也可以通过Net manager管理工具添加 各个参数含义如下&#xff1a; 是…
阅读更多...
excel功能区（ribbonx）编程笔记--2 button控件与checkbox控件

excel功能区（ribbonx）编程笔记--2 button控件与checkbox控件

我们上一章简单先了解了ribbonx的基本内容，以及使用举例实现自己修改ribbox的内容，本章紧接上一章，先讲解一下ribbonx的button控件。 在功能区的按钮中，可以使用内置图像或提供自已的图像，可以指定大按钮或者更小的形式，添加少量的代码甚至可以同时提供标签。此外，可以利…
阅读更多...
LoRA学习笔记

LoRA学习笔记

Background 全参微调 全量微调指的是&#xff0c;在下游任务的训练中&#xff0c;对预训练模型的每一个参数都做更新。例如图中&#xff0c;给出了Transformer的Q/K/V矩阵的全量微调示例&#xff0c;对每个矩阵来说&#xff0c;在微调时&#xff0c;其d*d个参数&#xff0c;都…
阅读更多...
数据库CPU飙高问题定位及解决

数据库CPU飙高问题定位及解决

在业务服务提供能力的时候&#xff0c;常常会遇到CPU飙高的问题&#xff0c;遇到这类问题&#xff0c;大多不是数据库自身问题&#xff0c;都是因为使用不当导致&#xff0c;这里记录下业务服务如何定位数据库CPU飙高问题并给出常见的解决方案。 CPU 使用率飙升根因分析 在分…
阅读更多...
【线性代数-3Blue1Brown】- 5 三维空间的线性变换

【线性代数-3Blue1Brown】- 5 三维空间的线性变换

飞书原文档&#xff1a;Docs
阅读更多...
Centos7 安装Docker管理工具Portainer

Centos7 安装Docker管理工具Portainer

0、前提条件 已安装Docker并且开启Docker&#xff0c;安装Docker可参见&#xff1a;Centos7 安装 Docker_瘦身小蚂蚁的博客-CSDN博客 1、 拉取portainer-ce镜像 docker pull portainer/portainer-ce:latest [rootlocalhost ~]# docker pull portainer/portainer-ce:latest la…
阅读更多...
Doris架构中包含哪些技术？

Doris架构中包含哪些技术？

Doris主要整合了Google Mesa(数据模型)&#xff0c;Apache Impala(MPP Query Engine)和Apache ORCFile (存储格式&#xff0c;编码和压缩)的技术。 为什么要将这三种技术整合? Mesa可以满足我们许多存储需求的需求&#xff0c;但是Mesa本身不提供SQL查询引擎。 Impala是一个…
阅读更多...
1 Hadoop入门

1 Hadoop入门

1.Hadoop是什么&#xff1f; (1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 (2)主要解决&#xff0c;海量数据的存储和海量数据的分析计算问题。 (3)广义上来说&#xff0c;Hadoop通常是指一个更广泛的概念——Hadoop生态圈 2.Hadoop的优势 3 Hadoop组成 4 HDF…
阅读更多...
git 基础

git 基础

1.下载安装Git&#xff08;略&#xff09; 2.打开git bash窗口 3.查看版本号、设置用户名和邮箱 用户名和邮箱可以随意起&#xff0c;与GitHub的账号邮箱没有关系 4.初始化git 在D盘中新建gitspace文件夹&#xff0c;并在该目录下打开git bash窗口 git init 初始化完成后会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023