首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web前端三剑客学习笔记

参考:HTML-表单(非常详细) 表单用于搜集不同类型用户输入 语法: <form name="<em>表单</em>名" method="get/post" action="<em>表单</em>发往地...file 定义<em>输入</em><em>字段</em>和 “浏览”按钮,供文件上传。 hidden 定义隐藏<em>的</em><em>输入</em><em>字段</em>。 image 定义图像形式<em>的</em>提交按钮。 password 定义密码<em>字段</em>。该<em>字段</em><em>中</em><em>的</em>字符被掩码。...清除<em>表单</em><em>中</em><em>的</em>所有数据。 submit 定义提交按钮。把<em>表单</em>数据发送到服务器。 text 定义单行<em>的</em><em>输入</em><em>字段</em>,默认宽度为 20 个字符。...<em>表单</em>应用,包括<em>HTML</em>5新增<em>的</em><em>输入</em>域<em>类型</em>和属性<em>的</em><em>使用</em>。... 4.2 类选择器 为一系列元素定义相同样式 在 CSS <em>中</em>,类选择器以一个点号显示: .A {<em>text-align</em>: <em>center</em>} 所有拥有 A 类<em>的</em> <em>HTML</em> 元素均为<em>居中</em>。

2.1K60
您找到你想要的搜索结果了吗?
是的
没有找到

CSS常见样式(一)

- 计算机代码(在引用源码时候需要) dfn - 定义字段 em - 强调 font - 字体设定(推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label...- 划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 块级元素与行内元素区别:...属性是作用在块级元素上让里面的文本居中居中居中居中 //若想要上面的文本居中,对应CSS样式因如下所示编写 div{ text-align...: center } 4、文本溢出解决方法。...比如默认 html font-size=16px,那么想设置12px 文字就是:12÷16=0.75(rem) 为了方便计算,我们改变一下 html 默认 font-size=10px html

1.7K30

前端面经笔记 - wuuconixs blog

可能由于没有后端支持原因,纯前端测试没有效果。 password可以让输入文本变成 * ,起到防偷窥密码目的。 5.如何处理HTML5新标签浏览器兼容问题?...但是要说,最常见内联元素实际上就是普通文本,比如 p 里面包裹内容,它们就是内联元素,这也是为什么 p 能够用 text-align 来水平居中它们原因 标准流很好,简洁易懂,但是人们在追求更加好看网页设计时候想更上一层楼...下面的代码里直接使用这个函数。...-8104" 而且你会发现响应没有Expires也没有Cache-Control字段,说明博客页面是不使用强缓存。...我们都知道HTML引号,小于号这些都是有它们特定作用,如果我们想在文本没有副作用地使用这些特殊字符,可以把它们为HTML实体字符,比如双引号就是",小于号就是<。

2.7K00

css布局 - 垂直居中布局一百种实现方式(更新...)

那好,现在直接使用这个方法实现一个宽高固定图片垂直居中应该也很赞了吧?! 结果一顿操作这个结果很不满意: ? 这不用比较也知道,图片没有上下垂直居中啊!毛线。那个标题还那么深,实例打脸。...但究竟是因为什么呢?往图片后边写了一个x辅助理解,这下明白了吧!图片默认是文本基线对其文本垂直居中,就到垂直正中间那里。但是图片底部为了与文字底部对其,所以留给顶部空间就不多了。...没有x时候会有一个空白换行节点在捣鬼,这也是为什么单独文字时候看不出毛病,单独图片使用同样方法却有问题原因。 ? 啊,这就是听张鑫旭老师讲课收获!...把两个例子代码挪到一个html页面,惊奇发现,底部剩余空间都是比顶部少4像素! 于是,一不做二不休,直接使用margin负值让元素再之前基础上向上4像素,竟真的实现了绝对垂直居中。 ?...如果relative换成absolute,想实现水平垂直居中弹窗效果时: 因为固定宽度,可以使用margin负值,即margin-left: -300px;实现水平布局。

3.4K10

想知道HTML语法结构?看这一篇就够了(超全解析html语法)

数字越小,表示级别越高,文字字体也就越大。 4.居中标记 居中标记以标记开头,以结尾。 标记之中内容居中显示。...【1)get属性值表示输入数据追加在action指定地址后边,并传送到服务器。2)当属性值为post时,会将输入数据按照HTTPpost传输方式传送到服务器。】...表单输入标记 表单输入标记是使用最频繁表单标记,通过这个标记可以向页面添加单行文本、多行文本、按钮等。...: 属性 描述 type 用于指定添加是哪种类型输入字段,共有10个可选值 disabled 用于指定输入字段不可用,即字段变成灰色。...普通按钮 radio 单选选项 hidden 隐藏域 checkbox 复选框 image 图像域 例:创建一个index.html文件,在该文件标记添加一个表单,并且在该表单应用标记添加文本

5.6K30

CSS常用布局实现01-水平居中

本来按照这个分类写好了一篇文章,但是觉得太偏理论分类,不好理解。于是换个角度重新来写,从需求角度来分析。那就是什么时候我们需要水平居中。 2. 文本水平居中 这应该是最常见需求了。...好,看起来很完美,行内非替换元素设置text-align: center即可。但如果我们所想要并不只是文本呢?比如,在这个行内元素内部在放一个其他元素呢?...答案是,除了放置文本和包含文本行内级元素,其余情况都不行。 因为非替换行内级元素无法设置宽高,而且text-align: center设置效果是文本居中。...我们前面说到非替换行内级元素无法设置宽高,那么如果是使用行内块元素呢?对外利用行内布局特性居中,对内依然向块级元素一样表现。此时里面可以放置各种类型元素。 <!...使用这种方法有个副作用,就是内部文本也会居中,可以为内部元素设置text-align:left来消除这种副作用。 第三种方法:flex,也是最应该使用方法。

66710

如何让高度、宽度不定容器保持水平、垂直居中

这个题目似乎解决办法很多,JS是最能够确保各种浏览器中一致性,但是仍然可以使用CSS方式来解决。这个问题分解为两个方面,第一解决左右居中问题,第二解决上下居中问题。 1、左右居中。...左右居中最为简单,使用 text-align:center; 就可以让绝大多数对象居中对齐,并且这个属性也获得了几乎全部浏览器支持。...这是一个好问题,在做居中布局页面时,这是我们最常用让DIV容器居中办法。margin作用于块级元素,而是否作用于其他内敛元素,不同浏览器有着不同解释,因此对于左右居中,没有使用这个方法。...2、上下居中。 上下居中,有两种方法,一种是负margin办法,这种对于固定宽度容器,非常好用。另外一种就是适应于高度固定情形,即使用 vertical-align 属性。...在表单元格,这个属性会设置单元格框单元格内容对齐方式。 3、最后代码 综上,可以得出对于高度、宽度都不固定容器,如何让其做到水平、垂直居中: 1 <!

2.5K20

【web前端阶段一】HTML巩固学习(持续更新)

DTD文档模型也称DOCTYPE文档声明,它是Document Type Definition(文档类型定义)英文缩写,在HTML文档,用来指定页面所使用HTML(或者XHTML)版本。...(1).表单标签 是指标签本身,它是一个包含表单元素区域,使用定义 (2).表单域 是标签中用来收集用户输入每一项,通常用input标签来定义,input标签有不同类型,对应用户不同数据...(比如:文本域、下拉列表、单选框、复选框等等) (3).表单按钮 用来提交表单所有信息到服务器 *表单域和表单按钮都属于表单元素。...---- 三.HTML5 1.html5新增类型 电子邮件类型 功能描述:输入E-mail地址文本框 语法: 注意:输入内容必须包含"@","@"后面必须具有内容...---- 搜索类型 功能描述:输入搜索关键字文本框 语法: ---- URL类型 功能描述:输入WEB站点文本框 语法:<input type="url

4.5K40

JavaScript学习笔记1

Dom如何解析html文档: Dom会根据html层次结构,在内存形成一个树形结构,树形结构里面有标记元素和树形和文本等元素 整个html文档对应一个document对象,通过document文档对象...3.获取文档元素: 下面的方法是html dom方法 根据标记id属性值获取元素对象:document,getElementById(id属性对应值) 根据标记名称获取元素对象:document.getElementsByTagName...color:red; font-size:20px; text-align: center;/*字体居中*/ padding:5px; float:left; } #footer...{ background-color: black; color:white; text-align: center;/*字体居中*/ padding:5px; clear...> 2.传智书城注册页面设计: 表单校验:1.用户输入数据符合咱们定义规范,允许用户提交表单,如果用户输入数据不符合规范,不允许提交。

1.7K40

使用这些不太常用 CSS 属性,让在前端布局效率上,又提高了一个层次!

所以我问自己,为什么搞篇文章列出所有那些较少使用但既有用又有趣 CSS 属性? 在本文中,介绍一些不一样CSS属性,希望能给你带来点新鲜感,废话不多说,让我们开始吧。...当使用place-items时,它将应用于网格每个单元格,也就是说单元格内容都会居中。...text-align 属性 随着CSS flexbox和 grid 日益普及,初学者一般也是使用它们来居中文本,而不是使用text-align属性,但是,旧方法仍然有效。...使用text-align:center 也可以快速解决问题,考虑以下示例。 ? 如果仅内容需要居中,不一定非要使用flexbox或grid,使用text-align反而会更简单。...通过使用object-fit:contain,可以控制徽标的width和height,并强制图像包含在定义宽度和高度。??

2.1K20

HTML入门

为了一段HTML内容置为注释,你需要将其用特殊记号 包括起来, 比如: 在注释外! 在注释内!...标签名 作用 备注 **label ** 表单元素说明,配合表单元素使用 for属性值为相关表单元素id属性值 input 表单输入控件,多种输入类型,用于接受来自用户数据 type属性值决定输入类型...button 页面可点击按钮,可以配合表单进行提交 type属性值决定按钮类型 1)简单文本输入框 label标签:表单说明。...reset 重置按钮,用于表单内容恢复为默认值。 image 图片提交按钮。必须使用 src 属性定义图片来源及使用 alt 定义替代文本。...当type属性是hidden,image或者button类型时不可使用 autocomplete 自动补全,规定表单输入字段是否应该自动完成。

2.3K30

前端基础篇css

b)span标签提供了一种文本一部分或者文档一部分独立出来方式 四、iframe框架 语法:<iframe src=”1.html表单.html” width=”800″ frameborder...1.文本水平对齐方式 语法:text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐); 注:a)当需要让容器文本或图片等其他元素水平居中时...、图片等行内元素时,水平居中是通过给父元素设置text-align:center;来实现。...> 注:form表单内容进行分组,并添加一个标题,在form可以嵌套多个fieldset 5.上传文件 语法: 6.隐藏字段 语法: <input type...:100%;} body{display:flex;justify-content:center;align-items:center;} ★ 如何使用flex布局实现不定宽高子元素在父元素水平垂直都居中

1.7K30
领券