02_HTML02

学于黑马和传智播客联合做的教学项目 感谢

黑马官网

传智播客官网

微信搜索"艺术行者"，关注并回复关键词"软件测试"获取视频和教程资料！

b站在线视频

HTML02

HTML02

1.1 路径

所谓的路径我们可以看做是在程序代码中用来查找某个具体的资源所 "走"过的路。例如: C:/Users/Administrator/Desktop/_book\img\2.png.

一、绝对路径

绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 ， 或 者 就 是 一 个 绝 对 URL 地 址 。https://www.baidu.com/img/bd_logo1.png ，但是在实际的工作中，我们不建议大家使用绝 对路径。

二、相对路径

相对路径就是相对某一个已知的文件为起点进行资源的查找。

1.2 相对路径用法

路径是一个通用的存在，我们当以查找图片为例来讲解路径的使用。在实际工作中相对路径使用的频率是最高的。我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。 (以查找图片为例的含义就是我们要在一个 HTML 网页中插入一张 HTML 文件之外的图片， 同时采用的是相对路径，所以这里的相对起点就是 HTML 网页)

1. 同级路径：同级指的就是 HTML 网页和目标图片在同一级目录里。对于同级路径的使用，我们只需要在 src 中写入目标图片的名称即可。

2. 下级路径：下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个 / 来向下进行穿透查找。

3. 上级路径： 图片在 html 文件的上级目录里， 时我们需要使用 ../ 来向上回退进行查找。

注：

01 上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的查找。

02 / 表示向下级查找，可以无限级穿透。 ../ 表示向上级返回，同样可以无限级返回。

1.3 表单基本介绍

表单就是一种在互联网上用于收集用户信息的一种结构，在 HTML 当中事先定义好一个标签来完成这件事。标签名称叫 form ，它是一个双标签,我们称之为表单域。

<form action="" method=""></form>

注：

01 form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之为表单域。

02 form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备了很多的表单标签。这些标签里使用最多的一个叫 input 。

03 action 属性值表示将当前表单中的数据提交到哪里。

04 method 属性值表示以什么样式来提交当前表单中的数据。最常见的就是get或post 。其中 get 方式就是指将数据在 URL 中进行提交，这种方式是明文。所以相对不安全。而 POST 方式就是指将数据写在 HTTP 请求的 请求体当中。

1.4 常见的表单元素

from 标签只负责定义具体的表单整体，它里面如果想要收集用户数据，就必须再有一些能够让用户进行输入填写的模块，此时 HTML 当中就定义许多的 表单标签 来让用户完成输入。最常见的表单标签就是 Input ，因为标签名称都叫 input ，所以 HTML 当中就设置通过 type 属性来进行区分。

01 文本输入框：

<input type="text" />

02 密码输入框:：

<input type="password " />

03 提交按钮：

<input type="submit" />

04 单选框：

<input type="radio" />

05 复选框:

<input type="checkbox" />

06 文本域:

<textarea rows="行数" cols="列数"></textarea>

07 下拉框：

<select>
<option value="">选项 1</option>
<option value="">选项 2</option>
<option value="">选项 3</option>
...........
</select>
<!--
value 属性规定在表单被提交时被发送到服务器的值。
<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。
注释：如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。
-->

08 重置按钮：

<input type="reset" />

09 普通按钮:

<input type="button" value="按钮" />

1.5 表单元素注意细节

1 name 属性：form 表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名称都叫 input ,此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题，此时为了分别哪个数属于什么样的表单项。我们就人为的在 Input 身上设置 name 属性。这样一来数据到达后端之后就会变成以下格式： username="syy" pwd="123" gender="男" ....

2 value: 它的作用就是定义某些表单元素的默认显示内容（ 文本输入框、提交按钮、重置按钮、普通按钮 ）

3 checked: 这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。

4 selected：这也是一个属性值等于属性名的属性，添加在下拉选项身上实现某个选项被默认选中。

1.6 CSS 基本介绍

一、web 标准

所谓的 web 标准指的就是一系统规范网页书写的要求，它是由 W3C 组织制定，在它里面要求网页的 结构、样式、行为 三者相分离。

二、名词解释

1．结构：就是通过 HTML 标签搭建的网页的结构。

2．样式：就是通过 CSS 对当前的网页结构进行修饰和美化

3．行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

1.7 CSS 基本使用

一、定义

css 在国内被称之为级联样式表、层叠样式表、样式表，它的作用就是修饰当前网页中的 HTML 元素。

二、基本使用步骤

1．CSS 与 HTML 可以看做是二门互相独立的语言， 如果想用 CSS 来操作 HTML 那么此就需要先将二者建立关系。

2．此时在 HTML 当中就准备了一个叫 style 的标签( 它是一个双标签 )，在这个标签对之间就可以用来书写我们的 CSS 代码。常见的存放位置可以是 head 标签里 title 标签下。

3．通过 CSS 的选择器找到我们想要操作的元素然给它设置样式( 写在 style 标签之中 )

1.8 体验 CSS

1. 常见的 CSS 元素属性：width 定义元素宽度(单位是 px) ， ght 定义高度，ackground-color是设置背景颜色。

2. CSS 代码书写的固定语法: 选择器{ CSS 代码 }

3. 建议大家在开发阶段将 CSS 样式分行写，且每行的结尾用 ; 结束。

1.9 CSS 选择器

一、定义

所谓的 CSS 选择器就是 CSS 中已经定义好的用来选中某些元素的固定语法。它的作用就是选中我们想要设置样式的元素。

二、CSS 选择器的分类

在 CSS 中有很多种选择器，我们人为的分成二大类： 简单选择器 + 复合选择器。

三、简单选择器：

1．标签名选择器：通过具体的 HTML 标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】

2．类名选择器：通过标签类名来选择元素

3．id 选择器：通过 id 名称选择元素。

1.10 类名选择器

一、为什么需要类名选择器

一个完整的网页需要很多标签组合在一起进行编写实现，因为 HTML 标签的种类有限，所以同名的一个标签有可以会在一个网页中出现多次。 此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。

二、类名选择器的基本使用步骤

1．定义 HTML 网页结构，然后在我们想选中的元素身上设置 class 属性。

2．将我们想要一起选中的元素们身上设置相同的 class 属性值( 类名 )

3．此时我们只需要在 style 标签中按着固定的语法来调用我们的类名: .类名

1.11 Id 选择器

一、为什么需要 id 选择器

如果我们只想从一堆元素当中选中其中的某一个元素，那么就可以使用 id 选择器。这个 id 就和人的身份证号是一样的。

二、Id 选择器使用

1．在我们想要选中的元素身上设置一个 id 属性。

2．给这个 id 属性设置一个值，我称为 id 名。

3．在 style 当中通过固定的语法来进行调用： #id 名{}

4．注：要求在一个网页当中不能出现同名的 id 值【虽然有效果但也不能这么做】

1.12 简单选择器总结

1. 标签名选择器和类名选择器默认可以一次性选中多个元素，id 名选择器一次只能选中一个元素。

2. 一个标签的身上可以既具有类名又具有 id 名，且这二个属性值是可以相同的。

3. 允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。

4. 关于 id 选择器要求一个页面当中同一个 id 名称只能出现一次。

1.13 id 名与类名命名规则

1. 名称不能是纯数字或者以数字开头( 但是我们经常会以数字结尾 )

2. 名称不能使用中文

3. 名称包含特殊字符（ - _ ）

4. 起名字时要做到见名知意