实训笔记day03

实习第三天笔记

---

页面所有链接的基本链接

<base>标签

网页中所有连接的基础链接，base标签里面的链接会影响页面中的所有的链接，除非链接设置了http协议。base标签位于head标签的内部。

百度
base标签不会影响链接

base标签会影响链接

表单

form标签

form标签中的常用属性：

action属性：设置将表单中的数据提交给谁。如果action属性值为空，点击提交后会提交到当前网页中。

method属性：设置提交给后台的方法 get/post。

当method属性值为get的时候，数据通过url（统一资源定位符）传递到后台中；当属性值为post时，数据通过服务器来传输。当method属性的值为空时，默认属性值为get。

输入域input

type属性

属性值：

button：产生一个不会产生任何作用的按钮，需要和事件关联。

file：产生一个能够上传文件的按钮。

hidden：隐藏产生的可输入区域。

text：文本类型，产生区域能够写入文本。

password：产生一个输入密码的区域，输入的文本会用·显示。

radio：产生一个单选框，可以利用name属性对多个单选框进行分组，同一组的多个单选框只能有一个背选。

checkbox：产生一个多选框，可以利用name属性对多个值进行分组。

image：产生一个图片，其作用是提交按钮。

reset：重置，可以使的网页上所有内容恢复成默认值。

submit：提交按钮。

alt属性

定义当按钮为图片时，图片的替代文字。

src属性

定义当按钮为图片时，图片的链接地址。

checked属性

无值属性，只需要写出来，定义默认选项。

disabled属性

无值属性，禁用当前区域。

readonly属性

无值属性，对当前输入域只读。

maxlength属性

定义输入域字符的最大长度。

name属性

定义当前输入域的名字。

value属性

定义当前输入域的默认值。

文本输入区域

<textarea>

cols属性

规定可见列数

rows属性

规定可见行数

disabled属性

禁用当前文本输入区

name属性

当前文本区域的名字

readonly属性

当前文本区域只读

按钮

<button>

button的type类型默认为submit。

disabled属性

禁用此按钮。

name属性

按钮名字。

type属性

按钮类型：button，reset，submit。

value属性

按钮上显示文本的默认值。

下拉菜单

<select>

相关属性

disabled属性：禁用该菜单。

multiple属性：无值属性，规定可同时选中多项。

name属性：下拉列表的名字。

size属性：菜单中可见项目的数目。

<optgroup>标签

定义下拉列表选项分组。

label属性：定义选项组的标记，必要属性。

disabled属性：禁用。

<option>标签

定义下拉列表中的选项。

disabled属性：禁用。

label属性：定义当使用<optgroup>时所使用的标注。即下拉列表的值。

selected属性：规定选项（在首次显示在列表中时）表现为选中状态。

value属性：向服务器输送的值。

表单中的标记<label>

当鼠标点击移到表单前的字时，光标自动移到后面的输入域中。

表单中相关元素分组<fieldset>

<legend>定义分组标题。

个人信息:

姓名:

邮箱:

生日:

css

什么是css？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

样式表：负责美化。

层叠：样式不会消失只会被覆盖。

css使用方式

第一种：在标签中使用style属性。

Hello,World

改变字体颜色为红色。

第二种：使用style标签

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

第三种：

在.html文件中

社会你柳哥，人狠话不多

在01.css文件中

div {
color: purple;
}

将div标签内的部分字体编程紫色。

注意：在网页设计中，要求结构与样式分离，所以最好使用第三种方法css使用方法。

css基础选择器

html选择器

通过html标签来选择元素。

注意：

1. 所有的html标签都能当做选择器。
2. 无论标签藏得多深都会被选中。
3. 选择的是所有的标签而不是具体的某个标签。所以说我们通过html标签选择器来设置的都是一些共用性的问题。

所有的p和h6标签都会被选中，字体改变颜色。

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

我是第二个p标签

adasdas

我是h6

id选择器

1. 任何的标签都可以有id属性和属性值。
2. id命名中，大小写敏感，id的名字中可以有字母、数字、下划线，但是要以字母开头。
3. id命名方法：驼峰命名法。小驼峰：testHeader；大驼峰：TestHeader；test-header；test_header。
4. id命名不能重复。

id是全局属性。

我是一个div

class选择器

1. 任何标签都可以使用class属性（class属性也是一个全局属性）。
2. class属性名可以重复使用。
3. 一个class属性中，可以有多个class属性值。

最常用的选择器。

我是em，表示强调
我是strong

选择器冲突

当多个选择器同时对一个文本部分进行美化时，谁更精确就听谁的。

精确度：id选择器 > class选择器 > html选择器

通配符*

我是a标签

我是div

我是p标签

我是span标签

通配符将所有的标签都都进行美化。

span标签与div标签的区别

div标签是用来把网页分割成部分。

我是div标签

我是span标签