介绍HTML元素以及CSS

渔钓道人

已于 2023-07-03 21:14:49 修改

阅读量117

点赞数 1

文章标签： html 前端

于 2023-07-03 21:11:49 首次发布

本文链接：https://blog.csdn.net/NiCE_PersoN__/article/details/131520761

版权

HTML（超文本标记语言）是网页开发中使用的一种标记语言，它具有一系列的标记元素，通过这些元素可以在网页中创建出各种不同类型的内容和交互元素。

在HTML中，元素是指位于开始标记和结束标记之间的所有内容。下面是一些HTML元素以及它们的用途：

<html> 元素：这是HTML文档的根元素，它包含了文档的所有其它元素。
<head> 元素：head元素用于包含一些文档的元数据，如标题、关键字等。
<body> 元素：这是HTML文档的主体部分，它包含了所有的内容，如文字、图像、链接等。
<h1> - <h6> 元素：这是HTML中用来定义标题的六个等级的元素，<h1>为最高级标题。
<p> 元素：这是用来定义段落的元素，所有的文章内容都应该放在这个元素中。
<a> 元素：这是用来定义超链接的元素，它可以指向其它网页、文件或者位置。
<img> 元素：这是用来插入图像的元素，它可以从本地或者网络上加载图片。
<ul> 和 <li> 元素：这是用来创建无序列表的元素，其中<ul>是无序列表的容器，而每个列表项则用<li>来定义。
<ol> 和 <li> 元素：这是用来创建有序列表的元素，其中<ol>是有序列表的容器，而每个列表项则用<li>来定义。
<table>、<th>和<td> 元素：这是用来创建表格的元素，其中<table>是表格的容器，<th>是表头单元格，<td>是表格数据单元格。

以上是一些常用的HTML元素介绍，其中还有很多其它的元素可供使用。在HTML中，元素的属性也可以用来对它进行进一步定制，如设置文本颜色、链接地址等。学习HTML元素和属性是网页开发入门的必修课程，熟练掌握它们可以为你的网页设计与构建带来很大的帮助。

以下是示例代码：

<!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">

    <title>html回顾</title>

</head>

<body>

    <h3>标题</h3>

    <p>

        p标签是一个段落标签，我们在此段落之中描述一下标题标签的含义：<br>

        标题标签分为h1-h6  <br>

        从h1-h6逐渐变小

    </p>

    <h1>标题</h3>

    <h2>标题</h3>

    <h3>标题</h3>

    <h4>标题</h3>

    <h5>标题</h3>

    <h6>标题</h3>

        <hr>

        <h3>列表</h3>

        <p>

            列表标签是html中核心的标签，有三种：无序列表，有序列表，自定义列表。

        </p>

        <h4>1.无序列表</h4>

        <ul>

            <li>曹操 </li>

            <li>孙权</li>

            <li>刘备</li>

        </ul>

        <h4> 2.有序列表</h4>

        <ol>

            <li>吕布</li>

            <li>关羽</li>

            <li>赵云</li>

        </ol>

        <h4>3.自定义列表</h4>

        <dl>

            <dt>常玩游戏</dt>

            <dd>王者</dd>

            <dd>英雄</dd>

            <dd>坦克</dd>

        </dl>

        <hr>

        <h3>表格</h3>

       

            <p>

                表格用于展示数据库种的数据，非常核心的标签



            </p>

            <table border="1" cellspacing="0" cellspadding="20">

                <thead>

                    <tr>

                    <th>序号</th>

                    <th>名称</th>

                    <th>战力</th>

                </tr>

                </thead>

                <tbody>

                    <tr bgcolor="yellowgreen">

                        <td>1</td>

                        <td>火箭炮</td>

                        <td>100</td>

                    </tr>

                     <tr>

                        <td>2</td>

                        <td>坦克</td>

                        <td>80</td>

                    </tr>

                     <tr bgcolor="yellowgreen">

                        <td>1</td>

                        <td>榴弹炮</td>

                        <td>60</td>

                    </tr>

                </tbody>

                <tfoot>

                    <tr align="center">

                        <td colspan="3">武器型号展示</td>

                    </tr>

                </tfoot>

            </table>

       



<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>



   

</body>

</html>

CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的语言，通过将样式与HTML文档分离，使得开发者可以更灵活地控制网页的外观和行为。在HTML文档中引入CSS的方式有以下几种：

内联样式：将CSS样式直接写在HTML标签的style属性中，例如：
```
<div style="color: red; font-size: 16px;">Hello World!</div>
```
内联样式的优点是可以快速修改单个元素的样式，但缺点是不方便管理和维护。
嵌入式样式：将CSS样式写在HTML文档的<head>标签内的<style>标签中，例如：
```
<head>
  <style>
    div {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div>Hello World!</div>
</body>
 
```
嵌入式样式的优点是可读性较好，并且可以针对整个文档或某个特定区域进行样式设置，但缺点是不利于样式重用和模块化。
外部样式：将CSS样式单独写在一个外部文件中，并在HTML文档中通过<link>标签引入，例如：

在CSS文件（例如styles.css）中写入如下样式：
```
div {
  color: red;
  font-size: 16px;
}
 
```
在HTML文档中通过<link>标签引入CSS文件：
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>Hello World!</div>
</body>
 
```
外部样式的优点是能够实现样式重用和模块化，缺点是需要额外的HTTP请求。因此，通常会将多个CSS文件合并成一个文件，以减少HTTP请求。

渔钓道人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
介绍HTML元素以及CSS

table>、和元素：这是用来创建表格的元素，其中是表格的容器，是表头单元格，是表格数据单元格。和元素：这是用来创建无序列表的元素，其中是无序列表的容器，而每个列表项则用来定义。和元素：这是用来创建有序列表的元素，其中是有序列表的容器，而每个列表项则用来定义。 - 元素：这是HTML中用来定义标题的六个等级的元素，为最高级标题。
复制链接

扫一扫