HTML基础入门03
1.表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.
1.1form标签
描述了要把数据按照什么方式, 提交到哪个页面中.
关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后面再详细研究.
1.2input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
1) 文本框
2) 密码框
3) 单选框
男
女注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.
4) 复选框
吃饭
睡觉
打游戏5) 普通按钮
当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).
6) 提交按钮
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
7) 清空按钮
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置
8) 选择文件
点击选择文件, 会弹出对话框, 选择文件.
1.3label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
1.4select 标签
下拉菜单
option 中定义 selected="selected" 表示默认选中
注意! 可以给的第一个选项, 作为默认选项
1.5textarea 标签
文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
2.无语义标签: div & span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.
111
222
333
111
222
333
3.综合案例: 展示简历信息
预期效果：
参考代码：
Document
关羽
基本信息
- 求职意向:C++开发工程师
- 联系电话:123123
- 邮箱:12345qq.com
Git链接
博客链接
教育背景
- 1990 - 1996 小葵花幼儿园 幼儿园
- 1996 - 2002 小葵花小学 小学
- 2002 - 2005 小葵花中学 初中
- 2005 - 2008 小葵花中学 高中
- 2008 - 2012 小葵花大学 计算机专业 本科
专业技能
- Java 基础语法扎实，已经刷了 800 道 Leetcode 题；
- 常见数据结构都可以独立实现并熟练应用；
- 熟知计算机网络理论，并且可以独立排查常见问题；
- 掌握 Web 开发能力，并且独立开发了学校的留言墙功能。
我的项目
-
留言墙
开发时间:2008年9月~2008年12月
功能介绍：
- 支持留言发布
- 支持匿名留言
-
学习小助手
开发时间:2008年9月~2008年12月
功能介绍：
- 支持错题检索
- 支持同学探讨
个人评价
在校期间，学习成绩优良，多次获得奖学金。
效果展示：
4.综合案例: 填写简历信息
预期效果：
提示:
使用表格进行整体布局
使用各种 input 标签 + textarea 实现页面中的输入控件
input 标签搭配合适的 label 提升用户体验.
针对下拉框这种选项较多的, 使用 Emmet 快捷键提高输入效率.
图标图片可以去 https://www.iconfont.cn/ 找
参考代码：
Document
请填写简历信息
性别
出生日期
应聘岗位
掌握的技能
项目经历
应聘者确认：
- 以上信息真实有效
- 能够尽早去公司实习
- 能接受公司的加班文化
效果展示：
5.HTML 特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:
空格:
小于号: <
大于号: >
按位与: &
html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆.
6.总结
HTML 只是描述了页面的骨架结构.使用 CSS 可以针对页面进行进一步美化.