web前端基础笔记（三）

原创 已于 2024-09-03 18:30:13 修改 · 493 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2024-07-04 12:07:03 首次发布

链接标签：

超链接标签：

<!DOCTYPE html>

<htmlD lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>超链接标签</title>

    <!--

    1.超链接a标签

       普通a标签

       邮箱跳转链接

    2.链接标签常用属性

      href----1.远程链接  2.本地文件  3.邮箱

      title----链接标题

      target---跳转方式

          _blank--打开新的网页窗口

          _self--当前窗口跳转  

    -->

</head>

<body>

    <!-- 普通a链接跳转远程地址 -->

     <a href="httpd：//www.baidu.com" title="baidu" target="_blank">点我跳转百度</a>

    <!-- 跳转至本地 -->

    <a href="../1.1文本标签/1.1.1标题和段落标签.html">点我跳转本地</a>

    <!-- 跳转邮箱 -->

     <a href="mailto：">点此打开邮箱</a>

    </body>

</html>

锚点链接：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>锚点链接</title>

    <!--

    1.设置锚点

    2.使用锚点

    -->

</head>

<body>

    <!-- 使用锚点采用  href="#id的值" -->

     顶部：<a href="#bootom" name="top">回到底部</a>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <li>测试内容</li>

     <a href="#top" id="bootom">回到顶点</a>

    </body>

</html>

超链接图片：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>超链接图片</title>

    <!-- a标签中文字变图片即可 -->

</head>

<body>

    <a href="">

        <img src="" alt="">

    </a>

</body>

</html>

图片热区：

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

    <!-- 使用地图（等价于跳转链接时使用map标签中定义的坐标跳转）

     通过usemap=”#name“的值 -->

     <img src="../1.5链接标签.html/map.png" width="1280xp" height="800xp" usemap="#shop">

     <!-- 通过name设置地图名字 -->

      <map name="shop">

      <!-- 定义矩形位置 -->

       <area title="京东" shape="rect" coords="0,0,400,800" href="https://jd.com" alt="">

    <!-- 定义圆形位置 -->

       <area title="淘宝" shape="circle" coords="640,400,210" href="https://taobao.com" alt="">

     <!-- 定义多边形位置 -->

       <area title="天猫" shape="poly" coords="1070,0,1280,400,1070,800,850,400" href="https://tianmao.com" alt="">




      </map>

</body>

</html>

Web前端学习重点笔记
m0_65484865的博客
05-03 654
项目1描述1描述2项目2域标题
【自学笔记】Web前端的重点知识点-持续更新
2301_78806917的博客
02-01 1268
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，自学记录Web前端知识点的重点知识点。
Web前端学习笔记
DAOkonglong的博客
10-16 4264
Web前端学习
Web前端学习笔记（第一周）
zhangjun666dd的博客
09-21 974
即全球广域网，也称为万维网。是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成，还可以包含音频、视频以及Flash等。是网页运行的平台。
Web前端开发学习笔记
qq_41622776的博客
02-02 3192
自学笔记，仅供参考
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 4163
Web前端学习笔记（1）
web前端最全笔记
qqyang_的博客
07-14 4794
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
Web前端笔记记录
yjnlovepy的博客
10-19 4017
web前端开发笔记
web前端开发技术 笔记 1
qq_62198422的博客
09-11 967
web前端开发技术笔记
web前端学习笔记三
别不开心ovo
09-05 514
JavaScript
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
精选资源
web前端开发笔记整理（一）
01-08
...1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ... ...属性名不加双引号，属性值加双引号 标签的属性定义了与文档相关联...
Web前端基础笔记1
08-08
【Web前端基础笔记1】 在Web开发领域，前端技术扮演着至关重要的角色，它负责构建用户与网站交互的界面。本笔记主要关注HTML（Hyper Text Markup Language），这是创建网页内容的基础语言。 1. HTML概述 HTML是一...
精选资源
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
精选资源
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
3.2-Web开发介绍（AI)
最新发布
m0_64924660的博客
01-06 207
Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。
前端组件级权限控制
马优晨
01-06 345
前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。
Vue 3 组件通信全方案详解：Props/Emit、provide/inject、事件总线替代与组合式函数封装
小二丶的博客
01-05 1279
本文系统梳理Vue3中7种组件通信方式，重点剖析props/emits、provide/inject、v-model等核心方案，并通过实战案例演示应用场景。文章包含完整TypeScript代码实现、性能对比数据及5个常见反模式避坑指南。主要内容包括：父子组件通信（props/emits）、跨层级通信（provide/inject）、双向绑定（v-model）、逻辑复用（Composables）以及全局状态管理（Pinia）。
前端使用 clip-path + linear-gradient 实现矩形对角线渐变分区
m0_46893049的博客
01-05 207
需要 overflow: hidden 防止溢出。clip-path 不支持 IE。上层：另一个线性渐变 +底层：一个线性渐变背景。控制对角线方向和位置。
培训机构整理的web前端实用笔记
web前端笔记 1. HTML基础 HTML（HyperText Markup Language）是构成网页内容的基本标记语言。HTML文档由一系列的元素（elements）组成，这些元素通过标签（tags）来表示。HTML的版本经历了多个发展阶段，当前广泛...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值