HTML(二）

7.路径

• 用vscode打开文件夹，方便操作：<1>顶部文件——打开文件夹——目标文件夹

                                                              <2>直接把文件夹拉到vscode中

(1)相对路径

①同一级路径:图片文件与html文件位于同一级。

<img src="文件名.后缀" />

②下一级路径:图片文件位于html文件下一级。

<img src="同一级文件夹名/文件名.后缀" />

③上一级路径:图片文件位于html文件和上一级，有多少级就写多少个../

<img src="../文件名.后缀" />

(2)绝对路径：通常是文件的绝对位置或网络地址。缺点是当整个文件夹挪位置的时候，该路径就不能用了。

<img src="D:\html\文件名.后缀" />
<img src="网址" />

8.超链接标签

• a是anchor意为锚
• target中_self意为在当前页面打开，替换当前页面；_blank意为在新页面打开，保留原页面。

<a href="网址" target="_self">网站名字<a/>
<a href="网址" target="_blank">网站名字<a/>

（1）外部链接（如上所示）

（2）内部链接

<a href="001.html">文件名</a>

（3）空连接：还没考虑好去往哪个界面，可以用#代替。

<a href="#">链接名称</a>

（4）下载链接：链接的是文件.exe或者zip等压缩包的形式。

 <a href="img.zip">下载文件名</a>

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

<a href="https://www.baidu.com/"><img src="img.jpg"></a>

(6)锚点链接：点击链接，可以快速定位到页面中的某个位置。

用百度百科介绍某个名人时举例：

<a href="#自己取的名字">人物生平</a>
文章下面“人物生平”的标题
<h3 id="自己取的名字">人物生平</h3>
<a href="#top">返回顶部</a>

9.注释标签

• 不显示到页面中，给程序员看的。多人合作时，利于互相理解代码所写的内容。
• 快捷键：ctrl + /

<!--注释的内容-->

10.特殊字符

• 建议记住空格符，大于号，小于号。

中间四&nbsp；&nbsp；&nbsp；&nbsp；个空格
显示成<p>的样子：&lt；p &gt；

 11.表格标签

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

例：
<table>
  <tr><td>姓名</td> <td>性別</td> <td> 年齢</td></tr>
  <tr><td>XXX</td> <td>男或女</td> <td> XX </td></tr>
</table>

• <table></table>是用于定义表格的标签。
• <tr></tr>用于定义表格中的单元行，必须包含在<table></table>中。
• <td></td>用于定义表格中的单元格，必须包含在<tr></tr>中。
• td是table data的缩写,意为表格数据。

（1）表头标签：表头单元格标签，表头单元格标签里的内容加粗居中显示。

• th是table head的缩写，意为表头。

<table>
  <tr>
    <tr><th>姓名</th> <th>性別</th> <th> 年齢</th></tr>
    <tr><td>XXX</td> <td>男或女</td> <td> XX </td></tr>
  </tr>
</table>

（2）表格属性：直观感受表格的外观形态

• 实际开发不常用，后面CSS会使用，现在先记住。

<table align =" center " border ="1" cellpadding ="0" cellspacing ="0" T width ="500">
  <tr><td>姓名</td> <td>性別</td> <td> 年齢</td></tr>
  <tr><td>XXX</td> <td>X</td> <td> XX </td></tr>
</table>

(3)表格结构标签

• <thead></thead>:用于定义表格的头部，<thead>内必须有<tr>。
• <tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
• 以上标签都是放在<table></table>之中。

  <table>
  <thead>
      <tr><th>姓名</th> <th>性別</th> <th> 年齢</th></tr>
  </thead>
  <tbody>
      <tr><td>XXX</td> <td>男或女</td> <td> XX </td></tr>
  </tbody>
  </table>

  (4)合并单元格

• 跨行合并：rowspan= "合并单元格的个数"，在最上侧的单元格写合并代码。

• 跨列合并：colspan="合并单元格的个数"，在最左侧的单元格写合并代码。

• 合并完后记得删除多余的单元格。

<tr>
  <td></td>
  <td colspan ="2"></td>
</tr>
<tr>
  <td rowspan ="2"></td>
  <td></td>
</tr>

12.列表标签

• 列表可以分为三大类：无序列表，有序列表和自定义列表。

（1）无序列表：<ul></ul>

• 无序列表各个列表项之间没有顺序级别之分，是并列的。
• <ul></ul>中只能嵌套<li></li>标签,直接在<ul></ul>中输入其他标签是不被允许的。
• <li>与</li>之间相当于一个容器，可以容纳所有元素。
• 无序列表会带有自己的样式属性，但实际使用时，用CSS来设置。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

(2)有序列表：<ol></ol>

• <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>输入其他标签或者文字是不被允许的。
• <li>与</li>之间相当于一个容器，可以容纳所有元素。
• 有序列表会带有自己的属性，实际使用时，用CSS来设置。

  <ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  </ol>
  

 (3)自定义列表：<dl></dl>

• 自定义列表经常用于对表头词进行解释或描述，列表前没有任何项目和符号。
• <dl></dl>里面只包含<dt>和<dd>。
• <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
</dl>