html常用标签2

最新推荐文章于 2023-02-24 23:36:57 发布

Luuuzi

最新推荐文章于 2023-02-24 23:36:57 发布

阅读量526

点赞数

分类专栏： web 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_36366618/article/details/119938952

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

1、文字列表标记
2、表格标签

1、文字列表标记

HTML语言中提供了文字列表标签,文字列表标签可以将文字以列表的形式依次排列。这种形式可以更加方便网页的访问者。HTML中的列表标签主要有无序的列表和有序的列表两种

ul是英语 “unordered list” 无序列表的缩写
ol是英语 “orderd list” 有序列表的缩写
ol和ul除了语义不一样，使用都是一样的
li是英语 “list item” 列表项的缩写
ol里面只能有li，li必须被ol包裹，li是容器级.
ol用的不多

1、无序列表

无序列表是在每个列表项的前面添加一个圆点符号。通过符号< ul>可以创建一组无序列表,其中每个列表项以< li>表示。
无序列表，用来表示一个列表的定义，并且每个项目和每个项目之间，是不分先后的
ul是英语"unordered list"无序列表的缩写

    <ul>
		<li>北京</li>
		<li>上海</li>
		<li>深圳</li>
		<li>广州</li>
	</ul>

li标签不能单独存在，必须存在ul标签中，且ul只能包含li，不能包含其他的，li是一个容器级的标签，里面可以放任何东西

2、有序列表

有序列表和无序列表的区别是,使用有序列表标记可以将列表项进行排号。有序列表的标记< ol>,每一个列表项前使用< li>。有序列表中的项目是有一定顺序的。下面对例24进行修改,使用有
序列表进行排序

<h3>中国歌曲排行榜</h3>
	<ol>
		<li>小苹果</li>
		<li>曾经的你</li>
		<li>平凡之路</li>
	</ol>

3、定义列表

定义列表是一个组标签，有三个标签：

dl 表示definition list:定义列表  
dt 表示definition title：定义标题  
dd 表示definition description：定义描述词

表达的语义是两层：
首先是一个列表，列出了北京，上海，广州
每个词都有描述项
dd是描述dt的
定义列表非常灵活，可以一个dt配多个dd
也可以一个dl只包含一个dt，把多个dt分开来，显示更直观
dt、dd都是容器级标签
用什么标签，不是根据样子来决定，而是语义
应用：一般网站的最底下都是用的定义列表
举例

<html>

<body>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

效果

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

4、下拉框

< select标记可以在页面中创建下拉列表框,此时的下拉列表框是一个空的列表,要使用< option>标记向列表中添加内容。< select>标记的语法格式如下

<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
</select>

属性说明

name：用于指定列表框的名称
size：用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看
disabled：用于指定当前列表框不可使用(变成灰色)
multiple：用于让多行列表框支持多选

<p>
				<!-- 下拉列表框 -->
				请选择您的籍贯：
				<select name="select">
					<option>北京</option>
					<option>河北</option>
					<option>广东</option>
					<option>江西</option>
				</select>

		&nbsp;多行列表框(不可多选):
		<select name="select2" size="2">
			<option>数码相机区</option>
			<option>摄影器材</option>
			<option>mp3/mp4/mp5</option>
			<option>u盘/移动硬盘</option>
		</select>
		&nbsp; 多行列表框(可多选，按住shift)
		<select name="select3" size="3" multiple>
			<option>数码相机区</option>
			<option>摄影器材</option>
			<option>mp3/mp4/mp5</option>
			<option>u盘/移动硬盘</option>
		</select>
			</p>

效果图

2、表格标签

表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在HTML语言中,表格标签使用符号< table>表示。定义表格仅使用< table>是不够的,还需要定义表格中的行
列、标题等内容。在HTML页面中定义表格,需要学会以下几个标记。

表格标签< table>：< table>…< /table>标签表示整个表格。< table>标记中有很多属性,例如 width属性用来设置表格的宽度, border属性用来设置表格的边框, align属性用来设置表格的对齐方式, bgcolor属性用来设置表格的背景色等。
标题标签< caption>:标题标签以< caption>开头,以< /caption>结束,标题标签也有一些属性,例如lign、 valign等。
表头标签< th>:表头标签以< th>开头,以< /th>结束,也可以通过 align、 background、 colspan、 valign等属性来设置表头
表格行标签< tr>:
表格行标签以< tr>开头,以< /tr>结束,一组标记表示表格中的一行。标记要嵌套在< table>
标签中使用,该标签也具有 align、 background等属性。
单元格标签< td>:
单元格标签< td>又称为列标签,一个< tr>标记中可以嵌套若干个< td>标签。该标签也具有 align、background、 valign等属性。

<!DOCTYPE html>
<html>
<head>
	<title>表格标签</title>
</head>
<body>
	<table width="318" height="167" border="1" align="center">
		<caption>学生成绩单</caption>
		<tr>
			<td align="center" valign="middle">姓名</td>
			<td align="center" valign="middle">语文</td>
			<td align="center" valign="middle">数学</td>
			<td align="center" valign="middle">英语</td>
		</tr>
		<tr>
			<td align="center" valign="middle">小米</td>
			<td align="center" valign="middle">88</td>
			<td align="center" valign="middle">95</td>
			<td align="center" valign="middle">96</td>
		</tr>
		<tr>
			<td align="center" valign="middle">小红</td>
			<td align="center" valign="middle">98</td>
			<td align="center" valign="middle">85</td>
			<td align="center" valign="middle">96</td>
		</tr>
		<tr>
			<td align="center" valign="middle">小蓝</td>
			<td align="center" valign="middle">90</td>
			<td align="center" valign="middle">88</td>
			<td align="center" valign="middle">91</td>
		</tr>
	</table>
</body>
</html>