黑马程序员技术交流社区
标题: 【石家庄校区】Web知识点总结 [打印本页]
作者: TISHIHANG 时间: 2018-1-17 15:56
标题: 【石家庄校区】Web知识点总结
本帖最后由 小石姐姐 于 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);
}
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |