轻松入门：HTML网页制作指南 进阶篇

news2024/11/17 3:41:35

一.表格标签

1.1表格的主要作用

表格不是用来布局页面的,而是用来展示数据的。

1.2基本语法

 <table>
            <tr>
                <td>单元格内的文字</td>
                ...
            </tr>
            ...
 </table>

说明：

        1.<table> </table> 是用于定义表格的标签。

        2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。

        3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

        4.字母 td 指表格数据（table data），即数据单元格的内容。

1.3表头单元格标签

<table>
        <tr>
            <th>姓名</th>
            ...
        </tr>
        ...
</table>
  •  一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

【注】表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。

1.4表格属性

 <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">

表格标签这部分属性实际开发中不常用，后面通过 CSS 来设置.

1.5表格结构标签

1.5.1表格结构：

<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域.

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾内容</td>
      <td colspan="2">跨列</td>
    </tr>
  </tfoot>
</table>
1.5.2特点：
  • <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
  • <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
  • 以上标签都是放在 <table></table> 标签中。

1.6合并单元格

1.6.1方式：
  • 跨行合并：rowspan="合并单元格的个数"     将最上侧单元格为目标单元格, 写合并代码
  • 跨列合并：colspan="合并单元格的个数"      将最左侧单元格为目标单元格, 写合并代码
1.6.2三步曲：
  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
  3. 删除多余的单元格。

二、列表标签

  • 表格是用来显示数据的，那么列表就是用来布局的。 
  • 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
  • 列表可以分为：无序列表、有序列表和自定义列表。

2.1无序列表(常用)

定义：

   <ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

<ul> 
  <li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>   ... 
</ul>

【注】

  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

  2. <ul></ul> 中只能嵌套 <li></li>（像<p>...都不可以放里面），直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。

  3. <li> 与 </li> 之间相当于一个容器（像<p>...都可以放<li>里面），可以容纳所有元素。

  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.2有序列表

定义：

        在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

<ol>   
    <li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>   ... 
</ol>

【注】 

  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.3自定义列表（描述列表）

2.3.1定义：        

        一个大标题领着一堆小标题的形式用自定义列表。<dl> 标签用于定义自定义列表，该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

2.3.2使用场景:

        常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

 <dl>   
    <dt>名词1</dt>   <dd>名词1解释1</dd>   <dd>名词1解释2</dd> 
</dl>

【注】<dl>标签里只能放<dt>和<dd>，<dt>和<dd>里可以放任何标签。

三、表单标签

3.1表单的作用：

        为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

3.2表单的组成

        表单域、表单控件（也称为表单元素）和 提示信息3个部分

3.3表单域

        表单域是一个包含表单元素的区域。

作用：

        在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

【注】1.在我们写表单元素之前,应该有个表单域把他们进行包含.

           2.表单域是 form标签.

3.4表单控件（表单元素）

        表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<form>
		<input type=“text " name=“username”>
		<select name=“jiguan”>  
		 <option>北京</option>
		</select> 
		<textarea name= "message">
		</textarea>
</form>
3.4.1<input>输入表单元素

        表单元素中 <input> 标签用于收集用户信息。在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值"  />

type 属性的属性值及其描述如下：

 除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

 

<form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>

【注】 

  1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
  2. name 表单元素的名字,要求 单选按钮和复选框要有相同的name值
  3. check主要针对单选按钮和复选框，check是每次加载自动勾选，不需要用户自己勾选。
  4. 刚打开页面就默认显示几个文字，可以设置"value属性=值"
3.4.2<label> 标签

        <label> 标签为 input 元素定义标注（标签）。<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex" />

【注】 <label> 标签的 for 属性应当与相关元素的 id 属性相同。

3.4.3<select> 表单元素

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
 </select>

【注】1.<select>中至少包含-对<option>
           2.在<option>中定义selected=“selected"时，当前项即为默认选中项。

3.4.4<textarea> 表单元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，使用 <textarea> 标签。

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">   文本内容 </textarea>

 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”（实际开发不会使用，用CSS）

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

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

相关文章

Iphone自动化指令每隔固定天数打开闹钟关闭闹钟(一)

Iphone自动化指令每隔固定天数打开闹钟关闭闹钟(一)

注意&#xff1a;因为是第一次用iphone的快捷指令&#xff0c;不是很明白&#xff0c;所以之后多次运行发现有bug&#xff0c;所以快捷指令部分在下一章重新写&#xff0c;我用两个日期测试了&#xff0c;没问题&#xff0c;这一章可以当做熟悉快捷指令的一些操作用&#xff0c…
阅读更多...
【协议开发系列】梳理关于TCP和UDP两种协议的区别和使用场景

【协议开发系列】梳理关于TCP和UDP两种协议的区别和使用场景

起源 前二天项目上在核对外部对接服务的五元组列表的时候&#xff0c;有一位客户提问对于同样的服务同时支持tcp和udp二种方式&#xff0c;有什么优点和缺点&#xff0c;应该如何选择&#xff1f;这个问题突然让我愣了一下&#xff0c;确实好久没有“温故”了&#xff0c;相关…
阅读更多...
【哈希】用哈希桶封装unordered_map unordered_set

【哈希】用哈希桶封装unordered_map unordered_set

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; C进阶 &#x1f389;其它专栏&#xff1a; C初阶 | Linux | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 用哈希桶封装 unordered_map & unordered_set 的相关内容。 如…
阅读更多...
pdf拆分成有图和无图的pdf(方便打印)

pdf拆分成有图和无图的pdf(方便打印)

pdf拆分成有图和无图的pdf(方便打印) 原因 打印图片要彩印&#xff0c;每次都要手动弄&#xff0c;打印的时候很麻烦&#xff1b; 随着打印次数的增加&#xff0c;时间就越来越多 为解决此问题&#xff0c;使用python写一个exe解决这个问题 历程 找一个python的GUI界面找到 t…
阅读更多...
USART串口外设

USART串口外设

USART介绍 USART&#xff1a;另外我们经常还会遇到串口&#xff0c;叫UART&#xff0c;少了个S&#xff0c;就是通用异步收发器&#xff0c;一般我们串口很少使用这个同步功能&#xff0c;所以USART和UART使用起来&#xff0c;也没有什么区别。 其实这个STM32的USART同步模式&a…
阅读更多...
MySQL 索引的使用

MySQL 索引的使用

本篇主要介绍MySQL中索引使用的相关内容。 目录 一、最左前缀法则 二、索引失效的场景 索引列运算 字符串无引号 模糊查询 or连接条件 数据分布 一、最左前缀法则 当我们在使用多个字段构成的索引时&#xff08;联合索引&#xff09;&#xff0c;需要考虑最左前缀法则…
阅读更多...
基于物理的分析模型，用于具有场板结构的GaN HEMT的输入、输出及反向电容

基于物理的分析模型，用于具有场板结构的GaN HEMT的输入、输出及反向电容

Physics-Based Analytical Model for Input, Output, and Reverse Capacitance of a GaN HEMT With the Field-Plate Structure&#xff08;TPE 17年&#xff09; 摘要 该论文提出了一种分析模型&#xff0c;用于描述带有场板结构的常开型AlGaN/GaN高电子迁移率晶体管&#x…
阅读更多...
多屏多机同控！天途首发瑶光智控地面站

多屏多机同控！天途首发瑶光智控地面站

瑶光智控地面站全新发布&#xff01;高性能处理器&#xff0c;高亮三屏显示。内置天途云控系统&#xff0c;融合图传、控制、存储和数据处理等功能与一体&#xff0c;强大算力&#xff0c;高度集成无人机、无人船、无人车和机械狗等多种无人装备进行云控云算。 内置4G公网通讯模…
阅读更多...
RabbitMQ-发布/订阅模式

RabbitMQ-发布/订阅模式

1、发布/订阅模式介绍 在普通的生产者、消费者模式&#xff0c;rabbitmq会将消息依次传递给每一个消费者&#xff0c;一个worker一个&#xff0c;平均分配&#xff0c;这就是Round-robin调度方式&#xff0c;为了实现更加复杂的调度&#xff0c;我们就需要使用发布/订阅的方式…
阅读更多...
现货白银的交易时间有多连贯？

现货白银的交易时间有多连贯？

国际市场上的现货白银优势很多&#xff0c;它除了具备国内同类型品种所不具备的数十倍资金杠杆外&#xff0c;也基本上实现了全天24小时不间断的交易时间&#xff0c;所以投资者可以在全天候连贯的行情中&#xff0c;寻找属于自己的交易获利机会。 但对于内地的投资者来说&…
阅读更多...
【香橙派 AIpro】新手保姆级开箱教程：Linux镜像+vscode远程连接

【香橙派 AIpro】新手保姆级开箱教程：Linux镜像+vscode远程连接

香橙派 AIpro 开发板 AI 应用部署测评 写在最前面一、开发板概述官方资料试用印象适用场景 二、详细开发前准备步骤1. 环境准备2. 环境搭建3. vscode安装ssh插件4. 香橙派 AIpro 添加连接配置5. 连接香橙派 AIpro6. SSH配置 二、详细开发步骤1. 登录 juypter lab2. 样例运行3. …
阅读更多...
HQChart使用教程100-uniapp如何在vue3运行微信小程序

HQChart使用教程100-uniapp如何在vue3运行微信小程序

HQChart使用教程100-uniapp如何在vue3运行微信小程序 症状原因分析解决思路解决步骤1. 修改vender.js2. 修改HQChartControl.js 完整实例HQChart代码地址 症状 HQChart插件在uniappvue3的项目编译成小程序以后&#xff0c; 运行会报错&#xff0c;见下图。 原因分析 查了下…
阅读更多...
从了解到掌握 Spark 计算框架（二）RDD

从了解到掌握 Spark 计算框架（二）RDD

文章目录 RDD 概述RDD 组成RDD 的作用RDD 算子分类RDD 的创建1.从外部数据源读取2.从已有的集合或数组创建3.从已有的 RDD 进行转换 RDD 常用算子大全转换算子行动算子 RDD 算子综合练习RDD 依赖关系窄依赖宽依赖宽窄依赖算子区分 RDD 血统信息血统信息的作用血统信息的组成代码…
阅读更多...
【C语言回顾】预处理

【C语言回顾】预处理

前言1. 简单概要2. 预处理命令讲解结语 上期回顾: 【C语言回顾】编译和链接 个人主页&#xff1a;C_GUIQU 归属专栏&#xff1a;【C语言学习】 前言 各位小伙伴大家好&#xff01;上期小编给大家讲解了C语言中的编译和链接&#xff0c;接下来我们讲解一下预处理&#xff01; …
阅读更多...
k8s自定义资源你会创建吗

k8s自定义资源你会创建吗

创建自定义资源定义 CustomResourceDefinition 当你创建新的 CustomResourceDefinition&#xff08;CRD&#xff09;时&#xff0c;Kubernetes API 服务器会为你所 指定的每一个版本生成一个 RESTful 的 资源路径。CRD 可以是名字空间作用域的&#xff0c;也可以是集群作用域的…
阅读更多...
接口测试工具：Postman的下载安装及使用

接口测试工具：Postman的下载安装及使用

1 Postman 介绍 1.1 Postman 是什么 Postman 是一款功能超级强大的用于发送 HTTP 请求的 测试工具 做 WEB 页面开发和测试的人员常用工具 创建和发送任何的 HTTP 请求(Get/Post/Put/Delete...) 1.2 Postman 相关资源 1.2.1 官方网站&#xff1a;https://www.postman.com/ …
阅读更多...
算法（七）插入排序

算法（七）插入排序

文章目录 插入排序简介代码实现 插入排序简介 插入排序&#xff08;insertion sort)是从第一个元素开始&#xff0c;该元素就认为已经被排序过了。然后取出下一个元素&#xff0c;从该元素的前一个索引下标开始往前扫描&#xff0c;比该值大的元素往后移动。直到遇到比它小的元…
阅读更多...
【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色

【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色

效果图 新建activityScrollTop.js作为mixins export default {data() {return {navBgColor: "rgba(0,0,0,0)", // 初始背景颜色为完全透明navTextColor: "rgba(0,0,0,1)", // 初始文字颜色};},onPageScroll(e) {// 设置背景const newAlpha Math.min((e.s…
阅读更多...
elasticsearch7.15实现用户输入自动补全

elasticsearch7.15实现用户输入自动补全

Elasticsearch Completion Suggester&#xff08;补全建议&#xff09; Elasticsearch7.15安装 官方文档 补全建议器提供了根据输入自动补全/搜索的功能。这是一个导航功能&#xff0c;引导用户在输入时找到相关结果&#xff0c;提高搜索精度。 理想情况下&#xff0c;自动补…
阅读更多...
手机站怎么推广

手机站怎么推广

随着手机的普及和移动互联网的快速发展&#xff0c;越来越多的人开始使用手机进行在线购物、社交娱乐、阅读资讯等&#xff0c;同时也催生了越来越多的手机站的出现。但是&#xff0c;在海量的手机站中&#xff0c;要让自己的手机站脱颖而出&#xff0c;吸引更多用户访问和使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023