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

1、什么是结构化标记

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

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

2、结构标记详解

1、

元素

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

语法：

头部区域的内容

2、

元素

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

语法：

3、

元素

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

语法：

普通文本 ....

....

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、高亮显示

高亮显示的文本