当前位置:首页 > 实用技巧 >

html列表怎么并排(html怎么让两个内容并排)

来源:原点资讯(www.yd166.com)时间:2023-04-28 17:42:05作者:YD166手机阅读>>

实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。

根目录 当前目录

路径可以分为: 相对路径和绝对路径


相对路径

以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="logo.gif" /。
  2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如img src="img/img01/logo.gif" /。
  1. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如img src="../logo.gif" /。

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的

“D:webimglogo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/l...”。


总结今天的思路贯穿线

html列表怎么并排,html怎么让两个内容并排(5)


列表标签无序列表 ul (重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

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

注意:

  1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
  1. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

有序列表 ol (了解)

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

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

所有特性基本与ul 一致。

但是实际工作中, 较少用 ol img src="media/1.jpg" />


自定义列表(理解)

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

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


表格 table(会使用)创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

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

在上面的语法中包含三对HTML标签,分别为 table</table、tr</tr、td</td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体的解释
1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。


注意:

1. <tr></tr>中只能嵌套<td></td> 2. <td></td>标签,他就像一个容器,可以容纳所有的元素


表格属性

html列表怎么并排,html怎么让两个内容并排(6)


表头标签

表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签th</th替代相应的单元格标签td</td即可。

html列表怎么并排,html怎么让两个内容并排(7)


表格结构(了解)

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示:

<thead></thead>:用于定义表格的头部。

必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。

<tbody></tbody>:用于定义表格的主体。

位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。


表格标题

表格的标题: caption
定义和用法

caption 元素定义表格标题。

<table> <caption>我是表格标题</caption> </table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。


合并单元格(难点)

跨行合并:rowspan 跨列合并:colspan

合并单元格的思想:

将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。 公式: 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左


总结表格
  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  1. 表格中没有列元素,列的个数取决于行的单元格个数。
  2. 表格不要纠结于外观,那是CSS 的作用。

表格的学习要求: 能手写表格结构,并且能合并单元格。


表单标签(掌握)

表单控件:

包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。


input 控件(重点)

在上面的语法中,input /标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,input /标签还可以定义很多其他的属性,其常用属性如下表所示。

html列表怎么并排,html怎么让两个内容并排(8)

栏目热文

html如何将文字并排(html中怎样让文字并排)

html如何将文字并排(html中怎样让文字并排)

Html的主体结构标签的分类标签的关系sublime快捷键单标签双标签路径超链接额外知识运用锚点空连接超链接的优化写法 ...

2023-04-28 17:48:23查看全文 >>

html怎么把文字并排(html怎么让同一行字左右分开)

html怎么把文字并排(html怎么让同一行字左右分开)

如有下面的中英文是交错排版的:需要调整为并排排版,效果如下:首先将交错排版的文本复制到Excel,如下:编写VBA代码,...

2023-04-28 17:50:02查看全文 >>

html中怎么把文字写在同一排(html怎么两排文字变一排)

html中怎么把文字写在同一排(html怎么两排文字变一排)

现在这个社会最害怕的是什么,无非是纸上谈兵这样的人,你对问题的见解,你对事情的看法都有很多独到的解释,但是真正地让你带...

2023-04-28 18:02:58查看全文 >>

html怎么把文字放在最下边(html怎么把字体放到最右边)

html怎么把文字放在最下边(html怎么把字体放到最右边)

1、 结构一、标记<Html> 建立HTML文档<Head> 设置网页头部和其它信息<Bo...

2023-04-28 17:59:35查看全文 >>

html中将文字放在左右两边(html怎么把字放在最中间)

html中将文字放在左右两边(html怎么把字放在最中间)

使用场景:接到任务,需要在WEB ERP系统上,实现一个核对平台与ERP订单数量的问题,大概的结构是,左边是显示ERP订...

2023-04-28 18:14:48查看全文 >>

html怎么把文字放在最右边(html怎么把文字放在图像右边)

html怎么把文字放在最右边(html怎么把文字放在图像右边)

最近遇到了一个效果:实现个数不等的中文对齐或等宽,于是整理了一下,包括自己搜索到的以及同事提供的方法。实现方法如下所示:...

2023-04-28 18:04:00查看全文 >>

html怎么把文字放最下面(html怎么把字放在最中间)

html怎么把文字放最下面(html怎么把字放在最中间)

HTML5学堂(码匠):在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方...

2023-04-28 18:21:28查看全文 >>

html怎么让字在同一行(html怎么让在下一行的字靠在一起)

html怎么让字在同一行(html怎么让在下一行的字靠在一起)

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度、行高及外边距和内...

2023-04-28 17:43:18查看全文 >>

html如何将列表并排(html列表展开与收缩怎么弄)

html如何将列表并排(html列表展开与收缩怎么弄)

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高...

2023-04-28 18:24:09查看全文 >>

html怎样增加一行(html怎么设置只显示一行)

html怎样增加一行(html怎么设置只显示一行)

代码没有特殊需求,第一列使用bootstrap的符号。删除:class为delectitem添加:class为plusi...

2023-04-28 17:58:29查看全文 >>

文档排行