路径之相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

这里简单来说，图片相对于HTML 页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src=”baidu.gif” /＞
下一级路径	/	图像文件位于HTML文件下一级 如<img src=”images/baidu.gif” /＞
上一级路径	../	图像文件位于HTML文件上一级 如<img src=”../baidu.gif” /＞

<body＞

​ <img src=”images/头像.jpg” title=”直接就是在这里放下一级文件就可以了” /＞

</body＞

绝对路径：是指目录下的绝对位置 ，直接到达目标位置，通常是从盘符开始的路径

例如，”D\web\img\logo.gif” 或完整的网络地址”http://www.itcast.cn/images/logo.gif”

一般情况下不使用绝对路径，网络的绝对路径是可以使用

在HTML标签中，<日＞标签用于定义超链接，作用是从一个页面链接到另一个页面

1.链接的语法格式

2.链接的分类

https://www.ju.se/somefolder/somefile.html

https：Scheme

ww.ju.se：Host

somefolder：Path

omefile.html：Filename

1.链接的语法格式

<a href=”跳转目标” target=”目标窗口的弹出方式”＞文本或图像</a＞

单词 anchor 的缩写，意为：锚

两个属性的作用如下：

属性	作用
href	用于指定链接目标的url地址，（必须属性） 当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，__blank为在新窗口中打开方式

<body＞

<h4＞外部链接</h4＞

​ <a href=”http://www.qq.com" target=”_blank”＞ href是超链接是必须要写的，target是取决于你打开的网站是再开一个还是从自身开启</a＞

</body＞

2.链接分类：

1.外部链接：例如<ahref=”http:// “www.baidu.com“＞百度 </a＞

2.内部链接;网站内部页面之间的相互链接，直链接内部页面名称即可，例如＜a href=“index.htmi”＞首页</a＞

<body＞

<h4＞内部链接</h4＞

​ <a href=”index.html” target=”_blank”＞ 在同目录下是可以直接写并且可以直接跳转的</a＞

</body＞

3.空链接：如果当时没有确定链接目标时，<a href= “#”＞首页</a＞

<body＞

<h4＞内部链接</h4＞

<a href=”#” target=”_blank”＞ 这是下载链接，可以直接下载的</a＞

</body＞

4.下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<body＞

<h4＞下载链接</h4＞

​ <a href=”头像.zip” target=”_blank”＞ 这是下载链接，可以直接下载的</a＞

</body＞

<body＞

<h4＞图片链接</h4＞

​ <a href=”http://www.baidu.com" target=”_blank”＞ <img src=”images/头像.jpg” /＞</a＞

</body＞

6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置

1.在能接文木的 href 属性中，设置属性值为 #名字 的形式，如<a href = “#two“＞第2集 </a＞

2.找到目标位置标签，里面添加一个id 属性 = 刚才的名字，如：＜h3 id=”two”＞第2集介绍</h3＞

<body＞

<a href=”#live”＞ 早年经历</a＞

2019年8月18日， 通过href=’#’的方式来快速跳到id那里

h3 id=”live”＞早年经历</h3＞

强森的父亲和祖父都是世界职业摔跤界屡获殊荣的名人。当他二十出头时，强森搬到了宾夕法尼亚州开始专注于美式橄榄球运动。他在迈阿密大学时加入了迈阿密大学的美式橄榄球队，并在1991年赢得了他第一个全国冠军。之后他又参加了92、95两届全国锦标赛，并在95届对战内布拉斯加大学争夺联邦快递橙碗比赛后结束了美式橄榄球生涯 。

强森26岁开始参加世界职业摔角联盟。2000年，他的自传《巨石如此说》荣登纽约时报畅销书排行榜；同时在他的美国职业摔角集锦CD中，收录了与其他艺术家合作的歌曲，包括格莱美奖得主Wyclef Jean。

</body＞

注释

如果器要在HTML 文档中添加一些便于阅读和理解但又 不器要显示在页面中的注释文字，就需要使用注释标签

HTML中的注释以“<！”开头，以“–＞〞 结束

快捷键：ctrl + /

一句话：注释标签里面的内容是给程序猿看的，这个代码是不执行不品示到页面中的

添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的

特殊宇符

在HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代

<讲    究nbsp就是空格，因为纯打很多空格的话就显示一个空格，而lt和gt是大于号和小于号，使用>

</body＞

表格的基本语法

<tr＞

<td＞单元格内的文字</td＞

</tr＞

</table＞

1. <table＞</table＞是用于定义表格的标签。

2. <tr＞</tr＞标签用于定义表格中的行 ，必须嵌套在<table＞</table＞标签中

3. <td＞</td＞用于定义表格中的单元格，必须嵌套在<tr＞</tr＞标签中

4. 字母td指表格数据（table data），即数据单元格的内容

<body＞

<table＞

​ <tr＞<td＞姓名</td＞<td＞性别</td＞ <td＞年龄</td＞</tr＞

​ <tr＞<td＞孙博赛</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞陈书文</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞王子旭</td＞<td＞男</td＞ <td＞19</td＞</tr＞

</table＞

</body＞

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

＜th＞标签表示 HTML 表格的表头部分(tablehead 的缩写）

<table＞

<tr＞

<th＞姓名</th＞

</tr＞

</table＞

姓名	性别	电话
小王	女	515
小明	男	230

<body＞

<table＞

​ <tr＞<th＞姓名</th＞<th＞性别</th＞ <th＞年龄</th＞</tr＞第一行可以使用th来直接加粗和居中

​ <tr＞<td＞孙博赛</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞陈书文</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞王子旭</td＞<td＞男</td＞ <td＞19</td＞</tr＞

</table＞

</body＞

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS 来设置

目的有2个：

1.记住文此英语单词,后面CSS 会使用

2.直观感受表格的外观形态

属性名	属性值	描述
align	left, center, right	规定表格相对周国元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为”“，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

<body＞

table align=”center” border=”l” cellpadding=”20” cellspacing=”0” width=”500” height=”250”><!–cellpadding是内部的文字和边框的距离，cellspacing是边框的距离，设置为0就是实线了。然后width是可以设置单元格的宽度,height可以设置单元格的高度–＞

​ <tr＞<th＞姓名</th＞<th＞性别</th＞ <th＞年龄</th＞</tr＞

​ <tr＞<td＞孙博赛</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞陈书文</td＞<td＞男</td＞ <td＞19</td＞</tr＞

​ <tr＞<td＞王子旭</td＞<td＞男</td＞ <td＞19</td＞</tr＞

</table＞

</body＞

表格结构标签

1. <thead＞</thead＞：用于定义表格的头部。<thead＞内部必须拥有<tr＞标签。一般是位于第一行

2. <tbody＞ </tbody＞：用于定义表格的主体，主要用于放数据本体

合并单元格三步曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan= “2” ＞</td＞

3.删除多余的单元格

<body＞

table align=”center” border=”l” cellpadding=”0” cellspacing=”0” width=”500” height=”250”＞

<tr＞

​ <td＞</td＞

​ <td colspan=”2”＞</td＞

</tr＞

<tr＞

​ <td rowspan=”2”＞</td＞

​ <td＞</td＞

​ <td＞</td＞

</tr＞

<tr＞

​ <td＞</td＞

​ <td＞</td＞

</tr＞

</body＞

合并单元格

合并单元格方式：

跨行合并：rowspan=”合并单元格的个数“

跨列合并：colspan=”合并单元格的个数”

表格是用来显示数据的，那么列表就是用来布局的

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便

根据使用情景不同 ，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表（重点）

<ul＞标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li＞标签定义

无序列表的基本语法格式如下：

<ul＞

<1i＞列表项1</1i＞

<1i＞列表项2</1i＞

<1i＞列表项3</1i＞

</ul＞

1. 无序列表的各个列表项之问没有顺序级别之分，是并列的

2. <ul＞</ul＞中只能嵌套 <li＞</li＞，直接在<ul＞</ul＞标签中输入其他标签或者文字的做法是不被允许的

3. <li＞ 与</li＞之间相当于一个容器，可以容纳所有元素。

4. 无序列表会带有自己的样式属性 ，但在实际使用时，我们会使用CSS 来设置

<body＞

<4h＞你喜欢吃的食物?</4h＞

<ul＞

​ <li＞ul里面只能嵌套li</li＞

​ <li＞li里面可以嵌套其他的例如<p，是可以的但是ul不行，只能放li</li＞

​ <li＞这就是并列的，无序的</li＞

</ul＞

</body＞