笔记-HTML2

1.1 路径
一 绝对路径

绝对路径一般以盘符为起点来进行查找, 或者就是一个绝对URL地址.

二 相对路径

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

1.2 相对路径用法

分为三种: 同级路径、下级路径、上级路径。

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 常见的表单元素

form标签只负责定义具体的表单整体, 它里面如果想要收集用户数据, 就必须有能够让用户进行输入的模块. 此时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>
	.....
</select>

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 ， height定义高度单位是px，background-color定义背景颜色

2 CSS代码书写的固定语法

选择器{CSS代码}

3 每行结尾用;结束

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 起名字时要做到见名知意