html 学习

最新推荐文章于 2023-12-14 18:41:17 发布

flowerspring

最新推荐文章于 2023-12-14 18:41:17 发布

阅读量511

点赞数

分类专栏： http

http 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

块
div 块内元素
span 行内元素

HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>
</html>

HTML 表单和输入

HTML 表单用于搜集不同类型的用户输入。

表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
input 元素
...
</form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多

数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
浏览器显示如下：
First name:

Last name:
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
浏览器显示如下：
Male
Female
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
浏览器显示如下：
I have a bike
I have a car
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名

。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
浏览器显示如下：
Username:
Submit
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到

"html_form_action.asp" 的页面。该页面将显示出输入的结果。

表单标签
标签描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<isindex> 已废弃。由 <input> 代替。

HTML <input> 标签

定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文

本控件、单选按钮、按钮等等。
HTML 与 XHTML 之间的差异
在 HTML 中，<input> 标签没有结束标签。
在 XHTML 中，<input> 标签必须被正确地关闭。
属性

new : HTML5 中的新属性。
属性值描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align
left
right
top
middle
bottom
不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete
on
off
规定是否使用输入字段的自动完成功能。
autofocus autofocus
规定输入字段在页面加载时是否获得焦点。
（不适用于 type="hidden"）
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
formaction URL
覆盖表单的 action 属性。
（适用于 type="submit" 和 type="image"）
formenctype 见注释
覆盖表单的 enctype 属性。
（适用于 type="submit" 和 type="image"）
formmethod
get
post
覆盖表单的 method 属性。
（适用于 type="submit" 和 type="image"）
formnovalidate formnovalidate
覆盖表单的 novalidate 属性。
如果使用该属性，则提交表单时不进行验证。
formtarget
_blank
_self
_parent
_top
framename
覆盖表单的 target 属性。
（适用于 type="submit" 和 type="image"）
height
pixels
%
定义 input 字段的高度。（适用于 type="image"）
list datalist-id 引用包含输入字段的预定义选项的 datalist 。
max
number
date
规定输入字段的最大值。
请与 "min" 属性配合使用，来创建合法值的范围。
maxlength number 规定输入字段中的字符的最大长度。
min
number
date
规定输入字段的最小值。
请与 "max" 属性配合使用，来创建合法值的范围。
multiple multiple 如果使用该属性，则允许一个以上的值。
name field_name 定义 input 元素的名称。
pattern regexp_pattern
规定输入字段的值的模式或格式。
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
src URL 定义以提交按钮形式显示的图像的 URL。
step number 规定输入字的的合法数字间隔。
type
button
checkbox
file
hidden
image
password
radio
reset
submit
text
规定 input 元素的类型。
value value 规定 input 元素的值。
width
pixels
%
定义 input 字段的宽度。（适用于 type="image"）

HTML DOM 参考手册：
Input Button 对象
Input Checkbox 对象
Input Color 对象
Input Date 对象
Input Datetime 对象
Input Datetime Local 对象
Input Email 对象
Input FileUpload 对象
Input Hidden 对象
Input Input Image 对象
Input Month 对象
Input Number 对象
Input Password 对象
Input Range 对象
Input Radio 对象
Input Reset 对象
Input Input Search 对象
Input Submit 对象
Input Text 对象
Input Input Time 对象
Input Input URL 对象
Input Week 对象

type

button checkbox file
hidden image password
radio reset submit text

规定 input 元素的类型。

<html>

<body>

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">

我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">

名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">

男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<input type="button" value="Hello world!">

<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>

</form>

<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

<form name="input" action="/html/html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br />
Female:
<input type="radio" name="Sex" value="Female">
<br />
<input type ="submit" value ="Submit">
</form>

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>

<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
</body>

</html>

HTML <textarea> 标签

<textarea rows="3" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

定义和用法

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。有关 wrap 属性的详细信息。

HTML 与 XHTML 之间的差异

NONE

属性

New: HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
cols	number	规定文本区内的可见宽度。
disabled	disabled	规定禁用该文本区。
form	form_id	规定文本区域所属的一个或多个表单。
maxlength	number	规定文本区域的最大字符数。
name	name_of_textarea	规定文本区的名称。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
rows	number	规定文本区内的可见行数。
wrap	hard soft	规定当在表单中提交时，文本区域中的文本如何换行。。

HTML <select> 标签

创建带有 4 个选项的选择列表：

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

定义和用法

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

HTML 4.01 与 HTML 5 之间的差异

HTML5 添加了一些新属性。

提示和注释：

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

属性

New: HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

HTML <optgroup> 标签

实例

通过 <optgroup> 标签把相关的选项组合在一起：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

定义和用法

<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

HTML 与 XHTML 之间的差异

NONE

必需的属性

属性	值	描述
label	text	为选项组规定描述。

可选的属性

属性	值	描述
disabled	disabled	规定禁用该选项组。

HTML <option> 标签

实例

创建带有 4 个选项的选择列表：

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

所有浏览器都支持 <option> 标签。

定义和用法

option 元素定义下拉列表中的一个选项（一个条目）。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

option 元素位于 select 元素内部。

HTML 与 XHTML 之间的差异

在 HTML 中，<option> 没有结束标签。

在 XHTML 中，<option> 必须被正确关闭。

提示和注释：

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

可选的属性

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
label	text	定义当使用 <optgroup> 时所使用的标注。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

HTML <button> 标签

实例

以下代码标记了一个按钮：

<button type="button">Click Me!</button>

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 <button> 标签。

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

定义和用法

<button> 标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 中的新属性：autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。

提示和注释

注释：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。

属性

new : HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form	form_name	规定按钮属于一个或多个表单。
formaction	url	覆盖 form 元素的 action 属性。注释：该属性与 type="submit" 配合使用。
formenctype	见注释	覆盖 form 元素的 enctype 属性。注释：该属性与 type="submit" 配合使用。
formmethod	get post	覆盖 form 元素的 method 属性。注释：该属性与 type="submit" 配合使用。
formnovalidate	formnovalidate	覆盖 form 元素的 novalidate 属性。注释：该属性与 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	覆盖 form 元素的 target 属性。注释：该属性与 type="submit" 配合使用。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

注释：formenctype 属性可能的值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

flowerspring

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 学习

块div 块内元素span 行内元素HTML:提示：... ... ...CSS:p.tip span {font-weight:bold;color:#ff9955;}div#container{width:500px}div#header {background-color:#99bbbb;}div#menu {b
复制链接

扫一扫

专栏目录