HTML进阶
HTML进阶
iframe元素
框架页
通常用于在网页中嵌入另一个页面
iframe 可替换元素
- 通常行盒
- 通常显示的内容取决于元素的属性
- CSS不能完全控制其中的样式
- 具有行快盒的特点
在页面中使用flash
object
embed
它们都是可替换元素
MIME(Multipurpose Internet Mail Extensions)
多用途互联网邮件类型:
比如,资源是一个jpg图片,MIME:image/jpeg
表单元素
一系列元素,主要用于收集用户数据
input元素
输入框
- type属性:输入框类型
type: text, 普通文本输入框
type:password,密码框
type: date, 日期选择框,兼容性问题
type: search, 搜索框,兼容性问题
type: number,数字输入框
type: checkbox,多选框
type: radio,单选框
- value属性:输入框的值
- placeholder属性:显示提示的文本,文本框没有内容时显示
input元素可以制作按钮
当type值为reset、button、submit时,input表示按钮。
select元素
下拉列表选择框
通常和option元素配合使用
textarea元素
文本域,多行文本框
按钮元素
button
type属性:reset、submit、button,默认值submit
表单状态
readonly属性:布尔属性,是否只读,不会改变表单显示样式
disabled属性:布尔属性,是否禁用,会改变表单显示样式
配合表单元素的其他元素
label
普通元素,通常配合单选和多选框使用
- 显示关联
可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值
- 隐式关联
datalist
数据列表
该元素本身不会显示到页面,通常用于和普通文本框配合
form元素
通常,会将整个表单元素,放置form元素的内部,作用是当提交表单时,会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义。
fieldset元素
表单分组
美化表单元素
新的伪类
- focus
元素聚焦时的样式
- checked
单选或多选框被选中的样式
常见用法
-
重置表单元素样式
-
设置textarea是否允许调整尺寸
css属性resize:
- both:默认值,两个方向都可以调整尺寸
- none:不能调整尺寸
- horizontal: 水平方向可以调整尺寸
- vertical:垂直方向可以调整尺寸
-
文本框边缘到内容的距离
-
控制单选和多选的样式
表格元素
在css技术出现之前,网页通常使用表格布局。
后台管理系统中可能会使用表格。
前台:面向用户
后台:面向管理员。对界面要求不高,对功能性要求高。
表格不再适用于网页布局?表格的渲染速度过慢。
其他元素
- abbr
缩写词
- time
提供给浏览器或搜索引擎阅读的时间
- b (bold)
以前是一个无语义元素,主要用于加粗字体
- q
一小段引用文本
- blockquote
大段引用的文本
- br
无语义
主要用于在文本中换行
- hr
无语义
主要用于分割
- meta
还可以用于搜索引擎优化(SEO)
- link
链接外部资源(CSS、图标)
rel属性:relation,链接的资源和当前网页的关系
type属性:链接的资源的MIME类型
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体