LeeHui

HTML 基本标签

HTML 的基本标签用法
 1474

#HTML 是什么

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)

#HTML 文档结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<html>

<head>
<title>这是网站标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- ... -->
</head>

<body>
    网站的各种内容
</body>

</html>

#HTML 标签

#meta

属性 值 描述
http-equiv Content-Type 描述文档类型和字符编码
^ expires 浏览器缓存有效性的期限，在这个时间（GMT）之内相同的请求使用缓存，这个时间之外使用http请求。
^ Refresh content="2; URL=https://wheliosc.github.io" 指两秒后跳转到指定页面。
^ Set-Cookie Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/" 如果网页过期，那么存盘的cookie将被删除。
name Keywords 说明网站的关键词是什么
^ description 介绍网站内容

#基本标签

标签 用法 说明
标题标签 <h1></h1> 一共有6级，从h1到h6
段落标签 <p></p>
水平线标签 <hr/> 单个闭合标签
div标签 <div></div> 把文档分割为独立的、不同的部分。
表单标签 <form></form> 为用户输入创建 HTML 表单。
换行标签 <br/> 插入一个简单的换行符
span标签 <span></span> 当对它应用样式时，它才会产生视觉上的变化。
图像标签 <img src="图片路径" alt="提示文字" title="提示文字"/>

🔖后三个是行级标签，前五个是块级标签。

#有序（无序）列表标签

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- 有序列表标签 -->
<h3>有效学习的步骤</h3>
<ol>
    <li>课前主动预习</li>
    <li>课上认真听讲</li>
    <li>课后积极复习</li>
</ol>

<!-- 无序列表标签 -->
<h3>有效学习的要素</h3>
<ul>
    <li>主动</li>
    <li>认真</li>
    <li>积极</li>
</ul>

#定义描述标签

1
2
3
4
5
6

<dl>
    <dt><img src="Miyazono Kaori.jpg" width="245" height="311" title="宫园 薰"/></dt>
    <dd>宫园薰，日本动漫《四月是你的谎言》女主角。</dd>
    <dd>幼时原本学习弹奏钢琴，后因有马公生影响成为小提琴手。</dd>
    <dd>通过一封亲笔书信向公生传达了近10年的爱慕。</dd>
</dl>

#超链接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- 在当前窗口打开链接 -->
<a href="https://liyzy.github.io">我的博客网站</a>
<!-- 在新的浏览器窗口打开链接 -->
<a href="https://liyzy.github.io" target="_blank">我的博客网站</a>
<!-- 图片链接 -->
<a href="https://liyzy.github.io" target="_blank"><img src="avatar.png" title="跳转到博客"/></a>
<!-- 功能性链接 -->
<a href="mailto:2469660964@qq.com?subject=Hello%20world">个人信箱</a>
<!-- 页面内的锚链接 -->
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<!-- 页面间的锚链接，假设当前是first.html -->
<a href="second.html#student">跳转到另一个页面的student区</a>
<!-- second.html -->
<h2><a name="student">Student</a></h2>

#特殊符号

因为 <，> 等符号在 HTML 中已使用，所以必须用其他符号来代替。

1
2
3
4
5

&lt;    小于(<)
&gt;    大于(>)
&nbsp;  空格
&copy;  版权号
&quot;  引号

#参考

W3CSchool

updatedupdated2022-05-082022-05-08