一、文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性, 比普通文字更重要
二、<div>和<span>标签
<div>和 <span>是没有语义的,它们就是一个盒子,用来装内容的。
div 是 division 的缩写,表示分割、分区。span 意为跨度、跨距。
特点:
1.<div>标签用来布局,但是现在一行只能放一个<div>,相当于一个大盒子
2.<span>标签用来布局,一行上可以多个<span>,相当于一个小盒子
例如:
对于<div>标签
此时,123会换行
对于<span>标签
此时,三个词在同一行,间距开来
三、图像标签和路径
1.图像标签
在 HTML标签中 ,<img>标签用于定义 HTML页面中的图像。
单词 image的缩写,意为图像。
src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图像标签的特性。
例如:
此时图片会显示:
图像标签的其他属性:
(1)alt的使用:当图像不能显示时会替换成文字
例如:
此时:
(2)title的使用:
此时:
(3)width和height的使用
此时图片的大小改变了:
(4)border的使用
如图:
图像标签属性注意点:
① 图像标签可以拥有多个属性,必须写在标签名的后面.
② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
③ 属性采取键值对的格式,即key=“value"的格式,属性=“属性值”
2.
(1)目录文件夹和根目录:
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html文件、图片等
根目录:打开目录文件夹的第一层就是根目录
(2)VSCode打开目录文件夹
文件----打开文件夹.选择目录文件夹,后期非常方便管理文件
3.路径
页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为:
(1)相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。
(2)绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gi”或完整的网络地址 “http://www.itcast.cn/images/logo.gif"
注意:绝对路径和相对路径两个的斜杠符号是不一样的
四、超链接标签
在 HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
1.链接的语法格式
单词 anchor的缩写,意为:锚。
两个属性的作用如下:
例如:
如图:
点击链接后:
2.链接的分类
(1)外部链接: 如上腾讯网的打开即为外部链接
(2)内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可
例如:
在同一文件夹下,网站内部可相互链接
点击“内部链接之后”可直接跳转
(3)空链接:没有确定链接目标
例如:
此时点击“空链接”就不会跳转
(4)下载链接:如果href里面地址是一个文件或者压缩包,会下载这个软件
(5)网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
(6)锚点链接:点击链接,可以快速定位到页面中的某个位置
①在链接文本的href属性中,设置属性值为 #名字 的形式
②找到目标位置标签,里面添加一个id属性=刚才的名字
例如:我们要实现以下链接点击后直接定位到指定的位置
代码如下:
<!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>
<p>十个勤天是《种地吧》综艺中十名嘉宾的组合名,由蒋敦豪、鹭卓、李耕耘、李昊、赵一博、卓沅、赵小童、何浩楠、陈少熙、王一珩十个人组成</p>
<img src="C:\Users\86131\Desktop\一些\图片\eb\微信图片_20240721213513.jpg" width="500" height="300">
<br>
<a href="#one">1.社会活动</a>
<br>
<a href="#two">2.音乐单曲</a>
<br>
<a href="#three">3.音乐节</a>
<br>
<a href="#four">4.演唱会</a>
<p id="one">2023年3月30日,十个勤天官方微博正式成立,并发布第一条微博。此后十人公开活动中,均以“十个勤天”为组合名出现。<br>
9月29日,十个勤天参与综艺《朝阳打歌中心》播出。<br>
10月,十个勤天参与录制央视综艺《你好生活》,合唱《最好的青春纪念》。<br>
11月25日,十个勤天参与2023爱奇艺尖叫之夜活动<br>
2024年2月9日,十个勤天参演2024年中央广播电视台春节联欢晚会<br>
2024年2月20日,种地吧2宣传片发布,十个勤天谈种地吧2做大做强。 <br>
2024年植树节,十个勤天在甘肃省民勤县腾格里沙漠与房东的猫、高嘉朗、高进、王赫野、甘肃农业大学师生以及当地村民种植梭梭树18万株 <br>
2024年4月6日,十个勤天参与综艺《你好星期六》播出 [11]8月29日,推出组合歌曲《果敢》
</p>
<img src="C:\Users\86131\Desktop\一些\图片\eb\微信图片_20240721213501.jpg" width="500" height="300">
<br>
<p id="two">
果敢<br>
光<br>
后陡门的夏<br>
麦芒
</p>
<p id="three">
2023年9月29日-10月1日,参演「INNERSECT·NUTS潮流嘉年华」音乐节。<br>
10月21日,十个勤天参演淮安龙宫音乐节。<br>
2024年8月4日,十个勤天参演Z纪元银河左岸音乐节
</p>
<p id="four">
2024年6月28--30日,十个勤天种下一个未来2024巡回演唱会杭州场<br>
2024年7月19--20日,十个勤天种下一个未来2024巡回演唱会北京场<br>
2024年8月31日,十个勤天种下一个未来2024巡回演唱会佛山场<br>
2024年9月22日,十个勤天种下一个未来2024巡回演唱会厦门场
</p>
</body>
</html>
保存后运行:
点击“演唱会”后即可直接定位到演唱会介绍:
五、HTML 中的注释和特殊字符
1.注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签HTML中的注释以“<!--”开头,以“-->”结束。
快捷键:ctrl+/
2.特殊字符
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
重点记住:空格、大于号、小于号