Java Web（超链接等）

早起给猫开空调

已于 2024-08-10 00:40:18 修改

阅读量1k

点赞数 30

分类专栏： Java Web自学文章标签：前端

于 2024-08-09 01:14:41 首次发布

本文链接：https://blog.csdn.net/k11582kk/article/details/141039635

版权

Java Web自学专栏收录该内容

13 篇文章 0 订阅

订阅专栏

超链接

a 标签是 HTML 中用于创建超链接的重要标签

<a href="https://www.baidu.com" target="_blank">abc</a>

这为上述代码的执行效果：abc
href指示打开资源的url，target表示打开的方式，常见的有
_self 在当前页面打开
_blank 在新客空白页面打开

一般来说超链接默认会存在下划线和蓝色字体显示，取消可以使用元素选择器对a的text-decoration 和color进行设置

a{
	text-decoration = none;
	color=black;
}

视频标签，音频标签

<video src = "" controls ="" width ... height ...>
<audio src = "" controls  = "controls">

src指示视频资源的url
controls显示播放视频的控件

段落标签,文本加粗和强调标签

<p> <b> <strong>

p 标签

p标签用于定义段落。它会在段落的前后添加一定的空白，使文本看起来更清晰、有段落感。

<p>这是一个段落的内容。</p>
<p>这是另一个段落的内容。</p>

这是一个段落的内容。

这是另一个段落的内容。

在浏览器中显示时，每个

标签包裹的内容会自成一段，有明显的段落分隔

br标签

br标签用于换行

总的来说，p 标签适用于划分明显的段落，而 br 标签则更常用于在一行内需要换行的地方。

b 标签和 strong 标签

b标签效果：这部分文本会加粗显示
strong标签效果： 这部分文本很重要

ps：mark down编辑页面看不出来区别说实话

文本对齐方式

在 CSS 中，常见的对齐方式设置包括文本对齐和元素对齐。
文本对齐：
text-align: left; ：使文本左对齐，这是默认值。
text-align: right; ：文本右对齐。
text-align: center; ：文本居中对齐。
text-align: justify; ：使文本两端对齐。
例如：

p {
  text-align: center;
}

这会使段落中的文本居中对齐。

元素对齐：

水平对齐：
margin: 0 auto; ：常用于将块级元素在其父元素中水平居中。
float: left; 或 float: right; ：使元素向左或向右浮动。
垂直对齐：
vertical-align: top; ：顶部对齐。
vertical-align: bottom; ：底部对齐。
vertical-align: middle; ：垂直居中对齐。
例如：

div {
  margin: 0 auto;
}

img {
  vertical-align: middle;
}

前者将 div 元素水平居中，后者将图片在其所在行内垂直居中对齐。

页面布局

盒子模型的组成：
在 CSS 中，盒子模型由以下几个部分组成：

内容（Content）：

这是盒子中实际显示内容的区域，例如文本、图片等。
可以通过 width 和 height 属性来设置内容区域的大小。

内边距（Padding）：

位于内容区域的周围，是内容与边框之间的空白区域。
可以分别设置上、右、下、左四个方向的内边距，例如 padding-top 、 padding-right 、 padding-bottom 、 padding-left ，也可以使用简写形式，如 padding: 10px 20px 30px 40px; （分别代表上、右、下、左的内边距）。

边框（Border）：

围绕在内容和内边距的周围，可以设置边框的样式（如实线、虚线等）、宽度和颜色。
例如： border: 1px solid black; （1 像素宽的黑色实线边框）
外边距（Margin）：
位于边框的外面，用于分隔不同的元素。
同样可以分别设置各个方向的外边距，如 margin-top 、 margin-right 、 margin-bottom 、 margin-left ，或者使用简写形式，如 margin: 20px; （四个方向的外边距均为 20 像素）
在这里插入图片描述
默认可以指定 1 ，2 ，4 三种设置方式：
4：即为上右下左
2：为上下和左右
1：为四周

div {
  width: 200px;
  height: 100px;
  padding: 10px; //内边距
  border: 2px solid red;
  margin: 20px;
}

在这里插入图片描述

html 提供的布局标签 div 和 span 的区别

块级元素与行内元素：

div 是块级元素，会独占一行，在页面上形成一个矩形区域。
span 是行内元素，会在一行内与其他行内元素依次排列，不会独占一行。

默认样式：

div 通常具有上下边距和左右边距，并且可以设置宽度、高度等属性。
span 没有默认的边距和宽度、高度设置，其宽度通常由其包含的内容决定。

应用场景：

div 常用于对大块内容进行分组和布局，例如页面的不同区域、章节等。
span 通常用于对一小段文本或内联元素进行样式设置或添加特定的类。