前端学习第二周

四、HTML标签（上）

（6）图像标签和路径

2.路径

2.1目录文件夹和根目录
（1）目录文件夹：普通文件夹，存放做页面所需的相关素材，如html、图片等。
 （2）根目录：目录文件夹的第一层是根目录。

2.2vscode打开目录文件夹
文件---打开文件夹，选择目录文件夹，后期方便管理文件。
2.3相对路径和绝对路径
   （1）相对路径：以引用文件所在位置为参考而建立的目录路径。例如图片相对于html文件的位置。
   （2）绝对路径：在电脑中的位置或网络地址

（7）超链接标签（重点）
<a>用于定义超链接，从一个页面链接到另一个页面。
1.语法格式：
<a herf="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
属性的作用：
2.分类
2.1外部链接：例如：<a href="http://www.baidu.com">百度</a>
_self:当前窗口打开页面；_blank:新窗口打开页面
2.2内部链接：网站页面内部之间的相互链接。
例如：<a href="index.html">首页</a>
2.3空链接：#
例如：<a href="#">空链接</a>
2.4下载链接：如果href里面是一个文件或一个压缩包，会下载这个文件。
2.5网页元素链接：各种网页元素都可以添加超链接.
2.6锚点链接：点击链接，可以快速定位到页面的某个位置。
在href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，添加id属性=名字，如：<h3 id="#two">第二季介绍</h3>

（8）注释和特殊字符
1.注释标签：在html文档中添加一些便于阅读和理解但又不需要显示在页面的注释文字。
语法格式：以“<!--“开头，以”-->“结束。
总结：注释标签里的内容是给程序员看的，此代码不执行不显示到页面中。

2.特殊字符

 

注意：重点记住空格，大于小于号

四.HTML标签（下）

 一.表格标签
1.表格的主要作用：清晰显示数据
2.语法：
2.1<table></table>:定义表格
2.2<tr></tr>定义表格中的行，必须嵌套在2.1标签中。
2.3<td></td>定义表格中的单元格，必须嵌套在2.2标签中。
2.4td指表格数据，数据单元的内容。

3。表头单元格标签：一般位于表格的第一行或第一列，文本内容加粗居中显示。
4.表格属性：实际开发不常用，通过css设置
目的：
（1）记住英语单词，css会使用。
（2）直观感受表格的外观形态。
用<th>表示。

效果:

5.表格结构标签：将表格分割为头部和主体两大部分。
头部：<thead>，必须有<tr>标签，一般位于第一行
主体:<tbody>，用于放数据主体。
以上两个标签都在<table>中。
6.合并单元格
6.1方式：
（1）跨行合并：rowspan="合并单元格的个数"
（2）跨列合并：colspan="合并单元格的个数"
6.2目标单元格：写合并代码
（1）跨行：最上侧单元格为目标单元格，写合并代码
（2）跨列：最左侧单元格为目标单元格，写合并代码
6.3步骤
（1）跨行还是跨列合并
（2）找到目标单元格，合并方式=合并单元格的数量，例如：<td colspan="2"></y=td>.
（3）删掉多余的单元格。
二、列表标签

特点：整齐，整洁，有序

1.无序列表（重点）：<ul>标签
  一般以项目符号呈现列表项，列表项使用<li>标签定义。
  基本语法格式：

注意：1.1无序列表各个列表项没有顺序级别之分，是并列的。
1.2<ul></ul>只能嵌套<li></li>,输入其他标签是不允许的。
1.3<li></li>可以放任何标签。
1.4带有自己的样式属性。
2.有序列表：<ol>标签,<li>标签定义列表项。

注意：
2.1<ol></ol>只能嵌套<li></li>,输入其他标签是不允许的。
2.2<li></li>可以放任何标签
2.3带有自己的样式属性。
3.自定义列表（重点）：
使用场景：用于对术语和名词进行解释和描述，定义列表的列表项前没有任何项目符号。
标签：a.<dl>:定义列表
b.<dt>：定义项目/名字
c.<dd>:描述每一个项目/名字

语法格式：
注意：3.1<dl>里面只能包含<dt>,<dd>
3.2<dt>,<dd>没有个数限制，经常是一个<dt>对多个<dd>
3.3<dt>,<dd>属于并列关系
效果：

学习进度;p41