网站上的幻灯片如何做,扁平结构的网站,适合网站开发工程师的公司,公司手机app开发公司目录 1.表格标签#xff1a;
前言:
定义表格:
总结#xff1a;
2.表单标签#xff1a;
前言#xff1a;
表单的定义#xff1a;
表单的属性#xff1a;
表单控件#xff1a;
3.列表标签#xff1a;
前言:
定义列表#xff1a;
1.有序列表#xff1a;
2.…目录 1.表格标签
前言:
定义表格:
总结
2.表单标签
前言
表单的定义
表单的属性
表单控件
3.列表标签
前言:
定义列表
1.有序列表
2.无序列表
3.定义列表
示例代码如下:
总结 1.表格标签
前言:
在HTML中table标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的都有行列单元格表头等等但是Excel毕竟还是专业不像HTML既不支持排序又不支持求和还不支持很多数学计算只能用来展示数据。
HTML常用的图片标签和超链接标签-CSDN博客 HTML常用文本标签-CSDN博客
定义表格:
在表格标签有
table表示表格表格的所有内容需要写在table和/table之间。tr是table row的简称表示表格的每一行表格中有多少个tr标签就表示有多少行数据。td是table datacell的简称表示表格的单元格这是存放表格数据的标签单元格的数据可以是文本图片列表段落表单水平线表格等多种形式。th是table heading的简称表示表格的表头。th其实是td单元格的一种变体本质上还是一种单元格。th一般位于第一行充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。captionHTML允许使用此标签当做表格的标题需要注意的是一个表格只能有一个标题。
一般情况下HTML定义的表格是没有边框的但是我们可以通过设置table标签的border属性来设置表格的边框宽度单位是像素(px).
HTML的table标签也支持单元格的合并跨行合并和跨列合并如下
rowspan表示跨行合并在HTML中允许我们使用rowspan特性来表明单元格索要跨越的行数。rowspan表示向下合并单元格。colspan表示跨列合并在HTML中允许我们使用colspan的特性来表明单元格索要跨越的列数。colspan表示向右合并单元格。每次合并n个单元格记得要n-1个td标签。
一个基本的表格定义如下:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbody!-- border在是边框这里是设置边框为1像素 --table border1 styleborder-collapse: collapse;!-- 整个表格的标题 --caption此表格为网页信息表/captiontr!-- 第一行 --th网站名/thth网站地址/thth网站作用/th/trtrtdbilibili/tdtdhttps://www.bilibili.com/?from_start_menu/tdtd以视频为主流的网站/td/trtr!-- 向下合并一个单元格 --td rowspan2淘宝/tdtdhttps://www.taobao.com//tdtd以购物为主流的网站/td/trtr!-- 向右合并一个单元格 --td colspan2https://uland.taobao.com/sem/tbsearch?refpidmm_26632360_8858797_29866178keyword%E5%A5%B3%E8%A3%85clk12d5e46421962bba06c0498319872fcd7upsId2d5e46421962bba06c0498319872fcd7/td/tr/table/body/html
上述代码的运行结果如下图 总结
表格标签在如今的网页设计中依然是有用的因为表格能够更准确分明直观的展示数据后面学习了javascript就可以替换表格中的数据了。 2.表单标签
前言
如果想要通过网页来收集一些用户的信息(如电话邮箱地址用户名等)就需要用HTML表单表单可以接收用户输入的信息然后将其发送到后端应用程序如PHP,Java,Python等后端应用程序将根据定义好的业务逻辑对表单传递进来的数据进行处理。
其实表单也属于HTML文档中的一部分其中包含了输入框复选框单选按钮提交按钮等不同的表单控件用户通过修改表单中的元素(如输入文本选择某个选项等)来完成表单通过表单中提交按钮将表单数据提交给后端的程序。
表单的定义
在HTML中如果需要创建表单则需要用到form标签语法如下:
form actionURL methodGET|POST表单里的元素
/form
说明如下:
action属性用来指明表单中的数据要提交到的页面。method表示提交数据的方式分为GET和POST他们区别是 GET用户点击提交之后要提交的信息会被显示在页面的地址栏中一般情况下GET提交并不建议包含密码因为不安全。POST如果表单包含密码这种信息建议使用POST方式提交这样数据会传到后台并不会在地址栏中显示相对来说安全。
表单的属性
HTML为form标签提供了一些专用的属性其中action和method是最常用的两个属性如下表:
属性可选值描述acceptMIME_typeHTML5中不再支持设置服务器接收的文件类型。accept-charsetcharacter_set设置表单数据的字符集(默认为HTML文档字符集)。actionURL设置要将表单提交到何处(默认为当前页面)。autocompleteonoff设置是否启用表单的自动完成功能(默认打开)。enctypeapplication/x-www-form-urlencoded,multipart/form-data,text/plain设置在提交表单数据之前如何对数据进行编码(适用于methodpost的情况)。methodgetpost 设置使用哪种HTTP方法来提交表单数据(默认为get)。 nametext设置表单的名称。novalidatenovalidate如果使用该数据则提交表单时不进行验证。target_blank,_self,_parent,_top设置在何处打开action属性设定的链接(默认为_self)
表单控件
在HTML中表单是用来收集用户数据的但是用户的数据需要填写在表单控件里面如下是HTML表单中可以包含的表单控件
控件/标签描述input定义输入框。textarea定义文本域(一个可以输入多行文本的控件)。label为表单中的各个控件定义标题。fieldset定义一组相关的表单元素并使用边框包裹起来。legend定义fieldsel元素的标题。select定义下拉列表。optgroup定义选项组。option定义下拉列表中的选项。button定义一个可以点击的按钮。datalist指定一个预先定义的输入控件选项列表。keygen定义表单的密钥对生成器字段。output定义一个计算结果。
下面就通过代码来实现一个完整的示例:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyform action./userinfo.php methodPOST!-- 文本输入框控件 --label用户名 /labelinput nameusername typetextbr!-- 密码框控件 --label密emsp;码 /labelinput namepassword typepasswordbr!-- 下拉菜单控件 --label性emsp;别/labelselect namesexoption value1男/optionoption value2女/optionoption value3未知/option/selectbr!-- 复选框控件 --label爱emsp;好/labelinput typecheckbox namehobby value1听音乐input typecheckbox namehobby value2看电影input typecheckbox namehobby value3运动br!-- 单选按钮控件 --label学emsp;历/labelinput typeradio nameeducation value1小学input typeradio nameeducation value2中学input typeradio nameeducation value3本科input typeradio nameeducation value4硕士input typeradio nameeducation value5博士br!-- 按钮 --input typesubmit value提 交emsp;emsp;input typereset value重 置/form/body/html
填写好用户数据点击“提交”按钮即可使用 POST 方式将数据提交到当前目录下的 userinfo.php 页面在服务器端通过 PHP 代码可以接收提交的数据。 3.列表标签
前言:
HTML列表(List)可以将若干条相关的内容整理起来让内容看起来更加分明列表里面可以放文本图像链接也可以在列表中定义另一个列表嵌套。
定义列表
在HTML我们有三种方式可以定义列表:
有序olli标签。无序ulli标签。定义列表,dldtdd标签。
1.有序列表
在HTML中ol标签是用来表示有序列表有序列表的每一项前面都会有一个数字表示这一项是这个列表的第几个。一般都是ol和li一起出现在有序列表中可以包含图片文本链接另一个列表。
2.无序列表
ul无序列表中没有顺序之分每一项前面使用●表示一般都是跟li标签配合使用的。
3.定义列表
dl标签是用于创建列表的定义的列表由标题和描述两部组成描述是对标题的解释标题是最描述的总结和提炼。其中dt是定义标题的dd是定义描述的
示例代码如下:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title这里存放了一个网页的标题/title
/headbodydldt有序列表示例/dtddolli有序列表第一项/lili有序列表第二项/lili有序列表第三项/li/ol/dddd上面定义了3个有序列表/dddt无序列表示例/dtddulli无序列表第一个/lili第二个/lili第三个/li/ul/dddd上面定义了3个无序列表/dddt为啥没有定义列表的因为它本身就是/dt/dl
/body
/html
上述代码的运行结果如下: 总结
ol表示有序列表里面的li表示列表的每一项前面默认使用阿拉伯数字。ul表示无序列表其中li表示列表的每一项前面使用●符号作为每一项的标记。定义列表中使用dl,其中dt表示术语dd表示描述一般情况下么个dt搭配一个dd,一个dl可以包含多对dt和dd.
