html实例001--锚点链接、格式化字体、段落、链接、文件下载等示例

最新推荐文章于 2024-03-14 09:39:32 发布
最新推荐文章于 2024-03-14 09:39:32 发布
阅读量207 收藏
点赞数
分类专栏： html+css+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dododododoooo/article/details/118094128
版权

html实例001–锚点链接、格式化字体、段落、链接、文件下载等示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个网页</title>
  </head>
  <body>
    <div>
      <h1>第一个标题</h1>
      <!--这是一个锚点链接-->
      <h2 id="second">第二个标题</h2>
      <p>第一个段落</p>
      第一句话<br />第二句话<br />
      <strong>加粗效果</strong><br />
      <b>加粗效果二</b><br />
      <em>倾斜文字</em><br />
      <i>倾斜文字二</i><br />
      <del>删除线文字</del>
      <s>删除线文字</s>
      <ins>下划线文字</ins>&nbsp;&lt;&gt;
      <u>下划线文字</u>
    </div>
    <span>风景</span>
    <span>壁纸</span>
    <span>小清新</span><br />
    <strong>加粗文字</strong>
    <b>加粗文字</b>
    <em>倾斜&nbsp;&nbsp;&nbsp;&nbsp;文字</em>
    <i>倾斜文字</i>&lt;p&gt;
    <!-- 这是一个标题的锚点链接 -->
    <a href="#second">跳到第二个标题<br /></a>
    <del>删除线文字</del>
    <s>删除线文字</s>
    <div></div>
    <ins>下划线文字</ins>
    <u>下划线文字</u>
    <div>
      <span>
        <a href="https://www.ivsky.com/" target="_blank">
          <img
            src="../幽静静谧的林间小路风景桌面壁纸_3.jpg"
            alt="24节气之一寒露桌面壁纸_7"
            title="24节气之一寒露桌面壁纸_7"
            width="800"
          />
        </a>
      </span>
    </div>
    <span>
      <a href="https://www.ivsky.com/" target="_blank">
        <u>
          <i>
            <strong>图片</strong>
          </i>
        </u>
      </a>
    </span>
    <a href="#">
      <span> 空链接 </span>
    </a>
    <a href="../幽静静谧的林间小路风景桌面壁纸_3.7z"> 下载文件 </a>
  </body>
</html>
dododododoooo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
锚点链接实例
啊伟的博客
11-20 675
锚点链接实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>刘德华百度百科</title> </head> <body> <h2>目录</h2> 1.早年经历<br /> 2.演艺经历<br /> 3.<a href="#pi" >个人生活</a
HTML：案例一:锚点链接
m0_56018365的博客
05-20 732
HTML：案例一:锚点链接 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>案例一:锚点链接</title> </head> <body> <h1>狗狗知多少</h1> <h4>1.<a href="#jinmao">金毛</a></h4>
微信小程序-scroll-view根据锚点滚动相应楼层展示
11-29
1、主要封装成两个组件，一个是标题展示效果、另一个是内容展示效果。 2、标题组件只需要展示相应的标题即可。 3、内容组件需要计算所有楼层的高度并存放在数组里，然后通过高度来计算是否处在哪个楼层之间，将数据抛出给调用页面。 4、通过内容组件抛出方法，标题展示相应的楼层样式。 5、标题组件点击后，传参数给调用页面，页面传值给内容组件。 6、内容组件通过scroll-view的scroll-into-view方法来定位到某个楼层位置。
HTML基础(1)
筱2402的博客
07-16 233
HTML基础(1) 学习目标： 从web标准认识html； 学习html常用标签，制作包含文字、图像、链接元素的网页。 学习内容： 一、认识web web简介： 网页:主要是由文字、图像和超链接等元素构成。 浏览器:是网页显示、运行的平台。 浏览器内核:(排版引擎、解释引擎、渲染引擎)；负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。 web标准： 结构标准用于对网页元素进行整理和分类(HTML) 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS) 行为标准用于对网页模型的定义及交互的
简单案例
xyw_jzj5201314的博客
11-11 474
简单综合案例 demo1 <!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>
day2 链接、标签、锚点、案例
m0_46335127的博客
02-24 142
p24外部链接 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部链接cs</tit
html锚点链接小案例
mianmami的博客
04-23 1095
案例1：回到首页 <html > <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{border: 0;margin: 0; padding: 0;} .box1, .box2{ height: 3000px; width: 200px; background-color: green; }
【Html与CSS基础】HTML中的锚点
Thedemonsword的专栏
04-16 7890
用锚点，回到顶部、回到底部、到文章中任意段落 提示：可以自己动手尝试 文章目录 前言 一、锚点是什么？ 二、使用步骤 1.操作 2.锚点示例 总结 前言 提示：锚点通俗来说就是起到文章目录的作用，精准跳转到文章指定位置 一、锚点是什么？ 在我们学习HTML的过程中，要理解写页面的作用，最初写页面的本质是为了文章服务的，一篇文章如果太长，我们想回到顶部、或者回到某一个段落就会费劲儿，所以锚点就是为了精准定位段落，起到目录的效果。 二、使用步骤 1.操作 1.
Html的锚点链接
we
07-25 6039
常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。以上实例，类似一个书签目录，用户可以通过点击需要查看目录名，直接跳转到当前页面的目录内容下，这样查看非常的方便，用户体验也会很好。创建锚点链接在一个复杂并且页面比较多的文档中是非常有必要的。2、链接到命名锚点，其href属性的值为#命名锚点的id值。HTML中的链接，正确的说法应该称作"时，标记锚点是最佳的方法。"，它命名锚点链接(也叫。...
HTML锚点链接
热门推荐
W2279567793的博客
04-14 2万+
HTML锚点链接 什么是锚点链接：锚点链接是超链接的一种，形式和超链接有所不同，利用锚点链接主要就是为了在一个页面中更加方便的跳转到某个位置。使用的场景就是在一个过长的页面中方便用户能够跳转到自己想去的相应位置 锚点链接的具体使用场景： 我是头部 去底部 <a href="#" name="top"></a> 1.跳转到当前页面的指定位置 方法一 1.设置一个锚点链接我是锚点一；（注意：href属性的属性值最前面要加#） <a href="#miao">去找锚点
HTML5锚点链接
06-13
HTML5锚点链接
微信小程序scroll-view锚点链接滚动跳转功能
01-19
html <view bindtap='jumpTo' wx:for={{keys}} data-item={{item}}>{{item}} <scroll scroll-into-view={{toitem}} scroll-y=true scroll-with-animation=true class=position> ...
使用HTML开发商业网站-锚点链接课件.pptx
07-10
使用HTML开发商业网站 锚点链接 超链接标签 超链接标签 创建锚点链接分为两步 例如 平面广告设计 . . . 平面广告设计 超链接标签 超链接标签 谢谢大家
微信小程序 scroll-view 实现锚点跳转功能
10-15
主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
HTML基础：超链接之锚点链接
最新发布
u013179804的博客
03-14 3314
在页面的目标位置（一定是页面中的某个元素）处添加一个具有唯一标识符的锚点。
html 超链接之锚点
weixin_43956958的博客
12-21 5763
文章目录不跨页锚点跨页锚点添加css样式链接到的页面在新打开的页面显示 锚点就是定位器 不跨页锚点 <a herf="#one">点我跳转第一章 </a> 跨页锚点 <a herf="要跳转的页面名称.html#one">点我跳转第一章 </a> 添加css样式 设置字体颜色为黑色 去掉点击链接以后的下划线 设置字体大小为xx-large <a href="#" id="test">超链接</a> <style&g
js URL 地址参数格式化
qq_62336903的博客
06-09 1634
js url 地址数据格式化
对url格式化
aican_yu的专栏
07-19 920
/* normalize a file name : also called by robots.txt parser * return true if it is ok, false otherwise (cgi-bin) */ bool fileNormalize (ch
格式化url
DGL_CSDN的博客
02-09 1723
<script> let str = 'http://jd.com?name=易烊千玺&age=18'; //书写一个函数， 使他输出{name:'易烊千玺'，age:18} function urlParse(url) { let num = url.indexOf('?'); // console.log(num); let data = url.substr(num + 1); // cons.
HTML-----锚点定位有滚动效果
08-17
HTML中实现锚点定位并具有滚动效果的方法有多种。一种常见的方法是使用CSS的scroll-behavior属性和a标签的href属性。首先，在CSS中设置scroll-behavior属性为smooth，这将使得滚动条在滚动时具有平滑的效果。然后，在a标签中的href属性中设置目标位置的id值，例如#section。当点击该链接时，页面将会平滑滚动到相应的目标位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [HTML锚点定位+平滑滚动](https://blog.csdn.net/m0_64520392/article/details/128941349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [微信小程序-scroll-view滚动到指定位置（类似锚点）](https://download.csdn.net/download/weixin_38601878/16213063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例](https://download.csdn.net/download/weixin_38665822/13982520)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值