目录
一、HTML
- HTML : Hyper Text Markup Language 超文本标记语言
- 超文本 : 比普通文本功能更加强大,可以添加各种样式
- 标记语言 : 通过一组标签.来对内容进行描述. < 关键字 > , 是由浏览器来解释执行
- 虽然是一门弱语言，但是只能是用定义好的标签，
- 常见标签含义：
-
B: 加粗
-
I : 斜体
-
strong: 加粗, 带语义标签，比如阅读，会加重语气，建议使用带语义的标签
-
em: 斜体, 带语义，
-
s : 加删除线
-
ins：加下划线
-
br ：换行
-
hr ： 水平线
-
font : 字体
- color 颜色
- size 改变字体大小
- face：字体形态
-
img 插入图片
-
src 指定图片路径
- ../ 表示上一级路径
- ./ 表示当前路径
- ../../ 表示上上一级
- alt 图片加载失败时的提示内容
- width: 指定图片宽度
- height 指定图片高度
-
-
border 边框
- solid 单实线
- dashed 虚实线
- dotted 点线
- double 双实线
-
无序列表: ul
- 元素用 li ，列表项
- type 属性，设置前面点 ：小圆圈,小圆点, 小方块
-
有序列表: ol
-
- type : 1 , a , A , I ,
- start : 指定是起始索引，必须是数字
- reversed ： 是否进行反向排序
-
dl 对术语进行解释
- dd 内部标签项
- 没有任何项目符号
- header 元素，用来导航和引导的结构元素，标题。
- nav 导航链接
- article 代表文档页面或者程序中与上下文不相关的独立部分。
- aside 当前页面或者文章的副属信息，包含侧边栏，广告等
- section 对网站的内容进行分块
- footer ， 页面底部
- details 和 summary ，隐藏属性
- progress ，任务进度
- draggable 是否可以被拖动，
-
a 超链接标签
-
常用的属性:
* href: 指定要跳转去的链接地址 ，如果是网络地址需要加上http协议 , 如果访问的是本网站的html文件,可以直接写文件路径 -
target : 以什么方式打开
- _self: 默认打开方式,在当前窗口打开
- _blank: 新起一个标签页打开页面
- 百度一下
-
-
锚点链接
- a href = ' # id ' > 链接文本 /a
-
table 标签
- border: 指定边框
- width : 宽度，填充设置成 100% 即可，
- height : 高度
- bgcolor : 背景颜色
- align : 对齐方式
- tr标签
-
td标签 ， 可以操作列合并或者行合并，但是合并要占用单元格，需要把被占用的单元格删除，不然会溢出
- colspan : 跨列操作，合并
- rowspan : 跨行操作，合并
- 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉
- 表格单元格的合并
- 表格的嵌套，在一个表格中新增其他表格
-
表单标签
- action : 直接提交的地址
-
method :
- get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 , 4k
- post 方式 会将参数封装在请求体中, 没有这样的限制
-
input :
- type : 指定输入项的类型
- text : 文本
- password : 密码框
- radio : 单选按钮
- checkbox : 复选框
- file : 上传文件
- submit : 提交按钮
- button : 普通按钮
- reset : 重置按钮
- hidden : 隐藏域
- date : 日期类型
- tel : 手机号
- number : 只允许输入数字
- placeholder : 指定默认的提示信息
- required 规定输入框内容不为空。否则不允许提交表单
- name : 在表单提交的时候,当作参数的名称
- id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
-
textarea : 文本域, 可以输入一段文本
- cols : 指定宽度
- rows : 指定的是高度
-
select : 下拉列表
- option : 选择项
-
frameset 框架标签，使用需要将 body 去除
- clos : 按列划分
- rows : 按行划分
Ctrl + D 删除光标当前所在的行
Ctrl + Shift + R 复制当前行到下一行
Ctrl + Enter 将光标移动到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注释当前行
Ctrl + R 运行当前网页/刷新当前网页
二、CSS
-
HTML 的块标签:
- div 标签: 默认占一行，自动换行
- span 标签: 内容显示在同一行
-
CSS概述:
- Cascading Style Sheets : 层叠样式表
- 红砖, 抹了一层水泥, 白灰
-
主要用作用:
- 用来美化我们的HTML页面的
- HTML 决定网页的骨架 ,CSS 化妆
- 将页面的HTML和美化进行分离
- div ，division ，分隔，区域
- CSS 的简单语法: 在一个 style 标签中 , 去编写 CSS 内容 , 最好将 style 标签写在这个 head 标签中.
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>- 元素选择:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}- ID选择器:
以#号开头 ID 在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}- 类选择器:
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}-
CSS 的引入方式:
- 外部样式 : 通过 link 标签引入一个外部的 css 文件
- 内部样式: 直接在style标签内编写 CSS 代码
- 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
-
CSS 浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间，下面的元素会占用上面浮动元素的空间，设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程，
-
float属性:
- left
- right
-
clear属性: 清除浮动
- both : 两边都不允许浮动，同时清除两边的浮动
- left: 左边不允许浮动
- right : 右边不允许浮动
-
-
overflow : hidden ，清除子元素浮动对父元素的影响。
- 流式布局
-
CSS的优先级 :
- 标记选择器权重1，类选择器权重10，id 选择器权重100，
- 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
- 就近原则: 哪个离得近,就选用哪个的样式 。
-
CSS中的其它选择器
- 选择器分组 : 选择器1 , 选择器2 { 属性的名称 : 属性的值 }
- 属性选择器:
a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']- 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
- 子元素选择器: 父选择器 > 儿子选择器
- 伪类选择器: 通常都是用在 A 标签上 ，超链接
-
CSS的盒子模型: 万物皆盒子 顺时针 : 上右下左
-
内边距: Pandding
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
-
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向-
外边距: Margin
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
-
CSS 绝对定位: 依据最近已经定位的父元素进行定位，若果所有父元素都没有定位，则根据 body 根元素定位。
- position: absolute
- top: 控制距离顶部的位置
- left: 控制距离左边的位置
三、 JS
- 什么是javascript : JavaScript一种直译式脚本语言，
-
什么是脚本语言?
- java源代码 ----> 编译成 .class 文件 -----> java 虚拟机中才能执行（JVM）
- 脚本语言: 源码 -------- > 解释执行
- js由我们的浏览器来解释执行
-
var 函数的名称 = function(){ } function 函数的名称(){ } - HTML: 决定了页面的框架
- CSS: 用来美化我们的页面
- JS: 提供用户的交互的
-
JS 的组成:
- ECMAScript : 核心部分 ,定义js的语法规范
- DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
- BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
-
JS的语法:
- 变量弱类型: var i = true
- 区分大小写
- 语句结束之后的分号 ,可以有,也可以没有
- 写在script标签
- JS的数据类型:
-
基本类型
- string
- number
- boolean
- undefine
- null
-
引用类型
- 对象, 内置对象
-
类型转换
- js内部自动转换
-
JS的运算符和语句:
-
- 运算符和java 一样
- " ======= " 全等号: 值和类型都必须相等
- == 值相等就可以了
- 语句和java 一样
-
JS 的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log() 向控制台输出
- innerHTML : 向页面输出
- 获取页面元素: document.getElementById( " id的名称 " );
-
JS声明变量:
- var 变量的名称 = 变量的值
- JS 声明函数:
-
JS 开发的步骤:
- 确定事件
- 事件要触发函数,所以我们是要声明函数
- 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
-
定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数，就不再执行了
- clearInterval
- clearTimeout
- 显示广告 img.style.display = "block" （块）
- 隐藏广告 img.style.display = "none" （空）
-
切换图片完成步骤
- 确定事件: 页面加载完成的事件 onload
- 事件要触发函数: init()
-
init函数里面做一件事:
- 启动一个定时器 : setTimeout()
- 显示一个广告
- 再去开启一个定时5秒钟之后,关闭广告
-
【JS中的常用事件】
- onfocus 事件: 获得焦点事件
- onblur : 失去焦点
- onkeyup : 按键抬起事件
- 引入一个外部js文件
<script src="js文件的路径" type="text/javascript"/>- 隔行换色
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>- 复选框的全选和全不选
/* 全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态 */
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}- 什么是DOM: Document Object Model : 管理我们的文档 增删改查规则
- 【HTML中的DOM操作】
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点- DOM 练习:
function clickme(){
var div = document.getElementById("div");
var p = document.createElement("p") ; //<p></p>
var textNode = document.createTextNode("文本内容");
p.appendChild(textNode);
div.appendChild(p);
}- 我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
1768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
