HTML_CSS学习:超链接、列表、表格、表格常用属性

一、超链接_唤起指定应用

1.相关代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接_唤起指定应用</title>
</head>
<body>
    <a href="tel:10010">电话联系</a>
    <a href="mailto:1234567@qq.com">邮件联系</a>
    <a href="sms:10086">短信联系</a>

<!--    https://atguigu666.github.io/-->

</body>
</html>
2.显示结果

二、列表

1.相关代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
<!--    有序列表 (ordered list)<ol>-->
<!--    无序列表 (unordered list)<ul>-->
<!--    自定义列表 (Custom list)<dl>-->
</head>
<body>
<!--    有序列表:有顺序或侧重顺序的列表-->
    <h2>要把大象放冰箱总共分几步?</h2>
    <ol>
        <li>把冰箱门打开</li>
        <li>把大象放进去</li>
        <li>把冰箱门关上</li>
        <li>
<!--            li标签最好写在ul或ol中,不要单独使用-->
            <a href="https://www.baidu.com">去百度</a>
        </li>

    </ol>
<!--    <div>-->
<!--        <div>1.把冰箱门打开</div>-->
<!--        <div>2.把大象放进去</div>-->
<!--        <div>3.把冰箱门关上</div>-->
<!--    </div>-->
<!--    无序列表:无顺序或者不侧重顺序的列表-->
<!--    列表嵌套:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把结构写完整)-->
    <h2>我想去的几个城市</h2>
    <ul>
        <li>成都</li>
        <li>上海</li>
        <li>
            <span>深圳</span>
            <ul>
                <li>中兴</li>
                <li>
                    <span>大疆</span>
                    <ul>
                        <li>无人机技术哪家强,中国深圳找大疆!</li>
                    </ul>
                </li>
                <li>腾讯</li>
                <li>华为</li>
                <li>中国平安</li>
            </ul>
        </li>
        <li>西安</li>
        <li>武汉</li>
    </ul>
<!--    自定义列表:就是一个包含术语名称以及术语描述的列表-->
<!--    一个dl就是一个自定义列表,一个dt就是一个术语名称,一个dd就是术语描述(可以有多个)-->
    <h2>如何更好地学习</h2>
    <dl>
        <dt>做好笔记</dt>
        <dd>笔记是我们以后复习的一个工具</dd>
        <dd>笔记可以是电子版,也可以是纸质版</dd>
        <dt>多加练习</dt>
        <dd>只有敲出来的代码,才是自己的</dd>
        <dt>别怕出错</dt>
        <dd>错很正常的,改正后并记住,就是经验</dd>
    </dl>


</body>
</html>
2.显示结果

三、表格

1.相关代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
<!--        表格标题-->
        <caption>学生信息</caption>
<!--        表格头部-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
<!--        表格主题-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
<!--        表格脚注-->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>
2.显示结果

四、表格_常用属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/470543.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript初学心得

JavaScript JavaScript原名是livescript&#xff0c;是由美国网景开发的一种用于对网页操作的脚本语言 网页操作&#xff08;图片切换&#xff09; 脚本语言&#xff08;不需要编译 sql,html,css,javascript,由某种解释器直接可以运行&#xff09; livescript也是面向对象的…

基于Go的开源全栈测试工具RunnerGo使用详解

前言 测试人员目前广泛使用的测试工具如Postman、JMeter等&#xff0c;如Postman缺少对API的性能测试部分、JMeter则缺少测试报告和测试脚本的统一管理系统及UI测试功能&#xff0c;而RunnerGo的出现填补了传统测试工具的空缺&#xff0c;为测试人员提供了一个可以满足测试全流…

计算机毕业设计-基于Python的“哔哩哔哩视频网”视频热度分析

概要 在21世纪的今天&#xff0c;网络发展越来越快&#xff0c;网上的娱乐方式也越来越多样化&#xff0c;而如今在网上观看视频消遣时间越来越受到大众的青睐。Bilibili视频网站是现当下年轻人最受欢迎的一个视频网站。有调查显示&#xff0c;直到2019年的10月份&#xff0c;B…

基于python车辆故障管理系统的设计与实现flask-django-nodejs-php

网络发展前景无限&#xff0c;及早与网络结合&#xff0c;与信息时代同步&#xff0c;与高科技汇合&#xff0c;定会给社会各行各业的发展注入新鲜的活力。站在网络时代的前夜&#xff0c;我们清晰地听到了网络时代的宣言&#xff1a;谁掌握了网络&#xff0c;谁就掌握了未来。…

视觉信息处理和FPGA实现第5次作业-Matlab实现图像逆时针旋转90度

一、Matlab2022a安装 链接&#xff1a;https://pan.quark.cn/s/6e177bc7c11d 提取码&#xff1a;dKNN 二、Matlab使用 2.1 新建一个脚本文件&#xff08;.m文件&#xff09; 2.2 另存为到便于归档的地方 考虑到.m文件如果不是全英文路径&#xff0c;也有可能会出问题&#…

51单片机学习笔记7 串转并操作方法

51单片机学习笔记7 串转并操作方法 一、串转并操作简介二、74HC595介绍1. **功能**&#xff1a;2. **引脚**&#xff1a;3. **工作原理**&#xff1a;4. 开发板原理图&#xff08;1&#xff09;8*8 LED点阵&#xff1a;&#xff08;2&#xff09;74HC595 串转并&#xff1a; 三…

qt-pdf-viewer-library 编译过程记录

1.qtpdfviewerinitializer.h 中 类模板问题需要修改为下面代码: https://github.com/develtar/qt-pdf-viewer-library 下载代码&#xff1a; 编译出现错误 修改代码&#xff0c;如下: 2.无法触发onViewerLoaded 事件&#xff0c;就是界面无法显示PDF文件 修改下面代码&#…

在线播放视频网站源码系统 带完整的安装代码包以及搭建教程

在线播放视频网站源码系统的开发&#xff0c;源于对当前视频市场的深入洞察和用户需求的精准把握。随着视频内容的爆炸式增长&#xff0c;用户对视频播放的需求也日益多样化。他们希望能够随时随地观看自己感兴趣的视频内容&#xff0c;同时还希望能够在观看过程中享受到流畅、…

vue2 vue3 diff算法比较

目录 1&#xff1a;没key 补充1&#xff1a;为什么不建议用index作为key值&#xff1f; 2&#xff1a;有key 2.1&#xff1a;vue2diff 2.2&#xff1a;vue3diff 补充2&#xff1a;vue3的最长递增子序列 补充3&#xff1a;vue2diff和vue3diff的比较 补充4&#xff1a;虚…

Linux 服务升级:MySQL 主从(半同步复制) 平滑升级

目录 一、实验 1.环境 2.Mysql-shell 检查工具兼容性 3.逻辑备份MySQL数据 4.备份MySQL 数据目录、安装目录、配置文件 5.MySQL 升级 6.master节点 使用systemd管理mysql8 7. slave1 节点升级 8. slave2 节点升级 9.半同步设置 二、问题 1.mysqldump备份报错 2.Inn…

推荐一个Java学习路线图

今天给大家推荐一个Java 学习路线, Java 要学的知识点、对应的学习资源和预计要花费的时间&#xff0c;都安排的明明白白的&#xff0c;不用再盲目的选了&#xff0c;有计划了&#xff0c;也别再迷茫和纠结了&#xff0c;就跟着学就行了。 1.1阶段一练气筑基--Java基础&#xf…

分布式砖题

雪花算法 变动位数&#xff0c;性能佳&#xff0c;灵活调整bit位划分&#xff0c;灵活 zk 临时节点和watch机制实现注册中心 &#xff0c;数据都在内存&#xff0c;nio 多线程模型&#xff1b; cp注重一致性&#xff0c;集群数据不一致时集群不可用 数据一致性模型 cap 强…

Nanya(南亚科技)DRAM芯片选型详解

一、DRAM产品选型 普通SDRAM只在时钟的上升期进行数据传输&#xff0c;DDR内存能够在时钟的上升期和下降期各传输一次数据&#xff0c;因此性能翻倍&#xff0c;被称为双倍速率同步动态随机存储器。因此DDR内存可以在与SDRAM相同的总线频率下达到更高的数据传输率。DDR是一种掉…

十一、MYSQL 基于MHA的高可用集群

目录 一、MHA概述 1、简介 2、MHA 特点 3、MHA 工作原理&#xff08;流程&#xff09; 二、MHA高可用结构部署 1、环境准备 2、安装MHA 监控manager 3、在manager管理机器上配置管理节点&#xff1a; 4、编master_ip_failover脚本写 5、在master上创建mha这个用户来访…

32位ARM微控制器: TLE9877QTW40XUMA1、CY9BF416NPMC-G-JNE2、CY9BF316NPMC-G-JNE2描述、器件参数

1、TLE9877QTW40 IC MCU 32BIT 64KB FLASH 48TQFP 描述&#xff1a;TLE9877QTW40属于TLE987x产品系列。TLE9877QTW40是一款单芯片三相电机驱动器&#xff0c;集成了行业标准的Arm Cortex -M3内核&#xff0c;能够实现先进的电机控制算法&#xff0c;例如磁场定向控制。它包括六…

【SpringSecurity】十三、基于Session实现授权认证

文章目录 1、基于session的认证2、Demosession实现认证session实现授权 1、基于session的认证 流程&#xff1a; 用户认证成功后&#xff0c;服务端生成用户数据保存在session中服务端返回给客户端session id (sid&#xff09;&#xff0c;被客户端存到自己的cookie中客户端下…

进阶了解C++(5)——搜索二叉树

1. 什么是搜索二叉树&#xff1a; 在之前针对数据结构的文章中&#xff0c;对数、二叉树以及堆进行了介绍&#xff0c;在本部分&#xff0c;将针对二叉搜索树进行介绍。对于二叉搜索树&#xff0c;其于二叉树相比&#xff0c;最大的特点就是结点的排布是存在规则的。在搜索二叉…

seleniumUI自动化实例(登录CSDN页面)

今天分享一个CSDN登录模块的登录场景 1.配置文件 CSDNconf.py&#xff1a; from selenium import webdriver options webdriver.ChromeOptions() options.binary_location r"D:\Program Files\360\360se6\Application\360se.exe" # 360浏览器安装地址 driver w…

Spark 3.5.0 特性速览

介绍 Spark 3系列已经发布了第六版3.5.0&#xff0c;目前最新3.5.1。 使用最广泛的大数据可扩展计算引擎。数以千计的公司&#xff0c;包括 80% 的财富 500 强企业&#xff0c;都在使用 Apache Spark。来自业界和学术界的 2000 多名开源项目贡献者。 Apache Spark 3.5.0 是…

单片机——数电复习(1)

1逻辑门电路的分类 2高电平与低电平的含义 1逻辑门电路的分类 1.1按了逻辑功能分 与门 或门 非门 异或门 与非门 或非门 与或非门 与门&#xff08;全1为1&#xff09;YAB 全为高电平才输出高电平 使用仿真看现象 当只有一个输入只有一个为1时小灯不亮 当输入都为1时 &a…
最新文章