HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)

简介: HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)

HTML 2.网页标签
2.2 语义标签(下)
图像标签 & 路径
①src属性
是一个单标签,用于定义HTML页面中的图像。

使用格式:


其中src是图像标签的特性,要填入的“图像URL”负责帮网页找到对应图像的文件路径和文件名。

比如我要下图文件夹中的HTML.png显示在网页中,在“图像URL”处就要写HTML.png。

代码和结果如下:

<!DOCTYPE html>








这是一个图像



若图片展示不成功,很可能是该图片和该代码不在同一文件夹下。

②其他属性:alt/title/width/height/border
属性

属性值

说明

src

图片路径

必要属性

alt

文本

替换文本。是在图像显示不出来的时候用文字替换。

title

文本

提示文本

width

像素

设置图像的宽度

height

像素

设置图像的高度

border

像素

设置图像的边框粗细

alt,替换文本,例子:

(名为AAAA的图片不存在,因此会显示替换文字)

title,鼠标悬停在图片上时会显示的文字,例子:

width、height:单独使用时,是等比缩放图片的大小。若同时规定两者的数值,则是压扁或拉长图片。实际应用时往往只修改width或heigh。

border,规定边框的粗细,给图片加边框,例子:

图片多了一个15像素宽的黑色边框:

③图像标签注意要点:
图像标签可以有多个属性,但都必须写在src=”图像URL”的后面。
除了src以外的属性之间不分先后顺序,src与其他属性之间、其他属性之间均以空格相互隔开。
属性采用键值对的格式,即key=”value”(属性=“属性值”)。
src这个属性是必须要写的,其他属性按需求加即可。
④图像路径
目录文件夹:普通文件夹,里面存放了素材和文件

    根目录:打开目录文件夹看到的内容就是根目录。

如果是文件夹嵌套文件夹,点开里层文件夹所看到的就不是根目录。

有一种很便捷地新建文件的方式,点击“文件”--“打开文件夹”,打开目录文件夹(这里选的是名为“案例”的文件夹),点击“选择文件夹”。

然后会有下图的变化:

点击图中黄圈圈起来的按钮,然后再给新文件起名,就创建成功了。优点是方便管理文件。

当页面中的图片较多时,往往会新建一个文件夹来存放这些图像文件,会出现如下的情况:

此时html文件想要访问图片就需要图片路径了。

相对路径
以引用文件所在的位置为参考,从而建立出的目标路径。

相对路径分类

符号

说明

同一级路径

图像文件位于HTML文件的同一级,比如

下一级路径

/

图像文件位于HTML文件的下一级,比如

上一级路径

../

图像文件位于HTML文件的上一级,比如

需要特别注意的是,上一级路径的符号是两个点+一个右斜杠。另外,它指的是图片和包含该html的文件夹出于同一层级。

2、绝对路径

    情况1:电脑上的绝对路径

比如我点开D盘中的VS Code,这是它的绝对路径:

采用绝对路径的问题在于,程序只能在特定电脑上运行,换个电脑运行则会因为绝对路径不同而报错,所以平时较少使用。

    情况2:网站上的绝对路径

只要电脑能上网,就能获取到这张图片的网址。

将网址粘贴进src属性里,得到:

补充:绝对路径是左斜线\,相对路径是右斜线/,写的时候注意区分。

超链接标签
语法格式
用双标签来包含文字或图像。比如:

目标文本或图像
标签中的“a”是单词anchor的缩写,意为“锚”

超链接标签中有两个属性需要注意,href和target

属性

作用

href

是必须要写的属性(类似于用图像标签就一定要写src),用于指定所要链接的目标的URL地址。当为标签加上href属性后,它就具有了超链接的功能

target

用于指定链接页面的打开方式,其中_self为默认值,是指在当前的窗口打开。而_blank是指在新窗口中打开。

6种超链接标签
①外部链接
外部链接的URL地址必须以http:// 开头。

比如链接到CSDN:

<!DOCTYPE html>








1、外部链接:跳转到CSDN网页


CSDN网页

点击后跳转到CSDN官网:

保留这个CSDN网页不关掉,在HTML代码中加个target=_self,保存代码后就能看到这个CSDN网页被刷新为超链接地址,也就是在当前网页中进行跳转,而非新开个窗口(target=_blank是新开个窗口)

②内部链接
内部链接的URL地址不用以以http:// 开头。

比如将两个html文件放在文件夹的同一层级下,然后从名为”创建新文件.html”跳转到“ABCD.html”:

<!DOCTYPE html>








1、外部链接:跳转到CSDN网页


CSDN网页

2、内部链接:跳转到名为“ABCD”的内部网页


ABCD网页


<!DOCTYPE html>







这是一个名“ABCD”的内部网页,内容有XXXXXXXXXXX



点击下图的紫色字体“ABCD网页”,跳转到该网页:

③空链接
当还未确定链接的目标时,链接标签为:

空页面
即使是空链接,也必须要加href属性。不加的话就只是该网站的一句话,不具备链接跳转功能。

④下载链接
如果href的地址是一个文件或者压缩包,点击该链接的时候就会下载这个文件。

⑤网页元素链接
网页中的各种网页元素都可以添加超链接,比如文本、图像、表格、音频、视频。

比如通过“html.png”这个网页图片跳转CSDN网站。

点击上图后跳转到:

⑥锚点链接
是页面目录。点击目录后,能跳转到当前页面的对应位置。

首先把href属性设置为“#名字”的形式,比如:

第二章节
然后找到目标位置的标签,添加一个id属性=刚才起的名字,比如:

第二章内容


下面的例子比较短,跳转效果不太明显,建议拿文本较长的分章节内容自己试试:

<!DOCTYPE html>







HTML学习目录


C0 概述
C1 基础内容
C2 网页标签

C0 概述


0.1 HTML网页介绍


HTML指的是超文本标记语言(Hyper Text Markup Language),是一种标记语言而非编程语言。
超文本的两层含义:(1)超越了文本限制,可以加入图片、声音、动画、多媒体等内容。(2)超链接文本,可以从一个文件跳转到另一个文件,与世界个体的主机的文件相互链接。


0.2 网页的形成过程


前端人员开发代码-->浏览器解析、渲染-->生成Web页面

0.3 浏览器


国际上常用的五大浏览器:IE、Firefox(火狐)、Chrome(谷歌)、Safari、Opera
目前的国内浏览器一般都会采用Webkit或Blink内核,在此至上再增添新内容。

0.4 Web的标准


需要Web标准是因为浏览器不同会导致显示页面、排版有差异。
Web标准的构成有三个方面:结构(Structure)、表现(Presentation)、行为(behavior)
符合Web标准的最佳体验方案:结构、表现、行为相分离。换句话说,也就是结构、表现、行为分别写到HTML文件、CSS文件、JavaScript文件中,互不影响。

C1 基础内容


1.1 基本语法规范(标签格式 & 标签关系)


1.2 基本结构标签


1.3 开发工具 & 插件


1.4 几种快捷键



C2 标签

2.1 基础标签的含义(文档类型声明标签 & 语种标签 & 字符集)

2.2 语义标签(标题标签/段落标签/换行标签/文本格式化标签/无语义标签/图像标签/超链接标签



点击“HTML学习目录”下的内容,就能跳转到对应章节

2.3 注释
以<!—开头,以-->结尾,快捷键是ctrl + /

<!DOCTYPE html>










上面代码添加的两个注释都不会显示在网页中,如下图:

2.4 特殊字符
特殊字符

描述

字符的代码

空格

 

<

小于

<

>

大于

>

&

&

人民币符号

¥

©

版权

©

®

注册商标

®

°

摄氏度

°

±

正负号

±

×

×

÷

÷

2

平方2(也叫上标2)

²

3

立方3(也叫上标3)

相关文章
|
14天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
14天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
14天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
11天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
1天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
|
12天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
15天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
10 2
|
14天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
7 0
|
2天前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
11 0