20210521车玉霞

日志

一、知识总结

1.元数据:描述数据的数据。

2.常见的标签

list

(1)有序列表:可以将每一项进行编号。可以通过type属性更改编号的类型.

(2)无序列表

(3)定义列表


circle 空心圆
disc 实心圆
square 方形

实例练习

  • 昨天
  • 今天
  • 明天
  • 后天

<dl>                        定义列表   dl --  dt   1~n
    <dt>帅哥</dt>           dt 定义标题    dt --  dd   1~n
    <dd>胡歌</dd>           dd 标题的定义
    <dd>高</dd>
    <dd>帅</dd>

    <dt>美女</dt>
    <dd>女的</dd>
    <dd>漂亮</dd>
</dl>

table

table 的属性(attribute):
border 表格的边框,数值,单位默认为 px
width 宽度
cellspacing 单元格之间的间隙
cellpadding 内容和单元格边框的距离
table 表格
thead 表头
tbody 表体
tfoot 表格尾
tr 标签表示表格中的一行
td 标签表示表格中的单元格
th 表头中的单元格,内容会居中、加粗显示
合并单元格
合并列 colspan
找到起始的单元格(td),写上 colspan 属性,值为要合并的单元格个数,接着删除被合并的单元格(td)代码
合并行 rowspan
找到起始的单元格(td),写上 rowspan 属性,值为要合并的单元格个,然后找到对应被合并的单元格(td)删除相关代码

实例练习

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table border="1" width="1000" cellpadding="0" cellspacing="0">
        <!-- 第一行 -->
        <tr>
            <td colspan="2" rowspan="2">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td rowspan="2">1-4</td>
        </tr>
        <!-- 第二行 -->
        <tr>

            <td colspan="2">2-2</td>

        </tr>
        <!-- 第三行 -->
        <tr>
            <td rowspan="3">3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
            <td>3-5</td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
            <td>4-5</td>

        </tr>
        <!-- 第五行 -->
        <tr>
            <td>5-1</td>
            <td colspan="3">5-2</td>
        </tr>
    <!-- 第六行 -->
        <tr>
            <td colspan="6">6-1</td>
        </tr>
    </table>
</body>

form

单选

​ value 并不显示,而是提交到后台
​ name 必须要写,相同值的元素是同一组
​ checked 默认勾选

实例练习

用户名:

密码:

邮箱:

生日:

性别:

保密

多选

爱好: 打游戏
阅读
运动

下拉 selected 默认选中
籍贯:

           <select name="addr">
            <option>--- 甘肃 ---</option>
            <option selected>--- 陕西 ---</option>
            <option>--- 湖北 ---</option>
            <option>--- 湖南 ---</option>
        </select>


多行文本
简介: 如果 form 表单中有 type 为 file 的输入框,就要将 form 表单的 entype 值改为 multipart/form-data


隐藏输入框,不会显示
​ button 按钮
​ 默认是普通按钮,表单中默认是提交按钮
​ type:
​ button 普通按钮,需要通过绑定事件来实现作用
​ reset 重置按钮,将元素重置初始状态
​ submit 提交按钮,将表单中的数据提交






**超链接 ** a

必须要有href属性

href点击链接后跳转的地址

self 本页面打开

top 在最外层的页面打开

download 以文件的方式下载,值为下载的文件名

实例练习

<head>
    <meta charset="utf-8">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.baidu">
    <a href="form.html"> form.html</a>
    <a href="temp/target.html"> form.html</a>
    </br>
    <a href="form.html"target="blank">blank</a>
    </br>
    <a href="form.html"target="self">self</a>
    </br>
    <a href="form.html"target="top">top</a>
    </br>
    <a href="form.html"target="parent">parent</a>
    </br>
    <a href="form.html"target="download">download</a>
    </br>
    <a/href="javascript:void(0)">不做任何链接
    </br>
</body>

多媒体

alt 当图片不能正常被显示时,显示此属性的值

一般width和height不同时设置,因为单独设置width或height属性图像会等比例改变

音频

scr 用于定义音频源,如果要显示此音频需加controls属性

controls 控制面板

auto play 自动播放

muted 静音

lop 循环播放

二.心得体会

​ 通过今天一天紧张而又充实的学习,我对列表的各种方式有了进一步的细解,可编写出简单的代码得以实现,对表格的行、列的合并,表格式的设计可以经过简单的代码实现,对超链接的各种方式有所了解,虽然有的简单,但感觉很有成就感。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1