web前端学习笔记（一）基础版

最新推荐文章于 2023-09-22 12:35:52 发布

qq_38291995

最新推荐文章于 2023-09-22 12:35:52 发布

阅读量210

点赞数

分类专栏：前端学习文章标签： javascript css jquery html

本文链接：https://blog.csdn.net/qq_38291995/article/details/105559641

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前在项目中负责过一部分前端的工作，但是并没有系统地学习过，每次都是用到什么去学什么，感觉脑子里没有一个体系，因此从今天开始从前端基础的html，css，javascript系统学习一下。

1. HTML（HyperText MarkUp Language）超文本标记语言

标签：<html>…</html> html标签规定网页的结构和内容

元素：标签+内容

1.1 html标签

(1) 标题标签：<h1>… </h2>

(2) 段落p：<p>…</p>

(3) 段内换行<br/>: <p>…<br/>…</p>

(4) 空格字符 

(5) 预留格式pre标签：<pre>…</pre> 标签内文字所有格式都会按原来的样式显示出来

(6) 行内组合span：

(7) 水平线<hr/>

(8) 超链接a <a href="">内容</a> 虚拟超链接：<a href="#">超链接</a>

(9) 图像img：<img src="path" alt=" "/> 一般使用相对路径以网页所在文件夹为基准点查找图片文件 alt属性

(10) 区域div 可以将页面划分为一个个版块可以结合css样式对每个版块进行排版布局

(11) 列表ul li 无序列表<ul> 列表项<li> ; 有序列表<ol> 列表项<li> ；

用户自定义列表：自定义列表dl、列表项dt、描述dd

(12) 表格table tr td 表格table 行tr 表格项td

(13) form表单：向后端提供信息

		<form action="提交信息 在此输入web后端的接口页面">
			账户：<input type="text" name="userName">
			<br/>
			密码：<input type="password" name="password">
			<br/>
			性别：男<input type="radio" value="boy" name="sex"> 女<input type="radio" value="girl" name="sex" checked="checked"><br/>
			爱好：<input type="checkbox" value="1" name="hobbit"> 音乐<input type="checkbox" value="2" name="hobbit" checked="checked">体育<input type="checkbox" value="3" name="hobbit" checked="checked">阅读<br/>
			爱好：
			<select>
				<option>选项1</option>
				<option selected="selected">选项2</option>
				<option>选项3</option>
			</select><br/>
			请输入个人简介：
			<br/>
			<textarea rows="5">在此输入个人简介……</textarea>
			<br/>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</form>

2. CSS（Cascading Style Sheets，层叠样式表）样式

css规定网页样式，内容和样式分离，一个内容上可以叠加多个样式，便于用户修改样式。

2.1 css语法

(1) css样式添加方法：

行内<p style>
内嵌<style> 在<head>标签内，内嵌样式p{…}
在html文件中链接css文件：<link rel="stylesheet" href="../css/style.css" />

(2) css样式优先级：多重样式可以层叠，可以覆盖；样式优先级按照“就近原则”--离元素越近的样式就越起作用：行内样式>内嵌样式>外部样式表>浏览器默认样式

(3) css选择器：

标签选择器：样式名字与标签名字一致，声明出来的样式就作用于这类标签的所有元素：p{}；body{}…
类别选择器：.one{};.two{}…；html引用时用class="one/two"这样子来引用可以被多次引用感觉这个最常用
id选择器： #one{};#two{}…；html引用时用id="one/two"来引用唯一性不可以多个同时使用

(4) 样式声明：

全局声明：*{…} 整个网页的默认样式
嵌套声明：p span{} 代表嵌套关系 p标签内部的span标签会使用这种样式
集体声明：p,h1{} 两种标签都要设置为某种样式

(5) css样式：

css超链接：链接的四种状态：a:link--普通的、未被访问的超链接；a:visited--用户已访问的链接；a:hover--鼠标指针位于链接的上方悬停；a:active--链接被点击的时刻 a:hover必须位于a:link和a:visited之后；a:active必须位于a:hover之后
：伪类选择器
列表样式：list-style，list-style-image:url("src")，list-style-position, list-style-type;
表格样式：table{boder: ;boder-collapse: }
奇偶选择器： :nth-child(odd|even)

2.2 页面布局和定位

1. 盒子模型

(1)盒子模型：content、padding、border、margin

overflow属性，当内容部分超出盒子的时候，设置溢出部分：hidden、scroll、auto

2. CSS定位机制

(1) 文档流定位：默认定位方式，元素从上到下、从左至右依次排列

block元素：独占一行、元素的height、width、margin、padding都可设置；常见的block元素：<div>/<p>/<h>/<ol>/<ul>/<table>/<form> ；{display:block}可将元素设置为block元素
inline元素：不单独占一行、不可设置width、height、width就是它包含的文字或图片的宽度，不可改变；常见的inline元素：<span>/<a>;显示为inline {display：inline}；默认两个inline元素水平排列时有间隙
inline-block元素：不单独占一行，但可以设置元素的height、width、margin、padding

(2) float定位

(3) 层定位：position属性决定元素相对于谁定位 {position:static(默认文档流定位)/fixed（固定定位）/relative（相对定位）/absolute（绝对定位）;}

固定定位fix：以浏览器窗口为参照物

相对定位relative：以直接父元素为定位参照物，保留文档流中的原位置；

绝对定位absolute：以非static的父元素为定位参照物，不保留文档流中的原位置

设置某一层为底层：z-index:-999；设置某一层为顶层：z-index:999;

3.JS

3.1 js组成

（1）核心（ECMAScript）（2）文档对象模型（DOM，Document Object Model）（3）浏览器对象模型（BOM，Browser Object Model）

3.2 js语法

1. 变量

变量的声明利用var关键字声明变量：var test；

2. 数据类型

（1）基本类型：数字类型number、字符串类型、bool类型、空null、未定义undefined

（2）数据类型转换：

typeof()或typeof 获取数据类型；
NaN 可以用isNaN(数据)判断是否为数据类型，是数字类型返回false，不是返回true；
变量.toString() 可以将任意变量转换为string类型；
parseInt(数据)获取指定数据的整数部分；
parseFloat(data)将data转换为小数；
Number(data)将字符串类型转换为number类型

（3）循环流程控制

break：用在循环中，终止整个循环体的执行，跳出整个循环；

continue：跳出本次循环，继续执行下一次循环

3. 运算符

（1）==：判断等于（不比较类型，只比较数值）；===：判断全等（除数值外，连同类型也一起比较）

4.DOM查找

（1）按id查找：document.getElementById("id")，可以精确查找，查找效率高

（2）按标签查找：parent.getElementsByTagName("tag")，不仅查直接子节点，而且查所有子代节点；返回一个动态集合

（3）按name查找：document.getElementsByName('name属性值')，可以返回该name属性的元素

（4）按class查找：parent.getElementsByClassName('class值')，有兼容性问题：IE9+

（5）通过css选择器查找：

只找一个元素：parent.querySelector("selector")，如果选择器匹配的有多个，只返回第一个
找多个元素：parent.querySelectorAll("selector")

5.DOM修改

（1）读取属性值：elem.getAttribute("属性名")

（2）修改属性值：elem,setAttribute("属性名",value)

（3）判断是否含有属性：elem.hasAttribute("属性名") 返回bool类型，true/false

（4）移除属性：elem.removeAttribute

6.DOM添加

（1）创建新元素：document.createElement("元素名")

（2）将元素添加到DOM树：

parentNode.appendChild(childNode) 在DOM树末尾添加

document.body.appendChild(div),新创建的节点要添加在DOM树中，才能在页面显示时看到

parentNode.insertBefore(newChild,existingChild)

存在一些问题，尽量少操作DOM树，每次修改DOM树，都会导致重新layout

（3）添加元素优化

通过设置虚拟文档片段优化元素添加

7.BOM

定时器：网页动态效果和计时的时候需要用到定时器

周期性定时器：设置定时器：setInterval（exp,time）单位ms ；停止定时器：
一次性定时器：setTimeout（exp,time）可以让程序延迟一段时间执行

//设置周期性定时器
var timer = setInterval(function(){

            console.log("Hello world")},3000); //设置定时器
clearInterval(timer)                           //停止定时器


//设置一次性定时器
setTimeout(function(){

            console.log("Hello world")},3000)

4. JQuery

1. 查找

兄弟关系：$(" ").next()/prev() 紧邻的前一个或者后一个元素

$(" ").nextAll()/prevAll() 之前或之后的所有元素

$(" ").siblings() 除自己以为的所有兄弟节点

2.获取/修改元素属性

（1）获取元素属性：$(" ").attr("属性名")

（2）修改设置元素属性：$(" ").attr("属性名",属性值)

3.内容

（1）html内容：通过$(" ").html() 可以获取或修改节点的html内容；

（2）文本内容：通过$(" ").text() 可以获取或修改节点的文本内容；

（3）值操作：$(" ").val() 获取value值

4. 添加

（1）创建新元素：var $new = $("html片段")

（2）将新元素添加到DOM树：$(parent).append($newElem)

5. 删除

$(" ").remove()

6. JQuery事件

语法：$(" ").bind("时间类型",function(e){ })

小白第一次写博客，都是非常基础的内容，本意是记录学习过程，方便日后查找，如果能给大家带来帮助那是最好啦~

有什么写得不好的地方望各位大佬多多指教，不喜勿喷哦~

qq_38291995

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记（一）基础版

之前在项目中负责过一部分前端的工作，但是并没有系统地学习过，每次都是用到什么去学什么，感觉脑子里没有一个体系，因此从今天开始从前端基础的html，css，javascript系统学习一下。1. HTML（HyperText MarkUp Language）超文本标记语言标签：<html>…</html>元素：标签+内容...
复制链接

扫一扫