html学习

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天我们要学习的是html中重要部分，结构标记和表单。结构标记用于网页页面的整体布局排版，而表单则是用于将数据提交给服务器，与服务器进行数据交换，没有加入表单元素，页面效果显示的再完美，数据也无法传给服务器。

一、结构标记

1、作用

增强标签的语义性

2、结构标记

1、<header>元素

用作与网页头部，可能包含网页标题、LOGO、导航信息

该元素可以出现多次,等同于 <div id="header"></div>

</header>

2、<nav>元素

用于定义网页导航

<nav>
<ul>
<li>首页</li>
<li>母婴用品</li>
<li>家居用品</li>
</ul>
</nav>

复制代码

等同于：<div id="nav"></div>

3、<section>元素

section：小节

该元素标识网页内容中的某一具体部分。定义文章章节、内容的楼层（购物类网站居多）

4、<article>元素

article:文章，内容。。。

在论坛中表式某一具体帖子信息、新闻类网站的某一具体新闻信息、博客类网站具体博客条目、用户评论等

5、<footer>元素

定义网页底部信息，多用于企业介绍、标识等部分内容

等同于 <div id="footer"></div>

6、<aside>元素

侧边栏，可以标识正规内容额外的部分内容

边栏内容优先使用<aside>元素

<!DOCTYPE html>
<html>
<head>
<title> 结构标记 </title>
<meta charset="utf-8" />
</head>
<body>
<header>网页头部</header>
<nav>网页导航</nav>
<section>
<aside>产品分类</aside>
<div id="banner">广告</div>
</section>
<section id="f1">母婴用品</section>
<section id="f2">家具用品</section>
<footer id="footer_box">配送信息</footer>
<footer id="footer">企业介绍</footer>
</body>
</html>
二、表单 1、表单的作用 1、显示、收集用户信息 2、将收集到的信息提交给服务器 2、表单语法语法:<form></form> 注意：表单中的内容是可以提交给服务器的，提交给服务器的内容要放在表单元素里属性: action : 表单提交时的动作，提交地址,值为url,默认值为本页 method : 提交方式，常用取值：get或post get(默认值) : 明文提交，安全性较低，提交数据大小有限制，为2kb(根据浏览器决定) get提交数据的格式 url?name=value&name1=value1&name2=value2 ... ...test.jsp?uName=SanFeng&uPass=Hello&gender=3 post : 密文提交,安全性较高，无大小限制注意：用户登录、用户注册一律使用post提交向服务器索取数据时(搜索引擎搜索数据)，可以使用get，也可以使用post 1.enctype : 表单数据的编码方式取值 : 1、application/x-www-form-urlencoded(默认) 可以将正常字符、特殊符号(&)提交给服务器(不支持文件上传) 2、text/plain 可以将正常字符提交给服务器 3、multipart/form-data 如果上传文件的时候，必须使用该值 name : 定义表单名称
<form action="...." method="post/get">
....
</form>

复制代码

3、表单元素

表单元素指的是出现在表单中能够与用户进行交互的控件

表单元素分类:

1、input元素：由input标签组成的

2、textarea元素：<textarea> ,多行文本域

3、select 和 option ：下拉框

4、其他元素

1、input元素

input元素是空标记 <input />

属性:

type : 可以创建各种类型的input元素，比如：文本框、密码框、单选按钮、复选框

value : 当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值

name : 名称，要提交给服务器去使用

id : 唯一标识，只能在当前页面使用，服务器不能用

disabled : 禁用控件

1、文本框

type="text"

注意：如果type不写，或不在指定值范围内，那么默认都为 text

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
<input type="text"/>
</form>
</body> </html>

复制代码

2、密码框

以密文的方式接收和显示用户的数据

type="password"

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="post">
<input type="password"/>
</form>
</body> </html>

复制代码

以上两个控件的通用属性:

1、name，id，value，

2、maxlength : 限制输入的字符数

3、readonly : 设置控件为只读

3、单选按钮

type="radio"

name : 定义名称、分组

value : 值

checked : 默认被选中

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
用户性别：
<input type="radio" name="gender" checked value="0" />男
<input type="radio" name="gender" value="1" />女
</form> </html>

复制代码

4、复选框

能够实现多选的控件

type="checkbox"

name :定义名称、分组

value :值

checked :默认选中

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
爱好:
<input type="checkbox" name="hobby" value="eat" />吃
<input type="checkbox" name="hobby" value="drink" />喝
<input type="checkbox" name="hobby" value="play" />玩
<input type="checkbox" name="hobby" value="happy" />乐
</form>
</body> </html>

复制代码

5、按钮

1、提交按钮

功能固定化，用于将表单的数据提交给服务器

语法:

type="submit"

2、重置按钮

功能固定化，将表单控件值恢复到默认状态

语法:

type="reset"

3、普通按钮

没有任何功能的标准按钮，用于执行客户端脚本（自定义功能）

语法:

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
<input type="checkbox" />我已同意以上条款
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
</form>
</body> </html>

复制代码

6、文件选择框

注意:如果有文件上传的话，必须将表单的enctype更改为 multipart/form-data,同时method必须为post

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
请选择头像：<input type="file" name="uImg" />
</form>
</body> </html>

复制代码

7、隐藏域

使用场合：隐藏域在页面中是看不到的，一般会配合后台开发一起使用，从来不单独使用。

2、选项框

别名:下拉框、下拉列表

1、下拉列表

2、滚动列表

语法：

属性:

name : 定义名称

size : 大于1，则为滚动列表，否则，九十下拉列表

multiple : 设置多选

属性:

value : 选项的值

selected : 预选中

</select>

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
<select name="province">
<option value="-1">==请选择==</option>
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="TJ">天津</option>
<option value="CQ">重庆</option>
</select>
</form>
</body> </html>

复制代码

3、多行文本域

语法:

<textarea>默认显示文本</textarea>

属性:

name : 名称

cols : 指定文本域的列数，一行能显示多少个字符，表示宽度（以字符个数为单位）

rows : 指定文本域的行数，如果真是数据超出设定行数，将出现滚动条,表示高度

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<form action="test.jsp" method="get">
<textarea name="userInfo" cols="20" rows="5" readonly>
1、遵纪守法
2、爱党爱国
3、年纪已满18岁
</textarea><br />
</form>
</body> </html>

复制代码

4、其他表单元素 - <label>

关联文本与表单元素

语法:

属性:

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

三、其他标记

1、浮动框架

在一个浏览器中同时显示多个页面文档

语法:

属性:

src : 引入的网页路径(url)

width : 宽度

height : 高度

frameborder : 边框

注意：尽可能的少使用 iframe 元素

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8"/>
</head>
<body>
<form action="test.jsp" method="get">
<textarea name="userInfo" cols="20" rows="5" readonly>
1、爱国
2、爱人民
3、爱党
</textarea><br /><br /><br /><br />
</form>
<iframe frameborder="0" src="01.html" width="520px">该浏览器不支持iframe</iframe>
</body> </html>

复制代码

2、摘要与细节

将一部分内容进行收缩或展开的动作

语法:

显示的内容

</details>

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8"/>
</head>
<body>
<details>
<summary>自我介绍</summary>
<div>
性别：男<br />
爱好：计算机<br />
</div>
</details>
</body> </html>

复制代码

3、度量元素

语法:

属性:

min : 度量范围的最小值，默认为0

max : 度量范围的最大值，默认为1

value : 当前的度量值，默认为0

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8"/>
</head>
<body>
设备1:<meter min="0" max="100" value="50" title="50%"></meter><br/>
设备2:<meter min="0" max="100" value="90" title="90%"></meter><br/>
<br />
</details>
</body> </html>

复制代码

4、时间元素

语法:

<time datetime="时间值">显示的文本</time>

5、分组元素

<legend></legend> 定义组标题

显示内容

</fieldset>定义组

<div class="blockcode"><div id="code_cvV"><ol><!DOCTYPE html>
               <html>
               <head>
               <title> new document

[HTML5开发] html学习

[HTML5开发] html学习

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫