JavaWeb-HTML常用标签了解(一)

深藏阁楼爱情的钟 2023-09-27 00:27 40阅读 0赞

#### 这里写目录标题 ####

*   *  注释标签
     *  标题标签
     *  段落标签
     *  换行标签
     *  格式化标签
     *  图片标签
     *  超链接标签
     *   *  外部链接与内部链接

### 注释标签 ###

无注释

> ctrl + / 快捷键可以快速进行注释/取消注释.

注意  
注释不能传达负能量!!!

### 标题标签 ###

有六个, 从 h1 - h6. 数字越大, 则字体越小.

![在这里插入图片描述][797c778c6c3e4572bf68e09e1a611c1d.png]

### 段落标签 ###

<p>这是一个段落标签</p>

![在这里插入图片描述][49b363bec7a94f3cac5d6f283c4e25b0.png]  
这样是看不出来它的作用的.

<p>人生在世，人们大多喜欢“得”，不喜欢“失”。但现实是，得与失如影随形，有得的地方必定有失， 有失的地方也必定有得。
            在对得与失的纠结中，我们常常忽略一个基本的常识，那就是 无论得失，皆是过程。
            </p>
            生活的真相就是处处是得失。“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐，乃赋《离骚》。
            ”这是塞翁失马焉知非福般的得与失，然人生波澜起伏，今日之蜜糖，可能是他日之砒霜。

![在这里插入图片描述][d9d4e0da95064b9caa7f06e74c4635a3.png]  
如上所示对文字进行分段处理.

### 换行标签 ###

**br 是一个单标签(不需要结束标签)**

生活的真相就是处处是得失。<br>“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐，乃赋《离骚》。
            ”这是塞翁失马焉知非福般的得与失，然人生波澜起伏，今日之蜜糖，可能是他日之砒霜。

![在这里插入图片描述][3fa857f7ab304eef886643fc2b963ce4.png]  
由结果可知原文本进行换行,在网页显示中并没有进行换行,所以需要用`<br>`标签进行换行.

### 格式化标签 ###

> 加粗: strong 标签 和 b 标签  
> 倾斜: em 标签 和 i 标签  
> 删除线: del 标签 和 s 标签  
> 下划线: ins 标签 和 u 标签

![在这里插入图片描述][4c25fcd85fe14c72ab8402912fd39803.png]

### 图片标签 ###

![在这里插入图片描述][99c0b0b37903411da9a916a413ed4036.png]  
**src属性表示图片的路径**

> 绝对路径  
> 以 html 所在位置为基准, 找到图片的位置.  
> 相对路径  
> 一个完整的磁盘路径, 或者网络路径(上述例子就使用的网络路径).

img 标签的其他属性

> alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.  
> title: 提示文本. 鼠标放到图片上, 就会有提示.  
> width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片比例失衡.  
> border: 边框, 参数是宽度的像素.

### 超链接标签 ###

> **属性**  
> href: 必须具备, 表示点击后会跳转到哪个页面(外部链接与内部链接).  
> target: 打开方式. 默认是 \_self. 如果是 \_blank 则用新的标签页打开

![在这里插入图片描述][ba56d72cb8764315b5e13ec572de4364.png]  
博主这里方的外部链接所以点一下这个CSDN链接就会跳转到CSDN首页.

#### 外部链接与内部链接 ####

*  外部链接  
    href 引用其他网站的地址.

href="https://www.csdn.net/?spm=1000.2115.3001.4476"

*  内部链接  
    网站内部页面之间的链接. 写相对路径即可.

> 在一个目录中, 先创建一个 1.html, 再创建一个 2.html

1.html
    <a href="2.html">点我跳转到 2.html</a>
     2.html
    <a href="1.html">点我跳转到 1.html</a>

*  空链接  
    使用 \# 在 href 中占位.

*  下载链接  
    href 对应的路径是一个文件.

*  网页元素链接  
    可以给图片等任何元素添加链接.

[797c778c6c3e4572bf68e09e1a611c1d.png]: https://img-blog.csdnimg.cn/797c778c6c3e4572bf68e09e1a611c1d.png
[49b363bec7a94f3cac5d6f283c4e25b0.png]: https://img-blog.csdnimg.cn/49b363bec7a94f3cac5d6f283c4e25b0.png
[d9d4e0da95064b9caa7f06e74c4635a3.png]: https://img-blog.csdnimg.cn/d9d4e0da95064b9caa7f06e74c4635a3.png
[3fa857f7ab304eef886643fc2b963ce4.png]: https://img-blog.csdnimg.cn/3fa857f7ab304eef886643fc2b963ce4.png
[4c25fcd85fe14c72ab8402912fd39803.png]: https://img-blog.csdnimg.cn/4c25fcd85fe14c72ab8402912fd39803.png
[99c0b0b37903411da9a916a413ed4036.png]: https://img-blog.csdnimg.cn/99c0b0b37903411da9a916a413ed4036.png
[ba56d72cb8764315b5e13ec572de4364.png]: https://img-blog.csdnimg.cn/ba56d72cb8764315b5e13ec572de4364.png