HTML 笔记 —— 标签和超链接，java 面试数据库隔离级别实战
<meta charset="UTF-8">
<meta name="关键词" content="html">
<meta name="description" content="这是一个网站">
<title>html 学习</title>
</head>
<body>
Hello,World!
</body>
</html>
这里在< body >< /body >里面写了一句 Hello，World！，就会在网页中显示这句话
< !-- – >是注释的格式，在 idea 中按 ctrl+/ 可以快速注释一行内容
行内元素和块元素
像 p 标签也就是段落标签，h1 标签也就是标题标签，里面的内容都是独占一行，叫块元素
而粗体斜体标签也就是 strong 标签，em 标签，都可以放在同一行里面，叫行内元素
HTML 会自动在块级元素前后添加一个额外的空行
块元素，独占一行，比如
行内元素，共用一行，比如
标签
1. 标题，
通过 < h1 > 到< h6 > 的标签进行定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
</body>
</html>
在网页中显示的结果是
2. 段落
像这样直接写的话（写在< body>< /body>里面），虽然中间有空格和换行，但是输出的时候
会被写成一句话里面，中间加的空格和换行都没有用
加上段落标签后，浏览器的显示结果是
注意，在 idea 中只需要写一个 p，然后按 tab 键，就可以自动补全为< p>< /p>，其余的标签同理
3. 换行标签
< br/>是换行标签，这是一种自闭合标签的写法，只有一个标签
4. 水平线标签 < hr/>
可以看到这里中间多了一条水平线
5. 粗体和斜体标签
6. 特殊符号
一些其他的特殊符号
图像标签
作用是在网页中插入图片
成功显示了图片
加载图片失败时（路径 src 错误时就会导致加载图片失败）
链接标签
网页显示的结果为
将一张图片转为超链接
原先是通过一段文字点进去网页，现在改为点击图片跳转到另一个网页
<!--a 标签
href(必填):表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank:在新的标签页中打开
_self:在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到网页一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
点击文字内容“点击我跳转到网页一”后，不再在当前网页打开网页，而是占用一个新的标签页
锚标签
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚标签学习</title>
</head>
<body>
<!--
a 标签有一个属性 name,可以给这个 a 标签一个名字
这个 a 标签作为一个锚标记,名字是 top,在页面上显示的结果是"顶部"
下面会有一个锚标签通过 #name 的方式,让页面回到这个标签(文字"顶部")所在的位置
-->
<a name="top">顶部</a>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<p>
<img src="../resources/image/图片 2.png" alt="电脑壁纸图片" title="悬停文字" width="500" height="300">
</p>
<!--锚链接
1.需要一个锚标记,也就是上面的<a name="top">顶部</a>
2.点击锚链接会跳转到上面的标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
</body>
</html>
点击“回到顶部”四个字后，页面会自动上拉到最上面，也就是标签顶部所在的位置
浏览器里面是按照代码的从上到下的顺序依次展现
所以< a name=“top”>顶部< /a>会在页面的最上方，在一堆图片的上面
< a href="#top">回到顶部< /a> 在页面的最下方
锚标签实现从一个页面跳转到另一个页面指定的位置
点击第一张图片中的“去往另一个页面的底部”超链接，就会跳转到第二张图片中的底部标签所在的位置。跨越了网页。
还未添加个人签名 2021.11.08 加入
还未添加个人简介
){kind=link}
评论