文本格式化标签
学习目标
常用的文本格式化标签
| 标签 | 描述 |
|---|---|
<b>...</b> |
加粗标签 |
<i>...</i> |
斜体标签 |
<u>...</u> |
下划线标签 |
<del>...</del> |
删除线标签 |
<sub>...</sub> |
下标标签 |
<sup></sup> |
上标标签 |
<br/> |
换行标签 |
<hr/> |
分割线标签 |
代码：
<!DOCTYPE html>
<html>
<head>
<title>文本格式化标签</title>
<meta charset="utf-8">
</head>
<body>
<i>斜体</i>
<br/>
<b>加粗</b>
<u>下划线</u>
<del>删除线</del>
<hr/>
H<sub>2</sub>O
2<sup>2</sup>=4
<p>
段落标签
</p>
</body>
</html>
课程总结
HTML超链接标签
学习目标
超链接介绍
HTML 链接是通过标签 <a></a> 来定义的。HTML 使用超级链接与网络上的另一个文档相连。
超链接语法
超链接的语法：
<a href="" target=""> 文本或图像 </a>
属性的作用如下
| 属性 | 作用 |
|---|---|
| href | 跳转目标 |
| target | 目标窗口的弹出方式 _self表示默认值 _blank表示新窗口 |
超链接的使用方法
超链接使用herf属性访问百度，并以新窗口的模式打开，表明超链接上下链接关系。
<!DOCTYPE html>
<html>
<head>
<title>a超链接</title>
<meta charset="utf-8">
</head>
<body>
<!--网址的跳转-->
<a href="https://www.baidu.com/">点击去百度</a>
<!--窗口的打开方式-->
<a href="https://www.baidu.com/" target="_blank">点击去百度</a>
</body>
</html>
超链接name属性，和id属性效果的演示（注：HTML5不再支持）。
<!DOCTYPE html>
<html>
<head>
<title>a超链接</title>
<meta charset="utf-8">
</head>
<body>
<a name="top"></a>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#top">回到顶部</a>
</body>
</html>
超链接分类
外部链接: 例如
<a href="https://www.baidu.com">百度</a>。内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可，例如
< a href="index.html"> 首页 </a >。空链接: 如果当时没有确定链接目标时，
< a href="#"> 首页 </a >。下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
课程总结
绝对路径和相对路径
学习目标
绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”
或者完整的网络地址https://img.meituan.net/phoenix/d681fd63f884f6f5fd9fd5493e65f86c4428480.jpg
相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，HTML页面相对于 HTML 页面的位置
| 相对路径 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | ./或省略./ | 文件位于同一级，<a href="login.html"></a>
|
| 下一级路径 | / | 文件位于下一级，<a href="html/login.html"></a>
|
| 上一级路径 | ../ | 文件位于上一级，<a href="../login.html"></a>
|
| 上上级路径 | ../../ | 文件位于上上级，<a href="../../login.html"></a>
|
课程总结
HTML图像标签
学习目标
HTML 图像标签介绍
img 元素向网页中嵌入一幅图像，注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。
图像标签的语法
图像标签的语法：
<img src="./img.jpg" alt="Logo" width="300px" height="300px" title="logo">
src属性：规定显示图像的 URL也就是路径地址。
alt属性：规定图像的替代文本在图像不能加载的时候替代的文字。
width属性：设置图像的宽度。
height属性：设置图像的高度。
title属性：鼠标移动到图片上的提示信息。
图像标签的使用方法
在网页中引入logo并设置宽度高度和替换文字。
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./img.jpg" alt="Logo" width="200px" height="100px">
</body>
</html>
src和href的区别
src需要等待图片加载完成，在继续加载其他内容。
href可以一边加载文件，一边加载其他内容。
注：面试易考点。
div标签包裹img标签多出3px问题
在我们使用div标签包裹img标签的时候，在图片的底部就会多出3px。 原因：img元素会默认添加空白符 解决办法：
1.设置div{ font-size: 0}
2.设置img{ display: block}或者{ display: table}
3.设置img{ vertical-align:top;}
推荐第二种方法，让img对象成为块级元素。
课程总结
HTML表格标签
学习目标
表格标签的语法
表格的属性和描述
| 属性 | 描述 |
|---|---|
| th属性 | 元素定义表头 |
| tr属性 | 元素定义表格行 |
| td属性 | 元素定义表格列 |
| width属性 | 设置表格宽度 |
| height属性 | 设置表格高度 |
| border | 设置表格线的宽度 |
| bordercolor属性 | 设置表格边框颜色 |
| bgcolor属性 | 设置表格的背景颜色 |
| align/valign属性 | 设置表格对齐方式 |
| cellspacing属性 | 设置单元格间距 |
| cellpadding属性 | 设置单元格行距 |
| colspan属性 | 表示该单元格向右跨越的列数 |
| rowspan属性 | 表示该单元格向下跨越的列数 |
表格标签的使用方法
在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素。
<!DOCTYPE html>
<html>
<head>
<title>图像标签</title>
<meta charset="utf-8">
</head>
<body>
<img src="./img.jpg" alt="Logo" width="200px" height="100px">
</body>
</html>
表格合并演示：
<table border="1" cellspacing="0" cellpadding="0" width="400" height="400" align="center">
<caption>
<h1>表格合并</h1>
</caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
课程总结
