前端学习记录2-HTML
绝对路径与相对路径
相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。
因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。出发点为html位置问题 意思就是 html文件存放 和 对应使用元素存放位置相对考量
图片存放在images中
同级路径:在同一级目录中(一个文件夹) 直接写文件名
下一级路径: 假设 首页.html 和 图片文件夹images 在同级文件夹下 在html中使用 images下的 风景.jpg 这张图片
要使用 / 来调用上一级路径: 假设 首页.html在 page文件夹中 而 images文件和page 文件同级 那么此时就要使用 …/来返回
上级目录中来寻找images文件中的内容以此类推 再往上走 需要 …/…/来寻找
绝对路径: 包括文件的具体地址 以及网络地址 (云端服务器中存储的网址)
base标签
此标签用法如下图所示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>base标签使用</title>
<!-- base标签在这里类似java中方法的形式 把a标签中 target的默认属性从_self 改成了_blank
此标签通常情况写在头部中 此标签可能只能控制网页跳转
-->
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<a href="https://translate.google.cn/">谷歌翻译</a>
</body>
</html>
锚点定位
锚点定位 意思就是 在一个页面之中 点击一个位置可以跳转到领一个位置
例如： 目录中的某一行叫 告白情书 点击后 跳转到 页面下方的某个位置
这个位置有具体情书的内容 使用方法为
<a href="#指定ID(我爱你)">我爱你</a>
<h1 id="我爱你">山河湖海</h1>
加入这样格式内容后 点击我爱你这个链接后 页面会把山河湖海移动至浏览器窗口显示页面中的顶端
从而达到锚点定位效果 (这里在链接中必须有 # 使用方法不同其他语言类软件)
此标签用法如下图所示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>楚乔传</title>
</head>
<body>
<img src="images/3.jpg" width="2530" height="400">
<h1>楚乔传</h1>
<hr>
中国大陆 67集（TV版）/58集（DVD版）
<p>
《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。
</p>
<h1>剧情简介</h1>
<p>
西魏年间乱世混战，大批平民在战乱中沦为奴隶，命如草芥。
奴籍少女楚乔（赵丽颖饰）被送入人猎场供贵族娱乐射杀，
幸得燕北世子燕洵暗中相救，随后她被带进权倾朝野的门阀宇文家。
目睹兄姐相继惨死，立誓要带妹妹逃出牢笼。楚乔受到开明贵族宇文玥关注，被迫接受严厉训练的同时，更与燕洵结下深厚友谊。
</p>
<hr>
<a href="#No.1">第一集</a>
<a href="#No.2">第二集</a>
<a href="#No.3">第三集</a>
<a href="#No.4">第四集</a>
<a href="page5.html">第五集(点击后跳转到下个页面)</a>
<h1 id="No.1">第1集(分集以TV版为准)</h1>
<p>
摇摇晃晃的囚车上，一名少女正在闭目沉睡。
</p>
<h1 id="No.2">第2集</h1>
<P>
楚乔伤病还未痊愈，便被宋大娘遣来干活。
</P>
<h1 id="No.3">第3集</h1>
<p>
青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。
</p>
<h1 id="No.4">第4集</h1>
<p>
宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。
</p>
</body>
</html>
pre文本预格式化标签
直接显示编辑器内的内容包括TAB和空格 不常用因为不好控制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>预格式化文本标签</title>
</head>
<body>
<!-- 直接显示编辑器内的内容包括TAB和空格 不常用因为不好控制 -->
<pre>
我爱你，
山河湖海，
日月星辰。
</pre>
</body>
</html>
表格
table标签
表格：用来展示数据、让数据显示整齐规范
目前不使用表格来布局， 现在作为显示、展示表格式数据
（在大量数据时 使用此方法，例如股票行情板 有大量的数据需要表示这时使用表格）
主要的点在于表达数据 而不是布局框架
table 创建的只是单纯的表格框架 也就是一个空白方块
| 属性 | 具体含义 |
|---|---|
| cellspacing | 单元格与单元格间距 (外边距)，默认值 2 |
| cellpadding | 单元格内容与单元格边框距离(内边距) ， 默认值 1 |
| border | 表格边框，默认值 0 |
| width | 宽 |
| align | 对齐方式 left center right |
table标签下 tr(行) td(单元格) th(表头单元格)
表格标签的语法 table 下 为 tr（行标签）
tr下为 td(表格数据 一个单元格的数据内容)
表头单元格th 效果上为文本加粗居中 与td标签相同 表现形式不同 一般用于第一行或第一列
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>table标签</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="65" width="500" height="200" align="center">
<!-- 一行中三个单元格 表示 -->
<tr>
<!-- 一个td只表示一个单元格 -->
<th>成绩表</th>
<th>英语</th>
<th>数学</th>
</tr>
<!-- 第二行中三组数据 -->
<tr>
<th>儿子</th>
<td>A</td>
<td>C</td>
</tr>
<tr>
<th>姑娘</th>
<td>S</td>
<td>S</td>
</tr>
</table>
</body>
</html>
| 成绩表 | 英语 | 数学 |
|---|---|---|
| 儿子 | A | C |
| 姑娘 | S | S |
table标签下 caption(表格标题)
表格标题caption 这个标签存在的意义主要是解决 假设我定义了h1 但是 h1本质上跟table之间没有任何关系
caption可以很好的解决这个问题 caption使用后 标题会剧中显示在表格上 caption写在table中
表格去哪这个标题caption里内容就去哪 并且默认为居中显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>table标签</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="65" width="500" height="200" align="center">
<!-- 一行中三个单元格 表示 -->
<caption>成绩统计表</caption>
<!-- 一行中三个单元格 表示 -->
<tr>
<!-- 一个td只表示一个单元格 -->
<th>成绩表</th>
<th>英语</th>
<th>数学</th>
</tr>
<!-- 第二行中三组数据 -->
<tr>
<th>儿子</th>
<td>A</td>
<td>C</td>
</tr>
<tr>
<th>姑娘</th>
<td>S</td>
<td>S</td>
</tr>
</table>
</body>
</html>
table标签下的单元格合并 rowspan & colspan
跨行合并 指的是上下两个不同行中的单元格内容合并 使用 rowspan 跨列合并 指的是同级的在一行中的单元格内容合并 使用
clospan 合并顺序为 先上后下 先左后右
rowspan的主要表现形式就是 以目标单元格为基础 向下 合并 rowspan=“数值” 数值表示为合并多少个单元格 colspan
同理 是从左往右合并
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<!-- 具体合并方法 -->
<!-- rowspan的主要表现形式就是 以目标单元格为基础 向下 合并 rowspan="数值" 数值表示为合并多少个单元格
colspan 同理 是从左往右合并
-->
<table border="1" cellspacing="0" width="700" height="400" align="center">
<caption><h3>个人简历</h3></caption>
<tr>
<td align="center">
<strong>姓名:</strong> 老孙
</td>
<td align="center">
<strong>性别:</strong> 男
</td>
<td align="center">
<strong>年龄:</strong> 23
</td>
<!-- 目标单元格 -->
<td align="center" rowspan="2">照片</td>
</tr>
<tr>
<td align="center">
<strong>身高:</strong> 183
</td>
<td align="center">
<strong>民族:</strong> 汉
</td>
<td align="center">
<strong>婚姻:</strong> 未婚
</td>
<!-- 删除多余单元格 -->
<!-- <td align="center">照片</td> -->
</tr>
<tr>
<th align="center">个人简介</th>
<td align="center" colspan="3"></td>
<!-- <td align="center">个人简介</td>
<td align="center">个人简介</td> -->
</tr>
<tr>
<th align="center">个人做品</th>
<td align="center" colspan="3"></td>
<!-- <td align="center">个人做品</td>
<td align="center">个人做品</td> -->
</tr>
</table>
</body>
</html>
| 姓名: 老孙 | 性别: 男 | 年龄: 23 | 照片 |
| 身高: 183 | 民族: 汉 | 婚姻: 未婚 | |
| 个人简介 | |||
|---|---|---|---|
| 个人做品 | |||
表格的结构划分 thead tbody tfoot
表格可以如同html一样 划分为 head body foot 使用方法为 使用thead tbody tfoot 在table中使用
thead 中必须有tr tfoot不常使用
假设你不划分 这表中默认的所有内容都在tbody中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格结构划分</title>
</head>
<body>
<!-- 表格可以如同html一样 划分为 head body foot
使用方法为 使用thead tbody tfoot 在table中使用
thead 中必须有tr tfoot不常使用
-->
<table border="1" cellspacing="0" width="500" height="100" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>刘若英</td>
<td>女</td>
<td>35</td>
</tr>
<tr>
<td>刘晓庆</td>
<td>女</td>
<td>65</td>
</tr>
<tr>
<td>刘三姐</td>
<td>女</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>信息地址</td>
<td colspan="2">北京市演唱会</td>
</tr>
</tfoot>
</table>
</body>
</html>
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 刘德华 | 男 | 55 |
| 刘若英 | 女 | 35 |
| 刘晓庆 | 女 | 65 |
| 刘三姐 | 女 | 15 |
| 信息地址 | 天安门演唱会 | |