页面文本框变形

最新推荐文章于 2023-03-18 09:34:18 发布
最新推荐文章于 2023-03-18 09:34:18 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： 错误 MVC 文章标签： HTML 文档 变形 DOCTYPE 规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chao88552828/article/details/9098059
版权

今天做网页的时候，遇到网页文本框变形的问题，如图：

当把文档模式切换成标准模式时就不会存在这个问题，查资料以后发现是DOCTYPE标签决定页面的文档模式的,常见的如下：

HTML DOCTYPE文档类型举例说明

HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签（例如：font、b等），不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签（例如：font、b）(梦之都就使用了此类型)，不可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


HTML5文档类型
<!DOCTYPE html>

检查自己的页面以后发现       页面的这个属性是没有问题的。但是页面的布局(样式在<head>标签的外面)不符合html规范才导致这个问题的。

HTML规范：

    HTML文档首先要声明一个文档类型,也就是上面例子第一行,定义了XHTML1.1文档类型(文档类型是为了说明这个页面使用了何种HTML规则，或者结构，这个在将来的教程中会详细介绍)
    <html>和</html>是HTML文档的开始与结束,也是HTML文档的根元素
    除了文档类型外的所有页面内容，都包括在html元素
    HTML文件中主要分为头信息head与内容信息body

文档head信息

    头信息head可以容纳文档的HTML相关信息,比如标题title，页面的语言与文字类型，css样式，javascript代码，简短描述，关键词等内容，是用户无法直接看到的

文档body信息

    内容信息body包括用户可以看到的全部内容，比如段落，链接，表格等


解决办法：

把<head></head>之外的样式放在head标签内，问题就解决了。

某些人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
程序人生
11-17 3193
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
【HTML】掌握 HTML 5 标签搭建页面结构
ITLearnNote—-聚焦互联网的技术革新
04-19 628
HTML基础介绍
关于html在webview中input框点选放大问题
weixin_33686714的博客
08-05 365
关于html在webview中input框点选放大问题 可能是选择的开发平台中webview中的问题，html在webview中input框点选，界面放大后input失去焦点后页面无法缩小。导致了整个界面的大小被放大~~~~~~~~ 由于界面使用大小的自适应这一问题导致整个界面在设备端无法正常显示。苦苦寻觅了好久终于找的了我个人html5导致这种问题的原因...
HTML文本框参考样式及常见操作技巧大全
thgj0006的博客
03-18 4045
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？W3Cschool文本输入框实例：如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。
html页面 在ie 浏览器下页面显示变形
李古拉雷
11-20 8326
当遇到在别的浏览器下显示正常，但在ie 下页面变形，style 样式规则都已经写好的情况下。 这时造成这种情况可能是 html 页面头部指定的规则引起的 如果默认的可能是： 只需要改成 告诉浏览器 本页面 使用哪种标准和规范解析。是否满足w3c标准。 现在显示可能就正常了。
java样式input下滑波浪线_input的各种样式
weixin_32513585的博客
02-26 369
输入框景背景透明：鼠标划过输入框，输入框背景色变色：style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">输入字时输入框边框闪烁(边框为小...
Web页面文本框组件
03-09
Ajax框架介绍 　　虽然大部分开发人员在过去使用过XMLHttp或者使用Iframe来加载数据，但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦，开发人员需要学习新的技巧及如何最好利用这些新技术。 　　AJAX模式 　　许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web服务中包含了，就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。 　　AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。 　　综合各种变化的技术和强耦合的客户服务端环境，AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。
Dreamweaver CS6利用多媒体对象丰富页面效果综合实践1.pdf
07-10
为了增加可读性和交互性，你可以在“标题”文本框中输入Flash动画的描述性标题，这样当用户将鼠标悬停在动画上时，会显示这个标题作为提示。 插入Flash对象后，可以调整其尺寸以适应网页布局。在“属性”面板中，你...
PPT页面尺寸自定义设置教程.rar
09-03
此时，你可能需要手动调整图片、文本框和其他元素的位置，以适应新的页面尺寸。 9. **保存和测试** 最后，别忘了保存你的工作。在实际环境中播放幻灯片，确认所有的内容在新的尺寸下看起来是否正常，没有被裁剪或...
html页面怎样能够自适应电脑屏幕宽度
diying7902的博客
05-05 3816
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。　　第一种方法：做一个网页解决问题（长了点）　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者...
html表格打印边框不全,解决table边框在打印中不显示的问题 (转)
weixin_42691388的博客
06-20 3979
»先了解一下，table边框如何设置一、只对表格table标签设置边框只对table标签设置border(边框)样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。CSS代码：.table-a table{border:1px solid #F00}HTML代码：站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端...
HTML文本框
热门推荐
weixin_44540251的博客
02-18 2万+
开发工具与关键技术：DW 作者：文泽钦 撰写时间：2019年2月18日 想写出一篇好文章，有感觉但没有情绪怎么办；一个抒情的网页，希望能给爱写做的朋友带来灵感，首先写一个div包裹整个页面： &lt;div class=”box”&gt; &lt;!—标题，text-align：center；文字居中--&gt; &lt;h2 style=”text-align:center;”&...
页面添加文本框
dingzong4331的博客
10-23 317
当点击加号时，在当前行的下一行会增加相同的一行；当点击减号时，会自动给移出。 HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
解决网页缩放百分比页面变形问题
weixin_45561965的博客
04-22 5041
前端页面经常会出现网页缩放百分比页面变形这个问题 解决这个问题很简单，就是在整个布局外面加上一层div，并且为它指定好宽高就可以了。 .content{ height:**px; //整个布局的高度 width:**px; //整个布局的宽度 } 要注意的是，要是你前面布局使用了浮动，那么在最后还要整体清除一下浮动。如果你不清楚哪一个组件用了，最简单的方法就是在最后最后加上一个空的div，设置css为clear:both;就可以了。 ...
html页面文本框布局
最新发布
12-24
以下是一个简单的HTML页面文本框布局的示例： ```html <!DOCTYPE html> <html> <head> <style> .container { width: 300px; padding: 16px; background-color: white; margin: 0 auto; } .input-group { margin-bottom: 16px; } .input-group label { display: block; margin-bottom: 8px; } .input-group input[type="text"], .input-group input[type="email"], .input-group textarea { width: 100%; padding: 12px 20px; margin-bottom: 8px; border: 1px solid #ccc; box-sizing: border-box; } .input-group input[type="submit"] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; cursor: pointer; } .input-group input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>登录</h2> <form action="/login" method="post"> <div class="input-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> </div> <div class="input-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </div> <div class="input-group"> <input type="submit" value="登录"> </div> </form> </div> </body> </html> ``` 这个示例中，我们使用了HTML和CSS来创建一个简单的登录表单。通过CSS样式，我们设置了文本框的宽度、边框样式、背景颜色等。在HTML中，我们使用`<form>`元素来创建表单，并使用`<input>`元素来创建文本框和提交按钮。每个文本框都被包裹在一个`<div>`元素中，以便应用样式。用户可以在文本框中输入用户名和密码，并点击登录按钮提交表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值