html,css,JavaScript学习笔记

html

html是汽车的骨架,css是汽车的装饰,js是控制汽车启动的关键
1. :是一个用于声明当前HTMl版本,用来告知web浏览器该文档使用是哪种
 HTML 或者 XHTML 规范来解析页面,以便浏览器更加准确的理解页面内容,更加良好地展现
内容效果!如果***直接是html的话就代表是html5
2. en代表英语,zh-CN代表中文,ja-jp代表日文
后面加上lang=对搜索引擎优化和浏览器有帮助,浏览器会决定是否要翻译当前页面
3.     ASCii-美国信息交换标准代码
ISO-8859-1  -拉丁字母表的字符编码
GB2312-汉字编码字符集
UTF-8 -Unicode万国码字符编码
4.常用标题:
一级标签...六级标签


5.复制当前行,并粘贴到下一行
shift+alt+下箭头(vscode适用)
6.hr标签    单标签   horizontal rule水平分隔线
align:写在hr里面对齐
noshade:写在hr里面,这样出来的分隔线没有阴影
7.特殊符号:
尖角号:< 左尖角号
              >右尖角号
空格:       该空格占据宽度受字体影响明显而强烈
              &emsp  占据的空格正好是一个中文宽度,且基本上不受字体影响
版权:   ©   ©
商标:  &trade   ® z
            ®   ™
8.div标签,没有具体含义,用来划分页面的区域,独占一行
9.span标签,没有实际意义,主要应用在对于文本独立修饰的时候,内容有多宽就占用,
多宽的空间距离,span不会破坏原有结构
10.ol标签 有序列表:olderly
li里面可以随意放标签,但是ol里面只能放li,
数字是自动生成的
type:1,a,A,i,I
start:取值只能是一个数字
无序标签:ul
自定义列表:
,然后dl后面加

dt是接图片,dd是接文字
11.图片
12.     ../表示返回上一级
           ./表示当前文件夹
             ../../上一级的上一级
13.一般是用相对路径
14. 加载失败)的提示信息  ”width=200px“  height=”200px“/>
15.仅设置宽高的话,会自动等比例缩放
16.超链接标签
内容
href是Hypertext Reference的缩写。 意思是指定超链接目标的URL。
打开前默认是蓝色的,打开后就变成了紫色
target属性:规定在何处打开文档
target=”_self“默认值
target=”_blank“新窗口打开
img标签可以包在a标签,点击图片就相当于点击超链接的作用
17.,tr表示行,
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标签    书写在行为属性上

点一下我

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('选择器')
作用:获取文档流中所有满足选择器规则的元素
返回值:必然是一个伪数组
如果有选择器对应的元素,有多少获取多少
如果没有选择器对应的元素,空的为伪数组

'

             


 

你可能感兴趣的:(javascript,html,css)