html,css，javaSript
html,css，javaSript
1.认识
- 结构：对应的是 HTML 语言
- 表现：对应的是 CSS 语言
- 行为：对应的是 JavaScript 语言
2.标签
标题：h1-h6
横线效果：hr
字体：font（face，color，size）
换行 br
段落 p
加粗 b
斜体 i
下划线 u
文本居中 center
图片 img（src，height，width）
音频 audio（src，controls）
视频 video（src，controls）
对于height，width
- 像素：单位是px
- 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
超链接：a(href，target)
-
href：指定访问资源的URL
-
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
列表
有序
<ol type="A">
<li></li>
<li></li>
</ol>
无序
<ul type="circle">
<li></li>
<li></li>
</ul>
表格
-
table ：定义表格
-
border：规定表格边框的宽度
-
width ：规定表格的宽度
-
cellspacing：规定单元格之间的空白
-
-
tr ：定义行
- align：定义表格行的内容对齐方式
-
td ：定义单元格
-
rowspan:规定单元格可横跨的行数
-
colspan:规定单元格可横跨的列数
-
-
th：定义表头单元格
div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果
表单：form
表单项 input
下拉表 select
文本域 textarea
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
3.css
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>牛马</title>
</head>
<body>
<font color="red">牛马：wjc</font>
<h1>我是h1：牛马</h1>
<h2>我是h2：牛马</h2>
<h3>我是h3：牛马</h3>
<h4>我是h4：牛马</h4>
<h5>我是h5：牛马</h5>
<h6>我是h6：牛马</h6>
<font face="宋体" size="5" color="#ff0000">wjc牛马</font>
<br>
<font face="楷体" size="5" color="#ff0000">wjc牛马</font>
<hr>
<p>
hello world, I am from China.
</p>
<p>
<i>你好， 我来自中国。</i>
<br>
<b>你好， 我来自中国。</b>
<br>
<u>你好， 我来自中国。</u>
<br>
<center>
<b>
你好， 我来自中国。
</b>
</center>
</p>
<img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width=30% height=30%>
<img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="300" height="400">
<audio></audio>
<video></video>
<br>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<ol type="A">
<li>有序</li>
<li>有序</li>
</ol>
<ul type="circle">
<li>无序</li>
<li>无序</li>
</ul>
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
<div id="div1">我是div</div>
<div >我是div</div>
<span>我是span</span>
<span>我是span</span>
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
<br>
<select>
<option>
北京
</option>
<option>
上海
</option>
<option>
南京
</option>
</select>
</form>
<textarea>
中华
田园
犬
</textarea>
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
<style>
div{
color: red;
}
#div1{
color: blue;
}
</style>
</html>
4.javaScript
1.javascript引入方式：内部，外部
内部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js1");
</script>
</body>
</html>
外部
alert("hello js");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
2.打印
窗口，页面，控制台
window.alert("hello js 1");//写入弹窗
document.write("hello js 2");//写入页面
console.log("hello js 3");//写入浏览器的控制台
3.变量
全局变量，可重复定义 var
所在代码块中有效，不允许重复定义 let
只读常量，不允许修改 const
4.数据类型
原始数据类型，引用数据类型，typeof获取数据类型
原始：数字 number（整数，小数，NaN）; String；boolean；null；undefined 默认
-
==：
-
判断类型是否一样，如果不一样，则进行类型转换
-
再去比较其值
-
-
===：js 中的全等于
- 判断类型是否一样，如果不一样，直接返回false
- 再去比较其值
流程控制：if， switch，for, while, do while
函数
function 函数名(参数1,参数2..){
要执行的代码
}
var 函数名 = function (参数列表){
要执行的代码
}
调用：直接函数名+参数
5.对象
基本对象,Brower对象，DOM对象
对于：Array
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}
-
push 函数：给数组添加元素，也就是在数组的末尾添加元素
参数表示要添加的元素
// push:添加方法 var arr5 = [1,2,3]; arr5.push(10); alert(arr5); //数组的元素是 {1,2,3,10} -
splice 函数：删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素
// splice:删除元素 var arr5 = [1,2,3]; arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 alert(arr5); // {2,3}
6.JavaScript 中自定义对象
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~
浙公网安备 33010602011771号