HTML常用标签_html trl-CSDN博客

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/122723159

在这里插入图片描述

1、引言

HTML的核心就是它所定义的标签和元素，标签主要包括三部分内容：

标签关键字。例如：p、h1、img等。
标签所表达的语义。例如：p标签代表段落、h1标签代表一级标题等。
标签常用的属性及属性值。例如：align属性代表内容对齐方式。

2、常用标签

前面提到过，html文档基本结构是：

<!DOCTYPE html>
<html>
	<head>……</head>
	<body>……</body>
</html>

2.1 头部元素

<head></head>内的元素可包含脚本、外部样式表、元数据等。
常用标签有：

标签	描述
`<head></head>`	包含定义文档信息的标签，例如title、meta等
`<title></title>`	定义文档标题
`<base>`	定义页面上所有链接的默认地址或者目标
`<link>`	定义文档与外部资源之间的关系
`<meta>`	定义关于HTML文档的元数据
`<script></script>`	定义客户端脚本，也就是js代码
`<style></style>`	定义文本的样式信息

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是我的第一个网页!">
    <title>我是网页标题</title>
    
    <style>
        p{
            color: red;
        }
    </style>

    <script>
        alert('我是脚本弹框!');
    </script>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

上面代码head也就是头部标签中包含了meta、title、style和script标签。
在浏览器中打开：
在这里插入图片描述

对于meta标签，虽然页面中没有显示其作用，但是也是十分重要的。我们可以通过meta标签定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。content属性必须和name属性或者http-equiv属性结合使用。
在这里插入图片描述

2.2 body元素中的标签

body元素定义了文档的主体，包含文档的所有内容，如文本、超链接、图像、表格和列表等。
经常在<body></body>中用到的标签：

p标签
p标签定义段落，p元素不仅能使后面的文字换到下一行，还可以使两段文字之间多一空行。主要属性是align，可以取值：left、right、center和justify。可以设置文本对齐方式，但是不推荐使用，应该使用css样式代替。
br标签
换行符，br元素是空标签，所以不应该<br></br>，而是<br />。起到换行的作用。
pre标签
pre元素可定义预格式化的文本，被pre元素包围的文本通常会保留空格和换行符。
hr标签
hr标签在HTML页面中显示一条水平线。
hn元素
标题标签，注意这里的n是从1~6的整数，从h1到h6标题的大小和粗细递减。
文本格式化元素

<b>    定义粗体文本,可以定义id,class,style和onclick等各种事件属性

<i>     定义斜体文本，,可以定义id,class,style和onclick等各种事件属性

<em>  定义强调文本，但是实际效果于斜体文本差不多，,可以定义id,class,style和onclick等各种事件属性

<strong> 定义粗体文本，与<b>用法和效果都差不多

<small>   定义小号字体文本，,可以定义id,class,style和onclick等各种事件属性

<sup>   定义上标文本,可以定义id,class,style和onclick等各种事件属性

<sub>   定义下标文本,可以定义id,class,style和onclick等各种事件属性

<bdo>   定义文本显示的方向,可以定义id,class,style和onclick等各种事件属性。还可以定义dir属性,该属性值只能是ltr或trl.

列表元素

代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

</body>
</html>

超链接元素a
超链接可以用于点击跳转到指定链接地址。

属性	描述
href	规定链接的目标 URL
target	规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

当href的属性是“#id名称”时，此时超链接就具有了锚点的作用，可以跳转到当前页面对应id元素的位置。

图像元素img

属性	描述
src	图像路径
alt	图像加载失败显示文本
height	高度
width	宽度

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<img src="https://www.runoob.com/try/demo_source/smiley-2.gif
" alt="Smiley face" width="42" height="42">
</body>
</html>