新手向:HTML进阶

news2024/10/7 16:21:14

一,列表

列表分为有序列表,无序列表,定义列表三种

1.有序列表

ol 嵌套 li,ol 是有序列表,li 是列表条目 

<!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>
    <ol>
         <li>Ashto</li>
         <li>Ashto</li>
         <li>Ashto</li>

    </ol>

</body>

</html>

效果如图

2.无序列表 

ul 嵌套 li,ul 是无序列表,li 是列表条目

<!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>Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

我们可以通过 list-style-type来调整列表前的符号

<!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 style="list-style-type: none;">Ashto</li>
        <li>Ashto</li>
        <li>Ashto</li>

    </ul>
</body>

</html>

定义列表

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

<!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>
    <dl>
        <dt>CSDN</dt>
        <dd>代码交流平台</dd>
        <dd>资源交流平台</dd>
        <dd>问题解决平台</dd>

    </dl>
</body>

</html>

二,表格

<!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>
    <table border="1px solid black">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

</html>

三,表单

  表单一般和js一起使用

input标签

<!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>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <input type="radio" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">
</body>

</html>

下拉菜单

主要就是select和option,option就是下拉菜单的内容。

<!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>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
    </select>
</body>

</html>

有些印象就行,实际开发中基本用不到 

文本域,按钮,文本label

文本域textarea就是生成一块区域,大小可改(也可以设置固定形状),一般用在留言箱里。

 按钮button就是生成一个按钮,可以绑定点事件,和js一起用吧。

文本label更简单,就是用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。

四,div和span

div:一个盒子,最常用的标签,用来布局网站,非常重要,之后的大部分内容也是围绕div展开。

span:和p有点像,不过它不占一整行。

图片中的标签实质上都是div,只不过我们给某些形状的盒子取了个名字(语义化),方便使用。

用的挺频繁的,尤其是nav。

前端中标签有些印象就可以了,记住主要的几个:div,input,button,列表,p,h,其他的用的时候查一查就可以了。使用vscode的话会有智能提示,不用担心忘记的。 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

结构方程模型【SEM】:非线性、非正态、交互作用及分类变量分析

张老师&#xff08;研究员&#xff09;&#xff0c;长期从事R语言结构方程模型、群落生态学、保护生物学、景观生态学和生态模型方面的研究和教学工作&#xff0c;已发表了多篇论文&#xff0c;拥有丰富的科研及实践经验。 利用结构方程模型建模往往遇到很多‘特殊’情况&…

【论文阅读】Multi-Attention Based Ultra Lightweight Image Super-Resolution

Multi-Attention Based Ultra Lightweight Image Super-Resolution 论文地址摘要1 简介2 相关工作3 建议的方法3.1 特征融合组&#xff08;FFG&#xff09;3.2 多注意力块&#xff08;MAB&#xff09; 4 Experimental Setup4.1 消融研究4.2 Comparison with Existing Methods 5…

Rust HashMap

一、HashMap是什么&#xff0c;怎么用 1、HashMap是什么 HashMap 也是 Rust 标准库中提供的集合类型&#xff0c;但是又与动态数组不同&#xff0c;HashMap 中存储的是一一映射的 KV 键值对&#xff0c;并提供了平均时间复杂度为 O(1) 的查询方法。 2、HashMap怎么用 &…

基于Sping Boot集成的websocket实现聊天室

Spring Boot整合WebSocket实现聊天室 Spring Boot 提供了 Websocket 组件 spring-boot-starter-websocket&#xff0c;用来支持在 Spring Boot环境下对Websocket 的使用。 下面我们就以多人在线聊天室为例&#xff0c;演示 Spring Boot 是如何整合Websocket 实现服务端消息推…

Github Action Bot 开发教程

Github Action Bot 开发教程 在使用 Github 时&#xff0c;你可能在一些著名的开源项目&#xff0c;例如 Kubernetes&#xff0c;Istio 中看到如下的一些评论&#xff1a; /lgtm /retest /area bug /assign xxxx ...等等&#xff0c;诸如此类的一些功能性评论。在这些评论出现…

从0开始学习制作一个微信小程序 前端学习部分(7)数据控制操作,修改、判断等

系列文章目录 本系列会从前后端的全面角度讲述制作小程序&#xff0c;从零开始学小程序&#xff0c;跟着本系列就够了&#xff01; 前端学习篇 学习篇第一篇我们讲了编译器下载&#xff0c;项目、环境建立、文件说明与简单操作&#xff1a;第一篇链接 第二、三篇分析了几个重要…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(六)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 12 - 13节&#xff09; P12《11.ArkUI组件-循环控制》 forEach() 方法的使用方式&#xff1a; 在预览界面点击红框的按钮&#xf…

KKView远程控制2.0版本发布,TeamViewer面临巨大挑战

KKView远程控制2.0版本发布&#xff0c;TeamViewer面临巨大挑战 近日&#xff0c;备受瞩目的远程控制软件KKView发布了其全新2.0版本&#xff0c;KKView以其独特的创新性和用户友好的设计&#xff0c;为远程办公、远程培训等领域提供了更加高效、便捷的解决方案。 KKView远程…

Hive 表定义主键约束

文章目录 1.建表语句2.主键约束3.主键约束的意义参考文献 1.建表语句 先看一下官方给的完整的见表语句&#xff1a; CREATE [TEMPORARY] [EXTERNAL] TABLE [IF NOT EXISTS] [db_name.]table_name -- (Note: TEMPORARY available in Hive 0.14.0 and later)[(col_name data…

助力企业部署国产云原生数据库 XSKY星辰天合与云猿生完成产品互兼容认证

近日&#xff0c;北京星辰天合科技股份有限公司&#xff08;简称&#xff1a;XSKY 星辰天合&#xff09;与杭州云猿生数据有限公司&#xff08;简称“云猿生”&#xff09;完成了产品互兼容认证&#xff0c;星辰天合企业级分布式统一数据平台 XEDP 与云猿生的开源数据库管控平台…

【银角大王——Django课程——用户表的基本操作】

Django课程——用户表的基本操作 模板的继承用户管理用户列表展示新建用户Django组件原始方法【麻烦&#xff0c;太原始】form组件modelform组件 使用modelsform组件编写添加页面 模板的继承 &#xff08;1&#xff09;先写一个页面模板————这个案例中的模板基本上就是一个…

【Spring AI】09. ETL 管道

文章目录 ETL PipelineAPI 概述入门指南ETL 接口和实现DocumentReaderJsonReaderTextReaderPagePdfDocumentReaderParagraphPdfDocumentReaderTikaDocumentReader DocumentTransformerTextSplitterTokenTextSplitterContentFormatTransformerKeywordMetadataEnricherSummaryMet…

ABAP 数据写入Excel 并保存

参考老白 https://www.cnblogs.com/liaojunbo/archive/2011/09/06/2168552.html 但是缺zcl_excel 。需要从 dotabap要引入abap2xlsx 英文版进入后 尝试了一下 1&#xff09;列的宽度自适应么有找到在哪里&#xff1f; 列宽设置 lo_worksheet->set_column_width( ip_co…

Linux第十五章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

22 - Hadoop HA 高可用集群搭建、手动模式、自动模式以及HA模式集群

目录 1、HA 概述 2、HDFS-HA 集群搭建 2.1、HDFS-HA 核心问题 3、HDFS-HA 手动模式 3.1、环境准备 3.2、规划集群 3.3、配置 HDFS-HA 集群 3.4、启动 HDFS-HA 集群 4、HDFS-HA 自动模式 4.1、HDFS-HA 自动故障转移工作机制 4.2、HDFS-HA 自动故障转移的集群规划 4.…

Three.js 的优势

Three.js 是一个非常流行的基于 WebGL 的 JavaScript 库&#xff0c;用于在浏览器中创建和展示 3D 内容。以下是 Three.js 的一些主要优势&#xff0c;这些优势使得 Three.js 成为创建和展示 3D 内容的强大工具&#xff0c;无论是对于初学者还是经验丰富的开发者。北京木奇移动…

OFDM802.11a的FPGA实现(七)一级交织:分组交织器(含verilog和matlab代码)

1.前言 在前面的文章中讲解了卷积编码和删余&#xff0c;实现了1/2、2/3、3/4编码速率的输出。数据域在编码之后&#xff0c;下一个部分就是交织。今天对交织进行具体实现。 交织是为了在时域或频域或者同时在时域、频域上分布传输的信息比特,使信道的突发错误在时间上得以扩散…

LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测(Matlab)

LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09; 目录 LSTM-KDE的长短期记忆神经网络结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.LSTM-KDE的长短期…

CVE-2022-2602:unix_gc 错误释放 io_uring 注册的文件从而导致的 file UAF

前言 复现该漏洞只是为了学习相关知识&#xff0c;在这里仅仅做简单记录下 exp&#xff0c;关于漏洞的详细内容请参考其他文章&#xff0c;最后在 v5.18.19 内核版本上复现成功&#xff0c;v6.0.2 复现失败 漏洞利用 diff --git a/include/linux/skbuff.h b/include/linux/s…

网络安全之密码学技术

文章目录 网络信息安全的概念数据加密|解密概念密码学概论密码学分类古典密码学现代密码学 现代密码学的相关概念对称加密算法对称加密算法—DES对称加密算法—3DES对称加密算法—AES对称加密算法—IDEA 非对称加密算法非对称加密算法—RSA非对称加密算法—ElGamal非对称加密算…