这是我参与「第四届青训营 」笔记创作活动的的第一天
以下是我学习HTML过程中的一些HTML的标签的记录
基本标签
- 标题标签
- 就像我们文章写的标题一样，该标签用来声明某段文字是标题，同时会让该文字加粗、放大，并且独占一个段落，从h1-h6共有六级，且大小依次递减
- 语法格式如下
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
- 段落和换行标签
- 段落标签：顾名思义，就像一个文章会分段一样，段落标签可以把文字分为多个段落，它同时也会让文字自动换行
- 换行标签：顾名思义，该标签可以让文字换行，且它是一个单标签
- 语法格式如下
<p>第一段<br />第一段换行</p>
<p>第二段</p>
- 文本格式化标签
- 这个标签可以设置文字加粗、倾斜、删除线、下划线等一系列简单效果
- 以下效果各有两种方式实现，更推荐使用第一种，它的语义更强
- 语法格式如下
<strong>加粗</strong>的文字<br />
<b>加粗</b>的文字<br />
<em>倾斜</em>的文字<br />
<i>倾斜</i>的文字<br />
<del>删除线</del><br />
<s>删除线</s><br />
<ins>下划线</ins><br />
<u>下划线</u><br />
- div和span标签
- 这类标签属于盒子标签，无特殊的样式，仅仅是一个容器，里面可以装各种内容，包括容器里嵌套容器。在网页设计中，添加盒子标签相当于给内容进行了一个分区，方便我们进行网页布局，让布局网页如搭积木一般”简单“
- 其中div独占一行，属于块级元素；span一行可以放多个，属于行内块元素
- 图片标签
-
在我们想给网页插入一张图片时，我们可以添加<img src="url"/>这个标签，其中url是图片的保存路径
-
当然，除了url这一属性，img标签还有其它的一些属性，注意src属性是必须的要有的，对于width和height，我们在设置其中一个时，另一个属性的值会等比例变化，如此可以保证我们图片显示不失真
属性 属性值 说明 src 图片的保存路径 img标签中必须包含的属性 alt 文本内容 图片不能正常显示是，会用该文本进行替换 title 文本内容 设置提示信息，当鼠标放在图片上时会有提示文字 width 像素px 设置图像的宽度 height 像素px 设置图片的高度 border 像素px 设置图片的边框粗细
-
- 超链接标签
- 在我们浏览网页的时候，点击一个地方，它可以是一段文字或一张照片等，然后就会跳转到其它地方，要实现这一功能，我们可以使用超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>是超链接标签的基本语法，对于窗口的弹出方式，可以设置_self：新窗口和_blank：当前窗口- 它也有许多使用，举例如下
<h4>1.外部链接</h4>
<a href="https://www.bilibili.com" target="_blank">b站</a>
<h4>2.内部链接</h4>
<a href="段落和换行标签.html" target="_blank">段落和换行标签</a>
<h4>3.空链接</h4>
<a href="#">空链接</a>
<h4>4.下载链接</h4>
<a href="img.zip">下载</a>
<h4>5.网页元素链接</h4>
<a href="https://www.bilibili.com"><img src="img.png" alt="图片丢失"></a>
<h4>6.锚点标签</h4>
<a href="#start">起点</a>
<h1 id="start">终点</h1>
- 特殊字符
-
HTML里有一些特殊字符可用一些代码打出来，例如空格、大于小于号等，可以防止文本内容与编码冲突，例如如果直接打空格的话，不论打多少个或多长，在最后编译显示时只会作为一个
-
常用的有如下:
特殊字符 字符的代码 空格 < < > > & &
-
写在最后
以上便是我的一些学习笔记，若有不足，欢迎指出
