奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】

简介: 奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】

奇妙的html 和 Css【关于html、Css 开发中一些小奇怪现象和 非常重要的细节】

 

1、重要细节】:a 标签定义超链接

■ <a> 标签可以是超链接或锚。【a 标签重要的属性 href】

● 通过 href 属性,创建指向另外一个文档的链接(或者超链接);

● 通过使用name 或 id 属性,创建一个文档内部的书签(即,可以指向文档片段的链接);

细节:# 占位符,即当前页面的意思。

 

 

2、重要细节img 标签,一般宽或高只设置其中的一个属性【不要同时一起设置,会导致图片失真】

img 必须要有的两个属性 src 和 alt【alt 就是图片显示不出来的提示】,

■ 还可以加个 title【title 就是鼠标移动到图片身上的提示】

 

 

3、重要细节input标签, 作为输入框,若是想将输入框中的内容输给action的那个资源进行处理,必须要有name属性;

  【name 和 内容,即参数名和参数 是键值对】

  【value 是用来回显内容的

<input type="text" name="username" valule="默认值"/>    //有value属性,则输入框默认有内容,否则内容就是空的,需要用户输入,然后name=内容; 传给action的服务器处理

 

 

4、重要细节补充一个标签: frameset 框架标签【属性 划分行rows, 划分列cols】,

属性src 可以将其他页面的内容拼接到本框架中。

frame 框架上定义上 name 属性作为锚点; 结合超链接a的target 属性=锚点值。


22.png

23.png


5、重要细节:文件上传准备 <form>表单 method 必须是"POST"enctype"multipart/form-data"

★ 文件上传

  • 上传文件的要求:表单form 请求方式必须是 post 方式编码方式必须是 二进制,即enctype="multipart/form-data"
    上传的文件的控件类型必须是 file.
<form action="/upload" method="POST" enctype="multipart/form-data">
    文件上传: <input type="file" name="pic">
</form>

 

✿ 注意:使用二进制的编码之后的form enctype="multipart/form-data"  在 Servlet 中再也不能通过request.getParameter 方法来获取参数了,设置编码都没有效果。


 

 

 

1、【奇怪现象】:发现了一个奇妙现象:数字不自动换行

● 文本

<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>

● 数字

<div class="title">555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>

结果:文本自动换行、数字不自动换行

目录
相关文章
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
本文展示了AI编程从概念到实践的革命性突破,以一个CSS代码优化工具为例,说明AI如何在3分钟内完成传统开发需2天的任务。文章详细解析了AI在垂直领域工具开发、高频技术场景覆盖及代码维护优化中的应用,并探讨了智能上下文感知、模式识别优化等核心功能。同时,面对语义理解与逻辑验证等挑战,AI结合开发者补充规则,实现人机协同。最终总结指出,AI编程并非取代开发者,而是助力效率提升,推动“需求即代码”的未来方向,开启软件开发新纪元。
239 4
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
这是一个由AI生成的完整CSS渐变生成器项目,具备可视化交互、实时预览和代码生成功能。通过HTML、CSS和JavaScript实现,支持线性与径向渐变,提供随机生成和复制代码功能。项目展示了AI编程助手在快速原型开发、教学辅助和设计系统集成中的应用价值。其智能上下文感知、全链路代码生成和决策能力,为开发者提供了高效工具支持,助力从样板代码中解放创造力。附带优化方向如增强渐变类型、智能推荐系统及工程化改进,进一步拓展了应用场景。
281 2
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
|
12月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
881 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
781 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1229 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
309 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
662 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
303 24
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
348 2