前端 -- 基础 综合案例 一 圣诞老人网页的静态实现

目录

主要涉及 : 

目录文件夹  : 

先新建目录文件夹

标签的使用 :

外部链接 : 

 锚点链接 : 

 内部链接  :


主要涉及 : 

# 目录文件夹的创建

# 标签的使用 (标题 换行 段落 图像 )

# 路径

# 外部内部链接 

# 锚点链接 

:  首先哈,这个安利 做出来是很丑的,哈哈哈 ; 因为目前就学了点这么些东西,其次,要想

          美化就得在 我们后期学完 CSS 后再谈~!! 

目录文件夹  : 

先新建目录文件夹

( 这个案例既有 HTML 文件,又有 图像文件,所以创建个目录文件夹是最方便的)

其实,我们做项目,做案例,第一部基本上都是创建 项目所在的文件夹即 目录文件夹

===>>>

               

           我是先在 桌面创建文件夹,创好了,并命名为 综合案例一,然后直接拖拽到 工作区的

           我们就把这个 综合案例一作为 目录文件夹 ~!! 

           

           随后,在目录文件夹里 创建了 HTML文件并生成骨架,命名为 demo.html 

           还创建了 案例所用图片的文件夹 命名为 images ( 里面有图 )

           这就是我们的准备工作,然后我们开始正式 编写 实现案例的 代码 

           

            这个是我们案例 所需要的文字

            :  你不需要在乎 这个文字是否通顺,不要在乎这一方面的问题~! 

                       坦率讲,我们只是为了 网页有文字在就行~!! 

                    

           我们将 文字粘贴到 demo.html 文件中 

         

          可以看到,显示出来的效果是 并在一起的

          接下来就开始我们的  微操了~!!  

标签的使用

         

         我们进行了 一级标题 ,二级标题的编写;  并且还进行了 换行 标签 ;

         需要提到的一点是,我们常规来讲 换行标签是 <br />  实际上,这个 / 不带也是可以的~!

         ===>>>

        

        

        

        接着,加入了 图片, 编写了 分段标签 <p> </p>   

        ===>>>

        

外部链接 : 

        上面  最后一句  更多内容可以百度一下 ,这就要用到 外部链接 

        

        先给分个段 

       

       接着,添加了链接 

       

       再实现 外部链接, 但是这个会在 原来页面的基础上 打开外部链接的页面 

       

       如此,当打开外部链接的时候,就会弹出 一个新窗口 ~!

       ===>>>

       

       当我们点击 这个链接的时候,就会弹出 百度页面 

      

       可以看到,弹出的是新窗口 ~!! 

       至此,我们首页(也就 demo.html 拿它当做首页 )就进行完了~!!! 

    锚点链接 : 

       

       先添加链接 

       

        再确定属性, 我们给的 名字  为  oldman  和  tree  

        

        

        然后定位到,要直接跳转的位置, 编写 相应的 id 即 前面编写的 名字 

        ===>>>

        

        点击链接,便会直接跳转 

        

        

         至此,锚点链接就完成 

 内部链接  :

         

         我们创建了一个 HTML 文件 命名为 oldman.html  并生成了 骨架 

         

         我们编写 oldman.html 页面 添加了 标题 段落 图片 

         ===>>>

        

         至此,这是我们 内部链接的页面的内容就创建完毕了 

        

         接下来,就是内部链接的实现了

         

         这是我们 要进行内部链接 跳转的位置 ,接下来给它操作

         

         这就是内部链接的实现 

         ===>>>

        

         点击链接,便会跳转

         

          内部链接实现完毕,并且打开的是新窗口 ~!! 

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

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

相关文章

小米4A千兆版路由器刷入OpenWRT教程结合内网穿透远程访问

文章目录 前言1. 安装Python和需要的库2. 使用 OpenWRTInvasion 破解路由器3. 备份当前分区并刷入新的Breed4. 安装cpolar内网穿透4.1 注册账号4.2 下载cpolar客户端4.3 登录cpolar web ui管理界面4.4 创建公网地址 5. 固定公网地址访问 前言 OpenWRT是一个高度模块化、高度自…

腾讯云TDSQL TCA/TCP/TCE 认证考试有什么区别呢?

腾讯云认证等级&#xff1a;专项认证考试&云方向认证考试 一、专项认证考试 数据库交付运维-腾讯云TDSQL认证考试一共分为三个等级&#xff1a; 初级TCA、高级工程师TCP、专家级TCE 1、TDSQL TCA培训(MySQL版/PostgreSQL版)考试安排 TCA考试是纯理论题&#xff0c;总分是…

springmvc内嵌tomcat、tomcat整合springmvc、自研国产web中间件

springmvc内嵌tomcat、tomcat整合springmvc、自研国产web中间件 这是由于公司老项目转化springboot存在太多坑&#xff0c;特别是hibernate事务一条就坑到跑路&#xff0c;你又不想搞没听说过的国产中间件兼容&#xff0c;又不想搞weblogic、WebSphere等中间件的适配&#xff…

系统存储架构升级分享 | 京东云技术团队

一、业务背景 系统业务功能&#xff1a;系统内部进行数据处理及整合, 对外部系统提供结果数据的初始化(写)及查询数据结果服务。 系统网络架构: 部署架构对切量上线的影响 - 内部管理系统上线对其他系统的读业务无影响分布式缓存可进行单独扩容, 与存储及查询功能升级无关通过…

任务调度中心

可以服务器配置和权限&#xff0c;分配任务执行。当服务器下线后&#xff0c;任务会被在线服务器接管&#xff0c;当重新上线后会在次执行任务。接管任务的服务器会释放任务。调度过程的实现&#xff0c;可以二次开发。基于 netty tcp 通信开发。 下载地址&#xff1a; http:/…

【附源码】基于SSM+Java的题库管理系统的设计与实现

基于SSMJava的题库管理系统的设计与实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;We…

Linux 期末复习

Linux 期末复习 计算机历史 硬件基础 1&#xff0c;计算机硬件的五大部件&#xff1a;控制器、运算器、存储器、输入输出设备 2&#xff0c;cpu分为精简指令集(RISC)和复杂指令集(CISC) 3&#xff0c;硬件只认识0和1&#xff0c;最小单位是bit&#xff0c;最小存储单位是字…

OpenHarmony沙箱文件

一.前言 1.前景提要 DevEcoStudio版本&#xff1a;DevEco Studio 3.1 Release SDK版本&#xff1a;3.2.2.5 API版本&#xff1a;9 2.概念 在openharmony文件管理模块中&#xff0c;按文件所有者分类分为应用文件和用户文件和系统文件。 1&#xff09;沙箱文件。也叫做应…

Vue3+TS+Vite 构建自动导入开发环境

关注⬆️⬆️⬆️⬆️ 专栏后期更新更多前端内容 在一个使用 Vue 3、Vite 和 TypeScript 的项目中,配置 unplugin-auto-import 和 unplugin-vue-components 插件可以极大地提高开发效率,因为它们可以自动导入 Vue 相关的 API 和 Vue 组件,从而减少了手动导入的需要。 文章目…

Docker实战08|Docker管道及环境变量识别

上一篇文章中&#xff0c;讲解了如何通过Go语言实现对Docker Cgroup的资源限制 具体文章可见《Docker就应该这么学-07》 有需要的小伙伴可以回顾一下。 接下来本文会详细介绍一下Docker 管道及环境变量识别 管道及环境变量识别 获取代码 git clone https://gitee.com/mjr…

Altium Designer实用系列(六)----AD问题整理,持续更新......

本篇博客会对粉丝提出的问题进行整理汇总&#xff0c;博客会持续更新… 一、 问题描述 问题1&#xff1a; 为什么我的ad点击设计之后没有update pcb document 原因&#xff1a;由于在工程中只有schDoc文件&#xff0c;没有PcbDoc&#xff0c;而导致没有“设计”–>update …

市场复盘总结 20240108

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整,采用龙空龙模式 今日空仓 最常用的二种方法: 方法一:指标选股找强势股 select * from dbo.ResultAll where 入选类型 like %指标选股% and 入选日期=20240108;方法二…