一、html快速入门
1.html格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.基础标签:
<h1> -<h6> //定义标题,h1最大,h6最小
<font> //定义文本的·字体,字体尺寸,字体颜色
<b> //定义粗体文本
<i> //定义斜体文本
<u> //定义文本下划线
<p> //定义段落
<br> //定义折行
<hr> //定义水平线
3.图片、音频、视频标签:
<img> //定义图片
src:规定显示图像的URL(统一资源定位符)
height:定义图像高度
weight:定义图像宽度
<audio> //定义音频
src:规定音频的URL
controls:显示播放控件
<video> //定义视频
src:规定音频的URL
controls:显示播放控件
4.超链接标签:
<a> //定义超链接,用于连接到另一个资源
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
5.列表标签:
//有序列表
<ol>
<li>海绵宝宝</li>
<li>章鱼哥</li>
<li>派大星</li>
</ol>
有序列表效果如下:
//无序列表
<ul>
<li>海绵宝宝</li>
<li>章鱼哥</li>
<li>派大星</li>
</ul>
无序列表效果如下:
6.表格标签:
<table> //定义表格
border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元格之间的空白
<tr> //定义行
align:定义表格行的内容对齐方式
<td> //定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
<th> //定义表头单元格
7.表单标签
表单:在网页中主要负责数据采集功能,使用<form>标签定义表单。
表单项(元素):不同类型的iput元素、下拉列表、文本域等。
form:定义表单
action:规定当提交表单时向何处发送表单数据,URL
method:规定用于发送表单数据的方式
get:浏览器会将数据直接附在表单的action URL之后。大小有限制
post:浏览器会将数据放到http请求消息体中,大小无限制
<input>:表单项,通过type属性控制输入形式
type取值:
text:默认值,定义单行的输入字段
password:定义密码字段
radio:定义单选按钮
checkbox:定义复选框
file:定义文件上传按钮
hidden:定义隐藏的输入字段
submit:定义提交按钮,提交按钮会把表单数据发送到服务器
reset:定义重置按钮,会清除表单中的所有数据
button:定义可点击按钮
<select>:定义下拉列表,<option>:定义列表项
<textarea>:文本域
二、CSS
CSS导入方式
将CSS导入HTML有三种方式:
1.内联样式:在标签内部使用style属性,属性值是css属性键值对
<div style="color:red">Hello CSS</div>
2.内部样式:定义style标签,在标签内部定义css样式
<style type="text/css">
div{
color:red;
}
</style>
3.外部样式:定义link标签,引入外部的css文件
<link rel="stylesheet" href="demo.css">
css选择器:
概念:选择器是选取需设置样式的元素(标签)
div{
color:red;
}
分类:
1.元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
} //元素选择器
#name{
color:blue;
} //id选择器
.cls{
color:pink;
} //类选择器
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div id="name">div3</div>
<div class="cls">div4</div>
<span class="cls">span</span>
</body>
</html>
三、javascript
- javascript 是一门面向对象的脚本语言,它跨平台,控制网页的行为,使网页可交互。
- W3C标准:网页主要由三部分构成: 结构:HTML 表现:CSS 行为:javascript。
- java与javascript完全不同,不论是概念还是设计,但是基础语法类似。
javascript引入方式
内部脚本:将js代码定义在HTML页面中。
在HTML中,javaScript代码必须位于<script></script>标签之间。
在HTML中文档可以在任意地方,放置任意的<script>
外部脚本:将js代码定义在外部js文件中,然后引入到HTML页面。
书写语法:
1.区分大小写
2.每行结尾的分号可有可无
输出语句:
- 使用window.alert()写入警告框
- 使用document.write()写入HTML输出
- 使用console.log()写入浏览器控制台
变量:
javascript中用var关键字(variable的缩写)来声明变量
数据类型:
javascript中分为:原始类型和引用类型
5种原始类型:
- number:数字(整数、小数、NaN)
- string:字符、字符串、单双引皆可
- boolean
- null
- undefined:当声名的变量未初始化时,该变量默认值是undefined
使用type运算符可以获取数据类型
alert(typeof age);
函数:
function functionName(参数1,参数2){
要执行的代码
}
形式参数不需要类型,因为javascript是弱类型语言。
返回值也不需要定义类型。
Array:
javascript Array对象用于顶改以数:
定义:
var 变量名=new Array[元素列表];//方式一
var 变量名=[元素列表];//方式二
String:
var 变量名=new String(s);//方式一
var 变量名=s;//方式二
属性:length:字符串长度
方法:charAt():返回在指定位置的字符
indexOf():检索字符串
自定义对象:
var 对象名称={
属性名称1:属性值1,
属性名称1:属性值1,
...
函数名称:function(形参列表){}
...
};
BOM(浏览器对象模型):
javascript将浏览器的各个组成部分封装为对象
组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
Window:
alert() | 显示带有一段消息和一个确认按钮的警告框 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
setInterval() | 按照指定周期(以毫秒计)来调用函数或计算表达式 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
History(历史记录):
获取:使用window.history获取,其中window可以省略
window.history.方法();
history.方法();
back() | 加载History列表中的前一个URL |
forward() | 加载History列表中的下一个URL |
Lacation:
获取:使用window.location获取,其中window可以省略
window.location.方法();
loaction.方法();
属性:
href:设置或返回完整的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//3秒后跳转到首页
document.write("3秒跳转到首页...");
setTimeout(function(){
location.href="https://www.baidu.com";
},3000);
</script>
</body>
</html>
DOM(文档对象模型):
将标记语言的各个部分封装为对象
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
javascript通过DOM就能对HTML进行操作了
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对HTML DOM事件做出反应
- 添加和删除HTML元素
DOM是W3C(万维网联盟)的标准
DOM定义了访问HTML和XML文档的标准
W3C DOM被分为3个不同的部分:
1.核心DOM:针对任何结构化文档的标准模型
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
2.XML DOM:针对XML文档的标准模型
3.HTML DOM:针对XML文档的标准模型
- image:<img>
- Button:<input type='button'>
事件绑定:
事件绑定有两种方式:
方式一:通过HTML标签中的时间属性进行绑定
<input type="button" value="按钮一" onclick="on()">
function on(){
alert("按钮一被点了");
}
方式二:通过DOM元素属性绑定
<input type="button" value="按钮二" id="btn">
document.getElementById("btn").onclick=function(){
alert("按钮二被点了");
}