首页 > 其他分享 >HTML学习笔记5——功能性链接(打电话发邮箱)

HTML学习笔记5——功能性链接(打电话发邮箱)

时间:2024-03-26 21:58:07浏览次数:14  
标签:功能性 代码 电脑 HTML 设置 邮箱 打电话 热点

可以跳转至发邮箱打电话等的链接,在vscode中写完代码后右击选择Open with live Server用服务器打开。这篇文章主要介绍发邮箱和用手机打电话。

<-- 都写在body中 -->
<-- 邮箱格式 -->
<a href="mailto:[email protected]">邮箱</a>
<-- 打电话格式 -->
<a href="tel:176xxxxxxxx">电话</a>
发邮箱的示例

写完代码后直接运行就可以。

代码
<!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>
    <a href="mailto:[email protected]">邮箱</a>
</body>
</html>
效果展示

点击“邮箱”后跳转

打电话的示例

打电话要让手机和电脑在同一个网络端口下,在写好代码后进行操作:

1、打开电脑命令行(输入cmd就可以)输入ipconfig,找到TPv4地址替换掉网页中“:5500”前的内容;

2、在电脑上开启热点,步骤:

打开电脑的开始菜单,然后点击“设置”图标,在设置界面中,选择“网络和Internet”选项。

在“网络和Internet”设置中,找到并点击“移动热点”,在移动热点设置中,打开“移动热点”开关。

如果需要设置热点的网络名称(SSID)和密码,可以点击“编辑”按钮进行编辑。

完成设置后,保存更改并关闭设置窗口。

完成这些步骤后,电脑的移动热点就会开启,可以在手机上通过连接这个热点来共享电脑的互联网连接。

3、用手机浏览器打开10.19.194.106:5500/222.html就可以了。

代码
<!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>
    <a href="tel:176xxxxxxxx">电话</a>
</body>
</html>
 效果展示

标签:功能性,代码,电脑,HTML,设置,邮箱,打电话,热点
From: https://blog.csdn.net/qq_68268403/article/details/136912354

相关文章

  • HTML知识巩固(3)
    **HTML常用标签(这段的内容特别多所以可能会分很多段)**1.<h1>-<h6>标签<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>h标签也一般称为标题标签常常用于写标题这是h1标签效果这是h2标签效果这是h3标签效果这是h4......
  • HTML5 新特性及已移除元素
    HTML5作为HTML的最新标准,引入了一系列新特性和改进,旨在提供更为丰富和强大的Web内容。然而,随着新特性的引入,HTML5也对一些过时或不再推荐使用的元素进行了移除。新特性语义化标签:HTML5引入了一系列新的语义化标签,如<header>,<footer>,<nav>,<article>,<secti......
  • html标签分类
    常见的HTML块级元素包括:<div>:用于创建一个块级容器,通常用于组织页面结构和样式。<p>:用于表示段落文本。<h1> - <h6>:用于表示标题,数字越大表示级别越低。<ul>:用于表示无序列表。<ol>:用于表示有序列表。<li>:用于表示列表项。<table>:用于表示表格。<form>:用于表示表单。<head......
  • 37.html+css+js网页设计实例/“音乐”酒吧主题介绍/web前端期末大作业/
    一、前言本实例以“音乐”酒吧为主题设计,响应式web,应用html+css+js,包括图片轮翻效果、视频、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交......
  • 消失的留言(HTML中用JS实现)
    学习目标:提示:这里可以添加学习目标例如:一周掌握Java入门知识学习内容:掌握延时函数的使用掌握JavaScript控制css属性的方法学习:提示:这里可以添加计划学习的时间例如:框架+文字<!DOCTYPEhtml><htmllang="zH-Hans"><head><metacharset="UTF-8"><metaname=......
  • 我不想使用 CSS 样式,你知道在 HTML 中有什么标签可以加粗文本么
    网页设计过程中,我们经常会遇到需要加粗文本来凸显特定文本的情况。<b> 标签在强调文本时扮演着不可或缺的角色,它就像是我们语言中的语气词,虽微不足道,但能有效地抓住读者的注意力。1.基础语法什么是<b>标签<b> 标签是HTML中用于加粗文本的基础标签,它能够让包裹的文字......
  • 36.html+css+js网页设计实例/“美食”主题介绍/web前端期末大作业/
    一、前言本实例以“美食”为主题设计,应用html+css+js,包括图片轮翻效果、菜单导航、三级菜单、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我......
  • html标签
    一.HTMLHTML是HyperTextMarkupLanguage的缩写,意思是超文本标记语言。它的作用是搭建网页结构,在网页上展示内容二.HTML基础结构文档声明:HTML文件中第一行的内容,用来告诉浏览器当前HTML文档的ׂ基本信以及HTML文档遵循的语法标准<!DOCTYPEhtml>根标签:<htm......
  • HTML知识巩固(1)
    前言:学到python回头发现已经把前段的知识忘光了所以重新复习一下,再写博客方便以后的回顾HTML基础知识:1.网页由什么基本组成?结构(HTML):用于描述页面的结构表现(CSS):用于控制页面中元素的样式行为(JavaScript):用于响应用户操作2.什么是HTML?HTML是超文本标记语言(HyperTextMarkupL......
  • 33.html+css网页设计实例/“个人”博客主题介绍/web前端期末大作业/
    前言本文以“个人”博客为主题设计,本实例应用html+css。包括音频、点击事件、留言、登录页面等,供大家参考。【关注作者互关|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,有兴趣的联系我交流分享!3Q!一、网页效果二......