一丶HTML
1.HTML
<title>网页的名字</title>
<h1>网页的大标题</h1>
标题从大到小为<h1-h6>
<img src"图片">文字
<hr>水平线</hr>
相对路径: ./ : 当前目录 , ./ 可以省略的 ../: 上一级目录
2.CSS
行内样式 <h1 style="样式要求">
内嵌样式 <style>h1{样式要求}</style>
外联样式 需要引入的htlm文件中 <link rel="stylesheet" href="css的路径">
创建一个css文件h1{样式要求}
文字颜色rgb表示rgb(0,0,0)到(255,255,255)
3.css选择器(选取需要改变样式的范围)
定义的时候
<span class = "类名" 或者id="">文字内容</span>
元素选择器:div{样式要求}
id选择器:#id{}
类选择器:.class{}
设置字体大小font-size: 数字px;
4.超链接
<span><a href="网址" target="控制打开新网页的位置">超链接的文字</a>
5.正文
视频<video> 音频<audio>
<video src = "视频路径" controls是播放控件="controls" width="宽度"></video>
<br>换行:第一行<br>第二行
<p>一段话</p>
加粗:<b>文字</b> 倾斜:<i> 下划线:<u> 删除线<s>
text-indent:段落首行缩进
line-height:设置行高
text-align:设置对齐方式,可取值为 left/center /right
空格占位符( )
盒子模型
<p>一个段落,内容都在一段中,每一对都会开启新的一段,主要是文本内容</p>
<div>每一对都会开启新的一行,主要是把一整块包裹下来作为一个整体实现布局等</div>
<span>不会开始新的一行,直到一行写不下才会换行,每对span都在一起</span>
span可以放在p里,span相当于是隔离出一段话来实现效果
6.表格标签
定义表格:<table border="边框宽度px" cellspacing="单元格之间的空间" width="表格宽度px">>
表格行数据<tr> 每个行的单元格是<td> 表头单元格<th>有加粗效果
<tr>
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td> <img src="img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
7.表单标签
定义表单<form action="要提交的URL" method="get是拼在URL后面有长度限制或者post在请求体中无限制">
用户名:<input type="text"name="username")
年龄:<input type="text"name="age">
<input type="submit" value="提交">
二丶JS
1.引入方式
JS是控制页面显示效果的,两种引入方式,alert控制弹出框
内部引入 <script> alert("弹出的文字") </script>
外部引入 在HTML中引入语句<script> src="js文件的路径" </script> ,在JS文件中写alert("弹出的文字")
2.基础语法
window.alert() 警告框
document.write()直接显示在网页上
console.log()写在浏览器控制台
var定义的全局变量,可以重复定义,新的会覆盖掉旧的。let定义的局部变量,不能重复定义。const定义常量,不可以改变。
typeof 要查看的数据类型
把其他类型转换为数值类型parseInt ("要转换的数据类型")
alert(parseInt("23"));//23 alert(parseInt("acb"));//NaN alert(parseInt("23c"));//23 alert(parseInt("sda1"));//NaN
:0,null,undefined,"",NaN理解成false,其余为true
3.函数
定义方法一 function 函数名(参数1,参数2...){要执行的代码} 调用 var reslut = 函数名(参数1,参数2...); alert(reslut)
定义方法二 var 函数名=function(参数1,参数2...){要执行的代码}
调用 var reslut = function(参数1,参数2...);
alert(reslut)
Array数组
定义 var 变量名 = [数组,元素];
访问 变量名[索引]=值;
遍历数组中有值的元素 数组名.forEach(function e ){console e};
添加元素到数组末尾 数组名.push(元素1,元素2);
删除元素 splice(开始索引,删几个);
String
var 变量名 ="内容”;
获取指定索引位置的字符 字符串名.charAt();
检索某个字符串的位置 字符串名.indexOf("字符串");
去除字符串两侧的空格,需要一个新变量接收新的字符串 字符串名.trim();
截取一个子字符串,含头不含尾 substrin(开始索引,结束索引);
4.自定义对象
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2
函数名:function(形参){要执行的代码 }
};
调用 对象名.属性名;
对象名.函数名( );
5.JSON对象
var 变量名 = {"属性名1":"属性值1","属性名2":数字,"数组":["元素1","元素2"] };
JSON字符转转换为js对象 parseJSON.parse(变量名);
调用 变量名.属性
js对象转为json字符串 JSON.stringfy(变量名);
6.BOM对象
浏览器窗口对象window.可以省略 window.属性或方法;
弹出对话框 confirm( )
周期性的执行某个函数 setInterval (执行的函数function( ){ },隔多少秒执行一次);
setTimeout(执行的函数function( ){ },多少秒后执行函数);
地址栏属性 location.属性;
7.DOM对象
根据ID获取单个element对象 var h1 = document.getElementById('id名');
根据标签名获取element对象数组 var divs = document.getElementsByTagName('标签名');
根据name获取element对象数组 var hobbys = document.getElementsByName('hobby');
根据class获取element对象数组 var clss = document.getElementsByClassName('cls');
设置或者返回元素内容 元素名.innerHTML = "更改的内容";
<font> color = '改变的颜色'>文字的内容</font>
变量名.checked = true//复选框选中
8.JS事件监听
事件绑定
方法一
<input type="button" id = "btn1" value="事件绑定1" οnclick="on()"> function on (){ alert("1被点击") }
方法2
<input type="button" id = "btn2" value="事件绑定2"> document.getElementById('btn2').onclick = function (){ alert("2被点击") }