HTML你要知道哪些语法?

表格

表格的主要作用

1.表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

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

3.表格的具体用法:

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

1.<table> </table> 是用于定义表格的标签。 ​ 2.<tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。 ​ 3.<td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。 ​ 4.字母 td 指表格数据(table data),即数据单元格的内容。

表头单元格标签:

表头标签的具体实现:

        <table><tr><th>姓名</th>...</tr>...</table>

1.一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示. ​ <th> 标签表示 HTML 表格的表头部分(table head 的缩写) ​ 2.一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示. ​ <th> 标签表示 HTML 表格的表头部分(table head 的缩写) ​ 5.表头单元格也是单元格,常用于表格第一行突出重要性,表头单元格里面的文字会加粗居中

表格属性:

1.表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置. ​

思路:

先制作表格的结构.

1.第一行里面是 th 表头单元格

2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素

3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框cellpadding 和 cellspacing

2.表格浏览器中对齐 align

表格结构标签:

使用场景: ​ 因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分. ​ 在表格标签中,分别用:<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。

总结: 1. <thead></thead>:用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。 2. <tbody></tbody>:用于定义表格的主体,主要用于放数据本体 。 3. 以上标签都是放在 <table></table> 标签中。

合并单元格:

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可. ​ 1.合并单元格方式 ​ 2.目标单元格 ​ 3.合并单元格的步骤 ​ 如下图:

合并单元格方式:

跨行合并:rowspan="合并单元格的个数"

最上侧单元格为目标单元格, 写合并代码

跨列合并:colspan="合并单元格的个数"

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲:

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如:<td colspan="2"></td>。删除多余的单元格。

表格总结

表格学习整体可以分为三大部分:

表格的相关标签

table thead body tr th td

表格的相关属性

cellspacing cellpadding width height border

合并单元格

rowspan collspan

表单

现实中的表单:

为什么需要表单:

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

表单的组成:

在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。

表单域:

表单域是一个包含表单元素的区域。 ​ 在 HTML 标签中, <form> 标签用于定义表单域,以实现用户信息的收集和传递。

    <form> 会把它范围内的表单元素信息提交给服务器.实现代码:<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

表单域的常用属性:

这里只需要记住两点: 1.在我们写表单元素之前,应该有个表单域把他们进行包含. 2.表单域是 form标签.

表单控件(表单元素)

<input> 表单元素

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

<input type="属性值" />

<input /> 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型

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

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

<label> 标签

<label> 标签为 input 元素定义标注(标签)。 <label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验. 语法: <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> 核心: <label> 标签的 for 属性应当与相关元素的 id 属性相同。

<select> 表单元素

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

语法:

    选项1    选项2    选项3    ...  

<textarea> 表单元素

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

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

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

语法:

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

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ,rows=“显示的行数”,

我们在实际开发中不会使用,都是用 CSS 来改变大小。

表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

具体代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action=""><!-- 文本域用作表单的长文本,一般用于留言评论等区域 --><textarea name="" id="" cols="30" rows="10">北枫老师真的非常的帅</textarea></form></body>
</html>

textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…

查阅文档:

经常查阅文档是一个非常好的学习习惯。 ​ 推荐的网址: ​ W3C : w3school 在线教程 (推荐初学者) ​ MDN: MDN Web Docs (推荐进阶)

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

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

相关文章

【Kafka】高级特性:主题

目录 主题的管理创建主题查看主题修改主题删除主题 增加分区分区副本的分配必要参数配置KafkaAdminClient应用功能操作示例 主题的管理 使用kafka-topics.sh脚本。 下面是使用脚本的一些选项 选项说明–config <String: namevalue>为创建的或修改的主题指定配置信息。…

C语言常见面试题:什么是枚举,枚举的作用是什么?

枚举是一种特殊的数据类型&#xff0c;它是一组具命名的整型常量的集合。枚举的作用如下&#xff1a; 限制用户不能随意赋值&#xff1a;枚举类型可以限制用户只能使用定义时列举的值进行赋值&#xff0c;而不能随意赋值。这样可以增加代码的可读性和可维护性。方便管理公共的…

[题单练习] 大模拟题

看完题后不知所措 P1058 [NOIP2008 普及组] 立体图 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 简单来说&#xff0c;题目要我们按照输入&#xff0c;把立体图画出来&#xff0c;先放张图来震撼一下 看题解&#xff0c;题解的思路如下&#xff1a; 1. 先把一个积木块存入…

栈和队列的动态实现(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

图像与二进制数据间的转换

概述 此文档主要是记录图像与二进制互相转换的方法&#xff0c;此文档记录于20220811 进行图片和二进制的互相转换 若想转为base64&#xff0c;可以看 图像与base64互转 的内容。 Python 资料&#xff1a;python 图片和二进制转换的三种方式_脸不大的CVer的博客-CSDN博客_p…

统计学-R语言-7.3

文章目录 前言总体方差的检验一个总体方差的检验两个总体方差比的检验 非参数检验总体分布的检验正态性检验的图示法Shapiro-Wilk和K-S正态性检验总体位置参数的检验 练习 前言 本篇文章继续对总体方差的检验进行介绍。 总体方差的检验 一个总体方差的检验 在生产和生活的许多…

1 月 26日算法练习

文章目录 九宫幻方穿越雷区走迷宫 九宫幻方 小明最近在教邻居家的小朋友小学奥数&#xff0c;而最近正好讲述到了三阶幻方这个部分&#xff0c;三阶幻方指的是将1~9不重复的填入一个33的矩阵当中&#xff0c;使得每一行、每一列和每一条对角线的和都是相同的。 三阶幻方又被称…

IS-IS:07 ISIS缺省路由

IS-IS 有两种缺省路由&#xff0c;第一种缺省路由是由 level-1 路由器在特定条件下自动产生的&#xff0c;它的下一跳是离它最近的 &#xff08;cost 最小&#xff09;level-1-2路由器。第二种缺省路由是 IS-IS 路由器上使用 default-route-advertise 命令产生并发布的。 本次实…

第十七讲_HarmonyOS应用开发Stage模型应用组件

HarmonyOS应用开发Stage模型应用组件 1. 应用级配置2. Module级配置3. Stage模型的组件3.1 AbilityStage3.1.1 AbilityStage的创建和配置3.1.2 AbilityStage的生命周期回调3.1.3 AbilityStage的事件回调&#xff1a; 3.2 UIAbility3.2.1 UIAbility生命周期3.2.3 UIAbility启动模…

CSAPP fall2015 深入理解计算机系统 Cache lab详解

Cache Lab cache lab 缓存实验 代码下载 从CSAPP上面下载对应的lab代码 http://csapp.cs.cmu.edu/3e/labs.html 环境准备 需要安装 valgrind。可以参考文章Valgrind centos。 安装好以后执行valgrind --version可以看到版本号。 Cache simulator cache simulator not a …

ART: Automatic multi-step reasoning and tool-use for large language models 导读

ART: Automatic multi-step reasoning and tool-use for large language models 本文介绍了一种名为“自动推理和工具使用&#xff08;ART&#xff09;”的新框架&#xff0c;用于解决大型语言模型&#xff08;LLM&#xff09;在处理复杂任务时需要手动编写程序的问题。该框架可…

【音视频原理】音频编解码原理 ③ ( 音频 比特率 / 码率 | 音频 帧 / 帧长 | 音频 帧 采样排列方式 - 交错模式 和 非交错模式 )

文章目录 一、音频 比特率 / 码率1、音频 比特率2、音频 比特率 案例3、音频 码率4、音频 码率相关因素5、常见的 音频 码率6、视频码率 - 仅做参考 二、音频 帧 / 帧长1、音频帧2、音频 帧长度 三、音频 帧 采样排列方式 - 交错模式 和 非交错模式1、交错模式2、非交错模式 一…

排序问题上机考试刷题

排序与查找可以说是计算机领域最经典的问题&#xff0c;排序和查找问题在考研机试真题中经常出现。排序考点在历年机试考点中分布广泛。排序既是考生必须掌握的基本算法&#xff0c;又是考生 学习其他大部分算法的前提和基础。首先学习对基本类型的排序。对基本类型排序&#x…

【C++中的STL】函数对象

函数对象 函数对象概念谓词概念 内建函数对象算术仿函数关系仿函数逻辑仿函数&#xff08;基本用不到&#xff09; 函数对象概念 重载函数调用操作符的类&#xff0c;其对象常称为函数对象&#xff0c;函数对象使用重载的()时。行为类似函数调用&#xff0c;也叫仿函数。 函数…

分析crash日志

每一天都要快乐的进步~~ 文章目录 在分析 crash 日志时&#xff0c;通常需要关注以下信息&#xff1a; 1️⃣ 错误信息&#xff1a;了解 crash 的具体错误信息&#xff0c;这有助于定位问题的根源所在。 2️⃣ 堆栈跟踪&#xff1a;查看堆栈跟踪&#xff0c;确定 crash 发生的…

4.F1 评分机器学习模型性能的常用的评估指标

F1评分作为机器学习领域中的一个综合性评价指标&#xff0c;旨在在准确率和召回率之间寻求平衡&#xff0c;进而提供对模型性能全面评估的手段。本文将深入探讨F1评分的定义、计算方法、应用领域、案例研究以及未来发展方向&#xff0c;力求为读者提供详实而全面的了解。 一.F…

C#学习笔记_StringBuilder+程序效率测试

String问题&#xff1a;当程序中进行过多字符串处理操作时&#xff0c;会在内存中产生过多垃圾信息&#xff0c;影响程序效率。 StringBuilder简介 StringBuilder为一个类&#xff0c;属于引用类型。StringBuilder与string的区别在于&#xff0c;StringBuilder对于字符串的操…

osgEarth真HelloWorld

osgEarth真HelloWorld vcpkg installtests vcpkg install osgEarth安装指南 https://docs.osgearth.org/en/latest/install.html&#xff0c; 预先设置ports/osg/portfile.cmake GL3 否则调用osg相关功能时会出现如下提示 OpenSceneGraph does not define OSG_GL3_AVAILABLE; …

语音方向精典论文品读_HuBERT

英文名称: HuBERT: Self-Supervised Speech Representation Learning by Masked Prediction of Hidden Units 中文名称: HuBERT&#xff1a;通过隐藏单元的屏蔽预测进行自监督语音表示学习 链接: http://arxiv.org/abs/2106.07447v1 代码: https:// github.com/pytorch/fairseq…

vertica10.0.0单点安装_ubuntu18.04

ubuntu的软件包格式为deb&#xff0c;而rpm格式的包归属于红帽子Red Hat。 由于项目一直用的vertica-9.3.1-4.x86_64.RHEL6.rpm&#xff0c;未进行其他版本适配&#xff0c;而官网又下载不到vertica-9.3.1-4.x86_64.deb&#xff0c;尝试通过alian命令将rpm转成deb&#xff0c;但…