HTML标签培训
HTML标签
注释：在VSCODE里面输入一个!,然后回车，会自动生成HTML结构
0. 网页设计时的相对路径和绝对路径
绝对路径:绝对路径是指一个完整的路径，例如：D:\wamp64\www\index.html|http://localhost/index.html
相对路径:相对于当前文件的路径，常见路径如下：
同一目录 ./
子目录 ./目录名
父目录 ../
根目录 /
实例：
<h1>Index</h1>
<a href="./pages/demo.html">demo</a>
<img src="./media/logo.png" alt="">
<video src="./media/chapter_00.mp4" width="100%" height="300px"></video>
1. HTML网页的构成
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML结构解释
网页的头(head)：
属性：
+ 设置网页关键字和描述
+ 设置字符编码
+ 设置浏览器兼容
设置网页名称： title标签
引入样式：link标签
设置样式：style标签网页的身体（body）：
是网页的主体显示部分，所有的标签元素应该都写在这里，在body的底引入script脚本
HTML注意事项
+ 所有的html标签小写
+ link引入的样式文件和style样式设置放置到head里，script引入的脚本文件放到body的最后一行
2. HTML标签
2.1 文本标签
- 内容标题：
h1-h6六级标题，数字越大字越小 - 文本修饰：
b i s u sup sub
2.2 文档结构标签
- 段落标签 p
- 换行标签 br
- 水平线标签 hr
2.3 列表元素标签
- 有序列表 使用ol标签
<ol start="起始值" type="类型：A/I/a/1">
<li>Li1</li>
<li>Li2</li>
<li>Li3</li>
</ol>
无序列表 使用ul标签
<ul type="circle（圆）、disc（点）、square（方块）、none">
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
2.4 文本标签
- span和div标签，默认span标签属于行内块不分行，div标签分行,块级元素
<span>这是一个span</span>
<div>这是一个div</div>
2.5 img标签
- 用于引入图像：
src属性：设置图片的路径
alt属性：当图片不存在时，显示的文本内容
title属性：当鼠标悬停时显示的文本
<img src="./media/logo.png" alt="VUE LOGO" title="这是一个logo">
2.6 a标签
- 超链接标签a
href属性：URL地址
target属性：控制点击链接后页面的打开方式
_self：在本窗口中打开，覆盖原页面
_blank：在新的选项卡中打开
_top ：在在本窗口中打开，覆盖原页面
自定义名称：在iframe中打开
<a href="http://www.baidu.com" target="content">百度</a>
<a href="http://www.qq.com" target="content">腾讯</a>
<a href="http://www.baidu.com"><img src="https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png" alt=""></a>
<iframe style="border: 1px solid red;" name="content" id="content" src="" frameborder="0" width="100%" height="100px"></iframe>
- 调用邮件程序
<a href="mailto:123@qq.com">给我写信</a>
- 调用电话程序
<a href="mailto:123@qq.com">给我写信</a>
- 锚链接
<div id="top">顶部</div>
<div style="width: 100%;height: 2000px;background-color: violet;"></div>
<a href="#top">回到顶部</a>
2.7 表格
表格标签的构成：table\tbody\tr\td\th\caption
+ table:最外层表格框架，是后面所有元素的父标签
+ tbody:是表格体，一个table标签可以包含多个tbody
+ tr:用于标识表格的行
+ td/th:用于标识单元格，td代表单元格，th代表表格的头，默认是加粗的
+ caption:表格标题table常见属性
+ cellpadding:设置单元格与其内容之间的距离
+ cellspacing:设置单元格之间的距离tr/th常见属性
+ rowspan:设置单元格跨越的行数
+ colspan:设置单元格跨越的列数
<table class="tb" cellpadding="0" cellspacing="0">
<tbody>
<td style="text-align: center;font-weight: bold;" colspan="5">设备信息表</td>
</tbody>
<tbody>
<tr>
<th colspan="2">设备编号</th>
<th>设备名称</th>
<th>设备价格</th>
<th>出场日期</th>
</tr>
<tr>
<td>2019</td>
<td>001</td>
<td>经纬仪</td>
<td>2000</td>
<td>2019-11-20</td>
</tr>
<tr>
<td>2019</td>
<td>002</td>
<td>全站仪</td>
<td>8000</td>
<td>2019-11-21</td>
</tr>
</tbody>
</table>
注意：tbody和caption可以省略，td也可以做到th的效果
2.8 框架iframe
iframe属性
+ src: 框架显示的网址地址
+ fontborder:框架边框
+ width/height:框架的宽和高
<table class="tb" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a target="content" href="http://www.baidu.com">百度</a></td>
<td><a target="content" href="http://www.qq.com">腾讯</a></td>
<td><a target="content" href="http://www.taobao.com">淘宝</a></td>
</tr>
<tr>
<td colspan="3">
<iframe id="content" name="content" width="500px" height="400px" src="http://www.baidu.com" frameborder="0"></iframe>
</td>
</tr>
</tbody>
</table>
