HTML-3-CSDN博客

本文链接：https://blog.csdn.net/m0_74019046/article/details/136587224

ol 有序列表

 <ol>
        <li>1111</li>
        <li>22</li>
        <li>333</li>
        <li>4444</li>
    </ol>
    <!--
    可以通过修改type属性来修改编号如<ol type="i">
-->

在这里插入图片描述
ol,li本身自带的一些样式

清除ol的默认样式

<style>
    ol, li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
</style>

ul 无序列表

 <ul>
        <li>1111</li>
        <li>22</li>
        <li>333</li>
        <li>4444</li>
    </ul>

在这里插入图片描述
ul的默认样式

去除默认样式


<style>
   ul{
    list-style: none;
    margin: 0;
    padding: 0;
   }
</style>

dl 定义以及描述的列表

dl：定义列表，直接子元素只能是dt,dd
dt:列表中每一项的项目名
dd:列表中每一项的具体描述，是对dt的解释、补充。
一个dt后面可以紧跟一个或多个dd

 <dl>
        <dt>描述</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dt>描述2</dt>
        <dd>1</dd>
    </dl>

在这里插入图片描述

表格元素

table:表格
tr:表格中的行
td:行中的单元格
（不推荐使用表格中的属性设置表格的样式）

<style>
  table{
    /*单元格的边框合并或分开*/
    border-collapse: collapse;
  }
  td{
    border: 1px solid black;
    text-align: center;
  }
</style>
<body>
 <table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
      <td>测试1</td>
      <td>测试2</td>
      <td>测试3</td>
    </tr>
    <tr>
        <td>测试4</td>
        <td>测试5</td>
        <td>测试6</td>
      </tr>
      <tr>
        <td>测试7</td>
        <td>测试8</td>
        <td>测试9</td>
      </tr>
 </table>
</body>

在这里插入图片描述

其他标签

caption:表格标题元素
thead:定义表格的列头的行
tbody:封装了一系列表格的行
tfoot:定义了一组表格中各列的汇总行
th:定义表格内的表头单元格
td和th的区别：

标签用于定义表格中的普通数据单元格，通常包含表格中的数据内容。标签用于定义表格中的表头单元格，通常包含表格中的标题或标签。通常用于第一行或第一列，用于标识表格中各列或各行的含义。另外，标签在默认情况下会加粗且居中显示，而标签则是普通文本显示。 ```html

表格的标题
1	2	3
sss	ddd	ddd
xxx	zzz	xxx
ccc	ccc	ccc

```

在这里插入图片描述

单元个的合并

colspan:跨列合并
rowspan：跨行合并

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">sss</td>
            <td>ddd</td>
            <th>ddd</th>
        </tr>
        <tr>
            
            <td>zzz</td>
            <td>xxx</td>
        </tr>
        <tfoot>
            <tr >
                <td colspan="3">ccc</td>
                
            </tr>
        </tfoot>
    </tbody>
 </table>

在这里插入图片描述

表单元素

form,input,textarea,select,option,button,label

input

在这里插入图片描述

  <input type="date" name="" id="">
    <input type="button" name="" id="" value="按钮">
    <input type="reset" name="" value="重置">
    <!--button 也有type属性可以设置button的类型-->
    <button type="reset">重置</button>
    <input type="submit" name="" value="提交">
    <button type="submit">提交</button>

在这里插入图片描述

label ,点击label可以触发input

 <label for="test">
        test:<input type="text" name="" id="test">
    </label>

在这里插入图片描述

radio 单选框

在这里插入图片描述

textarea 文本编辑控件

常用属性
cols:列数
rows：行数
有一个css属性resize，缩放，可以控制textarea的缩放：
在这里插入图片描述
还有select,option等html(略)

常用的 elements语法

> 子代

div>span
<div>
    <span></span>
  </div>

+兄弟

div+span
<div></div>
<span></span>

*多个

// 标签*个数，可以快速生成多个标签
div>span*5
<div><span></span><span></span><span></span><span></span><span></span></div>

^上一级

// span的上一级是div,第二个div与第一个div平级
div>span^div
<div><span></span></div>
<div></div>

添加id,class,以及其他属性

//div#ss
<div id="ss"></div>
//div#parent>span.son
<div id="parent"><span class="son"></span></div>
//a[href]
<a href=""></a>

给html添加的内容{}

<div>ss</div>

//div{ss}
使用数字￥$

//ul>li.li$*5
<ul>
    <li class="li1"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li4"></li>
    <li class="li5"></li>
</ul>