html之给文本框设置宽度和高度

最新推荐文章于 2024-03-01 15:16:24 发布
最新推荐文章于 2024-03-01 15:16:24 发布
阅读量3.6w 收藏 12
点赞数 11
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hfdgjhv/article/details/83792397
版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                今天在访QQ空间登录界面时，感觉其文本框的宽度和高度都好大呀，截图如下:

?k78771625
我很好奇其是怎么实现的，百度了一下，呵呵，其实不难嘛，代码如下:

<input name="" type="text" style="width:200px; height:20px;" />
           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
这里写图片描述
又是两个大汉堡
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
文本框怎么变大html,如何设置HTML文本框的大小？
weixin_33835459的博客
06-03 1万+
11 个答案:答案 0 :(得分：111)只需使用：textarea {width: 200px;}或input[type="text"] {width: 200px;}取决于“文本框”的含义。答案 1 :(得分：36)您的加价：CSS：.resizedTextbox {width: 100px; height: 20px}请注意，文本框大小是W3C box model的“受害者”。我的意思是受害...
零基础学HTML CSS源代码
05-10
文本设置手把手—给段落设置缩进.html 演示文本设置手把手—给段落设置缩进。 第18章（源代码\第18章） 示例描述：本章演示背景属性用法。 背景的基本语法.html 属性背景的基本语法。 设置背景图像....
文本框文本自动补全效果示例分享
12-09
代码如下:/*文本自动补全 zhouxiang*/ (function ($) {    $.Completion = function (setting) {        var opts = $.extend({}, $.Completion.DefaultSetting, setting);        //宽度        var Completion_Width = null;        //高度        var Completion_Height = null;        //数据源(ashx)访问路径        var Completion_Data_Ur
网页设计实验HTML的标签使用
04-22
1、在新建的HTML文件中插入两个DIV标签，id为“left”“right” 2、给新建的标签建立CSS规则，设置它们的背景颜色，高度宽度以及边界，若都设为左浮动，那么两个标签都会靠左边，如果占不满空间的话。如果一个设置为左浮动，另一个设置为右浮动，那么会出现一个左边一个右边的效果，而下面的设置则是右边的标签是距离左边40%
input 标签宽度自适应
最新发布
weixin_43794095的博客
03-01 525
要实现的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。的宽高就可以根据它内部的内容来动态改变宽高啦，它内部的内容当然就是与输入的内容同步了，把。那就设置它的宽高都为100%，让它随着父元素改变，那父元素的宽高如何确定呢？标签隐藏在标签下面，暗搓搓地操控全局。
JS模仿编辑器实时改变文本框宽度和高度大小的方法
11-26
本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法。分享给大家供大家参考。具体如下： 这里演示JS模仿编辑器中实时改变文本框大小，包括宽度和高度的方法，在一些在线编辑器，比如eWebEditor中，就有一个功能，让文本框不断的增大或减小，以适应页面的大小，这个功能是如何实现的呢？请您参考一下这个程序，相信你会从中获益。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/ 具体代码如下： <html> <head> <title>改变文字区域的高宽</title> <
前端css+html+布局笔记
09-14
详尽的前端笔记，包含html和css部分，由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 <p style="color:red;"></p> 这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性中 <p style="color:red;"></p> 这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式 基本语法 选择器 通过选择器可以选中页面中的一组元素，然后为其设置样式 元素选择器 根据标签名，选中页面中的指定元素 语法：标签名{ } 例子： div{} p{} h1{} id选择器 根据元素的id属性值选中一个唯一的元素 语法：#id {} 例子： #box1{} #hello{} 类选择器 根据元素的class属性值，选中一组元素 语法：.class{} 例子： .hello{} .box{} 通配选择器 选中页面中的所有元素 语法：*{} 通配选择器的性能比较差，尽量避免使用 并集选择器 可以同时选中符合多个选择器的元素 语法：选择器1,选择器2,选择器N{} 例子： div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法：选择器1选择器2选择器N{} 例子：p.hello{} 后代元素选择器 选中指定元素的指定后代元素 语法：祖先元素 后代元素{} 例子： div span {} div p{} 子元素选择器 选中指定元素的指定子元素 语法：父元素 > 子元素 {} 例子： div > span {} div > p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式，实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直接包含子元素的的元素叫做父元素 子元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素 兄弟元素 拥有相同父元素的元素叫做兄弟元素 块元素和内联元素 块元素 块元素会独占页面中的一行，无论他的内容的多少 一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小，不会独占一行 内联元素也叫行内元素（inline） 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置 :link 表示一个普通的链接（未访问过的链接） :visited 表示访问过的链接 :hover 鼠标移入的链接，也可以为其他元素设置hover :active 正在被点击的链接，也可以为其他元素设置active :focus 表示元素获取焦点的状态，一般用于文本框 ::selection 表示内容被选中的状态 在火狐中使用::-moz-selection来代替 :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边 一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 :after 选中元素的最后边 一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 属性选择器 根据元素的属性选择指定元素 [属性名] 选取含有指定属性的元素 [属性名="属性值"] 选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值中包含指定内容的元素 兄弟元素选择器 选取后一个兄弟元素 前一个 + 后一个 选取后边所有的兄弟元素 前一个 ~ 后边所有 子元素的伪类 :first-child 寻找父元素的第一个子元素，在所有的子元素中排序 :last-child 寻找父元素的最后一个子元素，在所有的子元素中排序 :nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序 例子 p:nth-child(3) 可以使用even，来找到偶数的子元素 可以使用odd，来找到奇数的子元素 :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 否定伪类 从一组元素中将符合要求的元素剔除出去 语法： :not(选择器) 例子： .abc:not(div) HTML，超文本标记语言 负责页面中的结构，定义出页面中的各个组成部分 HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分 标签 成对出现 <标签名></标签名> 自结束标签 <标签名 /> 属性 通过属性可以设置标签的效果 属性需要定义在开始标签中或这自结束标签中 属性实际上是一组一组名值对结构 例子： <标签名 属性名="属性值" 属性名="属性值"></标签名> <标签名 属性名="属性值" 属性名="属性值" /> HTML页面的基本结构 常用标签 <html> 网页的根标签 一个页面中有且只有一个根标签 网页中的所有内容都需要写在html标签的内部 <head> 网页的头部 该标签中的内容不会在网页中直接显示 该标签用于帮助浏览器解析页面 子标签 <title> 用来设置网页的标题 默认会在浏览器的标题栏中显示 搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名 <meta> 用来设置网页的元数据，比如网页使用的字符集 <meta charset="utf-8" /> 设置网页的关键字 <meta name="keywords" content="关键字,关键字,关键字,关键字"/> 设置网页的描述 <meta name="description" content="网页的描述"/> 请求的重定向 <meta http-equiv="refresh" content="秒数;url=地址" /> <body> 网页的主体 网页中所有的可见部分都需要在body中编写 <h1> ~ <h6> 标题标签 在html中一共有六级标题 六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3 h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容 一般一个页面中只能写一个h1 <p> 段落标签 <br /> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面中引入其他的外部页面 <iframe></iframe> 属性 src 外部页面的地址，可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时，页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 <a>链接的文字</a> 属性 href 指向链接跳转的目标地址，可以是一个相对路径 还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口中打开链接 可选值 _self 默认值，默认在当前窗口打开链接 _blank 在新窗口中打开链接 内联框架的name属性值 在指定的内联框架中打开链接 注释 语法 <!-- 注释内容 --> 注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格   < < > > 版权符号 © 图片标签 <img /> 使用图片标签可以向页面中引入一个外部图片 属性 src 指向一个外部图片的路径，可以使用相对路径 alt 指定一个在图片无法加载时对图片的描述 搜索引擎主要通过该属性来识别图片的内容 如果不写该属性则搜索引擎会对图片进行收录 width 设置图片的宽度 height 设置图片的高度 图片的格式 JPEG 颜色丰富的图片，如，照片 GIF 颜色单一，简单透明的图片，动态图 PNG 颜色丰富，复杂透明的图片 图片选择的原则 效果一致，用小的 效果不一致，用效果好的 相对路径 相对于当前资源所在的目录的路径 可以使用../返回一级目录，返回几级使用几个../ xHtml语法规范 1.HTML中不区分大小写，但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能交叉嵌套 5.属性必须有值，且值必须加引号，单引号双引号都可以 文本标签 <em> 表示语气上的强调 <strong> 表示内容的重要性 <i> 表示单纯的斜体 <b> 表示单纯的加粗 <small> 表示细则一类的内容 <cite> 表示参考的内容，凡是加书名号的都可以使用cite <q> 短引用，行内引用 <blockquote> 长引用，块级引用 <sup> 上标 <sub> 下标 <del> 删除的内容 <ins> 插入的内容 <pre> 预格式标签，可以保留代码中空格换行这些格式 <code> 表示程序代码 列表 无序列表 使用ul来创建一个无序列表，在列表中使用li来表示一个列表项 无序列表使用符号作为项目符号 有序列表 使用ol来创建一个无序列表，在列表中使用li来表示一个列表项 使用有序的序号作为项目符号 定义列表 列表相关的元素都是块元素，他们之间可以互相嵌套 去除项目符号 list-style:none
html入门到放弃笔记
05-15
HTML + JavaScript + Ajax + CSS 赵旭 [email protected] HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问服务器端的一种程序 ：如 ：桌面版QQ，... ... 2、B / S 结构 Browser / Server Browser ：浏览器 特点：通过 浏览器 就能访问服务器端的一种程序 如 ：网页版百度，网页版 QQ，网页版 京东，... ... 3、WEB 1、什么是WEB WEB，是基于Internet上的一种应用程序(网页应用程序) WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 ：也是文本，但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 ：超文本的表现形式 普通文本 a : a 超文本 a : 语言 ：具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ，以 .html 或 .htm 进行结尾的文件 开发 & 运行网页的工具： 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时，用尖括号 "",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：内容 Demo ： 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记 也称为 "单标记" 语法： 或 Demo ： 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套 在一对标记中，允许出现另外一对(一个)标记 注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中 ，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性 用来修饰标记的效果的内容，就是属性 2、语法 1、属性必须声明在开始标记中 2、属性与标记名称之间，用 空格 隔开 3、属性的值 与 属性之间 使用 "=" 连接 4、一个元素允许有多属性，多属性间，排名不分先后，中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中) 4、style ：定义 内联方式方式使用(CSS中) 4、注释 语法：<!-- --> 注意： 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C ：Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明 告知浏览器当前的HTML文档用的是哪个版本 在网页的最顶端 2、由一对 html 根标记，来表示页面的开始与结束 Demo : 1、在 htdoc 中，创建一个网页 01-first.html 文件 创建一个 记事本，将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、bgcolor ，取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html>中 增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中 输出一句话 "我的第一HTML页面" 5、设置 body text为red，bgcolor为yellow 3、文本 1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、  表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面中 输出以下内容 The element. ©2017 By Tarena The <p> element.     © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo ： 这是一段包含 ，粗体，斜体，下划线，删除线，上标，下标的文本内容 将以上文本内，对应文字的特殊效果，用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法： 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性： 1、align 文本的水平对齐方式 取值：left / center / right 4、段落元素 语法： 属性：align : left / center / right Demo : 1、在 02-text.html 中，增加以下内容 1、用 段落标记表示 :The first paragraph 2、用 段落标记表示 :The second paragraph ，文本表现为 右对齐 5、换行元素 6、分割线元素 作用：在页面中表现为一条直线 语法： 属性： 1、size 尺寸，以 px 为单位的数值 2、width 宽度，以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo ： 02-text.html 中 增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化 作用：保留源文档中的回车 和 空格 的作用 8、分区元素 1、块分区元素 语法： 作用：布局 2、行内分区元素 语法： 作用：设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类，分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素 每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局 注意： 1、p标记不能嵌套其它的块级元素 2、行内元素中 最好 不要嵌套块级元素 4、图像 和 链接 1、URL 目录结构 ： 目录 ，保存文件的文件夹名称 多个文件夹之间的关系，就是目录结构 1、什么是 URL URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式 共三种表现形式： 1、绝对路径 特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径 使用场合：当想访问互联网上的资源时，只能用绝对路径 完整的绝对路径分四部分： 1、协议名 http 2、域名(主机名，IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合：使用本机文件时使用 什么是相对路径： 从当前文件位置处开始查找资源文件所经过的路径，就是相对路径 1、同目录，直接用 2、子目录，先进入 3、父目录，先返回 3、根相对路径 路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法 标记： 属性： 1、src ：指定要显示图像的 URL 2、width ：图像的宽度 3、height ：图像的高度 4、title ：鼠标悬停时，要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 标记：内容 属性： 1、href : 要链接的HTML页面URL 2、target : 目标，指定新网页的打开形式 取值： 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接，内容为 ：学子商城的LOGO，点击时，在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时，完成资源下载的操作 链接的资源为 zip / rar 时则为下载操作 下载 2、电子邮件链接 联系我们 前提 ： 必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接 返回顶部 4、执行Javascript代码片段 执行JS 3、锚点 1、作用 锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点 链接到锚点 链接到锚点 5、表格 1、表格 1、表格的作用 按照一定的格式来显示数据的 表格是由 单元格(列)，行 来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格中的一行 3、 : 表行中的一列(单元格) : 行/列 标题 (加粗，水平居中) 4、 : 表格的标题 该元素必须添加在 之下，所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式 ， left / center / right 4、border 边框宽度，取值以 px 为单位的数值 5、bgcolor 6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan ：跨列 6、rowspan ：跨行 Demo : 在 刚才的表格基础上，增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行 增加属性 ，内容水平居中对齐 3、表格的复杂应用 1、行分组 允许将若干行划分到一个组中，以便实现统一管理 1、表头行分组 允许将第一行的内容单独分到表头行分组中 2、表尾行分组 允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建 通过 td 的跨行 和 跨列来实现不规则的表格 1、跨列 从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 2、跨行 从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 3、表格的嵌套 被嵌套的所有的内容，只能放在 td 中 2、列表 1、作用 按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成 由列表类型 以及 列表项 来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项： --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项： 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从 几 开始显示 2、ul 1、type 1、disc，实心圆,默认值 2、circle，空心圆 3、square，实心矩形 4、none 3、列表的嵌套 被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序)，包含两个列表项，显示 两部小说的名字 2、在两个列表项中，再各嵌套一个无序列表，各写3-4个小说中的主角 3、定义列表 1、作用 以一种特殊的结构来排列数据 通常用语对一类事物/名词 的解释上面 2、语法 ：声明一个定义列表 ：声明要解释的事物名称 或 名词 ：对上述名词或事物解释的内容 3、常用场合 图文混排 3、结构标记 1、结构标记的作用 搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用：表示网页 或 某块内容的头部 2、 作用：表示网页中的 导航内容 3、 作用：表示网页主体内容中的某一部分 4、 作用：出现在文字描述性比较强的场合:一则新闻，论坛中的帖子，微博信息，博客的信息 5、 作用：表示网页中，或某部分内容的 边栏信息 6、 作用：表示网页中尾部的信息 4、表单(难点) 1、表单的作用 用于收集用户的信息并提交给服务器 表单主体是由两部分组成的 1、表单元素 收集信息，并提交给服务器 2、表单控件 用于与用户交互的一些元素：文本框，密码框 2、表单元素(难点) 标记：<form></form> 注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器 属性： 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式，以什么样的方式把数据交给服务器 1、get 特点： 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点： 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用：指定表单数据进行编码的方式 取值： 1、application/x-www-form-urlencoded 默认值，允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get，编码方式为默认 3、表单控件 表单元素分类： 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素 详解 ： 1、input元素 里面会包含若干个不同的表单控件 标记 ：<input> 属性 ： 1、type 根据不同的type属性值，可以创建不同的input元素 2、name 定义表单控件的名称，主要提交给服务器使用的 注意：如果不声明name属性的话，元素则无法提交给服务器 3、value 定义当前控件的值，主要提交给服务器使用的 4、disabled 禁用控件，无值的属性 <input disabled> 2、文本框 与 密码框 文本框：<input type="text"> 密码框：<input type="password"> 具备除以上四个属性外，还具备以下几个独立属性： 1、maxlength 限制输入的字符数，取值为数字 2、readonly 只读，无值属性 Q : readonly 和 disabled 的区别 1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已 2、disabled ， 是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器 3、placeholder 占位符，即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮 作用：将表单提交给服务器 标记：<input type="submit" value="显示的文本"> 2、重置按钮 作用：将表单恢复到初始化的状态 标记：<input type="reset" value="显示的文本"> 3、普通按钮 作用：通过 JS 自定义功能 标记：<input type="button" value="显示的文本"> 4、显示的内容 属性： 1、type ：submit / reset / button 4、单选按钮 和 复选框 单选按钮：<input type="radio"> 复选框：<input type="checkbox"> 属性： 1、name 设置名称，并用于分组，一组单选按钮 或 复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中，无值属性 5、隐藏域 和 文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器，但不想给用户看的数据，可以放在隐藏域中 2、文件选择框 <input type="file" name=""> 注意： 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件 标记：<textarea></textarea> 属性： 1、name 定义名称，提交给服务器使用 2、cols 指定文本域的列数，变相指定宽 3、rows 指定文本域的行数，变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件 创建一个 多行文本域，列数为 50，行数为 5，名称为 intro 4、选项框 1、标记 表示 下拉列表 或 滚动列表 列表中的内容，允许出现多个 2、属性 1、 1、name ：控件的名称 2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表 3、multiple 设置多选，无值的属性 2、 1、value ：选项的值，提交给服务器用 2、selected ：默认被选中 5、其它标记 1、label 元素 作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样 标记：文本 属性： 1、for 指定要关联的表单控件的ID值 2、为控件分组 分组标题 分组中的内容 3、浮动框架 1、作用 将其他页面导入到当前页面中来 2、语法 标记：<iframe></iframe> 属性： 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框，默认为1，则显示边框 不需要边框则设置为 0 3、width 4、height 练习： 创建一个 02-iframe 的网页，将 01-form.html 页面引入进来 ，适当调整宽度，高度，边框 6、新input元素 (HTML5) 1、电子邮件类型 作用：提交时会验证数据是否符合Email的规范 标记：<input type="email"> 2、搜索类型 作用：在文本框的基础上，提供了快速清除操作 标记：<input type="search"> 3、URL类型 作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记：<input type="url"> 4、电话号码类型 作用：在移动端设备中，能展开 拨号键盘，在PC中无效 标记：<input type="tel"> 5、数字类型 作用：只能让用户输入 或 选择数字 标记：<input type="number"> 属性： 1、min ：当前控件接受的最小值 2、max ：当前控件接受的最大值 3、step ：微调数字时每次变化的长度,默认为1 6、范围类型 作用：提供一个滑块，让用户选择数字 标记：<input type="range"> 属性： 1、min ：当前控件的最小值 2、max ：当前控件的最大值 3、value ：设定初始值 7、颜色类型 作用：提供一个颜色拾取控件 语法：<input type="color"> 8、日期类型 作用：提供一个日期输入控件 标记：<input type="date"> 9、周类型 作用：提供一个日期控件，用于选取周 标记：<input type="week"> 10、月份类型 作用：选取月份控件 标记：<input type="month"> =============================
HTML怎么设置input框大小
weixin_47378963的博客
03-26 1万+
HTML input元素定义的输入框的大小，可以通过CSS的width属性和height属性来分别设置input框的宽度和高度，如果只是设置这些，input输入框中的字体并不会跟着改变大小，如果还需要设置input输入框内字体的大小，则需要另外进行设置。下面的实例来先介绍一下改变input框大小的设置方法。：input为元素选择器，也可以通过其它的选择器，比如id选择器、类选择器等等。HTML设置input框大小的实例代码，及在线编辑器。HTML设置input框大小的方法。
html之给文本框设置宽度和高度...
weixin_33811961的博客
05-15 2449
今天在访QQ空间登录界面时，感觉其文本框的宽度和高度都好大呀，截图如下: 我很好奇其是怎么实现的，百度了一下，呵呵，其实不难嘛，代码如下: <input name="" type="text" style="width:200px; height:20px;" /> 转载于:https://www.cnblogs.com/friendan/archive/2012/05...
html调整文本框大小
热门推荐
速冻的博客
07-18 3万+
<input name="" type="text" style="width:200px; height:20px;" />
HTML中的文本框textarea标签
12-04
用来创建一个可以输入多行的文本框，此标志对用于<form></form>标志对之间。<textarea>具有以下属性： (1)onchange指定控件改变时要调用的函数(2)onfocus当控件接受焦点时要执行的函数(3)onblur...
HTML开发王
01-03
5.7.1 分隔线宽度和高度(width属性、size属性) 5.7.2 分隔线对齐(align属性) 5.7.3 分隔线颜色(color属性) 5.7.4 分隔线阴影(noshade属性) 5.8 巩固与自测 第6章 建立列表 6.1 创建列表 6.1.1 有序列表(ol元素) ...
writewordrev1.zip
03-15
2、插入表格、添加行、表格单元格的详尽处理：包括添加图片（图片距单元格边线的距离设置）、表格行高模式的设置（最小高度、固定高度）、单元格的宽度、单元格的上、下、左、右边框类型、上、下、左、右边框线宽。...
JS获取页面窗口大小的代码解读
12-02
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。 要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性...
congrats-card:明信片生成器
05-18
文本框的位置（x和y） 文字框的文字 屏幕截图 网址参数 图片宽度/高度-例如： “perezjquim.github.io/congrats-card/index.html？IMAGE_WIDTH = 222＆IMAGE_HEIGHT = 333”） 文本框的位置-例如： “perezjquim....
js使用小技巧
07-11
Javascript小技巧一箩筐 ...语言设置 onclick="window.external.ShowBrowserUI("LanguageDialog", null)"> 加入收藏夹 onclick="window.external.AddFavorite("http://www.google.com/", "google...
HTML怎么设置文本框显示出来的大小
05-29
你可以使用 HTML 中的 `<textarea>` 标签来创建文本框，并使用 CSS 中的 `width` 和 `height` 属性来设置文本框的大小。例如，以下代码会创建一个宽度为 300 像素、高度为 100 像素的文本框： ```html <textarea style="width: 300px; height: 100px;"></textarea> ``` 你也可以将样式定义写到一个单独的 CSS 文件中，然后在 HTML 中引用该文件。例如： ```html <head> <link rel="stylesheet" href="styles.css"> </head> <body> <textarea class="my-textarea"></textarea> </body> ``` 在 `styles.css` 文件中，你可以定义 `.my-textarea` 类的样式： ```css .my-textarea { width: 300px; height: 100px; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值