前端学习笔记

最新推荐文章于 2023-03-27 21:02:57 发布
最新推荐文章于 2023-03-27 21:02:57 发布
阅读量403 收藏 1
点赞数
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15203169/article/details/128603542
版权

一 浏览器能识别的标签（HTML标签）（HTML:超文本传输语言）

1 编码（head）

​

<meta charset="UTF-8">

2 title（head）

​

<title>Title</title>

3 标题

​ h1~h6（块级标签）

4 div和span

​ div,一个占一行（块级标签）
​ span,有多大占多数（行内标签，内联标签）
​ 注意：两个标签比较素+css样式

5 超链接

​ 默认当前标签打开
​ 跳转到自己的网站可以用 /url
​ 跳转到其他网站要写全url

<a herf='url'> 点击跳转 </a>（行内标签，内联标签）

​ 新建标签页打开

<a herf='url' target='_blank'> 点击跳转 </a>

6 图片

​

<img src='图片地址' />（行内标签，内联标签）
图片地址可以用互联网上的图片 例：http:/www.xxx.com/a.jpg
图片的高度和宽度
<img style='height:100px;width=100px;' src='图片地址' />
<img style='height:10%;width=10%;' src='图片地址' />

7 列表

7.1 无序列表

​

<ul>
	<li>title1</li>
	<li>title2</li>
	<li>title3</li>
</ul>

7.2 有序列表

​

<ol>
	<li>title1</li>
	<li>title2</li>
	<li>title3</li>
</ol>

8 表格

​

<!-- border边框 -->
		<table border="1">
			<!-- 表头 -->
			<thead>
				<!-- tr行 -->		<!-- th列 -->
				<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
			</thead>
			<!-- 内容 -->
			<tboby>
				<tr> 
					<td>1</td> 
					<td>米老鼠</td> 
					<td>19</td> 
				</tr>
				<tr> 
					<td>2</td> 
					<td>米奇</td> 
					<td>18</td> 
				</tr>	
				<tr> 
					<td>3</td> 
					<td>佩奇</td> 
					<td>17</td> 
				</tr>
			</tboby>
		</table>

9 input系列

9.1 文本框

<input type="text"/>

9.2 密码框

​

<input type="password"/>

9.3 上传

​

<input type="file"/>

9.4 单选框

​ name一致只能选一个不同都可以选
​

	<input type="radio" name="n1"/>

9.5 复选框

​

<input type="checkbox"/>篮球
<input type="checkbox"/>足球

9.6 按钮

​

<input type="button" value="提交"/>		<!-- 普通按钮 -->
<input type="submit" value="提交"/>		<!-- 提交表单 -->

10 下拉框

10.1 单选

​

<select>
	<option>北京</option>
	<option>上海</option>
</select>
10.2 多选（按住上档键即可多选）
<select multiple>
	<option>北京</option>
	<option>上海</option>
</select>
10.3 多行文本

​

<textarea></textarea>
​		默认3行但是后面也可以继续换行写
<textarea rows="3"></textarea>

11 提交数据

​ form标签包裹要提交数据的标签
​ 提交方式

11.1 GET

​

<form method="get">  </form>
11.2 POST
					<form method="post">  </form>
11.3 提交的地址
				<form action="url">  </form>
​			form标签里必须有一个submit标签：<input type="submit" value="submit按钮" />
​		在form标签里的一些标签（input/select/textarea）
​			一定要写name属性		密码：<input type="password" name="password"/>

​

二 CSS样式（美化标签）

1 CSS应用方式

1.1 标签上使用

​

<img src="" style="height=100px"/>

1.2 在head标签中写style标签

​

	<html lang="en">

		<head>
		  <meta charset="UTF-8">
		  <title>Title</title>
		  <style>
		  	.c1{
				color:red;
				}
		  </style>
		</head>


​		<body>



			<h1 class='c1'>title</h1>

​		</body>
​		</html>

1.3 写到CSS文件中

​ CSS
​

		.c1{
				color:red;
				}
			.c2{
				color:blue;
				}

​ HTML

		<!DOCTYPE html>
		<html lang="en">
		<head>
		  <meta charset="UTF-8">
		  <title>Title</title>
			<link rel="stylesheet" href="/css/a.css"/>
		</head>
		<body>
			<h1 class="c1">Title</h1>
		</body>
		</html>

2 CSS选择器

2.1 ID选择器（一个ID只能有一个，所以不常用）

​ id="c2"的用该样式
​ #c2{
​ color:red;
​ }

2.2 类选择器

​ class="c1"的用该样式
​ .c1{
​ color: royalblue;
​ }

2.3 标签选择器（太绝对，所以不常用）

​ div标签用该样式
​ div{
​ color:darkblue;
​ }

2.4 属性选择器（不常用）

​ class="v1"且yun="123"的用该样式
​ .v1[yun=“123”]{ color:rosybrown}

2.5 后代选择器

​ class="y1"下的li标签用该样式
​ .y1 li{ color: #00849e}
​ 子级li标签用该样式
​ .y1 > li{ color: #00849e}

2.6 多个和覆盖问题

​ CSS里的样式会叠加，如果样式重复那么下面的会覆盖上面的
​ CSS
​ .c1{
​ color: royalblue;

​ }
​ .c2{
​ color: #079e3c;
​ font-size: 36px;
​ }
​ HTML

			<!DOCTYPE html>
			<html lang="en">
			<head>
			  <meta charset="UTF-8">
			  <title>Title</title>
				<link rel="stylesheet" href="/css/a.css"/>
			</head>
			<body>
				<h1 class="c1 c2">123</h1>
			</body>
			</html>

​ 要想不覆盖可在上面样式后面加上!important

CSS
.c1{
	color: royalblue!important;
}
.c2{
	color: #079e3c;
	font-size: 36px;
}

​ HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
	<link rel="stylesheet" href="/css/a.css"/>
</head>
<body>
	<h1 class="c1 c2">123</h1>
</body>
</html>

3 样式

3.1 高度和宽度

​ height: 24px;
​ width: 30%;
​ 支持百分比
​ 行内标签：默认无效
​ 块级标签：默认有效（霸道，空出来的区域不能使用）

3.2 块级标签和行内标签

​ 块级（不能设置高度和宽度，边距）
​ 行内
​ 块级和行内标签的强制转化

转行内：display:inline
转块级：display:block
转行内&块级：display: inline-block;
隐藏标签：display: none; 默认不显示可以通过CSS添加样式
标签圆角
.navbar{
    四边的圆角
    border-radius:0;
    左上角圆角
    border-top-left:0;
}

3.3 字体和颜色

	<!-- 颜色 -->
		color: #9e6212;
	<!-- 大小 -->
		font-size:58px;
	<!-- 加粗 -->
		font-weight: 600;
	<!-- 字体 -->
		font-family: Microsoft YaHei, ui-serif;
	<!-- 背景色 -->
		background-color:red;
	<!-- 边框 -->
		border: 1px solid red;

3.4 文字对齐方式

	<!-- 水平方向剧中 -->
		text-align: center;
	<!-- 垂直方向剧中，前提是后面的值与高度一致 -->
		line-height:200px;

3.5 浮动

飘到右边

​ float:right
​ div块级标签浮动起来变得不霸道了，但是会脱离文档流（div用到浮动一定要拽回来）
​ 文档流
​ 标签一字排开

脱离文档流

​ 标签飘起来，父级标签（父级标签无高度和宽度）没办法被标签撑起来，所以父级标签的颜色等无法显示
​ 解决办法（拽回标签）
​ clear:both

3.6 边距

3.6.1 内边距

​ 标签内部的边距

上边距

​ padding-top: 10px;

左边距

​ padding-left: 10px;

右边距

​ padding-right: 10px;

下边距

​ padding-bottom: 10px;

3.6.2 全局内边距

​ 全部内边距
​ padding: 10px;
​ 内边距上右下左
​ padding: 10px 10px 10px 10px

外边距

​ 标签外部距离

上边距

​ margin-top: 10px;

左边距

​ margin-left: 10px;

右边距

​ margin-right: 10px;

下边距

​ margin-bottom: 10px;

全局外边距

​ 全部外边距
​ margin: 10px;

标签居中（标签必须设置宽度）

​ margin: 0 auto;
​ 外边距上右下左
​

margin: 10px 10px 10px 10px
body标签默认有一个外边距

​

margin:0 auto;去除
a标签去下划线

​

text-decoration: none;

​

设置透明度

​

opacity:0.5;

​ 网页上的遮罩通过透明度实现

4 CSS知识点

4.1 cursor（鼠标放上去变小手）

c1：hover{
			cursor:pointer;
		}

4.2 after（伪类）

​ 标签尾部加东西
​ 清除浮动，拽回标签（测试的时候发现我的不能加到css文件里，但是加到html头部可以使用）
​

.c1:after{
			<!-- 可以在css里拽回飘起来的标签 -->
			clear:both;
			<!-- 在后面添加东西 -->
			content:''
		}

4.3 鼠标放上去使用的样式 hover

​

	.c1:hover{
			color:red;
		}

5 position（定位）

5.1 fixed

​ 固定在窗口的某个位置
​ 不设置高度和宽度那么离四边为0时就是占整个页面，设置了高度和宽度就选两个然后直角坐标系定位
​

.c1{
					position:fixed;
					width:60px;
					height:60px;
					离左边是0
					left:0;
					离上边是0
					top:0;
					<!-- 
					离右边是0
					right:0;
					离下边是0
					bottom:0;
					 -->
    				标签z-index的值越大就越优先显示，在最上面
					 z-index:999;
				}
		relative和absolute（一般是一起使用）
			前提：.c1标签包含.c2标签
			有absolute的标签根据有relative的标签来确定位置
			.c1{
				width: 200px;
				height:200px;
				border: 1px solid red;
				position:relative;
			}
			.c2{
				width:10px;
				height:10px;
				background-color: aqua;
				position: absolute;
				top: 10px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
	border（边框）
		border-radius:0px 10px 0px 0px;设置右上角的边框弧度
		border-方向，设置单边颜色
		.c1{
			border: 1px solid red;
		}
	background-color(背景色)
		background-color: aqua;
	box-shadow标签阴影
		box-shadow 2px 4px 6px red; (x,y,z空间坐标系加颜色,x:水平方向，y:垂直方向，z:衍生距离)

6 当标签不够子标签放置的时候（滚动条）

<ul style="overflow:auto">
    <li></li>
    <li></li>
    <li></li>
</ul>

一 CSS动画

浏览器私有前缀

有些在浏览器里不能用要把浏览器私有前缀加上，开发时全写，加上标准写法

-webkit-text-stroke:1px #f00;

渐变

线性渐变

background-img:linear-gradient(red,green,blue);
background:linear-gradient(to top,red,green);
background:linear-gradient(45deg,green 20%,blue 40%);重复设置（一般不用）

径向渐变

background-img:radial-gradient(red,green,blue);

transform转换

transform(2D)

transform:translate(30px)  支持一个参数（x,y）

transition过渡

三 BootStrap

​ 别人写好的css样式

1 下载BootStrap

​
​ 导入即可用

2 栅格系统

把整体分为12格

分类

响应式(x代表数字)（大于多少像素生效）

​ .col-lg-x 1170px （大屏幕）
​ .col-md-x 970px （中屏幕）
​ .col-sm-x 750px （平板）

非响应数据

​ .col-xs-x 750px （手机）

列偏移

​ .col-sm-offset-x

container(标签居中)

两边留白

​ .container

两边平铺

​ .container-fluid

清除浮动

​ clearfix

面板

​ 检查浏览器元素拼接到自己的HTML

图标

​ bootstrap提供，但是图标不多（span标签）
​ fontawesome组件（和bootstrap用法一致）（i标签）
​ BootStrap依赖JavaScript的类库，jQuery
​ 下载jQuery，在页面是应用上jQuery
​ 在页面上应用BootStrap的JavaScript类库

四 JavaScript（和Java没关系）

​ HTML 骨架
​ CSS 皮肤

1 JavaScript 动态交互

​ 交互语言

​ JavaScript，是一门编程语言。浏览器就是JavaScript解释器

2 DOM和BOM

​ 相当于python的模块，例：json
​ jQuery
​ 相当于第三方模块，例requests

3 代码位置

​ 1，头部标签里title下面有css就在css下面
​ 2，body标签最后（推荐）
​ JS代码存在形式
​ 写在当前HTML文件中
​

4 变量

4.1 定义变量

​ var name = “百度”

4.2 查看变量(控制台)

​ console.log(name)

4.3 字符串类型

​ var name = “百度”; （一般这么写）
​ var name = String(“百度”);

常见功能
获取长度

​ var name = “百度”;
​ var v1 =name.length;
​ 索引取第一个字符（没有反向负值）
​ var v1 = name[0]; //name.charAt(0)

去除空白

​ var v1 = name.trim();

切片（前取后不取前开后闭区间）

​ var v1 = name.substring(1,2)

取标签的内容

​ 我是

找到标签

​ var v1 = document.getElementById(“txt”);

取到文字

​ var v2 = v1.innerText;
​ v1.innerText = v2； (赋值)

插入

​ v1.appendChild();

5 数组类型

​ var v1 = [1,2,3,4,5]；
​ var v1 = Array([1,2,3,4,5])；
​ 索引获取值或修改值
​ var v1 = [1,2,3,4,5]；
​ v1[0]；
​ v1[0] = 2；

6 追加

尾部追加

​ v1.push(‘6’)；

前面追加

​ v1.unshift(‘0’)；

中间插入

​ v1.splice(索引,0,元素)；
​ v1.splice(2,0,10)；

尾部删除

​ v1.pop()

头部删除

​ v1.shift()

索引位置的元素删除

​ v1.splice(索引,1)

循环每一个元素的索引,根据索引来取值

​ for(var id in v1){
​ data = v1[id]
​ }
​ for(var id=0;id<v1.length;id++){
​ data = v[id]
​ }
​ 也有break和continue

7 对象（python字典）

​ info = {
​ name:“百度”,
​ age:18
​ }

获取值

​ info.age
​ info[“age”]

修改值

​ info.name = ‘搜狗’

删除值

​ delete info[“age”]

循环每一个元素的键,根据索引来取值

​ for(var key in info){
​ data = info[key]
​ }

8 条件语句

​ if(条件){
​

​ }else if(条件){
​
​ }else(条件){
​
​ }
​

9 函数

定义函数

​ function show() {}

执行函数

​ show()

定时执行函数（定时器）(1000是毫秒)

​ setInterval(show,1000)

DOM

​ DOM,是一个模块，模块可以对HTML页面中的标签进行操作
​ 根据id找到标签
​ var tag = document.getElementById(“txt”);
​ 获取标签里的文本
​ tag.innerText
​ 修改标签里的文本
​ tag.innerText = “哈哈哈”
​ 创建标签
​ document.createElement(‘div’)
​ 标签写内容
​ tag.innerText = “哈哈哈”
​ 创建标签并写入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="city">
							
		</ul>
		<script type="text/javascript">
			var newTag = document.createElement('li');
			newTag.innerText = "背景"
			var tag = document.getElementById("city");
			tag.appendChild(newTag)
		</script>
	</body>
</html>

​ 获取用户输入框里的内容（input标签）
​ tag.value

onclick

this代指当前标签

函数名(this);

<div>
    οnclick="cliclMe(this)"
</div>

函数定义的时候接收

function clickMe(self){
    //$(self) 代指当前点击那个标签
}

五 jQuery

jQuery是一个JavaScript第三方模块（第三方类库）

  • 基于jQuery，自己开发一个功能
  • 现成的工具依赖jQuery，例如：BootStrap动态效果

1 寻找标签(直接寻找)

ID

<h1 id="txt">中国联通1</h1>
<h1>中国联通2</h1>
<h1>中国联通3</h1>

$("#txt")

样式选择器

<h1 class="txt1">中国联通1</h1>
<h1 class="txt1">中国联通2</h1>
<h1 class="txt2">中国联通3</h1>

$(".c1")

标签选择器

<h1 class="txt1">中国联通1</h1>
<h1 class="txt1">中国联通2</h1>
<h1 class="txt2">中国联通3</h1>

$("h1")

层级选择器

$(".c1 .c2 a")

多选择器

$(".c1, .c2, li")

属性选择器

$("li[name='n1']")

2 间接寻找

找同级标签

<div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>广州</div>
    <div>深圳</div>
</div>

$("#c1").prev()  //上一个
$("#c1")
$("#c1").next()  //下一个
$("#c1").next().next() //下下个
$("#c1").siblings() //全部

找父子标签

<div>    
    <div>
        <div>北京</div>
        <div id="c1">上海
            <div>青浦区
                <div class="p2">
                    浦东区
                </div>
            </div>
        </div>
        <div>广州</div>
        <div>深圳</div>
    </div>
    <div>
        <div>北京</div>
        <div id="c2">上海</div>
        <div>广州</div>
        <div>深圳</div>
    </div>
</div>

$("#c1").parent()	//父亲
$("#c1").parent().parent()		//爷爷

$("#c1").children()	//所有儿子
$("#c1").children(".p2")	//所有儿子里class等于p2的

$("#c1").find(".p2") //去所有子孙里找class等于p2的 
$("#c1").find("div") //去所有子孙里找所有div标签

操作样式

  • removeClass(“hide”)删除class属性
  • hasClass(“hide”)判断是不是有hide属性
  • addClass(“hide”)添加class属性
function clickMe(self){
    //$(self) 代指当前点击那个标签
    //$(self).next().removeClass("hide") 把点击的那个标签的下一个兄弟标签的class里hide属性删除
    
    $(self).next().removeClass("hide")
}

3 值的操作

文本标签里的值

<div id="c1">
    内容
</div>

//获取文本内容
$("#c1").text()
//设置文本内容
$("#c1").text("信息")

input标签里的值

<input type="text" id="c2"/>

//获取用户输入的值
$("#c2").val() 
//设置用户输入的值
$("#c2").val("哈哈哈")

创建标签

$("<li>")

删除标签

$("<li>").remove();

添加值到标签

$("<li>").append("哈哈哈")

4 事件

单一绑定

<div onclick="hanshu">
    
</div>

批量绑定

$("li").click(function () {
    var txt = $(this).text();
    alert(txt);
})

页面加载完成后执行

//当页面框架加载完成时，自动执行（一般都加上去）
$(function (){
    
})

5 表格操作

$(function(){
    $("$.delete").click(function(){
        $(this).parent().parent().remove();
    })
})

六 前端整合

引用
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/font-awesome/font-awesome.css"/>

<script src="/jquery/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>

font-awesome图标(还提供了字体)

Bootstrap

jquery

极限可导
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
markdown:前端学习笔记
05-04
学习笔记（持续更新） 验证你是否真正掌握一个知识的最好方法，就是看你能否用直白浅显的语言把复杂深奥的问题和知识讲清楚 -- 费曼技巧「以教为学」 大纲 前端杂记 策略模式 发布订阅者模式 责任链模式（todo） 0.1+0.2 为什么不等于 0.3 == 和 === 的区别 ... 浏览器 HTTP 的缓存机制 Event Loop 预编译 进阶 前端性能初探-h5 工作笔记 百度地图换高德地图中遇到的坑 复习正则 vue路由守卫 使用Dijkstra算法实现最短路线规划 Flutter flutter路由详解 flutter安装包App.svelte、加快启动速度 flutter 异步编程 事件循环、Isolate Stream（流） ios数字键盘解决方案 人生不止有技术 理财
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
03-19
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
前端学习笔记-less
05-26
前端学习笔记——less
前端学习笔记, html, css, js.zip
最新发布
01-05
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, ht
前端学习笔记(精华总结）.zip
11-14
前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip
Vant—van-field textarea 二次封装 高度自适应并设置最大最小高度
Poppy_LYT的博客
08-30 1万+
1、components新建CommentField.vue <template> <div class="comment-field-wrap"> <div class="comment-field__input"> <van-field :value="value" placeholder="请输入留言内容" rows="1" // 显示为一行的高度 type="texta.
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
qq_41603026的博客
03-27 2285
微信小程序中如何设置textarea中的placeholder换行显示。van-field 中直接修改textarea 标签的样式即可。
vue textarea van-field手机端 输入框实现显示的内容换行或者空格处理
总结前端开发中遇到的问题，分享前端知识
12-17 8502
移动端框架vant-ui： <van-cell-group class="m30 borderRadius"> <van-field v-model="content" rows="5" autosize type="textarea" placeholder="请输入内容" /> </van-cell-group> if(this.content==""){ this.$toast("请输入内容");
vue---使用van-filed组件 华为手机无法换行
weixin_47011763的博客
08-25 2889
写在最前面 使用vue搭配vant做手机端项目时,测试提出的bug。 van-field有多行时，在华为手机上无法按换行键换行，只能一行输入满之后自动转入下一行。 目前还是不知道是手机的哪些参数导致的，oppo和小米都没问题，只有华为手机不可以。 解决方法 1.ben ...
van-field自定义文本框高度，无法正常使用autosize，需要设置.textarea样式
crh0817的博客
09-22 4934
van组件的van-field自定义文本框高度，无法正常使用autosize，需要设置.textarea样式。
前端学习笔记（不断更新中）
01-08
1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 ..._parent：在父框架中打开被链接文档 3.input标签中的require：将文本输入框...
h5前端学习笔记
03-21
我的h5前端学习笔记
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
seeeeeeeeeee的博客
08-03 7832
vue-vant实现仿微信聊天界面，上下固定中间滚动自适应高度。移动端聊天功能，H5聊天功能实现。
<textarea>文本域，多行文本输入
热门推荐
燕十三的博客
02-22 2万+
当用户需要在表单中输入大段文字时，需要用到文本输入域。语法：<textarea rows="行数" cols="列数">默认出现文本</textarea>**注意**rows,cols这两个属性可用css样式的width和height来代替：col用width、row用height来代替。示例：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte
textarea的高度自适应
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
微信小程序 使用 vant-weapp 组件 van-field 类型为 textarea 在IOS端出现的问题记录
weixin_49993071的博客
03-07 2298
微信小程序使用 vant-weapp 组件 van-field 类型为 textarea 在 IOS 端出现的问题记录
小程序vant-field的textarea层级过高盖住popup的内容
weixin_44236953的博客
07-25 2554
因为textarea属于原生组件，但是input只在focus时表现为原生组件，也就是说vant-field不是textarea类型，并且没有用focus时不是原生组件，不会出现层级过高的现象。效果还行，有时候还是会出现一闪而过的重叠。改小程序的时候发现了一个隐藏已久的bug，vant-field设置为textarea类型后，popup弹出来的时候placeholder的文字非常明显，如下图。vant-weapp官方说明了textarea是原生组件，层级过高，具体可以看微信官方文档对原生组件的说明。....
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值