第二十三章

核心提示HTML标签:表单标签* 表单:* 概念:用于采集用户输入的数据的。用于和服务器进行交互。* form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围* 属性:* action:指定提交数据的URL* method:指定提交方

HTML标签:表单标签

*表格:

*概念:用于收集用户输入的数据。用于与服务器进行交互。

*表单:用于定义表单。您可以定义一个范围,代表用户数据收集的范围。

*属性:

*操作:指定提交数据的URL。

*方法:指定提交方法。

*分类:共7种,常用2种。

*获取:

1.请求参数将显示在地址栏中。将被封装在请求行中。

2.请求参数大小受到限制。

3.不太安全。

*帖子:

2.请求参数不再显示在地址栏中。将被封装在请求体中。

2.请求参数的大小没有限制。

3.这样更安全。

*如果要提交表单项中的数据,必须指定其名称属性。

*表单项目标签:

* input:元素显示的风格可以通过type属性的值来改变。

*类型属性:

*文本:文本输入框,默认值

*占位符:指定输入框的提示信息。当输入框内容发生变化时,会自动清除空的提示信息。

*密码:密码输入框

*收音机:收音机盒

*注意:

1.如果希望多个单选框达到单选的效果,那么多个单选框的name属性的值必须相同。

2.通常,为每个单选按钮框提供一个value属性,指定它被选中后提交的值。

3.选中属性,可以指定默认值。

*复选框:复选框

*注意:

1.通常,每个单选按钮都有一个value属性,它指定了被选中后提交的值。

2.选中属性,可以指定默认值。

*文件:文件选择框

*隐藏:隐藏域,用于提交一些信息。

*按钮:

*提交:提交按钮。你可以提交表格。

*按钮:普通按钮

*图像:图像提交按钮

* src属性指定图片的路径。

* label:指定输入项的文本描述信息。

*注意:

* label的for属性一般对应input的id属性值。如果是,点击标签区域,输入输入框将获得焦点。

*选择:下拉列表

*子元素:选项,指定列表项。

*文本区域:文本字段

* cols:指定列数和每行的字符数。

* rows:默认情况下有多少行。

CSS:页面美化和布局控制

1.概念:级联样式表级联样式表

*层叠:多个样式可以作用于同一个html的元素,同时生效。

2.好处:

1.强大的功能

2.将内容显示与样式控制分开。

*降低耦合度。退耦

*使分工和协作更容易

*提高开发效率。

3.CSS的使用:CSS和html的结合

1.内嵌样式

*使用style属性指定标记内的css代码。

*例如:hello css

2.内部风格

*在head标签内,定义style标签,style标签的标签体内容是css代码。

*如:

你好css

3.外部风格

1.定义css资源文件。

2.在head标签中,定义link标签并引入外部资源文件。

*如:

* a.css文件:

p{

颜色:绿色;

}

你好css

你好css

*注意:

* 1,2,3方式css的应用越来越广泛。

* 1方式不常用,后来常用2,3

* 3格式可以写成:

4.css语法:

*格式:

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

}

*选择器:具有相似特性的过滤元件。

*注意:

*每对属性都需要使用;分隔,最后一对属性可以省略;

5.选择器:具有相似特性的过滤元件。

*分类:

1.基本选择器

1.id选择器:选择具有特定id属性值的元素。建议id值在html页面中是唯一的。

*语法:#id属性值{}

2.元素选择器:选择具有相同标记名的元素。

*语法:标记名{}

*注意:id选择器优先于元素选择器。

3.类选择器:选择具有相同类属性值的元素。

*语法:。类属性值{}

*注意:类选择器优先于元素选择器。

2.扩展选择器:

1.选择所有元素:

*语法:* {}

2.联合选择器:

*选择器1,选择器2{}

3.子选择器:过滤选择器1元素下的选择器2元素。

*语法:选择器1选择器2{}

4.父选择器:过滤器选择器2的父元素选择器1。

*语法:选择器1 >选择器2{}

5.属性选择器:选择元素名称,即属性名称=属性值的元素。

*语法:元素名称[属性名称= "属性值"] {}

6.伪类选择器:选择一些元素的状态。

*语法:Element: Status {}

*如:

*状态:

*链接:初始化的状态

*被访问:被访问的状态。

*活动:访问状态

*悬停:鼠标悬停。

6.属性

1.字体和文本

*字体大小:字体大小

*颜色:文字颜色

*文本对齐:以其方式

*行高:行高

2.背景

*背景:

3.边界

* border:设置边框以符合属性。

4.大小

*宽度:宽度

*身高:身高

5.框模型:控件布局

*边距:超出边距

*填充:内边距

*默认情况下,内边距会影响整个框的大小。

*框尺寸:边框-框;设置框的属性,使宽度和高度成为最终的框大小。

*浮动:浮动

*左侧

*对

 
友情链接
鄂ICP备19019357号-22