html与css基础的学习与回顾

html回顾

HTML是一种标记语言，用于创建和呈现Web页面。HTML代表超文本标记语言，这是一种用于创建Web页面的标准格式。

段落标签

标签p

标签p用于定义段落（paragraph）。它是HTML中最常用的文本元素之一，用于包含和展示一段文本内容。

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

在上面的示例中，文本“这是一个段落。”将被显示为一个独立的段落。

标签h1到h6

在HTML中，h1到h6标签用于定义标题（heading）。
这些标签是用来表示文档的结构层次和标题级别的。

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

水平线

<hr>

列表

无序列表

<ul>
    <li>曹操</li>
    <li>刘备</li>
    <li>孙权</li>
</ul>

有序列表

<li>吕布</li>
    <li>关羽</li>
    <li>赵云</li>

自定义列表

<dl>
    <dt>常玩游戏：</dt>
    <dd>王者</dd>
    <dd>英雄</dd>
    <dd>坦克</dd>
</dl>

表格

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

<table border="1" cellspacing="0" cellpadding="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>3</td>
            <td>榴弹炮</td>
            <td>60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr align="center">
            <td colspan="3">武器型号展示</td>
        </tr>
    </tfoot>
</table>

css回顾

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页中样式、布局和设计的语言。CSS可以控制网页中各种元素的外观和布局。

选择器

css有以下几种选择器：元素选择器，类选择器，ID选择器，属性选择器，伪类选择器，伪元素选择器，后代选择器
例如head中定义样式如下

<style>
        div{
            border: 5px solid yellowgreen;
            width: 200px;height: 100px;
        }
        p{
            border: 5px solid green;
            width: 200px;height: 100px;
        }
        .a{
            font-weight: bolder;
            color: red;
        }
        #one{
            color: blue
        }
    </style>

body中有如下标签：

<div style="border: 5px solid rgb(102, 51, 153);
    width: 200px;height: 100px;">
        1
    </div>
    <div id="one" class="a">
        2
    </div>
    <p class="a">
        3
    </p>

显示效果如下：