HTML基础

1.HTML简介

HTML ( HyperText Markup Language)：HTML 是用来描述网页的一种语言， 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)，HTML使用标记标签来描述网页，HTML文档也叫做 web 页面。

2.基础标签

(1) 双标签

<a>...</a>超链接
<h1>...</h1>标题字(最大)
<h2>...</h2>标题字
<h3>...</h3>标题字
<h4>...</h4>标题字
<h5>...</h5>标题字
<h6>...</h6>标题字(最小)
<b>...</b>粗体字(文本加粗)
<strong>...</strong>粗体字(有加强强调的意思)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<u>...</u>底线
<font>...</font>字体
<strike>...</strike>横线
<s>...</s>删除线
<ins>...</ins>底部插入文字
<abbr>...</abbr>缩略字
<p>...</p>段落
<center>...</center>置中
<sup>...</sup>上角标
<sub>...</sub>下角标

(2)单标签

<br>换行
<hr>水平线
<input />表单元素标签
<img> 图片
<link />链接到外部资源，外部样式表

3.字符实体

在 HTML 中，有些字符是预留的。比如我们不能使用（<）和(>)，浏览器会误认为它们是标签。要能正确地显示预留字符，必须在使用字符实体。

空格	 
<	&lt;
>	&gt;
&	&amp;
"	&quot;
’	&apos；

4.超链接和锚

(1)超链接

利用文本内容实现超链接的跳转:
<a href="https://vip.iqiyi.com" target="_blank">爱奇艺</a> 新页面跳转
<a href="https://vip.iqiyi.com" target="_self">爱奇艺</a> 本页面跳转
利用图片替代内容实现超链接的跳转:
<a href="https://www.iqiyi.com/v_c7bpxq396w.html" target="_blank"> <img src="img/大秦赋.webp" alt="大秦赋" width="100px" height="150px" title="大秦赋"></a>

(2)锚

锚：设置一个锚点，返回指定位置
<a name="mao"></a>
<a href="#mao">返回顶部</a>

5.表格

(1)表格创建

表格由< table>标签来定义。每个表格均有若干行<tr>,每行被分割为若干单元格<td> ，表格的表头<th>, 大多数浏览器会把表头显示为粗体居中的文本。

属性：
border:设定表格边框大小
cellpadding:单元格与内容之间的间距,默认2个像素
cellspacing:单元格与单元格之间的间距,默认2个像素
align:表格位置
background:背景

<table border="1px" cellspacing="0" align="center"
	   background="img/table2.png" cellpadding="1px" 
	   width="200px" height="150px">
		<tr>
			<th>姓名</th>
			<th>专业</th>
			<th>爱好</th>
		</tr>
		<tr>
			<td>小张</td>
			<td>信管</td>
			<td>跳舞</td>
		</tr>
		<tr>
			<td>小李</td>
			<td>电气</td>
			<td>干饭</td>
		</tr>
		<tr>
			<td>小刘</td>
			<td>智能</td>
			<td>羽毛球</td>
		</tr>
		<tr>
			<td>小杨</td>
			<td>通信</td>
			<td>乒乓球</td>
		</tr>
</table>

(2)表格合并

rowspan:指定表格行合并的行数
colspan:指定表格列合并的列数

示例：回字形

	<table width="200px" height="200px" border="1px" cellspacing="0" >
		<tr>
			<td colspan="2" bgcolor="#FFA500"></td>
			<!-- <td></td> -->
			<td rowspan="2" bgcolor="aqua"></td>
		</tr>
		<tr>
			<td rowspan="2" bgcolor="blue"></td>
			<td></td>
			<!-- <td></td> -->
		</tr>
		<tr>
			<!-- <td></td> -->
			<td colspan="2" bgcolor="chartreuse"></td>
			<!-- <td></td> -->
		</tr>
	</table>