非常全的HTML+CSS+JS学习记录（二：文件路径）

懒回顾，半缘君

已于 2022-01-19 23:54:05 修改

阅读量1k

点赞数

分类专栏：前端文章标签： html css javascript

于 2022-01-19 11:20:11 首次发布

本文链接：https://blog.csdn.net/CSDN_YJX/article/details/122565630

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一天

路径(前期铺垫知识)

(1)目录文件夹和根目录:
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹︰就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
在这里插入图片描述
想快速打开一个目录文件夹，可以直接拖动过去。

相对路径:以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于HTML页面的位置
在这里插入图片描述
下一级路径的写法：

…/是上一级，…/…/是上两级，以此类推……

绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如“D:\web\img\ogo.gif”
（不常用）或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

绝对路径和相对路径的斜杠不一样。

超链接标签(重点)

在这里插入图片描述
代码：

<!DOCTYPE htm1>
<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>超链接标签</title>
</head>
<body>
	<h4>1.外部链接</h4>
	<a href="http: / / www.qq.com" target="_blank">腾讯</a>
	<!--必须带上冒号和反斜杠-->
	target打开窗口的方式―默认的值是_self当前窗口打开页面_blank 新窗口打开页面
	<!可以改变target的值来试试效果>
</body>
</htm1>

内部链接：

<body>
<h4>1.外部链接</h4>
<a href="http: //ww.qq.com" target="_blank">腾讯</a>
<a href="http: //ww.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接:网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html">公司简介</a>
</body>

还得先创建一个HTML文件：
在这里插入图片描述

代码：

锚点链接在标题处是这样的：

锚点链接在目录中是这样的：

注释标签：

在这里插入图片描述
那是反斜杠。

特殊字符

在这里插入图片描述

第二天：创建表格、列表等

表格标签

表格的作用：
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结:表格不是用来布局页面的,而是用来展示数据的.
像这样：
在这里插入图片描述

没有列的概念，都是单元格的概念。是各种嵌套的“父子关系”

上代码：

<!DOCTYPE htm1>
<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>
	<table>
	<tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>刘德华</td><td>男</td> <td> 56</td></tr><tr><td>张学友</td><td>男</td> <td> 58 </td></tr><tr><td>郭富城</td><td>男</td><td> 51 </td></tr><tr><td>黎明</td><td>男</td> <td>57</td></tr>
	</table>
</body>
</html>

效果：
在这里插入图片描述
表头单元格标签：

表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示

在这里插入图片描述

代码：

效果：

代码里显示白色的目的是为了说明这些其实不在HTML里书写。

来个案例：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width， initial-scale=1.O"><meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>今日小说排行榜</title>
</head>

<body>
	<table align="center" width="500" height="249" border="1" cellspacing="0">
		<tr>
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>进入搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
		<tr>
			<td>4</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
		<tr>
			<td>5</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
		<tr>
			<td>6</td>
			<td>鬼吹灯</td>
			<td><img src="down .jpg"></td>
			<td>456</td>	
			<td>123</td>
			<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
		</tr>
	</table>
</body>
</html>

表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.

在表格标签中，分别用: <thead>标签表格的头部区域（范围更广）、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。
在这里插入图片描述

合并单元格

在这里插入图片描述

上图为总操作。

合并前：
在这里插入图片描述
合并后：

列表

列表标签：

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
在这里插入图片描述

无序列表（重点）

在这里插入图片描述
无序列表默认是小黑点开头。
注意：
1．无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></u>中只能嵌套<li><li>，直接在<u></ul>标签中输入其他标签或者文字的做法是不被允许的。
3. <li> 与</li>之间相当于一个容器，可以容纳所有元素。
4．无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

在这里插入图片描述
注意事项：

自定义列表(重点)

通俗来说就是一个大哥领着一群小弟。
（并列的兄弟关系）
在这里插入图片描述

来个代码：

<!DOCTYPE htm1>
<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>自定义列表(重点)</title>
</head>
<body>
	<dl>
		<dt>关注我们</dt>
		<dd>新浪微博</dd>
		<dd>官方微信</dd>
		<dd>联系我们</dd>
	</dl>
</body>
</html>