html，css，JavaScript学习笔记_html+css+js学习笔记

作者：2023面试高手 | 2024-02-22 06:32:31

踩

html+css+js学习笔记

html

html是汽车的骨架，css是汽车的装饰，js是控制汽车启动的关键
1.<!DOCTYPE ***> ：是一个用于声明当前HTMl版本，用来告知web浏览器该文档使用是哪种
HTML 或者 XHTML 规范来解析页面，以便浏览器更加准确的理解页面内容，更加良好地展现
内容效果！如果***直接是html的话就代表是html5
2.<html lang ="***"> en代表英语，zh-CN代表中文，ja-jp代表日文
后面加上lang=对搜索引擎优化和浏览器有帮助，浏览器会决定是否要翻译当前页面
3.<meta charset="***"> ASCii-美国信息交换标准代码
ISO-8859-1 -拉丁字母表的字符编码
GB2312-汉字编码字符集
UTF-8 -Unicode万国码字符编码
4.常用标题：
一级标签...六级标签
<h1> </h1>
5.复制当前行，并粘贴到下一行
shift+alt+下箭头（vscode适用）
6.hr标签单标签 horizontal rule水平分隔线
align：写在hr里面对齐
noshade：写在hr里面，这样出来的分隔线没有阴影
7.特殊符号：
尖角号：&lt 左尖角号
&gt右尖角号
空格： &nbsp 该空格占据宽度受字体影响明显而强烈
&emsp 占据的空格正好是一个中文宽度，且基本上不受字体影响
版权： &copy ©
商标： &trade ® z
&reg ™
8.div标签，没有具体含义，用来划分页面的区域，独占一行
9.span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用，
多宽的空间距离，span不会破坏原有结构
10.ol标签有序列表：olderly
li里面可以随意放标签，但是ol里面只能放li，
数字是自动生成的
type：1，a，A，i，I
start：取值只能是一个数字
无序标签：ul
自定义列表：
<dl>，然后dl后面加<dt>，<dd>
dt是接图片，dd是接文字
11.<img src="">图片
12. ../表示返回上一级
./表示当前文件夹
../../上一级的上一级
13.一般是用相对路径
14.<img src=“图片路径” title=“鼠标悬停上去之后的提示信息” alt=“图片不显示之后（
加载失败）的提示信息 ”width=200px“ height=”200px“/>
15.仅设置宽高的话，会自动等比例缩放
16.超链接标签
<a href=”路径“ title=”鼠标悬停上去之后的提示信息“ target=”规定在何处打开文档“>内容</a>
href是Hypertext Reference的缩写。意思是指定超链接目标的URL。
打开前默认是蓝色的，打开后就变成了紫色
target属性：规定在何处打开文档
target=”_self“默认值
target=”_blank“新窗口打开
img标签可以包在a标签，点击图片就相当于点击超链接的作用
17.<table>,<tr>tr表示行，<td>td表示单元格，table里面只能放tr
，tr里面只能放td，它们是紧紧相邻的
快捷方式：table>tr>td
18.表格属性
宽度width高度height边框border边框颜色bordercolor背景颜色bgcolor
水平对齐align=”left“cellspacing=”单元格于单元格之间的间距“cellpadding=”单元格于内容之间的空袭“
td：table data
tr：tabel row
19.行tr属性
高度，背景颜色，文字水平对齐align=“left”，文字垂直对齐valign=“top或middle或bottom”
valign：vertical align
20.单元格td属性
宽度，高度，背景颜色，文字水平对齐，文字垂直对齐
21.表格合并列
colspan=“所要合并的单元格的列数”必须给td
rowspan=“所要合并的单元格的行数”必须给td
22.表单标签

css

Cascading Style Sheets层叠样式表
每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值
属性必须放在花括号中，属性与属性值用冒号连接
每条声明用分号结束
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开
在书写样式过程中，空格、换行等操作不影响属性显示
1.优先级：！important>行内>内部>外部，谁加了important谁的优先级最高
2.类选择器class ， id选择器，通配符选择器*，群组选择器：提出公共代码，节约代码量
后代选择器：从右往前找
通配符选择器：* 表示选取页面中所有元素（标签）
伪类选择器：
a：link{属性：属性值；}超链接的初始状态
a：visited{属性：属性值；}超链接被访问后的状态
a：hover{属性：属性值；}鼠标悬停，即鼠标划过超链接时的状态
a：active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态
如果这四个超链接伪类选择器符联合使用时，应注意他们的顺序，正常的顺序为
link，visited，hover，active
3.选择器的权重：
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲突
，会选择权重高的来执行
4. 2em：两倍字体大小
5.
font-size：字体大小
font-family：字体
color：颜色
font-weight：加粗
font-style：倾斜
text-align：文本水平对齐
line-height：行高
text-indent：首行缩进
letter-decoration：文本修饰
font：文字简写，是font-style，font-weight等的简写，顺序不能变，必须
同时指定font-size和font-family属性时才起作用
6.text-transform：capitalize或lowercase或uppercase
7.列表属性：
list-style-type：定义列表符合样式
list-style-image：将图片设置为列表符合样式
list-style-position：设置列表项标记的放置位置
list-style：简写
8.rgb后面加一个a变成rgba，a代表透明度的意思，0.5就代表50%透明度
9.背景属性：
background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的平铺
background-position：背景图片的定位
background-attachment：背景图片的固定，无论怎么滚动图片都在某个位置不动
10.浮动属性
float：left；元素靠左边浮动
float：right；元素靠右边浮动
float：none；元素不浮动
浮动的作用：定义网页中其他文本如何环绕该元素显示
就是让竖着的东西横着来
11.padding：内边距，不能设置为负数
12.margin：外边距

JavaScript

1.行内式 js代码（强烈不推荐，不利于代码维护）：直接把代码书写在标签上
a 标签书写在herf属性上
<a hrefa="javascript :js代码 ;">点我一下 </a>
非a标签书写在行为属性上
<div onclick ="alert ('hello world')">点一下我</div>
2.内嵌式js代码：把代码书写在一个script标签对内
内嵌式js代码，不需要依赖任何行为，打开页面就会执行
3.外链式js代码（最推荐的格式）：把代码书写在一个.js文件内，不需要依赖任何行为，打开页面就会执行
使用script标签的src属性引入指定js文件
4.JavaScript的变量
var num=100 不需要加分号，类似于C语言里面的int num=100；
在浏览器弹窗中显示num变量的值 alert（num）
在控制台打印num的值 console.log(num)
直接在页面输出num的值 document.write(num)
空类型：
null 表示有值，有一个空值 var k1=null
undefined：表示没有值 var k2
5.var n1=100
var result1=typeof n1
console.log(result) 在控制台打印出来的就是number，typeof关键字可以对基本数据类型
进行检测
6.数据类型的转换
//准备一个变量，赋值为字符串类型的内容
var s1=‘100’
console.log(s1)
console.log(typeof s1)
//使用Num（）方法进行一下转换
var n1=Number(s1)
console.log(n1)
console.log(typeof n1)

parseInt();先从第一位数字开始转换，直到遇到非数字部分
parseFloat（）；和parseInt相似，不同的是，他可以转换到小数部分
转换字符串：
String（）；
要转换的内容.toString（）
转布尔：Boolean( );
7.运算符：
==：只比较值是不是相等，不考虑数据类型
===：必须要值和数据类型都相等，才是true
8.var result=prompt（‘你爱不爱我？’）
在浏览器弹出输入框
9.var time=new Data（）创建时间对象
也可以指定时间结点，但是要注意的是1代表二月，往后挪一位
时间对象.getFullYear（）获取到时间对象中的年份信息
时间对象.getTiem（）获取到时间对象中的时间戳信息
时间戳：
格林威治时间1970-1-1 0：0：0
到
时间节点A的时间差，用毫秒来表示
10.获取浏览器可视窗口的宽度：var w=window.innerWidth
获取浏览器可视窗口的高度:var h=window.innerHeight
11.浏览器弹出层提示框:window.alert()
询问框:window.confirm() 输入框:window.prompt()
开启和关闭标签页开启:window.open()
关闭:window.close()
浏览器的历史操作回退:window.history.back()
前进:window.history.forward()
浏览器常见事件资源加载完毕:window.οnlοad=function(){}
页面尺寸改变: window.οnresize=function(){}
滚动条位置改变:window.οnscrοll=function(){}
浏览器卷去的尺寸
浏览器滚动到window.scrollTo()
12.间隔定时器:按照指定周期(毫秒)去执行指定的代码
setInterval(函数,时间 )
setInterval(function(){ //要执行的代码},1000)

延时定时器:在固定的时间(毫秒)后执行一次代码,注:只执行一次
setTimeout(函数,时间)
函数:时间到达执行的内容

定时器返回值:不区分定时器种类,表示页面上的第几个定时器,作用:关闭定时器

关闭定时器方法:clearInterval,clearTimeout, 两个方法是一样的,互相可以关闭
延时定时器和间隔定时器
13.DOM document object model
一整套操作文档流相关内容的属性和方法
14.获取元素的方式

根据 id名称获取
语法:document.getElementById('id名称')
作用:获取文档中id名对应的一个元素
返回值:
如果用id对应的元素,就是这个元素
如果没有id对应的元素,就是null

根据元素类名获取
语法:document.getElementsByClassName('元素类名')这里的element多了
个s,一位class可以有多个是一样的,但是id只能是一个,id没有s,class就有s
作用:获取文档中所有类名对应的元素
返回值:必然是一个伪数组
如果有类名对应的元素,有多少获取多少
如果没有对应的元素,空的伪数组

根据元素标签名获取
语法:document.getElementsByTagName('标签名')
作用:获取文档流中所有标签名对应的元素
返回值:必然是一个伪数组
如果有标签名对应的元素,有多少获取多少
如果没有标签名对应的元素,空的伪数组

根据选择器获取
语法:document.querySelector('选择器')
作用:获取文档流中满足选择器的第一个元素
返回值:
如果有选择器对应的元素,获取到第一个
如果没有选择器对应的元素,null

根据选择器获取一组
语法:document.querySelectorAll('选择器')
作用:获取文档流中所有满足选择器规则的元素
返回值:必然是一个伪数组
如果有选择器对应的元素,有多少获取多少
如果没有选择器对应的元素,空的为伪数组

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/128908?site