前端之html进阶篇-高级标签
html编码
HTML 编码是一种将特殊字符转换为 HTML 实体以便在网页上正确呈现的技术。因为有些字符在 HTML 页面中有特殊的含义，如果直接输入这些字符，会导致页面无法正常解析或者出现错误。
以下是一些常见的 HTML 实体编码：
<：小于号<>：大于号>&：和号&'：单引号'"：双引号"
通过使用上述实体编码，可以在 HTML 页面中正确显示这些特殊字符，而不会对页面的布局和渲染产生影响。
<div>我们 之间有好多空格 </div>
<div>我是小于号<</div>
<div>我是大于号></div>br 标签
br 标签是 HTML 中的行内元素，用于在文本中插入一个换行符，即开始新的一行。在 HTML 代码中可以直接使用 <br> 来表示一个 br 标签。由于 br 是一个空标签，因此它不需要结束标签。例如，下面的代码会在文本中插入两个换行符：
<p>这里是第一行<br>这里是第二行</p>上面的代码将产生两行文本，中间用一个空行分隔开来。
需要注意的是，在 XHTML 中，要求 br 标签必须正确关闭，可以写成 <br /> 或 <br></br>。
br 标签经常用于分割文本中的段落，在某些场合也用于纯文本的排版。但是要注意，过度使用 br 标签可能会导致 HTML 代码难以维护和修改，应该尽量使用语义化的 HTML 元素来表达文本内容的结构。
ol 标签与li 标签
HTML中的 ol 和 li 标签用于创建有序列表和列表项。ol 标签表示有序列表，li 标签表示列表项。在有序列表中，每个列表项以数字或字母形式进行标记，一般默认是数字。而针对于 type 属性指定的值，则会按照该属性的指定值进行标记。比如 type="A" 表示大写字母标记。例如，以下代码将创建一个从 3 开始、用小写字母标记的有序列表：
<ol start="3" type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<ol start="3" type="i">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>ul 标签与li 标签
HTML中的 ul 和 li 标签用于创建无序列表和列表项。ul 标签表示无序列表，li 标签表示列表项。在无序列表中，每个列表项默认使用点号或其他符号进行标记。
<ul type="disc">
<li>First</li>
<li >Second</li>
<li>Third</li>
</ul>
<ul type="circle">
<li>First</li>
<li >Second</li>
<li>Third</li>
</ul><img>标签
<img>标签是HTML中的一个元素，可以用来向网页中嵌入图像。该元素拥有多个属性，如下所示：
src：指定要显示的图像的路径。alt：指定图像无法显示时的替代文本。width和height：指定图像的宽度和高度。title：指定鼠标悬停在图像上时显示的文本。img标签中的title属性用于指定图像的标题，通常在用户将鼠标悬停在图像上时显示。图像标题可以是有意义的文本，用于描述图像的内容或者提供其他相关信息。usemap：指定一个客户端图像映射的名称，以便用户可以通过单击图像上的热点来浏览链接。
举例来说，下面的代码演示了如何使用 <img> 标签来插入一张图片：
<img src="https://w.wallhaven.cc/full/zy/wallhaven-zyqx1v.png" alt="Example Image" title="This is an example image" width="500" height="300">在这个例子中， src 属性指定了图像文件的路径， alt 属性指定了当图像无法显示时应该显示的文本，而 width 和 height 属性指定了图像的宽度和高度。
a 标签
a 标签用于创建超链接，它允许将网页中的不同内容链接在一起，从而实现页面之间、不同站点之间以及不同应用程序之间的跳转和交互。在 HTML 中，超链接是通过给 a 标签添加 href 属性来实现的，该属性指定链接目标的 URL 地址。
以下是一个简单示例代码，展示了如何在 HTML 中创建超链接：
<a href="https://www.example.com">Visit Example Website</a>在这个例子中，我们创建了一个超链接，链接到 https://www.example.com 这个网址。当用户点击这个链接时，浏览器会跳转到指定的 URL 地址，并显示对应的页面内容。
a 标签还可以添加其他属性，如 target 属性可以指定链接打开的方式（在当前窗口中打开还是在新窗口中打开），rel 属性可以指定链接与当前页面的关系（如是否为外部链接、nofollow 等），download 属性可以指定链接下载的资源等。
例如，以下代码展示了如何使用 a 标签来创建一个新窗口打开链接：
<a href="https://www.example.com" target="_blank">Visit Example Website in a new window</a>在这个例子中，我们添加了 target 属性并将其值设置为 "_blank"，表示链接会在新的浏览器窗口或标签页中打开。
在 HTML 中，a 标签的 href 属性除了可以跳转到外部链接，还可以用来创建内部锚点。通过使用内部锚点，可以让用户在同一页面上快速跳转到指定的位置。
要在一个网页内创建锚点，首先需要在目标位置添加一个id属性。例如，下面的代码段将会创建一个拥有 id 属性为 "section1" 的 div 元素：
<div id="section1">
<!-- 这里是页面内容 -->
</div>接着，在需要跳转到指定位置的地方添加 a 标签，并在 href 属性中指定要跳转到的位置的ID值。例如，如果我们想要在页面中建立一个指向上面所述的 section1 锚点的链接，可以这样设置 a 标签的 href 属性：
<a href="#section1">跳转到 Section 1</a>当用户点击这个链接时，浏览器就会将页面滚动到拥有 ID 为 "section1" 的元素处。
<form> 标签
<form> 标签是 HTML 中非常重要的一个元素，用于创建表单，以便用户向服务器提交数据。它可以包含各种类型的表单控件，如输入框、按钮、下拉列表等，这些控件提供了一种简单的方式，让用户与网站交互并提交数据。使用表单可以收集用户信息、对数据进行验证和处理，并将结果发送到服务器。
以下是一个简单的表单示例：
<form action="" method="get">
<h1>
choose your favourite fruit!
</h1>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">苹果</label><br>
<input type="radio" id="banana" name="fruit" value="banana" checked="checked">
<label for="banana">香蕉</label><br>
<input type="radio" id="orange" name="fruit" value="orange">
<label for="orange">橙子</label><br>
<input type="radio" id="grape" name="fruit" value="grape">
<label for="grape">葡萄</label><br>
<input type="checkbox" id="apple" name="fruit[]" value="apple">
<label for="apple">苹果</label><br>
<input type="checkbox" id="banana" name="fruit[]" value="banana">
<label for="banana">香蕉</label><br>
<input type="checkbox" id="orange" name="fruit[]" value="orange">
<label for="orange">橙子</label><br>
<input type="checkbox" id="grape" name="fruit[]" value="grape">
<label for="grape">葡萄</label><br>
<label for="fruits">请选择您喜欢的水果：</label>
<select id="fruits" name="fruit">
<option value="">请选择</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select><br>
<input type="submit"></input>
</form><form>标签用于创建表单，action属性指定了表单数据提交的目标 URL，method属性指定了数据提交的 HTTP 方法，这里使用POST方法。<label>标签用于为输入项创建标签，使用户更容易理解该输入项的用途。for属性指定了关联的输入控件的 ID 值。<input>标签用于创建文本输入框，type属性指定了输入框的类型，这里使用text和email类型分别表示文本输入框和邮箱输入框；id属性用于标识该输入项，name属性用于指定该输入项在表单提交时的参数名。<textarea>标签用于创建多行文本输入框，id属性用于标识该输入项，name属性用于指定该输入项在表单提交时的参数名。<input>标签中的单选。我们创建了一个表单，其中包含四个单选按钮，用户可以从中选择一种水果。每个单选按钮都有一个唯一的id属性，与其关联的<label>元素也有一个for属性，值与对应的id属性相同，以便用户可以通过点击标签选择单选按钮。每个单选按钮都具有相同的name属性，以便将它们分组，确保只有一个单选按钮被选中。每个单选按钮还具有一个value属性，表示当该单选按钮被选中时提交表单时所传递的值。
评论