Html==>>一些经典_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:29:27

1094人浏览过

来源于php中文网

原创

1.CSS overflow 属性

2.标签

立即学习“前端免费学习笔记（深入）”；

标签用于搜集用户信息。

立即学习“前端免费学习笔记（深入）”；

1 type属性

立即学习“前端免费学习笔记（深入）”；

根据不同的 type 属性值，输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

立即学习“前端免费学习笔记（深入）”；

text：文本区域
　　　　readonly属性：是否只读。
password：密码区域，输入的文本以'*'展示
checkbox：复选框
　　　　 checked属性：是否选中；
radio：单选框；
　　　　name属性：指定多个单选框的在一个区域里进行单选操作
reset：重置当前

表单信息到指定页面
button：普通按钮
　　　　value属性：button按钮显示的文本
file：文件选择标签
hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此
image：图片区域
　　　　src属性：指定图片存放的路径；
　　　　title属性：鼠标移到图上显示的文本；
　　　　alt：图片加载失败或关闭时，显示的文本；

立即学习“前端免费学习笔记（深入）”；

2 示例

立即学习“前端免费学习笔记（深入）”；

可创建单选或多选菜单，类似于winform的combox或listbox。

1 属性

1) size {int}：设置下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式。
2) multiple {boolean}：是否多项选择。若为多选，按住Ctrl+左键可进行多选操作。

3) item子项：

① optgroup>标签：定义选择项的类别，不能被选中。
　　label {string} 属性：类别展示的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息

② option>标签：定义可选的项目
　　vlaue {string} 属性：选择项具体的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息

立即学习“前端免费学习笔记（深入）”；

2 示例

<h3>select标签</h3><select id="province" multiple=multiple size="6" > <optgroup label="直辖市" ></optgroup> <option value="bj" title="北京市" >北京</option> <option value="sh">上海</option> <optgroup label="省市" ></optgroup> <option value="zj">浙江</option> <option value="fj">福建</option></select>

立即学习“前端免费学习笔记（深入）”；

4. 标签

多行文本区域，可以通过 cols 和 rows 属性来设定 textarea 的尺寸。

1 属性

rows {int}：表示显示的行数。
cols {int}：表示显示的列数。
readonly {boolean}：是否只读。

立即学习“前端免费学习笔记（深入）”；

2 示例

立即学习“前端免费学习笔记（深入）”；

5. 标签

相当于一个展示文本框。

1 属性

for {elementID}：关联对应的控件id；当点击此label标签时，绑定id的控件会获取焦点；

Neon AI

Neon AI帮助开发人员创建会话式AI应用程序和设备

下载

<table> <tr> <td><label for='username'>姓名：</label></td> <td><input type="text" id='username'/></td> </tr> <tr> <td><label for='userpwd'>密码：</label></td> <td><input type="password" id='userpwd' /></td> </tr></table>

立即学习“前端免费学习笔记（深入）”；

2 示例

立即学习“前端免费学习笔记（深入）”；

标签

类似于winform中的groupBox控件。

1.item子项

：表示抬头的名称。

<h3>fieldset标签</h3><fieldset style='width:130px' > <legend>性别</legend> <input type="radio" name='sex' value='boy' />男 <input type="radio" name='sex' value='girl' />女</fieldset>

立即学习“前端免费学习笔记（深入）”；

2 示例

7. ul、ol、li 列表标签

1 介绍

ul ：unordered list （无序列表）
ol ：ordered list （有序列表））
li ：list item （列表项目），基于上面2个列表子项目。

代码示例：

<ul type=circle> <li>ul1</li> <li>ul2</li> <li>ul3</li></ul><ol type=1> <li>li1</li> <li>li2</li> <li>li3</li></ol>

立即学习“前端免费学习笔记（深入）”；

2 属性

type {string}：定义了

标签前面的符号样式。

ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；

8.CSS display属性

1 主要的值

1) none ：此元素不被显示；
2) block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
3) inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素

2 display:block 演示

input3 设为了display:block

立即学习“前端免费学习笔记（深入）”；

3 display:inline

div 设为了display:inline

立即学习“前端免费学习笔记（深入）”；

9.CSS display:none和visibility:hidden区别

visibility:hidden隐藏，但在浏览时保留位置；

CSS display:none视为不存在，且不加载！

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

立即学习“前端免费学习笔记（深入）”；

pre标签的作用是什么？预格式化文本怎么用？

HTML转义字符有哪些？避免XSS的5种安全编码方案

HTML特殊字符怎么显示？避免转义的5种实体编码方案

html下划线怎么设置

html除号怎么打

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：我就是要用CSS实现_html/css_WEB-ITnose 下一篇：手淘年货节舞龙揭幕动画实战_html/css_WEB-ITnose

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

AI 图片处理图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式，涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明，帮助用户高效找到pixiv官方网站，实现便捷、安全的网页端浏览与账号登录体验。

463

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式，涵盖首页直达地址、账号登录流程与常见访问问题说明，帮助用户快速找到微博官网主页，实现便捷、安全的网页端登录与内容浏览体验。

135

2026.02.13

Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开，系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示，帮助开发者构建流畅、可维护的跨平台移动应用。

2026.02.13

TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者，深入讲解 TypeScript 类型系统与大型项目结构设计方法，并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例，帮助开发者提升代码可维护性与开发效率。

2026.02.13

Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开，系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示，帮助开发者构建高可用、可扩展的分布式缓存系统。

2026.02.13

c语言数据类型

本专题整合了c语言数据类型相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式，涵盖账号登录流程、官方直连入口及平台访问方法说明，帮助师生用户快速进入雨课堂在线教学平台，实现便捷、高效的课程学习与教学管理体验。

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式，涵盖智能写作工具、图片生成体验入口和官网登录方法，帮助用户快速直达豆包AI平台，高效完成文本创作与AI生图任务，实现便捷智能创作体验。

524

2026.02.12

PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师，深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析，帮助开发者提升数据库响应速度与系统稳定性。

2026.02.12

热门下载

网站特效

网站源码

网站素材

前端模板