当前位置:首页 > 技术 >

html一个标签怎么设置(html怎么打出多个标签)

来源:原点资讯(www.yd166.com)时间:2023-04-16 23:46:54作者:YD166手机阅读>>

经过昨天的学习算是对html有了一点点了解,知道了什么是前端,什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符(了解即可)

有常见性就有特殊性,我们使用电脑时经常会用到空格键,在html文档上有时也会使用到空格键等等,那怎么在html上又是以什么形式展示给浏览器解析呢?

浏览器显示结果

特殊字符名称

HTML编辑字符

空格

& n b s p;

<

小于号

& l t ;

>

大于号

& g t;

&

& a m p;

©

版权

& c o p y ;

表格标签

作用:在浏览器上清晰美观地显示、展示数据。

表格标签的语法

<table>

<tr>

<td></td>

</tr>

</table>

表格标签:<table></table>,一个table标签中可嵌套多个tr标签。

行标签:<tr></tr>,一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签:<td></td>,一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列,而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子,里面包含tr标签,这个是一个和table长度差不多的矩形盒子,table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子,td盒子就是单元格。

表格示例:

在html文档中编辑表格标签结构时,除了一个标签一个标签地敲之外,可以使用快捷方式快速操作:如五行三列的表格,可以在table标签中输入:“tr*5>td*3”然后敲回车,就将其表格结构迅速展现出来。

<h1>表格示例:</h1> <table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三丰</td> <td>男</td> <td>27</td> </tr> <tr> <td>李四喜</td> <td>女</td> <td>18</td> </tr> <tr> <td>王五通</td> <td>男</td> <td>35</td> </tr> <tr> <td>秦六夏</td> <td>女</td> <td>30</td> </tr> </table>

运行界面示例:默认状态下表格是没有线条分界,表格对齐方式左对齐。

html一个标签怎么设置,html怎么打出多个标签(1)

表头单元格标签

<th></th>:位于表格的第一行或第一列,可以使其内容加粗居中显示。

语法:

<table>

<th>

<td></td>

</th>

</table>

表头表格代码示例:

<h1>表头表格示例:</h1> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三丰</td> <td>男</td> <td>27</td> </tr> <tr> <td>李四喜</td> <td>女</td> <td>18</td> </tr> <tr> <td>王五通</td> <td>男</td> <td>35</td> </tr> <tr> <td>秦六夏</td> <td>女</td> <td>30</td> </tr> </table>

运行界面示例:

html一个标签怎么设置,html怎么打出多个标签(2)

表格结构标签

表格结构标签分为表格头部标签表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签:<thead></thead>。定义表格头部,嵌套在<table></table>中,一般位于第一行。

表格主体标签:<tbody></tbody>。定义表格主体,嵌套在<table></table>中,主要用于显示数据。

代码示例:

<h1>表格结构标签</h1> <table border="1" width="300px" height="150px" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三丰</td> <td>男</td> <td>36</td> </tr> <tr> <td>李四喜</td> <td>女</td> <td>30</td> </tr> </tbody> </table>

运行界面:

html一个标签怎么设置,html怎么打出多个标签(3)

表格属性

虽然表格属性在实际开发过程中不常使用,一般都是通过css样式设置,但是还是需要记住这些属性关键词,在css中属性关键词也会用到。

注:这些属性都要写在table标签的开始标签中,多个属性之间需要使用空格分隔。

align:表格的对其方式。

align=“left”:在浏览器中居左显示。也是默认显示。

align=“center”:在浏览器中居中显示。

align=“right”:在浏览器中居右显示。

border:表格是否具有边框。

border=”1”:表格添加边框。

cellpadding:单元格内的元素和td边框的距离。

举个例子,如果表格是一件教室的话,桌子就是单元格,桌子上放的书本就是单元格内的元素,书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing:单元格和单元格之间的距离。默认是有空隙的,可设置为零,使其空隙清零,成为一条直线。

还是以教室为表格,桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width:表格的宽度,属性值可以是像素值也可以是百分比。

height:表格的高度,属性值可以是像素值也可以是百分比。

代码示例:

<h1>表头表格示例:</h1> <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>张三丰</td> <td>男</td> <td>27</td> </tr> <tr> <td>李四喜</td> <td>女</td> <td>18</td> </tr> <tr> <td>王五通</td> <td>男</td> <td>35</td> </tr> <tr> <td>秦六夏</td> <td>女</td> <td>30</td> </tr> </table>

运行界面:

html一个标签怎么设置,html怎么打出多个标签(4)

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后,要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格:(合并代码存在位置)

跨行合并:最上侧单元格为目标单元格,写合并代码。

跨列合并:最左侧单元格为目标单元格,写合并代码。

合并单元格的方式:

跨行合并:将处于不同行的单元格进行合并

语法:rowspan=“合并单元格个数”

代码示例:

<h1>跨行合并表格:</h1> <table border="1" width="300px" height="150px" cellspacing="0"> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

运行界面:

html一个标签怎么设置,html怎么打出多个标签(5)

跨列合并:将处于不同列的单元格进行合并

语法:colspan=“合并单元格个数”

代码示例:

<h1>跨列合并表格:</h1> <table border="1" width="300px" height="150px" cellspacing="0"> <tr> <td colspan="2"></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

运行示例:

html一个标签怎么设置,html怎么打出多个标签(6)

今天学习的表格内容就到这里了,明天开始学习列表。

栏目热文

html如何加入meta标签(html的a标签的target怎么用)

html如何加入meta标签(html的a标签的target怎么用)

meta标签介绍meta标签是HTML语言head区域的一个辅助性标签,常用于定义页面的说明,关键字,最后修改的日期和其...

2023-04-16 23:42:18查看全文 >>

html target标签的使用(html标签正确使用方法)

html target标签的使用(html标签正确使用方法)

实例在新窗口中打开所有超链接,并放置上述所有其他标签/窗口的新窗口:a{target:new front;}浏览器支持任...

2023-04-16 23:38:32查看全文 >>

html中target属性(html中target加在哪)

html中target属性(html中target加在哪)

需求场景客户希望实现这样一个场景:点击一个超链接,使用新窗口打开链接页面。但是当链接窗口已经被打开时,这是就不能弹新窗口...

2023-04-16 23:29:42查看全文 >>

html怎么给标签添加说明(如何为html添加标签)

html怎么给标签添加说明(如何为html添加标签)

一、meta标签的作用meta标签是下面这样的,它有两个主要作用:作用1:告诉浏览器以什么样的解码方式读取作用2:给搜索...

2023-04-16 23:30:46查看全文 >>

破冰船有什么利弊(破冰船跟普通船有什么区别)

破冰船有什么利弊(破冰船跟普通船有什么区别)

一个国家的地缘位置是由自然地理因素和国际地缘政治因素两方面共同组成的。考察一个国家的地缘环境需要分析其自然地理环境,但一...

2023-04-16 23:13:44查看全文 >>

html中target属性的用途(htmltarget属性是什么意思)

html中target属性的用途(htmltarget属性是什么意思)

HTML元素的属性属性是为HTML元素提供的附加信息。为相同的HTML元素指定不同的属性,会呈现不同的功能或效果。举个例...

2023-04-16 23:37:11查看全文 >>

html如何获得标签(html怎么打出多个标签)

html如何获得标签(html怎么打出多个标签)

上篇文章我们介绍了怎么创建一个最基本的网页,这篇我们介绍一下经常被使用的标签及用途。显示在浏览器中的内容都要添加在基本模...

2023-04-16 23:10:28查看全文 >>

html中的target是干什么的(html target属性的使用)

html中的target是干什么的(html target属性的使用)

在HTML页面中嵌入其他页面的方法在自己的页面中嵌入其他页面是一个非常重要的操作,既能丰富自己的页面样式又能增强页面的信...

2023-04-16 23:47:48查看全文 >>

html中加入p标签会怎么样(html设置位置的标签有哪些)

html中加入p标签会怎么样(html设置位置的标签有哪些)

HTML标签规范尽管目前浏览器都兼容HTML,但是,使网页能够符合标准,应该尽量使用XHTML规范来编写代码,需要注意以...

2023-04-16 23:21:58查看全文 >>

辽宁十大臭名职业大专(辽宁最坑5所大学)

辽宁十大臭名职业大专(辽宁最坑5所大学)

北京时间4月14日,恒大球员于汉超因涂改车牌被广州交警处以5000元罚款 15日拘留 驾驶证扣除12分的处罚,而广州恒大...

2023-04-16 23:25:35查看全文 >>

文档排行