html学习笔记1_--> html 替代-优快云博客

本文详细介绍了HTML的基本标签，包括段落、标题、换行、水平线、预留格式、字体样式、实体符号和表格的使用。通过实例展示了如何创建和定制表格，如单元格的合并以及thead、tbody、tfoot的使用。此外，还提及了b、i、ins、del等文本修饰标签。

html基本标签

段落标签

p标签就是段落标签

标题字

h是标题标签，标题的大小用h1、h2…区分

如下：

<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>

换行标签

br是换行标签，是一个只有一只眼的标签，没有结尾的符号

水平线标记

hr可以画一条水平线

如下：

<!--水平线，独目标签-->
	<hr>
	
	<!--color是一个属性，用来指定颜色的值-->
	<!--color是属性的名字，red是属性的值-->
	<hr color="red">
	<!--html中的字符串可以使用单引号，也可以使用双引号-->
	<hr color='red'>
	<!--html中的字符串可以使用单引号，也可以使用双引号-->
	<!--html中的语法很松散，不严格，去掉单引号或者双引号也可以-->
	<hr color=green>

预留格式

pre预留格式标签，在html源码上是什么格式，到网页上就是什么格式

其他格式

b标签代表粗体字
i代表斜体字
ins代表插入字
del代表删除字
10<sup>2代表10的平方
m<sub>2代表m₂

font代表字体标签

如下：

<!--font字体标签,color代表颜色，size代表字号-->
<font color=red size=12>hello world！</font>

实体符号

<!--空格-->
<!--&nbsp;这是一个空格，属于实体符号-->
a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc
<br>
<!--小于号-->
<!--&lt;这是小于号-->
<!--&gt;这是大于号-->
b&lt;a&gt;c

表格table

基本表格

tr表示行

td表示列

如下：

<!--3行3列的table-->
<!--border用来设置边框的宽度，1px表示1像素-->
<!--width还可以写成百分比的形式-->
<table border='1px' width='200px' height='200px' align='center'>
	<!--第一行-->
	<tr align='center'>
		<!--第一个单元格-->
		<td>1</td>
		<td>2</td>
		<td>3</td >
	</tr>
	<!--第二行-->
	<tr>
		<!--第一个单元格-->
		<td>1</td>
		<td>2</td>
		<td align='center'>3</td>
	</tr>
	<!--第三行-->
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

单元格的合并

colspan表示列合并

rowspan表示行合并

如下：

<!--单元格的合并-->
<table  border='1px' width='200px' height='100px'>
	<tr>
		<td>1</td>
		<!--colspan表示列合并，合并2个。-->
		<td colspan='2'>xy</td>
		<!--<td>y</td>-->
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<!--rowspan表示行合并，2表示合并两个-->
		<td rowspan='2'>kingford</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<!--<td>ford</td>-->
	</tr>
</table>

表格的th标签

th可以代替td做单元格，th中的内容会自动加粗，会自动居中

thead、tbody、tfoot标签

一个table可以被thead、tbody、tfoot分割成三部分

<!--thead、tbody、tfoot标签-->
<!--一个table可以被thead、tbody、tfoot分割成三部分-->
<!--这个语法主要是为了后期javascript提供方便-->
<table border='1px' width='300px'height='100px'>
	<thead>
		<tr>
			<th>员工编号</th>
			<th>员工姓名</th>
			<th>员工薪资</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>7369</td>
			<td>Smith</td>
			<td>800.0</td>
		</tr>
		<tr>
			<td>7370</td>
			<td>king</td>
			<td>8000.0</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>x</td>
			<td>y</td>
			<td>z</td>
		</tr>
	</tfoot>
</table>