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

第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>

<input  type=“text/password”   name="名称"  value=“文本”  />

   </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>

<option value='提交值(向服务器提交的值)'>选项(显示的值)</option>

<option value='提交值’ selected="selectdd">选项</option>

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文件内,如
<link href="base.css"  rel="stylesheet"  type="text/css"/>
2.语义:a.css样式文件名称以有意义的英文字母命名,如main.css
       b.rel="stylesheet"  type="text/css"是固定写法不可修改
       c.<link>标签位置一般写在<head>标签之内

5-4  三种方法的优先级
1.内联式>嵌入式>外部式
2.嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面(实际开发中一般这么写),本质就是就近原则(离被设置元素越近优先级别越高)
3.前提:内联式、嵌入式、外部式样式表中css样式是在相同权值的情况下
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
提供的源码资源涵盖了小程序应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值