【HTML+CSS】1. HTML基础整理_请写出五个html和css常用的标签，并描述这些标签的作用。-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45427038/article/details/105469942

本文是HTML初学者的学习笔记，主要介绍了HTML5的<!DOCTYPE>声明，HTML元素的概念，包括<html>、<head>和<body>的使用。还探讨了<head>中的常见标签如<title>、<style>等，并列举了<body>中的<ul>、<ol>、<li>等常用标签及其属性应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近也是刚开始接触HTML和CSS的内容，小小整理一下。

我们知道，HTML(Hyper Text Markup Language，超文本标记语言)是用来描述网页的一种语言，通过使用标记标签(markup tag)来描述网页。HTML 标签由尖括号包围，且通常成对出现。

1. <!DOCTYPE> 声明

首先，在HTML的开头，需要有一个声明 <!DOCTYPE html>，声明该文档为 HTML5 文档，以便浏览器能正确显示网页内容。doctype 声明是不区分大小写的。

补充，HTML5中只有一种声明形式 <!DOCTYPE html>，而HTML 4.01 中有三种 <!DOCTYPE> 声明：

HTML 4.01 Strict：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

具体的区别大家自己百度吧，我也说不大清楚，只是希望大家在学习中看到这样的声明不要太惊讶。不过现在

2. 元素

HTML 文档是由 HTML 元素定义的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

一个完整的HTML页面结构大概是下面这个样子的：

2.1 <html>

<html> 元素是 HTML 页面的根元素，<html> 和</html>之间包含了整个 HTML 文档。

2.2 <head>

<head> 元素包含了所有的头部标签元素。可以添加在头部区域的元素标签有 <title>、<style>、<meta>、<link>、<script>、<noscript>和<base>。他们的功能如下：

在这里引入一个小tip:

HTML 元素一般成对出现，但是也有例外，比如空元素。空元素没有内容，是在开始标签中关闭的，比如刚才看到的<meta>、<base>，还有常用的定义换行的<br>、创建水平线的<hr> 等。虽然像<br>这种用法在所有浏览器中都是有效的，但是正确的做法是在开始标签中添加斜杠，比如 <br />，这才是更长远的保障。

2.3 <body> 区域及其中的常用标签

<body> 元素包含了可见的页面内容，也就是只有<body>区域才会在浏览器中展示出来。

下面是<body>区域常用的一些组成部分，在这里就简单列一下，之后再使用过程中再慢慢增加更详细的内容：

增加：

<ul>、<ol>和<li>：

ul标签定义的是无序 HTML 列表，全称是unordered list，通常和<li>标签在一起使用。

举个栗子：

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

效果：

而ol标签定义的是有序 HTML 列表，全称是ordered list，同样举个栗子：

<p>有序列表:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

接下来对比着说一下<ul>和<ol>的性质吧：

<ul>与<ol>中的标识符号是可以修改的，只需要修改它们的type属性：

<ul>的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块。

<ol>的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。

也可以通过CSS将标识符改为图片，让列表显示更美观，参考代码如下：

ul {list-style-image: url(image/dot4.png); list-style-type: none;}

<ul>与<ol>都是块元素（block element)，可以定义宽和高，<li>表示行排列不能单独使用。

<span> :

<span> 标签被用来组合文档中的行内元素，以便通过样式来格式化它们。比如：

<p><span>some text.</span>some other text.</p>

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

教程里有一个非常好的例子：

3 HTML 中的标签、元素、属性

这篇的最后，我们再强调一下HTML 中的标签、元素、属性的关系。

1. HTML标签是由一对尖括号<>及标签名组成的。

2. HTML元素是组成HTML文档最基本的部件，它是用标签来表现的。一般来说，“起始标签”表示元素的开始，“结束标签”表示元素的结束。

3. HTML 元素可以设置属性，元素属性提供了对HTML元素的描述和控制信息。属性一般描述于开始标签，且总是以名称/值对的形式出现，比如：name="value"，属性和属性值尽量小写。注意的是：

class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

先这样吧，后续还会接着总结的。