HTML、JS基础学习：
HTML:
Html:超文本标记语言
自定义标记（自己定义一个标记语言）
预定义标记（别人已经定好的标记语言）
根标记（所有的内容都在根标记内）
单标记（只有头，没有尾），双标记（有头有尾）
属性 name = value
内容
<h1 name = "属性" class = '属性2' id = '属性3'>
内容
</h1>
<h1> --> <h6> 字体是从大到小
注释：
<!-- 注释的内容 -->
<head>
字体：
<fond size = '' color = ''> 文字 </fond>
可以设置当前文件的相对路径:<base>标签
<base href = "E:\xuedao\24th" />
</head>
<body>
<u> </u>
<i> </i>
<br> 换行 </br>
<b> </b>
<strong> 加粗 </strong>
&npsp;空格
<hr>分割线
<p>段落
<a herf链接地址 = "" target窗口打开方式 = "_blank"> 超链接 </a> <br>
链接地址：相对路径：从当前文件所在目录开始 ./文件 ../文件
可以设置当前文件的相对路径:<base>标签
绝对路径：文件的全路径（电脑上的html文件路径）
插入图片：
<img src = "" width = "100" height = "200" />
</body>
表格：
<table border = "1" cellpadding内间距 = "10" cellspacing外间距 = "0" width = "" height = "" >
<tr>行1
<th>1</th>
<th>2</th>
</tr>
<tr>行2
<td>3</td>
<td>4</td>
</tr>
<td colspan = '2'占两列>
<td rowspan = '2'占两行>
<td colspan = '2' rowspan ='2'一个值占两行两列>
<img src= >放一张图进去
列表：放在body里
ul:无序列表
<ul type ="列表符号的样式 ">
<li>啊</li>
<li>发</li>
<li>是</li>
<li>发</li>
<ul>
ol:有序列表
li:列表元素
<ol type = "列表序数的类型，不填默认为数字">
<li>啊</li>
<li>发</li>
<li>是</li>
<li>发</li>
</ol>
dl:自定义列表
dt(列表标题)
dd(内容)
表单：
<form action = "数据提交的地址" method = "提交数据的方法--get(地址栏会显示数据，数据有上限-20M左右)/post(地址栏不显示数据，数据无上限)" enctype = "传递数据的方式--一般默认以流的方式|||" >
账号：<input type = "text文本" name = "传递数据的名字" value = "固定默认值数据" placeholder = "输入框的提示语" value和placeholder只能使用一个 /><br/>
密码：<input type = "password密码" name = "password" placeholder = ""/> <br/>
单选框：
性别： <input type = "radio" name = "" value = "man"/>男
<input type = "radio" name = "" value = "women"/>女<br/>
多选框：
爱好： <input type = "checkbox" name = "" value = "basketball"/>篮球
<input type = "checkbox" name = "" value = "basketball"/>篮球
<input type = "checkbox" name = "" value = "basketball"/>篮球
<input type = "checkbox" name = "" value = "basketball"/>篮球
<input type = "checkbox" name = "" value = "basketball"/>篮球<br/>
下拉列表：
城市：<select>
<option value = "0"> 成都 </option>
<option value = "1"> 广元 </option>
<option value = "2" selected = "selected" 将乐山设为默认值> 乐山 </option>
<option value = "3"> 巴中 </option><br/>
</select>
文件上传：
请选择文件： <input type = "file" name = "file" /><br/>
备注： textarea(文档框)
cols
rows
<textarea name = "" cols = "" rows = "" >
</textarea>
数字框：<input type = "number(只能填入数字) ">
max：能填入的最大值
min：能填入的最小值
日期：<input type = "datetime-local" name >
datetime-local
提交：
<input type = "submit" value="提交">
重置：
<input type = "reset" value="重置">
默认图片是提交：
<input type = "image" src = "图片地址">
</form>
frame:
<frameeset cols 横向分隔= "30%,70%" frameborder = "0">
<frame src = "../day05_html/表单.html" name= "f1"/>
<frameeset rows纵向分隔 = "">
<frame src = "../day05_html/表格.html" name = "f2"/>
<frame src = "../day05_html/列表.html"/>
</frameeset>
</frameeset>
布局：没有特殊功能，功能是：指定一块区域
div:和任何其他标签写一起都会自动换行
span:和其他元素写在一起会在同一行显示
行内元素：标签写在一起在页面上会显示在一行内
块级元素：标签独自占一行不会和其他标签在页面上显示在一行内
--CSS：层叠样式表，美化HTML页面
引入HTML的方式：
a:在所有的HTML标签中有个style属性，通过该属性设置样式
<div style = "border:2px solid blank"> </div>
b:在head中有一个style标签，在style中写css代码设置
<head>
<style>
div{
border:4px solid blue
}
</style>
</head>
c:写一个CSS文件，在文件中设置样式，在HTML中通过link引入CSS文件实现使用
<head>
<link href="CSS文件地址">
</head>
就近原则：离得越近优先级越高
语法：选择器{样式名1：值；样式名2：值}
选择器：确定样式作用于哪个标签
标签选择器：用标签名作为选择器（如果有相同标签名，则全部应用）
ID选择器：使用标签的ID作为选择器（#ID名{样式值}），不重复
类选择器：使用标签中的class作为选择器（.类名{样式值}）
使用较少--属性选择器：[属性名=属性值]{样式值}
并行选择器：多个选择器中用','隔开 （#ID名,span,.类名{样式值}）
子选择器：包含的关系，多个选择器用空格隔开
div .类名{样式值}
div #ID名{样式值}
伪类选择器： 选择器：伪类的值
伪类一般有四个值，一般用在<a></a>标签上
a:link{}-----链接没有被访问过的样式
a:active{}---鼠标点击一下不松开时的样式（选定的链接）
a:hover{}----鼠标放在链接上面的样式
a:visited{}--已被访问过链接的样式
注意：选择器优先级 --> ID，类，标签..
常用样式：
字体：
大小
颜色
样式
宽度
高度
背景（颜色，图片）
居中
盒子模型：所有的标签都当作一个盒子来处理
外间距 ：如果两个相邻的标签都有外间距，两个标签的距离默认采用两个外间距中较大的那一个
margin：（顺时针）
内间距
padding：上 右 下 左 （顺时针）
边框宽度
border
浮动：将一个标签从文档流中浮起来，不再按照文档流的顺序排列
float:left/right
clear:both/left/right表示不受浮动的影响
文档流：在一个页面中，所有的标签在同一个文档流中都会按照从上往下的顺序排列
JS：
<!--
javascript:可以直接在浏览器上运行的脚本语言,面向事件的语言
动态页面：
页面特效：
网页游戏：
前端数据校验
html引入JS：
a:标签中的一些属性可以写js代码
<a href="javascript:alert('你点了我')">来点一下</a>
b:在script标签中写Js代码
<script>
alert('第二种方式');
</script>
c:在js文件中写，HTML引入后标签位置在哪里就在哪里执行
<script src = "js文件位置"></script>
-->
//alert('第三种方式')
/**
* JS语法：
* 变量：var来定义（var i = "10" string类型）
* 不用指定类型，保存所有类型数据
* 可以重复使用
* 使用前可以不用赋值
* 可以不用var来定义--> i = 10；
* 不用var代表局部，使用var代表全局变量
* 数据类型：
* number
* string
* boolean
* undefinded:一切默认数据值都是undefined，未定义数据类型
* null：空
* 运算符：
* 基本运算符：= - * /
* 关系运算符：> < = <= >= 等
* == ：表示只判断值
* === ：表示既要判断值也要判断类型（相当于Java中的 == ）
* ！= ：值不相等
* 逻辑运算符 && || ！
* 位运算符
* 分支语句（和Java一样）：
* if(){}
* if(){} else if(){}
* switch(){ case:break;default:break;}等
* 循环语句（和Java一样）：
* for(var i = 0;i<10;i++)
* while(){}
* do{}while()
* 数组：
* 大小可变;类型可变，可存放任意类型数据;可跳着赋值;
* b = new Array(3)//表示该数组长度为3，并不是值为3
* 赋值的方式：
* arr[5] = new Array(1,2,3,4,'aaa');
* arr[5] = [1,2,'a']
* 函数:没有重载的概念
* function定义方法：
* function add(a,b){
* return a+b
* }
* var a = add(1,'aaa')
* alert(a)
* 事件：用户的一个操作动作就是一个事件（比如点击事件、输入事件），通过标签的属性设置
* 点击事件：
* onclick:单击事件 : <button οnclick="alert('你点了我一下')"></button>
* ondblclick:双击事件：
* 键盘事件：
* onkeyup：键弹起的监听
* onkeydown：键按下的监听
* onkeypress:有输入事件的监听
* 焦点事件（光标的事件）：可监听输入是否完成--输入一个验证一下
* onfocus:获取焦点
* onblur:失去焦点
* 加载完成事件：
* onload:加载完成后 onload = "alert('加载完成')"
*
* 表单事件：
* 提交:
* onsubmit = "return false提交不了/true能提交"
* 或者：
* onsubmit = "return check()"
* function check(){
}
* 重置:onreset
*
* 下拉列表的一个事件
* <select οnchange="this.value()">
* <option value="1">1</option>
* <option value="1">1</option>
* <option value="1">1</option>
*
* 鼠标事件：
* onmouseup 鼠标松开
* onmousedown 鼠标点住
* onmousemove 鼠标移动
* onmouseover 鼠标进去
* onmouseout 鼠标出来
*
*
*
* 在控制台输出：hello js
* console.log("hello js")
*
*/
// i = 10;
// var b = "10"
// alert(i==b)
var arr = new Array();
arr[0] = 1
arr[2] = "aa"
arr[1] = true
arr[5] = new Array(1,2,3,4,'aaa');
arr[6] = [1,2,'a']
alert(arr[3])
function add(a,b,c){
var arr = arguments
for(var i = 0;i<2;i++){
alert(arr[i])
}
}
var a = add(3,5)
b = new Array(3)//表示该数组长度为3，并不是值为3
扫一扫
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
