HTML基础标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML基础标签</title>
</head>
<body>
<h1></h1>
...
<h6></h6> 定义标题
<b></b> 定义粗体文本
<u></u> 定义文本下划线
<i></i> 定义斜体字
<p></p> 定义段落
<br> 定义换行
<hr> 定义水平线
<img src="" width="" height=""> 定义图片
<audio src="" controls="controls"></audio> 定义音频，controls定义播放按钮
<video src="" controls="controls"></video> 定义视频
尺寸：% 和 px
路径： ./当前目录 ../上级目录
<a href="" target=""></a> 定义超链接
href：指定访问资源的url
target：指定打开资源的方式
_self:默认，当前页面打开
_blank:空白页面打开
<ol>
<li></li> 定义有序列表
</ol>
<ul>
<li></li> 定义无序列表
</ul>
<table border="" cellspacing=""></table> 定义表格 border 定义表格边框宽度 cell..定义单元格之间的空白
<th></th> 定义标题
<tr align=""></tr> 定义行 align 定义内容对其方式
<td rowspan="" colspan=""></td> 定义列 row..定义单元格横向跨越行数 col..定义纵向跨越列数
<table>
<tr>
<th>序号</th>
<th>排名</th>
</tr>
<tr>
<td>1</td>
<td>100</td>
</tr>
</table>
<div></div> 布局标签，一个div占一行
<span></span> 行内布局标签，一个span占其包裹的内容
<form action="" method=""></form> 定义表单 act..定义发送表单的url，met..定义发送方法有get，post等
<input type="" name=""> 定义表单项 type定义类型，name定义名称
<label></label> 为表单项定义标注
<select>定义下拉列表
<option></option> 定义下拉列表的列表项
</select>
<textarea></textarea> 定义文本域
</body>
</html>
css基础
内联样式
<div style=""></div> style属性设置css
内部样式
<style >
标签修改样式
div{
xxx:xxx;
}
id修改样式
#id{
xxx:xxx;
}
class属性修改样式
.名称{
xxx:xxx;
}
</style>
外部引入
<link href="demo.css" rel="stylesheet">
demo.css文件
div{
...
}
.id{
...
}
#class{
...
}
javascript基础
//引入
//内部脚本：js写在html中
<script>
alert("你好!")
</script>
//外部脚本：js写在js文件中，通过script标签引入
<script src="" rel="stylesheet"></script>
注释 // /*/
大括号标识代码块
<script>
if (count==1){
alert("count")
}
</script>
//输出语句
<script>
window.alert("") //弹出警告栏
document.write(""); // 写入html
console.log(""); //写入控制台
</script>
循环和条件判断和java一样
函数：
定义
<script>
function funcNmae(参数1,参数2){
执行的代码
}
//弱类型语言不需要定义数据类型
function add(a,b) {
return a+b;
}
调用
funcNmae(a,b);
let result=add(a,b);
定义方法二
var funcname1=function (参数){
}
</script>
js对象：
Array 是变长，越界就直接赋值，可存储不同类型数值
var arr=new Array(1,2,3); var arr1=[1,2,3];
arr[索引]=值
属性
.lenght 长度
方法
.push() 追加
.splice(start,end)
String
var str=new String("hello");
var str="hello"
属性
.lenght
方法
.charAt() 返回指定位置字符
.indexOf() 检索字符串
.trim() 去除首尾空格
自定义对象
var person={
name:"zhangsan",
age:"21",
eat:function(){
alert("eat dinner!");
}
}
BOM 浏览器对象模型
组成
Window 浏览器窗口对象
window.alert()
window.confirm() //带有提示信息和确认按钮的提示框
window.setTimeout(function,time) //一定时间后执行一个function，只执行一次,time是毫秒值1000为一秒
window.setInterval(function,time) //在一定时间后执行一个function，循环执行
Navigator 浏览器对象
Screen 屏幕对象
History 历史记录对象
window.history.方法()
window.history.back() //加载history列表的前一个url
window.history.forward() //加载history列表的下一个url
Location 地址栏对象
window.location.方法()
window.location.href("https://www.baidu.com"); //跳转到百度，重定位
所有的window都可以省略
DOM 文档对象模型
将标记语言的的各个组成部分封装为对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文档对象
Comment:注释对象
js通过DOM对html进行控制
改变html内容
改变html元素样式css
对html dom做出反应
添加html元素
文档对象的属性，获取element对象
getElementById: 根据id属性获取，返回一个Element对象
getElementsByTagName :根据标签名称返回Element数组
getElementsByName:根据name属性获取，返回Element数组
getElementsByClassName:根据class属性获取，返回Element对象数组
element对象的使用，使用.获取其属性
.style 设置css样式
.innerHTML 设置元素内容，覆盖原来的
对于checkbox标签用element的checked属性判断是否选中
事件监听：
事件绑定的方式：1.html标签的属性绑定 2.通过DOM元素绑定
<input type="button" onclick="func()">
<script>
function func(){
alert("点击了!");
}
</script>
<input type="button" id="btn">
<script>
document.getElementById("btn").onclick=function (){
alert("点击了!");
}
</script>
鼠标事件:
元素的聚焦点的得失，获取焦点后的变化，失去后的变化
元素的点击事件
鼠标移到某元素，或离开的变化
表单元素的提交前的判断onsubmit函数
onload 页面加载完成后执行
onmouseover 鼠标移到猫元素上触发
onmouseout 鼠标移出元素后触发
onclick 点击
onfocus 获得焦点
onblur 失去焦点
onsubmit 提交表单 return false 不能提交 return true 可以提交
键盘事件
onkeydown 某个键盘按下后触发
正则表达式
定义了字符串的组成规则
语法：
^ :表示开始
$ :表示结束
[] :代表某个范围内的单个字符,[0-9]
. :代表任意单个字符，除了换行和结束符
\w :代表单词字符，数字，字母，下划线_
\d :代表数字字符，相当于[0-9]
量词：
+ :至少一个
* :零个或多个
? :零个或一个
{x} :x个
{m,} :至少m个
{m,n} :至少m个，最多n个
直接定义
var re=/^\w{6,12}$/ 没有引号，以两个/包裹
使用RegExp对象定义
var re=new RegExp("^\w{6,12}$");
.test方法验证
var str="qwer123456";
var flag=re.test(str); 返回值为boolean类型
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/156329.html
