<form name="form_name" action="url" method="get|post">…</form>

<form action="">
    …
</form>

<input  type=“控件类型”>

属性	属性值	描述
type	text password radio checkbox button submit reset image hidden file	单行文本输入框 密码输入框 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图像形式的提交按钮 隐藏域 文件域
name	由用户自定义	控件的名称
value	由用户自定义	input 控件中的默认文本值
size	正整数	input 控件在页面中的显示宽度
readonly	readonly	该控件内容为只读（不能编辑修改）
disabled	disabled	第一次加载页面时禁用该控件（显示为灰色）

文本输入框

<!-- 文本输入框 -->
用户名：<input type="text" maxlength="6"   name="username"  value="1234" >

• 1
• 2

属性:

• maxlength：设置文本输入框最多能输多少字符
• readonly=”readonly”：设置文本输入框为只读（不能编辑）
• disabled+”disabled”：控件属于非激活状态
• name=”username”：给输入框设置名称
• value：设置默认显示的值

密码输入框

<!-- 密码输入框 -->
密码：<input type="password" name="pwd" value="123">

• 1
• 2

属性用法与文本输入框的用法一样。

单选按钮

<!-- 单选按钮 -->
性别：
<input type="radio" name="xb"  checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女

• 1
• 2
• 3
• 4

注意：实现单选效果一定要给控件设置相同的名称

属性：

• checked=”checked”：设置默认选中项

多选控件

兴趣爱好：
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头

• 1
• 2
• 3
• 4

属性：

• checked=”checked”：设置默认选中项

图片上传控件

头像：
<input type="file">

• 1
• 2

表单提交按钮

<!-- 表单提交按钮 -->
<input type="submit"  value="登录">

• 1
• 2

普通按钮

<!-- 普通按钮 -->
<input type="button"  value="普通按钮">

• 1
• 2

注意：该按钮不能进行表单提交。通常和 js 代码配合使用。

重置按钮

清空所有表单数据，恢复到初始状态

<!-- 重置按钮 -->
<input type="reset">

• 1
• 2

图片按钮

<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">

• 1
• 2

select 控件

在 HTML 中，要想制作下拉菜单，就需要使用select控件。

下拉列表

出生地：
省：
<select multiple="multiple">
    <option>山东</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
    <option  selected="selected">北京</option>
</select>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

属性：

• selected=”selected”：设置默认选中项
• multiple=”multiple”：可以实现多选效果

下拉列表分组显示

市(区)：
<select id="name">
    <optgroup label="北京市">
        <option>西城区 </option>
        <option>东城区</option>
        <option>海淀区</option>
        <option>昌平区</option>
    </optgroup>
    <optgroup label="上海市">
        <option>黄浦区 </option>
        <option>松江区</option>
        <option>浦东新区</option>
        <option>静安区</option>
    </optgroup>
</select>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

textarea 控件

如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

• 1
• 2
• 3

属性：

• cols：相当于宽度
• rows：相当于高度

自我介绍：
<textarea cols="30" rows="5">
</textarea>

• 1
• 2
• 3

组合表单

fieldset 用于表单分组。

语法：

<fieldset>
    <legend>用户注册</legend>
</fieldset>

• 1
• 2
• 3

举例：

<fieldset>
    <legend>用户注册</legend>
        用户名：<input type="text" maxlength="6"   name="username"  value="" >
        <br>
        <br>
        密码：<input type="password" name="pwd" value="123">
</fieldset>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

表单补充

判断网址

<!-- 判断网址 -->
<input type="url">
<input type="submit">

• 1
• 2
• 3

判断邮箱

<!-- 判断邮箱 -->
<input type="email">
<input type="submit">

• 1
• 2
• 3

日期控件

<!-- 日期控件 -->
<input type="date">
<input type="submit">

• 1
• 2
• 3

时间控件

<!-- 时间控件 -->
<input type="time">
<input type="submit">

• 1
• 2
• 3

带有 spinner 控件的数字字段

<!-- 带有 spinner 控件的数字字段 -->
<input type="number">
<input type="submit">

• 1
• 2
• 3

属性：

• step：表示每次加减的值（即步长）

带有 slider 控件的数字字段

<!-- 带有 slider 控件的数字字段 -->
<input type="range">
<input type="submit">

• 1
• 2
• 3

属性：

• max：最大值
• min：最小值
• step：每次加减的值（即步长）

定义拾色器

<!-- 定义拾色器 -->
<input type="color">
<input type="submit">

• 1
• 2
• 3

标签语义化

• 标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

• 标签语义化意义：

1: 网页结构合理

2: 有利于 SEO :和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）;

4: 便于团队开发和维护.

• 标签语义化（注意事项）

1：尽可能少的使用无语义的标签 div 和 span ；

2：在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u 等，改用 css 设置。

4：需要强调的文本，可以包含在 strong 或者 em 标签中。strong 默认样式是加粗（不要用b），em 是斜体（不用 i ）；

总结

我的 html 基础学习是跟着传智播客2016年的视频课程学习的，基础就这些内容，特别整理下来以加深记忆。内容或多或少会与网络上的内容有些许出入。总的来说 html 很简单，很容易上手。但这只是基础，html + css + javascript 才能做出真正漂亮的网页。

千里之行，始于足下，接下来的路，加油！

优质内容筛选与推荐>>
1、Git常用命令使用大全
2、notifyDataSetInvalidated()和notifyDataSetChanged()有什么区别？
3、C/C++时间函数使用方法--详细篇 (转载)
4、加载等待并跳转页面
5、NET 应用架构指导 V2 学习笔记（十四） 数据访问层指导