首页 技术 正文
技术 2022年11月14日
0 收藏 967 点赞 3,972 浏览 3003 个字

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297