Web前端笔记

最新推荐文章于 2024-09-13 23:32:49 发布

Puzzle harvester

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量409

点赞数 1

分类专栏： Java全栈开发文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/qq_41476257/article/details/122952894

版权

Java全栈开发专栏收录该内容

13 篇文章 1 订阅

订阅专栏

学习网站

Web前端开发技术：

结构：HTML
	从语义的角度，描述页面结构
样式：CSS
	从审美的角度，美化页面
行为：JavaScript
	从交互的角度，提升用户体验

HTML快速入门：

（1）新建文本文件，后缀名改为.html
（2）编写HTML结构标签
（3）在<body>中定义文字

转义字符：

（1）&lt;：<
（2）&gt;：>
（3）&amp;：&
（4）quot;："
（5）&reg;：已注册的符号
（6）&copy;：版权符号
（7）&trade;：商标符号
（8）&nbsp;：不断行的空白

HTML标签：

标题：h1~h6
段落：p
段内换行：br
预留格式：pre
段内分组：span
水平线：hr
空格字符：&nbsp;
注释：<!-- 注释内容 -->
超链接：<a href="网址">文字或图片</a>
	href：指定访问资源的URL
	target：指定打开资源的方式
		_self：默认值，在当前页面打开
		_blank：在空白页面打开
插入图像：<img src="w3school.gif" alt="w3c" />
	src：规定显示图像的URL
	height：定义图像的高度
	width：定义图像的宽度
音频：<audio>：定义音频。支持格式：MP3、WAV、OGG
	src：规定音频的URL
	controls：显示播放插件
视频：<video>：定义视频。支持格式：MP4、WebM、OGG
	src：规定视频的URL
	controls：显示播放控件
区域标签：div
表单：form
	action：规定当提交表单时向何处发送表单数据，URL
	method：规定用于发送表单数据的方式
		get：浏览器会将数据直接附在表单的action URL之后。大小有限制（4KB）
		post：浏览器会将数据放到http请求消息体中。大小无限制
文本框、密码框：<input type="text|password" value="" name="username"/>
	type="text" 文本框
	type="password" 密码框
提交按钮：<input type="submit" value="提交" name="submitBtn" />
重置按钮：<input type="reset" value="重置" />
单选框、复选框：<input type="radio|checkbox" value="值" name="名称" checked="checked" />
	当设置checked="checked"时，该选项被默认选中
下拉列表框：
	<select >
		<option >选项1</option>
		<option selected="selected">选项2</option>
	</select>
	selected="selected"：被选择的那一项
文本域：<textarea rows="行数" cols="列数">文本</textarea>

JS类型转换：

（1）其他类型转为number：
	1.1）string：安装字符串的字面值，转为数字。如果字面值不是数字，则转为NaN。一般使用parseInt
	2.1）boolean：true 转为1，false转为0
（2）其他类型转为boolean：
	2.1）number：0和NaN转为false，其他数字转为true
	2.2）string：空字符串转为false，其他字符串转为true
	2.3）null：false
	2.4）undefined：false

Array：定义数组

（1）定义：
	var 变量名=new Array(元素列表);	//方式一
		var arr=new Array(1,2,3);
	var 变量名=[元素列表];		//方式二
		var arr=[1,2,3];
（2）访问：
	arr[索引]=值;
	arr[0]=1;
注意：JS数组类似于Java集合，长度，类型都可变

String：

（1）定义：
	var 变量名=new String(s);		//方式一
		var str=new String("hello");
	var 变量名=s;			//方式二
		var str="hello";
		var str='hello';
（2）方法：
	trim()：取出字符串前后两端的空白字符

自定义对象：

格式：
	var 对象名称={
		属性名称1:属性值1,
		属性名称2:属性值2,
		...
		函数名称:function(形参列表){}
		...
	};
实例：
	var person={
		name:"zhangsan",
		age:23,
		eat:function(){
			alert("干饭~");
		}
	};

BOM：浏览器对象模型

（1）Window：浏览器窗口对象
	获取：直接使用window，其中window.可以省略
	方法：
		1.1）alert()：显示带有一段消息和一个确认按钮的警告框。
		1.2）confirm(String)：显示带有一段消息及确认按钮的警告框。（返回值：确定<true>、取消<false>）
		1.3）setInterval(function,毫秒值)：按照指定的周期（以毫秒计）来调用函数或计算表达式。
		1.4）setTimeout(function,毫秒值)：在指定的毫秒数后调用函数或计算表达式。
（2）Navigator：浏览器对象

（3）Screen：屏幕对象

（4）History：历史记录对象
		获取：使用window.history获取，其中window.可以省略
			window.history.方法();
			history.方法();
		方法：
			back()：加载history列表中的前一个URL
			forward()：加载history列表中的下一个URL
（5）Location：地址栏对象
		获取：使用window.location获取，其中window.可以省略
			window.location.方法();
			location.方法();
		属性：
			href：设置或返回完整的URL

正则表达式：

概念：正则表达式定义了字符串组成的规则
定义：
	（1）直接量：注意不要加引号
		var reg=/^\w{6,12}$/;
	（2）创建RegExp对象
		var reg=new RegExp("/^\\w{6,12}$");
方法：
	test(str)：判断指定字符串是否符号规则，返回true或false
语法：
	（1）^：表示开始
	（2）$：表示结束
	（3）[]：代表某个范围内的单个字符，比如：[0-9]单个数字字符
	（4）.：代表任意单个字符，除了换行和行结束符
	（5）\w：代表单词字符：字母、数字、下划线(_)，相对于[A-Za-z0-9_]
	（6）\d：代表数字字符：相对于[0-9]
量词：
	（1）+：至少一个
	（2）*：零个或多个
	（3）?：零个或一个
	（4）{x}：x个
	（5）{m,}：至少m个
	（6）{m,n}：至少m个，最多n个