html什么是列表(html列表类型)

html什么是列表,原文标题:HTML的表格与列表、块及类与ID。今天为大家带来了HTML中的表格与列表、块及类与ID

html什么是列表,原文标题:HTML的表格与列表、块及类与ID。

今天为大家带来了HTML中的表格与列表、块及类与ID的基础知识,首先为大家介绍的是HTML中的表格与列表。

一、HTML中的表格与列表:

相信大家都知道在office、Excel等办公软件中如何制作表格,那大家知道如何在网页上制作表格呢?同时网页上面的注册和登陆表又是怎么制作出来的呢?今天将会为大家详细讲解。

1、表格:

① 了解<table>标签

在网页上的表格制作是用<table>标签来定义的。

② table中的<tr>和<td>标签

l 每个表格有若干行,即用<tr>标签来定义。

l 每行被分割为若干单元格,即用<td>标签来定义。

html什么是列表(html列表类型)

示例图

运行结果:

html什么是列表(html列表类型)

③ 在<table>元素中添加border属性就可以显示边框,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

④ 表单的表格用<th>标签表示,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

2、列表

列表分为无序列表、有序列表和定义列表

① 无序列表

l 无序列表是一个项目的列表,此列表项目使用粗体圆点进行标记。

l 无序列表始于<ul>标签,每个列表始于<li>,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

l 在<ul>标签中使用type属性可以改变列表前面的符号,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

② 有序列表

l 与无序列表不同的是,有序列表使用的是<ol>标签,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

在<ol>标签中添加type属性,可以改变列表前面的符号,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

③ 定义列表

l 定义列表就是自定义列表,是项目及其注释的组合。

l 自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

二、HTML中的块:

1、大多数HTML元素被定义为块级元素或内联元素

① 块级元素在浏览器显示时,通常以新行来开始(和结束),例如:<h1>、<p>、<ul>、<table>等。

② 内联元素在显示时通常不会以新行开始,例如:<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是块级元素,是可以组合其他HTML元素的容器,简单来说<div>元素一般被用在HTML布局上面,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

3、HTML中的<span>元素

HTML<span>元素是内联元素可用作文本的容器,当与css一同使用时,<span>元素可用于为部分文本设置样式属性,示例:

html什么是列表(html列表类型)

运行结果:

html什么是列表(html列表类型)

三、HTML中的CLASS和ID:

在上面的示例中我们有看到id标签,在学习过程中很多人搞不懂class类和id标签的区别,现在开始教大家如何区分class类和id标签。

CLASS:

1、Class就我们口中所说的类

2、在css中引用时以“.”开头,并且可以被多个元素调用,例如:

html什么是列表(html列表类型)

3、在使用中,可以先设置出一个样式,然后被多个元素引用。

ID:

1、id是一种标签

2、在css中引用时以“#”开头,只能定义一个元素,例如:

html什么是列表(html列表类型)

3、在使用时,只能先确定一个元素,然后才能设置其样式,无法被其它元素引用,是唯一的标签。

希望大家能够从这篇文章学习到HTML的部分知识~

本文《html什么是列表(html列表类型)》由网赚联盟( wangzhuan.org.cn )整理或原创,感谢您的阅读。

随机文章

SEO小小课堂网
站长导航
友情链接交换
网站内容优化
SEO小小课堂网
SEO教程
友情链接交换
搜素引擎算法

百度搜索“网赚联盟”即可找到本站,微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟( wangzhuan.org.cn )欢迎用户投稿,发布者:加米谷大数据张衡,文章版权归作者所有,投稿文章不代表网赚联盟立场,中二少年发布为网赚联盟原创文章,转载请注明出处:https://wangzhuan.org.cn/1043509.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注