数往知来 HTML<十一>

HTML_CSS

<!--一、表单   <form></form>   

表单就是用来进行数据提交的标签

表单就是一对<form></form>标签,里卖弄包含其他的标签input等

action    表示提交的目标服务器  就是点击提交时跳到哪

method    提交的方法get/post

--》表单提交有有get与post之分

    ---》get就是默认的,就是通过浏览器地址提交

---》post就是将要提交的东西隐藏到报文里提交

1、文本框标签

    <input>

属性:

  type   类型,比如说type="text"就是文本框  type="submit"就是提交按钮

    --》text    文本框

--》submit  提交按钮

    --》password  密码框

  value  

  readonly

  maxlength  允许文本框输入的最大长度

  size       文本框的大小

2、密码框标签

  <input type="password" name="" value="" />

3、隐藏标签  用来记录页面跳转时的信息,但是由于该信息不该显示在页面中,如果显示了会破坏整个页面的美观等东西,因此使用隐藏标签将其隐藏

<input type="hidden" value=""/> 

4、文本域标签  一般用来展示协议等信息,与pre标签格式上有点类似

    <textarea rows="50" cols="10"></textarea>

属性:

rows   长

    cols高

二、按钮标签

     --》  重置按钮

<input type="reset" value+"清除所有数据" />

--》button按钮

该按钮没有任何响应,由用户进行定义

<input type="button" value="button上显示的文本" />

--》图像标签

       <input type="image" src="图片地址"/>

--》disabled属性  相当于C#里的enable属性

        <input type="button" value="点击按钮" disabled />

三、复选框标签  如果想把内容提交那就加上name / value属性

   <input type="checkbox" />看电影

想让复选框默认选中加   checked

  --》leabel  可以将某个数据与某个空间绑定

  1、为目标空间加一个id属性

  2、添加label标签,使用for属性指定id

  <input type="checkbox" name="c1" value="eat" id="123" /><label for="123">吃饭</label>

  --》快速定位  就是键盘上的快捷键  要考虑兼容性

     accesskey属性  要注意和浏览器的快捷键冲突

在IE上要使用alt+键

  mac等这些浏览器中直接使用键

    <input type="checkbox" name="c1" value="eat" id="123" /><label for="123" accesskey="a">吃饭</label>

单选标签  要给标签命名,不然它不知道和谁一组选不了

  <input type="redio" name="1" value="male" checked="checked"/>男

   <input type="redio" name="1" value="fmale"/>女

    <input type="redio" name="1" value=""/>其他

文件选择标签

<input type="file">

四、下拉菜单标签  (相当于combobox  listbox)

提交用的属性

       name    value

后台要一个集合来维护 不要直接提交每一项里的内容给后台的集合,不好,给每一项一个value

默认选中:selected属性

  size属性:显示几行

  multiple:多选

   <select name="email" size="6" mutiple="multiple">

<option value="-1">--请选择--</option>

<option value="0" selected="selected">@163.com</option>

<option value="1">@sina</option>

<option value="2">@qq.com</option>

<option value="3">@yahoo.com</option>

<option value="4">itcast</option>

   </select>

分组    <optgroup></optgroup>

-->

<html>

<head>

<title></title>

</head>

<body>

<form>

<!--写一个文本框-->

<input type="text" name="uid" value=""/>

<!--要提提交数据,必须要满足两个条件

1、放在FORM中

2、必须要有name   value属性

-->

<!--写一个提交按钮-->

<input type="submit" name="点击提交"/><br />

<!--在表单标签中,所有的标签格式等HTML的处理与表单一样-->

   <input type="text" name="readonly" readonly="readonly" /><br />

<input type="text" name="" maxlength="6" /><br />

<input type="text" name="" size="2" /><br />

<!--密码标签-->

<input type="password" name="" value="">

</form>

</body>

</html>

  1、meta标签

  2、帧标签  (不需要body标签了)

  frameset就好比页面的显示区,有两个重要的属性

  --》rows  (横向)

框架被分成几行几列

  --》cols   (竖向)

  <frameset rows="50%,*">

<frame src="地址"></frame>

<frame src="地址"></frame>

  </frameset>

3、分区标签

--》<div>   默认是行标签,被圈起来的内容会独自占一行

   <div style="display:in">

--><span>    默认行内标签,不会换行

三、CSS

1、样式

  --》<div>

长宽width、height

border 1px solid red    表示边框宽度为1  是实线  边框的颜色是红色

---》内联样式

<div style="border:1px solid red; width:50px; height:30px">

</div>

我们发现样式写在标签中,每一个标签都得有眼格式,还是不好维护,

定义一个“东西”,如果整个页面中每个div都是我这个样式

---》内嵌样式

   1、在head标签中写上一对style标签

   2、 添加属性type="text/css"

   3、在style标签中写样式即可

样式的注释和C#的行间注释一样,用斜线星号 星号斜线  /*   */

--->外部样式

考虑统一样式可以应用 于个多页面,使用外部样式,那么像使用类库一样可以共享重用

         1、新建一个文件夹,一般命名为style

2、在style文件夹中新建一个文件夹,命名为css1.css

时间: 2024-10-10 21:26:58

数往知来 HTML<十一>的相关文章

数往知来 jquery选择器 &lt;二十一&gt;

一.属性过滤器 $('input[name]')     选中页面上所有input标签具有name属性的元素 $('input[name=xxx]')   选中页面上所有input标签具有name属性并且值等于xxx的元素 $('input[name!=xxx]')   选中页面上所有input标签具有name属性并且值不等于xxx的元素 $('input[name^=x]')      选中页面上所有input标签具有name属性并且值是以x开头的的元素 $('input[name$=x]')

android产品研发(二十一)--&gt;UI优化

转载请标明出处:一片枫叶的专栏 上一篇文章中我们讲解了android产品研发过程中的代码Review.通过代码Review能够提高产品质量,增强团队成员之间的沟通,提高开发效率,所以良好的产品开发迭代过程中,代码Review是一个必不可少的步骤.那么如何进行代码Review呢?我们主要讲解了团队成员之间的代码Review,代码lint检查,开发规范等方面的知识点,更多关于代码Review相关的知识可参考我的:android产品研发(二十)–>代码Review 本文我们将讲解一下android U

荣耀的双十一:为冠军而来

前些日子,第三方数据机构发布报告指出华为手机在出货量方面已经赶超小米,之后又有知名自媒体指出,荣耀仅2014年第一年的销量就达到2000万部,而2015年更是只用半年时间就达到2000万部销量.该自媒体指出,华为在2015年的销量将会铁定超越1亿部,而按照目前发展速度来看,未来荣耀或将实现单品牌赶超小米的速度. 这种磅礴而凶猛的发展势头,使得荣耀对双十一也信心满满. 10月30日,荣耀官方微博发布消息,内容和配图均以"为冠军而来"为口号,力图抢夺双十一手机销量冠军的意图可见一斑.除此之

我的编程之路(二十一) 规范

不知不觉一周就过去了,这周细想真的没有做成什么,因为几乎都是做了改,改了做··· 1.代码规范 以前自认为自己很注重代码规范,但是没有想到自己项目组的开发会将代码规范审查的那么严谨,这突然让我想到之前说到程序员都喜欢追求完美,都喜欢自己和自己的风格一致,否则就会觉得别扭,不过与此不同,这是团队开发,代码规范是为了统一风格,便于别人的阅读与后人的修改与维护,虽然因为这我前前后后改了三次dao层的代码,一是要用公司封装的借口,二是要把异常处理都放在这一层或者service层,三是要用公司自己写的工具

QT开发(二十一)——QT布局管理器

QT开发(二十一)--QT布局管理器 一.布局管理器简介 QT中使用绝对定位的布局方式无法自适应窗口的变化. QT中提供了对界面组件进行布局管理的类,用于对界面组件进行管理,能够自动排列窗口中的界面组件,窗口大小变化后自动更新界面组件的大小. QLayout是QT中布局管理器的抽象基类,通过对QLayout的继承,实现了功能各异且互补的布局管理器. 布局管理器不是界面组件,而是界面组件的定位策略. 任意容器类型的组件都可以指定布局管理器. 同一个布局管理器管理中的组件拥有相同的父组件,在设置布局

struts2官方 中文教程 系列十一:使用XML进行表单验证

在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让您可以内置到Struts 2框架的验证器. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列十一:使用XML进行表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6938720.html 下载本章节代码 为了使用户能够编辑存储在Person对

《构建之法》第十一、十二章学习总结

第十一章的内容是软件设计与实现. 在第一节中,讲的是关于分析和设计方法,向我们介绍在"需求分析"."设计与实现"阶段."测试""发布"阶段该搞清楚的问题. 在第二节中,讲的是关于图形建模和分析方法.在表达实体和实体之间的关系时,可以用到思维导图(Mind Map).实体关系图(ERD).UCD ;在表达数据的流动时,可以用到DFD工具:在表达控制流的时候可以用到FSM工具:前面提到的这些图形建模方法各有特点,UML却可以有一个

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

第十一周PSP&amp;进度条

PSP 一.表格: D日期     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 11月24号 站立会议 分配任务&设计final方案 13:00 13:30 0 30 30   编写 bug修正报告 14:35 15:14 0 39 40 11月25号 站立会议 继续完成没完成任务 13:00 13:30 0 30 30   编码 新亮点 14:45 18:23 21 207 180   数据 数据收集整理 19:21 20:48 13