【HTML】day01

列表

作用:布局内容排序整齐的区域。

列表分类:无序列表、有序链表、定义列表

无序列表

    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>
            <h1>h1</h1>
        </li>
    </ul>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ul>li*4>a -->
    <h4>友情链接</h4>
    <ul>
        <li><a href="https://www.hayaizo.cn">Hayaizo</a></li>
        <li><a href="https://www.souhu.com">搜狐</a></li>
        <li><a href="https://www.sina.com">新浪</a></li>
        <li><a href="https://www.163.com">网易</a></li>
    </ul>
</body>
</html>

有序列表

    <ol>
        <li></li>
    </ol>

自定义列表

dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情。

表格

标签名 说明
table 表格
tr table row 行
th table head 表头
td table data 内容
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <td>100</td>
            <td>99</td>
        </tr>
    </table>

表格结构标签

标签名 含义 说明
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域

合并单元格

rowspan:跨行合并

colspan:跨列合并

input标签基本使用

input标签type属性值不同,功能不同

type 说明
text 文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件

input需要绑定name才可以进行单选,name相同的只能选一个

input标签占位符

placeholder

    账号:<input type="text" placeholder="请输入账号"> <br>
    密码:<input type="password" placeholder="请输入密码"> <br>
    性别:<input type="radio" name="sex" checked><input type="radio" name="sex">

上传文件

默认情况下,文件上传表单控件只能上传一个文件,可以添加multiple属性实现多文件上传

下拉框

    <select>
        <option selected>北京</option>
        <option selected>武汉</option>
        <option selected>长沙</option>
    </select>

文本域

<textarea rows="10" cols="20">评论区</textarea>

lable标签-增大范围

按钮 - button

type属性值 说明
submit 提交按钮
reset 重置按钮
button 普通按钮

无语义的布局标签

  • 布局网页(划分网页区域,摆放内容)

    • div:独占一行

    • span:不换行

有语义的布局标签

标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

字符实体

在网页中显示预留字符

显示结果 描述 实体名称
空格 &nbsp;
< 小于 &lt;
> 大于 &gt;

相关推荐

  1. <span style='color:red;'>01</span>-<span style='color:red;'>02</span>

    01-02

    2024-03-10 02:00:05      55 阅读
  2. 【2024.01.02】刷算法07

    2024-03-10 02:00:05       57 阅读
  3. <span style='color:red;'>01</span>-<span style='color:red;'>04</span>css

    01-04css

    2024-03-10 02:00:05      40 阅读
  4. 2024-02-01(Hive)

    2024-03-10 02:00:05       56 阅读
  5. 01_02_mysql04_数据类型

    2024-03-10 02:00:05       55 阅读
  6. Day-<span style='color:red;'>02</span>-<span style='color:red;'>01</span>

    Day-02-01

    2024-03-10 02:00:05      60 阅读
  7. Day-<span style='color:red;'>01</span>-<span style='color:red;'>02</span>

    Day-01-02

    2024-03-10 02:00:05      44 阅读
  8. <span style='color:red;'>01</span>-<span style='color:red;'>02</span>-5

    01-02-5

    2024-03-10 02:00:05      23 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-10 02:00:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-10 02:00:05       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-10 02:00:05       82 阅读
  4. Python语言-面向对象

    2024-03-10 02:00:05       91 阅读

热门阅读

  1. linux禁止被ping的方法

    2024-03-10 02:00:05       45 阅读
  2. MySQL客户端和服务器进程通信的几种方式

    2024-03-10 02:00:05       39 阅读
  3. svn + ssh

    2024-03-10 02:00:05       53 阅读
  4. Unix Network Programming Episode 88

    2024-03-10 02:00:05       46 阅读
  5. elementUI Table组件点击取当前行索引

    2024-03-10 02:00:05       43 阅读