图片标签

在 HTML 标签中， 标签用于定义 HTML 页面中的图像。
具体实现：

解释：src 是标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性：简单理解就是属于这个图像标签的特性。图像标签的其他属性： 图像标签注意点： 1.图像标签可以拥有多个属性，必须写在标签名的后面。 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。 3.属性采取键值对的格式，即 key=“value” 的格式，属性 =“属性值”。

路径

分为相对路径和绝对路径：
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于 HTML 页面的位置
特点： 相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。
绝对路径： 1.是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

链接标签

链接的语法格式
文本或图像
属性：

1. href：用于指定链接目标的url地址
2. target：用于指定链接页面的打开方式 _self默认值 _blank新窗口打开

链接分类：

1. 外部链接: 例如 < a href=”http:// www.baidu.com “> 百度。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=”index.html”> 首页 。
3. 空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

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

   • 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如 第2集
   • 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：

     第2集介绍

     注释和特殊字符

     注释

     如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以””结束。
     具体实现：
     快捷键: ctrl + /
     一句话：注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的。添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

     特殊字符

     在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。重点记住”空格 、大于号、 小于号” 这三个， 其余的使用很少，如果需要回头查阅即可。

     表格

     表格的主要作用

     表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
     表格不是用来布局页面的,而是用来展示数据的。

     表格的具体用法

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

7. 是用于定义表格的标签。

8. 标签用于定义表格中的行，必须嵌套在 标签中。
9. 用于定义表格中的单元格，必须嵌套在标签中。
10. 字母 td 指表格数据（table data），即数据单元格的内容。

    表头单元格标签

    表头标签的具体实现：

          <table>
             <tr>
                 <th>姓名</th>
                 ...
             </tr>
             ...
         </table>

    一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
    标签表示 HTML 表格的表头部分(table head 的缩写)
    表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

    表格属性

    表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
    完成下面综合案例：

![](images/%E8%A1%A8%E6%A0%BC%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B.png#id=mhtZM&originalType=binary&ratio=1&status=done&style=none)
**思路：**

先制作表格的结构.

1.第一行里面是 th 表头单元格

2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素

3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框cellpadding 和 cellspacing

2.表格浏览器中对齐 align
###表格结构标签：
使用场景:
因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：

总结:
1. ：用于定义表格的头部。

合并单元格方式：

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

最上侧单元格为目标单元格, 写合并代码

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

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

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

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：。删除多余的单元格。

表格总结

表格学习整体可以分为三大部分:

表格的相关标签

table   thead  body  tr  th  td

表格的相关属性

cellspacing    cellpadding     width  height  border

合并单元格

  rowspan   collspan<br />##列表<br />    表格是用来显示数据的，那么列表就是用来布局的。<br />    列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。<br />    根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。<br />###无序：
![](images/%E6%97%A0%E5%BA%8F.png#id=cxk8l&originalType=binary&ratio=1&status=done&style=none)

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

• 标签定义。无序列表的基本语法格式如下：

• 列表项1

• 列表项2
• 列表项3

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

2. 中只能嵌套

3. 
   

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

有序：

![](images/%E6%9C%89%E5%BA%8F.png#id=wnMzW&originalType=binary&ratio=1&status=done&style=none)

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，

1. 标签来定义列表项。有序列表的基本语法格式如下：

1. 列表项1
2. 列表项2

3. 列表项3

中只能嵌套

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

自定义：

自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中， 标签用于定义描述列表（或定义列表），该标签会与 （定义项目/名字）和 （描述每一个项目/名字）一起使用。语法如下：
###列表总结

表单
现实中的表单：

为什么需要表单：
使用表单目的是为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
###表单的组成：
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
###表单域：
表单域是一个包含表单元素的区域。
在 HTML 标签中， 标签用于定义表单域，以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器.
实现代码：
<form action=“url地址” method=“提交方式” name=“表单域名称”>各种表单元素控件
###表单域的常用属性：

基础班来说,我们暂时不用表单域提交数据,只需要写上 form 标签即可. 就业班等学习服务器编程阶段会重新讲解.
这里只需要记住两点:
1.在我们写表单元素之前,应该有个表单域把他们进行包含.
2.表单域是 form标签.

表单控件(表单元素)

表单元素

在英文单词中，input 是输入的意思，而在表单元素中 标签用于收集用户信息。在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下：

除 type 属性外，标签还有其他很多属性，其常用属性如下：

标签
标签为 input 元素定义标注（标签）。
标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
男

核心： 标签的 for 属性应当与相关元素的 id 属性相同。

表单元素
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

语法：
###

1. 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用
2. 在表单元素中，
3. 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

通过

我们在实际开发中不会使用，都是用 CSS 来改变大小。

表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

具体代码：

    <input type=“text " name=“username”>
     北京

有三个名字非常相似的标签:表单域 form 使用场景: 提交区域内表单元素给后台服务器文件域 file 是input type 属性值 使用场景: 上传文件文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…4. 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可.

完成综合案例

查阅文档：
经常查阅文档是一个非常好的学习习惯。
推荐的网址：
百度: http://www.baidu.com
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/