企业网站的特征,yw39777域名查询,海尔网站推广策划方案,gwt 网站开发HTML相关知识
目录
HTML相关知识
前言
准备工作
标签的具体分类#xff08;二#xff09;
本文中的标签在什么位置使用#xff1f;
本期前置知识点
超文本
超文本引用和源属性
图片标签
锚链接
iframe
锚点
预告和回顾
后话 前言
本系列博客将分享HTML相关…HTML相关知识
目录
HTML相关知识
前言
准备工作
标签的具体分类二
本文中的标签在什么位置使用
本期前置知识点
超文本
超文本引用和源属性
图片标签
锚链接
iframe
锚点
预告和回顾
后话 前言
本系列博客将分享HTML相关知识点。
上一期博客里讲述了部分标签的使用本期博客将接着上一期来继续讲述一些具有二维属性或者多级层次的标签。
按照我的风格来说其实我不太喜欢用书面语言来分享知识。比起单纯的科普我的博文更像是一种语言风格类似于休闲聊天但是又不缺乏严谨性的知识笔记也就是我之前提到的——“杂谈”的形式。
初心呢就是主打分享写的不好多多包涵嘻嘻。
准备工作
软件【参考版本】Visual Studio Code有道云笔记
*关于有道云笔记的使用可以看我专栏的Markdown文档有关文章*
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
标签的具体分类二
本文中的标签在什么位置使用
本文中我们需要掌握的是写在主体标签body中的各种标签。
本期前置知识点
超文本
首先知道一个概念超文本HyperText并不局限于文字这一概念它涵盖了广泛的可编码文件。
链接、图片、音频、视频等也属于超文本的范畴。
对于文字信息我们可以直接使用字符文字直接插入双标签中。但是对于超文本中的其他内容标签就不能包裹住他们了。
我们一般使用属性来插入图片等内容通常统一用链接或者地址的形式引入。
超文本引用和源属性
有一些标签的属性中有一个属性叫href全称是HyperText Reference直译为超文本引用。
还有一些标签的属性中有一个属性叫src全称是source直译为源。
这个两个属性可以设置一段路径地址比如说在线超文本的网页链接、本地超文本的路径地址。
比如说我们访问网站时浏览器上方的这一行内容就是一个网页链接 而路径则可以分为两种——绝对路径和相对路径。
绝对路径是从盘符开始直到当前文件的路径。当文件发生移动后绝对路径是会变化的这样就会导致使用了绝对路径的代码需要被频繁地修改即代码的可迁移性不好。
所以在开发过程中如果需要使用到本地的文件最好使用相对路径。
相对路径可以理解为本文件到目标文件的相对位置关系涉及到下面这些概念
符号含义.当前目录..父目录/分隔符用于分隔目录和目录或者目录和文件\\也是分隔符
为了方便理解举个例子
现在在这个“父文件夹”里有下面两个子文件夹 如果想要在index.html中定位到pic.png代码如下
../子文件夹2/pic.png 注意从上一级往下一级找需要写出下一级文件夹的具体名称。
最后注意src和href是有区别的否则也不需要出现两个名称不同的属性名
src: 本地已经下载好的/网络/资源随着网页加载一起加载href: 建立页面之间的联系/桥梁的作用不会随着网页加载使用时再加载
图片标签
图片标签img全称是image直译为图像。
在学习这个标签之前我们需要认识一下图片的基本属性
属性描述srcsource 源属性 引入图片的地址/路径width图片的宽度 数字单位默认px 像素height图片的高度 数字单位默认px 像素title当鼠标悬浮在图片的上方时显示的文字altalter替换 当图片损坏无显示时出现的文字draggable是否可拖拽 true可 false不可 默认可拖拽
一个img标签最少需要有两个属性src和alt其中alt的内容可以为空。
使用以下代码定义一个大小为500*500px的示例图片src使用的是我的csdn头像的链接
img srchttps://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1 alt我的头像 width500px height500px titleH2O2的头draggablefalse
在网页中显示的效果如下: 注意如果只设置一个宽或者高的属性则图片会被等比例缩放。
鼠标悬浮在图片上显示的文字这个图我截不出来…… 尝试拖动图片无反应。draggable的默认值为true如果不写这个是可以拖出来的。
路径失效时的效果路径上面随便输入乱码破坏 注意如果图片加载失败比如网络异常也是有可能出现这个效果的。
锚链接
锚链接a全称anchor直译为船锚。
锚链接还有一个名字叫“超链接”用于定义超文本链接可以是文本图片网页等。
锚链接是一种双标签其中包裹的内容是可以显示出来的。在所有浏览器中锚链接文字的默认外观如下
链接类型未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接点击时带有下划线而且是红色的
对应效果 锚链接的一些基本属性和对应含义如下
属性含义href超文本引用规定链接的目标URL即跳转的目标地址target规定在何处打开目标 URL。仅在 href属性存在时使用。framename框架的名字id用于创建一个HTML文档书签网页锚点。
其中target具有4个属性值
_blank 新窗口打开。_parent在父窗口中打开链接。_self默认当前页面跳转。_top在当前窗体打开链接并替换当前的整个窗体(框架页)。
想要理解target和framename的含义我们首先需要知道框架的基本概念。
iframe
iframe内嵌框架是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签它可以在一个页面中显示来自其他页面的内容。
在网页中使用iframe标签可以将一个网页嵌套在另一个网页中实现网页间的相互联通。
在这里我们暂时不扩展讲该框架的内容只需要对其概念有个基本了解即可。
简单做了一个框架的效果由浏览器窗口嵌套两级iframe页面 其中a页面和b页面都是两个被嵌入进来的单独的html文档。
对于全部的三层页面来说 _blank的效果都是在一个新页面里打开内容_self的效果都是在当前页面里打开内容默认。
对于b页面来说_parent在父级窗口打开就是在a页面中打开内容。
对于ab页面来说_top的效果就是在最高级页面即顶级页面浏览器窗口打开并覆盖所有框架效果。
锚点
id的作用是设置一个锚点。而在href中可以引用这个锚点以此达到在页面其他的位置跳转到设置了锚点的a链接的位置。
因此锚点常常用于网页书签的制作。比如购物网站的侧边书签栏这里简易实现一下它的效果
style#box {display: block;position: fixed;right: 50px;top: 300px;background-color: aqua;}.in {width: 50px;height: 50px; display: flex;justify-content: center;align-items: center;}/style
div idboxdiv classina classtag href#t1水果/a/divdiv classina classtag href#t2饮料/a/divdiv classina classtag href#t3衣服/a/divdiv classina classtag href#t4日用/a/div /diva idt1/ah1水果/h1br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /a idt2/ah1饮料/h1br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /a idt3/ah1衣服/h1br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /a idt4/ah1日用/h1br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br / 在浏览器中的效果如下 比如点击衣服我们就可以跳转到衣服的区域 可以看到在需要跳转到的位置目标位置设置id值在书签中使用“# id值”实现向锚点的跳转。
特别的在锚链接中还有一个属性叫做name使用方法与id相同。
*其实id在所有html标签中都可以用name只能在锚链接中有此效果它是一种选择器在未来的CSS系列中我会拿出来讲*
预告和回顾
在我的HTML第四期博客中将会继续介绍HTML的基本标签包括列表表格和表单的概念并会加上实际的案例。
对HTML感兴趣的朋友也可以看看我的主页专栏
专栏 | HTML相关知识http://t.csdnimg.cn/Xuel5
后话
在全栈领域博主也只不过是一个普通的初学者而已。关于这篇博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
期待与你在下一期博客中再次相遇
【H2O2】
