本帖最后由 小石姐姐 于 2018-1-18 14:52 编辑
Web知识点总结
第一天 HTML [HTML] : 超文本标记语言 标签 属性 标记语言:通过一组标签的形式描述事件的一门语言; 超文本:比普通文本更强大. HTML作用:用来制作页面(静态页面) 用途:在设计网站页面的时候 HTML的结构标签 * 跟标签:<html></html> * <head> -- html的头标签 * <body> -- html的体标签 【HTML的字体标签】 <font>标签:HTML中的字体标签. 使用：<font>文字</font> * <font>标签的属性: * <标签 属性名=”属性值” 属性名=”属性值”></标签> * 属性: * color属性:字体颜色 * 英文单词设置:black,red,green,blue... * 使用16进制数设置:#FFFFFF , #FFF * size属性:字体的大小 * face属性:字体 * 基本使用： <font>我是HTML!</font> <br/> <font color="red">我是HTML！</font><br/> <font color="#FF0000" size="1">我是小红！</font><br/> <font color="#00FF00" size="7">我是小绿！</font><br/> <font color="#0000FF" size="100">我是小蓝！</font><br/> 【HTML的排版标签】 标题标签：h标签<h1>...<h6> <!-- HTML的标题标签 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> 段落标签：p标签 【HTML的图片标签】 【步骤一】创建一个html的文档 【步骤二】引入两张图片显示到页面 代码实现： <img src="logo2.png" height="50" width="200"/> <img src="header.png" height="50" width="250"/> 【HTML的表格标签】 【步骤一】创建一个html的页面 【步骤二】创建一个8行1列的表格 【步骤三】为每行内容填充数据. 【HTML的表单标签（*****）】 HTML的表单标签：<form> * 常用属性: * action属性:提交的路径.默认提交到当前页面 * method属性:请求的方式.GET和POST.默认是GET. ***** GET方式和POST方式的区别? * GET :数据会显示到地址栏中.GET方式提交是有大小的限制. * POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制. HTML中表单元素： * <input type=”text”> :文本框. * 常用属性: * name :表单元素的名称.必须有name属性，然后后台才可以接收数据. * value :文本框的默认值. * size :文本框的长度. * maxlength:文本框输入的最大长度. * readonly:只读文本框. * <input type=”password”> :密码框. * 常用属性: * name :表单元素的名称.必须有name属性，然后后台才可以接收数据. * value :密码框的默认值. * size :密码框的长度. * maxlength:密码框输入的最大长度. * <input type=”radio”> :单选按钮. * 常用的属性: * name :表单元素的名称.必须有name属性，然后后台才可以接收数据. * value :单选按钮的默认值. * checked:单选按钮默认被选中. * <input type=”checkbox”> :复选按钮. * 常用的属性: * name :表单元素的名称.必须有name属性，然后后台才可以接收数据. * value :单选按钮的默认值. * checked:单选按钮默认被选中. * <input type=”button”>:普通按钮.没有任何功能的按钮. * <input type=”submit”> :提交按钮. * <input type=”reset”> :重置按钮. * <input type=”file”> :文件上传的表单项. * <input type=”hidden”> :隐藏字段. * <input type=”image”> :图片按钮 * <select> :下拉列表. * <textarea> :文本域. 第二天 Div+ 第二天 div+css <div></div> :默认一个div独占一行. <span></span> :默认在同一行. 【CSS的选择器】 元素选择器： div{ border:1px solid blue; width:40px; height:45px; } ID选择器: #d1{ border:2px solid red; } 类选择器： .divClass{ border:2px solid yellow; } 【CSS的其他选择器】 属性选择器： 后代选择器: 子元素选择器： 并列选择器: 【CSS中的定位】 position属性设置定位： * relative:相对定位 * absolute:绝对定位 使用另外两个属性:left,top 第三天 JavaScript 【HTML的块标签】 <div></div> :默认一个div独占一行. <span></span> :默认在同一行. 【CSS的基本语法】 CSS的基本语法通常包含两个部分：一个是选择器，一个声明. * 选择器{属性:属性值;属性:属性值...} 【JS的数据类型】 JS将数据类型分成两类： * 原始类型： * undefined：未定义类型 * boolean:布尔类型 * number:数字类型 * string:字符或字符串. * null：空 * 引用类型： * 对象类型.对象类型默认值是null. 【JS的运算符】 JS中的运算符与Java中基本一致！ JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true. 【JS的语句】 JS中的语句与Java的语句一致！ 第四天 JS 【JS的输出】 * document.getElementById(“”).innerHTML=”HTML的代码”; * document.write(“”); 【JS的事件】 * onfocus :获得焦点. * onblur :失去焦点. * onsubmit :提交的时候. 【DOM的概述】 Ø 什么是DOM DOM：Document Object Model：文档对象模型. 将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子. Ø DOM的使用： 知道document，element，attribute中的属性和方法 【DOM的常用的操作】 Ø 获得元素： * document.getElementById(); -- 通过ID获得元素. * document.getElementsByName(); -- 通过name属性获得元素. * document.getElementsByTagName(); -- 通过标签名获得元素. Ø 创建元素： * document.createElement(); -- 创建元素 * document.createTextNode(); -- 创建文本 Ø 添加节点： * element.appendChild(); -- 在最后添加一个节点. * element.insertBefore(); -- 在某个元素之前插入. Ø 删除节点： * element.removeChild(); -- 删除元素 【使用DOM完成对ul中添加一个li元素】 function addElement(){ var city = document.getElementById("city"); // 创建一个元素: var liEl = document.createElement("li"); // 创建一个文本节点: var text = document.createTextNode("深圳"); // 添加子节点: liEl.appendChild(text); city.appendChild(liEl); }
| 
收藏
淘帖
踩
