Loading... # 黑马视频 (7/9) ------- ## HTML + CSS ------- ### day01 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="http://www.baihe.com" target="_blank">xxx</a> * 锚点链接 * 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 : 按行划分 ```html Ctrl + D 删除光标当前所在的行 Ctrl + Shift + R 复制当前行到下一行 Ctrl + Enter 将光标移动到下一行 Ctrl + Shift + Enter 将光标定位在上一行 Ctrl + Shift + / 注释当前行 Ctrl + R 运行当前网页/刷新当前网页 ``` -------------- ### day02 CSS + JS * HTML 的块标签: * div 标签: 默认占一行,自动换行 * span 标签: 内容显示在同一行 * CSS概述: * Cascading Style Sheets : 层叠样式表 * 红砖, 抹了一层水泥, 白灰 * 主要用作用: * 用来美化我们的HTML页面的 * HTML 决定网页的骨架 ,CSS 化妆 * 将页面的HTML和美化进行分离 * div ,division ,分隔,区域 * CSS 的简单语法: 在一个 style 标签中 , 去编写 CSS 内容 , 最好将 style 标签写在这个 head 标签中. ```html <style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style> ``` * 元素选择: ```html 元素的名称{ 属性名称:属性的值; 属性名称:属性的值; } ``` * ID选择器: ```html 以#号开头 ID 在整个页面中必须是唯一的s #ID的名称{ 属性名称:属性的值; 属性名称:属性的值; } ``` * 类选择器: ```html 以 . 开头 .类的名称{ 属性名称:属性的值; 属性名称:属性的值; } ``` * 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 { 属性的名称 : 属性的值 } - 属性选择器: ```htmlbars a[title] a[titile='aaa'] a[href][title] a[href][title='aaa'] ``` - 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代 - 子元素选择器: 父选择器 > 儿子选择器 - 伪类选择器: 通常都是用在 A 标签上 ,超链接 ------------- * CSS的盒子模型: 万物皆盒子 顺时针 : 上右下左 * 内边距: Pandding * padding-top: * padding-right: * padding-bottom: * padding-left: ```html 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: 控制距离左边的位置 * ---- * 什么是javascript : JavaScript一种直译式脚本语言, * 什么是脚本语言? * java源代码 ----> 编译成 .class 文件 -----> java 虚拟机中才能执行(JVM) * 脚本语言: 源码 -------- > 解释执行 * js由我们的浏览器来解释执行 * 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 声明函数: ```javascript var 函数的名称 = function(){ } function 函数的名称(){ } ``` ------------ ### day03 JS * JS 开发的步骤: 1. 确定事件 2. 事件要触发函数,所以我们是要声明函数 3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西 * 定时器 - setInterval : 每隔多少毫秒执行一次函数 - setTimeout: 多少毫秒之后执行一次函数,就不再执行了 - clearInterval - clearTimeout - 显示广告 img.style.display = "block" (块) - 隐藏广告 img.style.display = "none" (空) - 切换图片完成步骤 * 确定事件: 页面加载完成的事件 onload * 事件要触发函数: init() * init函数里面做一件事: * 启动一个定时器 : setTimeout() * 显示一个广告 * 再去开启一个定时5秒钟之后,关闭广告 * 【JS中的常用事件】 * onfocus 事件: 获得焦点事件 * onblur : 失去焦点 * onkeyup : 按键抬起事件 * 引入一个外部js文件 ```html <script src="js文件的路径" type="text/javascript"/> ``` * 隔行换色 ```html <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> ``` * 复选框的全选和全不选 ```html /* 全选和全不选步骤分析: 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 一些常用的 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 练习: ```javascript function clickme(){ var div = document.getElementById("div"); var p = document.createElement("p") ; //<p></p> var textNode = document.createTextNode("文本内容"); p.appendChild(textNode); div.appendChild(p); } ``` * 我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品 ```html <!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> ``` 最后修改:2018 年 07 月 24 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 哇卡哇卡