标签（1）（详解）-阿里云开发者社区

标签（1）（详解）

2023-09-27 63

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 标签（1）（详解）

<html>：定义HTML文档的根元素。
<head>：包含有关文档的元信息，如标题、字符集、外部样式表等。
<title>：定义文档的标题，显示在浏览器的标签页上。
<meta>：提供关于文档的元信息，如字符集、作者、描述等。
<link>：用于引入外部资源，通常用于链接样式表。
<style>：用于在文档内部定义样式信息。
<body>：包含文档的可见内容。
<h1> 到 <h6>：定义标题，从最高级别到最低级别。
<p>：定义段落。
<a>：定义超链接，链接到其他页面或资源。
<img>：插入图像，指定图像的源、大小等属性。
<ul>：创建无序列表。
<ol>：创建有序列表。
<li>：定义列表项。
<div>：用于组合其他元素，可以用于布局目的。
<span>：用于标记文本的特定部分，通常与CSS一起使用。
<table>：创建表格。
<tr>：定义表格行。
<td>：定义表格单元格。
<th>：定义表格表头单元格。
<form>：创建表单，用于收集用户输入。
<input>：定义输入字段，如文本框、复选框等。
<textarea>：定义多行文本输入框。
<button>：创建按钮。
<select>：创建下拉选择框。

<option>：定义下拉选择框中的选项。
<label>：定义表单元素的标签。
<br>：插入换行。
<hr>：插入水平分隔线。

标签之标题

标题介绍与应用

标题（Heading）是通过 <h1> - <h6>标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6

VSCode插件

快速打开浏览器

扩展 -> 搜索open in browser -> 点击安装

正确使用标题

请确保将 HTML 标题标签只用于标题。

不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于SEO

应该将< h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推

标题标签位置摆放

在标签中添加属性：align="left | center | right" 默认居左

标签之段落

段落是通过<p>标签定义的

<p>这是一个段落 </p> 
<p>这是另一个段落</p>

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

水平线

<hr/>标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

标签之图片

网站中最多的元素

网站中最多的元素毋庸置疑，一定是图片

<img> 标签定义 HTML 页面中的图像

<img src="" alt="" title="" width="" height="">

注意事项

<img>是单标签，不需要进行闭合操作

属性：

src：路径（图片地址与名字）
alt：规定图像的替代文本
width：规定图像的宽度
height：规定图像的高度

title：鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhanCode\1.jpg

<img src="E:\itbaizhanCode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

子级关系: /
父级关系: ../
同级关系: ./（可以省略）

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

标签之超文本链接

超链接描述

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档

<a href="url">链接文本</a>

超链接属性

在标签<a>中使用了href属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下线。

点击链接时，链接显示为红色并带有下划线。

特别提示

后期我们会通过CSS样式修改掉这些效果

超链接表现

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

标签之文本

常用文本标签

标签	描述

`<em>`	定义着重文字
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<strong>`	定义加重语气

`<del>`	定义删除字
`<span>`	元素没有特定的含义

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇