web前端工程师--html和css基础课程(三)

来源：互联网发布：天纵软件编辑：程序博客网时间：2024/05/16 14:48

第3章与浏览者交互，表单标签

3-1 使用表单标签，与用户交互

1.语法：<form method="传送方式" action="服务器文件">

</form>

2.语义：使用html表单，可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据

action:浏览者输入的数据被传送到的地方，比如一个PHP页面（save.php）

method:数据传送的方式(get/post)

3.注意：a,所有表单控件（文本框，文本域，按钮，单选框，复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦）

b.method:post/get的区别这一部分内容属于后端程序员考虑的问题

3-2 文本输入框，密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框

1.语法：<form>

</form>

2.语义：a.type：当type=“text”时，输入框为文本输入框

当type=“password”，输入框为密码输入框

b.name：为文本框命名，以备后台程序ASP,PHP使用

c.value：为文本输入框设置默认值（一般起到提示作用）

3-3 文本域，支持多行文本输入

1.语法：<textarea rows="行数" cols="列数">文本</textarea>

2.语义：a.在表单中输入大段文字

b.在<textarea></textarea>标签之间可以输入默认值

c.rows，cols这两个属性可用css样式的width和height来代替，col用width,row用height来代替

3-4 使用单选框、复选框、让用户选择

1.语法：<input type="radio/checkbox" value="值" name="名称" check="checked"/>

2.语义：单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选

a.type 当type=“radio”时，控件为单选框

当type=“checkbox”时，空间为复选框

b.value：提交数据到服务器的值（后台程序PHP使用）

c.name：为控件命名，以备后台程序ASP、PHP使用

d.checked：当设置checked="checked"时，该选项被默认选中

3.注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选作用

3-5 使用下拉列表框，节省空间

1.语法：<select>

2.语义：a.既可以单选又可以多选

b.设置selected="selected"属性，则该选项被默认选中

3-6 使用下拉列表框进行多选

1.语法：<select multiple="multiple">

2.语义：在windows操作系统下，进行多选时按下Ctrl键同时进行单击；在Mac下使用Command+单击

3-7 使用提交按钮，提交数据

1.语法：<input type="submit" value="提交">

2.语义：a.type：只有当type值设置为submit时，按钮才有提交作用

b.按钮上显示的文字

3-8 使用重置按钮，重置表单信息

1.语法：<input type="reset" value="重置">

2.语义：a.type：只有当type值设置为reset时，按钮才有重置作用

b.按钮上显示的文字

3-9 form表单中的label标签

1.语法：<label for="控件id名称">

标签的for属性中的值应当与相关控件的id属性值一定要相同

2.语义：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关联的表单控件上）。

第4章开始学习css，为网页添加样式

4-1 认识css样式

1.概念：css全称为"层叠样式表(cascading style sheets)"，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等

4-2 css样式的优势

1.语法：a.把需要添加样式的文字用<span></span>括起来

b.添加span{color:blue;}

4-3 css代码语法

1.语法：css样式由选择符和声明组成，而声明又由属性和值组成。

2.语义：a.选择符，又称选择器，指明网页中要应用样式规则的元素

b.属性和值之间用英文冒号";"分隔；当有多条声明时，中间可以英文分号";"分隔

3.注意：a.最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号

b.为了使样式更加容易阅读，可以将每条代码写在一个新行内

4-4 css注释代码

1.语法：/*注释语句*/

第5章 css样式基本知识

5-1 内联式样式，直接写在现有的HTML标签中

1.语法：a.写在元素的开始标签里，如<p style="color:red">这里文字是红色。</p>

b.写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开

5-2 嵌入式css样式，写在当前的文件中

1.语法：把css样式代码写在<style type="text/css"></style>标签之间。并且一般写在<head></head>之间

如：<style type="text/css">

span{color:red;}

</style>

5-3 外部式（外联式）css样式，写在单独的一个文件中

1.语法：这个css样式文件以".css"为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如

2.语义：a.css样式文件名称以有意义的英文字母命名，如main.css

b.rel="stylesheet" type="text/css"是固定写法不可修改

c.<link>标签位置一般写在<head>标签之内

5-4 三种方法的优先级

1.内联式>嵌入式>外部式

2.嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面（实际开发中一般这么写），本质就是就近原则（离被设置元素越近优先级别越高）

3.前提：内联式、嵌入式、外部式样式表中css样式是在相同权值的情况下

0 0