Rumah > hujung hadapan web > html tutorial > css基础结构化标记表单等_html/css_WEB-ITnose

css基础结构化标记表单等_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:30:21
asal
1595 orang telah melayarinya

1、什么是结构化标记

对布局使用的div 进行升级 , 根据页面的不同区域而提供的不同标签。作用与div几乎一致

专门用于搭建网站结构而用

2、结构标记详解

1、

元素

作用:用于定义【网页内容的头部】、或者是【某部分信息中的头部】

语法:

头部区域的内容

2、

作用:用于定义页面的【导航链接】部分

语法:

3、

元素

作用:定义文档中的 小节,可以定义网页主体内容

语法:

css基础结构化标记表单等_html/css_WEB-ITnose

普通文本 ....

....

4、

元素

作用:定义独立于文档其他部分的内容。

场合:多用于 论坛帖子、新闻信息、博客条目、用户评论、微博信息内容

语法:

国产大飞机C919下线

...... ..... .....

5、

元素

作用:定义某区域的脚部(底部)信息

定义 版权信息、企业标识、售后服务 等一些非重要信息

语法:

  • 关于我们
  • 联系我们
  • 社会招聘

6、

作用:多数用于定义侧边栏

语法:

发表信息

查看最新发表记录

7、注意:

如果在有些网站中 结构化标记 不够来显示网页的内容的时候,那么就使用 div 灵活控制

2、表单

1、表单

作用:接收用户的数据,【并且提交给服务器】

1、语法

定义表单:

主要属性:

1、action : 动作,提交给服务器处理程序的 url,默认提交给本页

2、method : 提交方式,常用取值:get 或者 post

get : 本意是从服务器端得到数据

提交信息会原封不动的显示在地址栏上(明文提交),最大能提交 2kb 的数据

post : 本意是想发送数据给服务器去处理,

提交数据时,信息不会显示在地址栏上(密文提交),不限制提交数据大小

post的安全会高一点,对安全性要求比较高的时候,比如用户的注册、登录一定会使用post。提交数据量较大时,也选择使用post。

3、enctype :表单数据进行编码的方式

注意:文本提交 和 文件提交 将采用不同的编码方式

默认值为 文本的提交方式 :application/x-www-form-urlencoded

提交文件时,需要将此属性值更改为:

multipart/form-data

4、name : 定义表单名称

2、表单元素

又称为表单控件,具备可视化外观,并且能够接受用户输入的数据

表单元素分类:

1、input元素

全部以 input 单标记开始的元素

语法:

属性:

1、type :类型, 根据不同的type值,创建不同的input元素(文本框、密码框、单选按钮、复选框)

2、value :值,当前表单元素的值(默认值,用户输入的值)

3、name :名称,定义表单元素的名称,主要是提交给【服务器】去使用

4、id :唯一标识,提供给【本页面】的【javascript】去使用

5、disabled :禁用控件

1、文本框与密码框

文本框:

密码框:

属性:

maxlength : 最大长度,限制用户输入的字符数

readonly : 只读 ,只能看, 不能写

name 与 id 值得取值规范:以控件的缩写开始,后面跟着功能名称,功能名称的每个单词中,首字符都要大写

文本框:用户名称 --> txtUserName

密码框:用户密码 --> txtUserPwd

2、单选按钮 和 复选框

单选按钮:

注意:name属性 除具备上述的功能外,还能够将 单选按钮进行分组,一组内,只能有一个被选中

复选框:

 文本

属性:checked 3、按钮

1、提交按钮功能固定化,将表单内的所有表单元素的数据都提交给服务器

2、重置按钮

功能固定化,将表单内的所有的表单元素恢复成初始值。清空数据。

3、普通按钮

没有任何功能,用于执行客户端的脚本的。(可自定义按钮功能)

==>

userDo.php?txtUserName=wuji.zhang&txtUserPwd=zhaomin&rdoGender=Female&chkHobby=eat&chkHobby=play

4、隐藏域 和 文件选择框

1、隐藏域

隐藏在html页面中,不会显示给用户去看的元素,但是能够被提交到服务器上。

userDo.php?txtUserName=ZHANGWUJI&txtUserPwd=WUJI.ZHANG&rdoGender=Female&chkHobby=eat&chkHobby=drink&txtUid=1101001

2、文件选择框

允许用户打开一个对话框,选择文件上传到服务器上。

注意:

1、要将 enctype 的值更改为 multipart/form-data

2、method 必须为 post

5、html5 core

2、textarea元素

学名:多行文本域、多行文本输入框

属性:

name : 名称

cols : 指定文本域的列数,一行内能显示多少个字符

rows : 指定文本域的行数,默认情况下显示几行数据,超出的话则显示滚动条

3、select 和 option

select : 选项框、下拉列表框

语法:

属性:

name : 元素名称

size : 默认显示选项框的长度 大于1,则为滚动列表

multiple : 多选

option : 选项框中的选项数据,选项

属性:

value : 选项的值

selected : 预选中

4、其他元素

1、

关联 【文本】 以及 【表单控件】

属性:

for : 表示与该元素相关联的【控件的】【ID】值

语法:

2、分组元素

语法:

: 为控件分组

: 为分组指定一个标题

3、其他标记

1、浮动框架

可以通过该标签,向一个网页中嵌入另外一个网页

属性:

1、src

2、width

3、height

4、frameborder : 引入的浮动框架的边框,值为0,则无边框

注意:

1、iframe 标签 必须成对出现

2、摘要与细节

能够展开和收缩的内容

语法:

标题

正常显示内容

3、度量元素

语法:

属性:

min : 当前度量元素的范围最小值 , 默认0

max : 当前度量元素的范围最大值 , 默认1

value : 度量值,默认为 0

4、时间元素

作用:时间的不同表现形式关联到一起

5、高亮显示

高亮显示的文本

    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan