html5元素（二）

最新推荐文章于 2024-09-13 23:32:49 发布

十斤精肉

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量224

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_49253768/article/details/131905129

版权

本文介绍了HTML中的列表类型，包括无序列表<ul>、有序列表<ol>和定义列表<dl>，以及列表的使用规则。此外，提到了CSS引用、HTML属性如id和class的应用，图片<img>元素的属性如src、alt、width和height。最后，详细讲解了基本表格<table>的创建，包括tr、td、th元素，以及合并单元格(rowspan,colspan)的方法。

摘要由CSDN通过智能技术生成

列表相关元素：

①、无序列表

<ul>
    <li>sdaklgj</li>
    <li>sdaklgj</li>
    <li>sdaklgj</li>
</ul>

注意：ul里面只能包含li

②、有序列表

<ol start="3" type="a">
    <li>sdaklgj</li>
    <li>sdaklgj</li>
    <li>sdaklgj</li>
</ol>

相关属性：

start:代表从第几个开始排序

type:使用哪种编码方式，其值有 1、A、a等等

注意：ol里面只能包含li

③、列表（标题+摘要）

<dl>
    <dt>新闻1</dt>
    <dd>新闻1的摘要1</dd>
    <dd>新闻1的摘要2</dd>
    <dt>新闻2</dt>
    <dd>新闻2的摘要</dd>
</dl>

注意：

dl里只能包含dt,dd;dt后紧跟至少一个dd,dt是列表项，dd是列表项的详情说明

④、无序列表卡片效果 ?

额外知识点：

①、引入css样式，需要使用

标签

相关属性：

rel : 代表引入的资源角色，stylesheet代表样式单【必要】

href : 代表引入的资源路径，可用相对路径和绝对路径【必要】

图2.1：相对路径VS绝对路径

②、添加HTML的通用属性，比如：id,class

注意：

1、使用id属性，在书写css时，需要使用#前缀；使用class属性，在书写css时，需要使用.前缀;

2、使用id属性，属性值要求唯一的;使用class属性，属性值可以重复

img元素：

 <img src="images/11.png" alt="军旅生活1" width="" height="">

相关属性：

src:代表图片资源的路径，可以是相对路径，或者是绝对路径

alt:

1、代表对图片的文字说明，当图片没有成功加载时，显示文字

2、对图片seo的优化，一种方法

width:代表图片的宽度

height:戴白图片的高度

注意：

1、seo:浏览器搜索引擎优化，就是让搜索引擎（比如百度、谷歌）能更加容易的搜索到指定信息

2、图片在没有设置宽度、高度时，默认是按照图片本来尺寸显示

3、图片在设置尺寸时，最好只使用单方向的，要不设置宽度，要不设置高度，不要同时设置，这样，不设置的尺寸会等比例自动变化

4、图片的尺寸可以通过width、height属性来设置的，代码：width="100";也可以通过style属性来设置，代码：style="width:100px"

table元素：

①、简单的table

<table border="1" style="width:300px;border-collapse: collapse;">
      <tr>
          <td>1sdgasdgasdgeasgsd</td>
          <td>2</td>
          <td>3</td>
      </tr>
      <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
      </tr>
  </table>

相关属性：

cellspacing:代表单元格之间的间距，一般不使用，而是采用css处理 border-collapse:collapse;

cellpadding:代表单元格内内容与边框的间距，一般不使用，而是采用css处理padding:5px;

border:代表表格的表框，一般使用

width:代表表格的宽度，一般不使用，采用css处理

align:代表对齐的方式，默认是左对齐（left），可以设置居中对齐（center），一般不使用，采用css处理 text-align:center

②、合并的table

 <table border="1" style="width:300px;border-collapse: collapse;" >
      <tr>
          <th>姓名</th>
          <th>金额</th>
          <th>时间</th>
      </tr>
      <tr>
          <td rowspan="2">张三</td>
          <td>5000</td>
          <td>2020.09.28</td>
      </tr>
      <tr>
        <td>3000</td>
        <td>2020.09.29</td>
    </tr>
    <tr>
        <td colspan="3">备注：张三的银行流水dddsf</td>
    </tr>
  </table>

相关属性：

colspan:代表合并列，要合并几列，属性值就写几

rowspan:代表合并行，要合并几行，属性值就写几