首页 > 其他分享> > HTML学习笔记【3】

HTML学习笔记【3】

2021-06-17 13:33:54 作者：互联网

3 HTML标签

3.15 无语义的块标签&行内标签

div【无语义的块标签】

span【无语义的行内标签】

3.16 表格

	<table border="" cellspacing="" cellpadding=""> 
		<tr><th>Header</th></tr>
		<tr><td>Data</td></tr>
	</table>

table 【表格标签】：声明表格

border 【边框粗细】：默认值是0，即未设置时看不见边框；在不为0时，可以让单元格也有边框，但是这个值本身并不能改变单元格边框的粗细（单元格只有0到1的变化）
bordercolor 【边框颜色】：包括最外框和内框
align【对齐】：指的是表格整体在页面中的位置
width/height【表格宽/高】：在未设置宽高时，没有内容的单元格会压缩成一条线，但设置了宽高之后，就会保证最低有宽高值；
cellpadding【内容边距】：设置单元格内容与单元格边框之间的距离，默认值是0（默认到左部边的距离是0）
cellspacing【单元格边距】：单元格之间的间距，默认值是2，但最常用的值是0，单元格与边框叠加，转化成了日常生活中常用的表格
caption【标题】：必须紧贴table标签上方

th 【表头】：替换td【单元格】位置

tr 【表格行】

bgcolor【背景颜色】：局部优先，默认继承父级（table标签）
align【水平对齐方式】：left/center/right
valign【垂直对齐方式】：top/middle/bottom

td 【表格列】

bgcolor【背景颜色】：局部优先，默认继承父级（tr标签）
width/height【单元格宽/高】
- 优先满足此格设置的宽高，水平方向：其余的格子平分剩余的距离尺寸；竖直方向：随此单元格设置的高度变化
- 如果在单个tr内的单元格设置总和超过了表格大小，则不会溢出表格；如果在两个及以上的tr中设置的宽高，则自动扩充表格
- 行高默认看行内最高单元格的高度，但如果经过了设置，就随设置的值
align【水平对齐方式】：left/center/right
valign【垂直对齐方式】：top/middle/bottom
rowspan【合并行】
colspan【合并列】

【实例】

	<html>

		<body>

			<h4>横跨两列的单元格：</h4>
			<table border="1">
				<tr>
					<th>姓名</th>
					<th colspan="2">电话</th>
				</tr>
				<tr>
					<td>Bill Gates</td>
					<td>555 77 854</td>
					<td>555 77 855</td>
				</tr>
			</table>

			<h4>横跨两行的单元格：</h4>
			<table border="1">
				<tr>
					<th>姓名</th>
					<td>Bill Gates</td>
				</tr>
				<tr>
					<th rowspan="2">电话</th>
					<td>555 77 854</td>
				</tr>
				<tr>
					<td>555 77 855</td>
				</tr>
			</table>

		</body>
	</html>

3.17 列表

3.17.1 无序列表

无序列表是一个项目的列表，此列项目默认使用粗体圆点disk（典型的小黑圆圈）进行标记。
除了disk之外，还有circle/square 空心圆/小方块
然而最重要的是把前面的标记删除，用type="none"
无序列表始于 <ul> 标签。每个列表项始于 <li>。
【实例】

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

（列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。）

3.17.2 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
1. 标签。
2. 标记同样可改：1,2,3.. or a,b,c.. or A,B,C..
3. type="1"可以【改标记样式】，这里用1 2 3计数
4. start【开始位置】：用2表示从2开始，字母按照数字顺延，即要从c开始，start="3"

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

1. Coffee
2. Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3.17.3 定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
	<dt>Coffee</dt>
	<dd>Black hot drink</dd>
	<dt>Milk</dt>
	<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee
	Black hot drink
Milk
	White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

标签：表格,标签,单元格,笔记,列表,学习,HTML,边框,Milk
来源： https://www.cnblogs.com/buhuizhuzhou/p/14893059.html