黑马程序员技术交流社区

标题: 【石家庄校区】复习总结 [打印本页]

作者: 李志旭 时间: 2019-6-1 14:50
标题: 【石家庄校区】复习总结
HTML：超文本标记语言
超文本：比普通文本更强大
标记语言：由标签组成的
文本标签：
文字标签：<font>
属性：color-颜色 size-大小(1~7) face-字体

标题标签：<h1> ~ <h6>
加粗标签：<b>
斜体标签：<i>
下划线标签：<u>
居中标签：<center>

图片标签：<img>
属性：src-图片路径 width-宽度 height-高度  alt-图片找不到显示内容

列表标签：
有序列表：<ol>
属性：type-(数字、字母、罗马字符) start-起始编号
列表项：<li>

无序列表：<ul>
属性：type-(实心圆、空心圆、实心框)

超链接标签：<a>
属性：href-跳转路径 target-打开方式(_self _blank)

块标签：
<span>：元素在一行显示
<div>：元素独占一行

表格标签：<table>
属性：border-边框 width-宽度 height-高度 align-显示位置(left居左  center居中 right居右)  bgcolor-背景颜色 background-背景图片
行标签：<tr>
列标签：<td>
属性：
rowspan-合并行
colspan-和并列

其他标签：
换行标签：<br/>
水平线标签：<hr/>
属性：color-颜色 width-宽度  size-高度
空格： 
<:<
>:>

表单标签：<form>
属性：action-提交路径 method-提交方式(get post)
get:提交的数据会显示在地址栏中。不太安全。长度有大小限制。提交的数据封装在请求行中。
post:提交的数据不会显示在地址栏中。较为安全。长度没有大小限制。提交的数据封装在请求体中。

表单项：<input> <select> <textarea>
文本框：<input type="text">
密码框：<input type="password">
邮箱框：<input type="email">
数字框：<input type="number">
颜色框：<input type="color">
文件上传框：<input type="file">
图片提交按钮：<input type="image">
隐藏域：<input type="hidden">
单选框：<input type="radio">
复选框：<input type="checkbox">
提交按钮：<input type="submit">
重置按钮：<input type="reset">
日期框：<input type="date">
普通按钮：<input type="button">

下拉列表：<select>
下拉列表项：<option>

文本域：<textarea>
行数：rows
列数：cols

注意事项：
1.如果表单项想被提交，必须要嵌套在form标签中
2.如果表单项想被提交，必须要有name属性
3.如果是单选或复选，必须要有相同的name属性
4.如果是单选或复选有默认值，使用checked属性
5.如果是下拉列表有默认值，使用selected属性

CSS：层叠样式表。就是给HTML美化用的

CSS和HTML结合方式：
1：行内样式：<标签 style="样式设置">
2：页面内样式：在head标签中，定义一个<style></style>代码块
3：外部文件方式：在head标签中，<link rel="stylesheet" href="css文件路径"/>

CSS选择器：
基础选择器：
id选择器：
#id属性值{
样式控制
属性名:属性值;
...
}
类选择器：
.类名{
样式控制
属性名:属性值;
...
}
元素选择器：
标签名{
样式控制
属性名:属性值;
...
}

扩展选择器：
子元素选择器：
元素1 元素2{
样式控制
属性名:属性值;
...
}
父元素选择器：
元素1 > 元素2{
样式控制
属性名:属性值;
...
}
并集选择器：
元素1,元素2,...{
样式控制
属性名:属性值;
...
}
属性选择器：
标签名[属性名="属性值"]{
样式控制
属性名:属性值;
...
}
伪类选择器：
初始化状态：
元素:link{
样式控制
属性名:属性值;
...
}

鼠标悬浮状态：
元素:hover{
样式控制
属性名:属性值;
...
}

被使用状态：
元素:active{
样式控制
属性名:属性值;
...
}

使用后状态：
元素:visited{
样式控制
属性名:属性值;
...
}
JavaScript:动态效果
和HTML结合方式：
第一种：页面内样式
第二种：引入外部文件
JS核心组成部分：
ECMAScript BOM    DOM

ECMAScript：
数据类型：
原始数据类型：
number：数字类型
string：字符串
boolean：布尔值
null：空对象
undefined：未定义
引用数据类型：对象
基本对象：
Function 方法对象
Array
Math
Date
定义变量/对象格式：var 变量/对象名 = 变量值/对象;

BOM:浏览器对象模型
浏览器对象：navigate
屏幕对象：screen
窗口对象：window
方法：
alert()
confirm()
propmt()

open()
close()

setTimeOut(参数1,参数2) 参数1：js代码  参数2：毫秒值
clearTimeOut()

setInterval(参数1,参数2) 参数1：js代码  参数2：毫秒值
clearInterval()
地址栏对象：location
方法：
刷新页面：reload()
属性：
跳转url地址：href
历史记录对象：history
方法：
forward() 前进
back()    后退
go()       前进或后退
属性：
获取历史记录页面的个数：length

DOM:文档对象模型
Document：
获取方法：
通过id来获取指定元素对象：getElementById()
通过class属性来获取元素对象：getElementsByClassName()
通过name属性来获取元素对象：getElementsByName()
通过元素名来获取元素对象：getElementsByTagName()
创建方法：
创建元素：createElement()
创建属性：createAttribute()
创建文本：createTextNode()
Element：
设置属性：setAttribute(属性名,属性值);
删除属性：removeAttribute(属性名);

Node：
添加元素：appendChild()
删除元素：removeChild()
获取父级元素对象：parentNode;

事件：
         1. 点击事件：
            1. onclick：单击事件
            2. ondblclick：双击事件
         2. 焦点事件
            1. onblur：失去焦点。
                  * 一般用于表单验证
            2. onfocus:元素获得焦点。

         3. 加载事件：
            1. onload：一张页面或一幅图像完成加载。

         4. 鼠标事件：
            1. onmousedown 鼠标按钮被按下。
                  * 定义方法时，定义一个形参，接受event对象。
                  * event对象的button属性可以获取鼠标按钮键被点击了。
            2. onmouseup 鼠标按键被松开。
            3. onmousemove 鼠标被移动。
            4. onmouseover 鼠标移到某元素之上。
            5. onmouseout 鼠标从某元素移开。

         5. 键盘事件：
            1. onkeydown 某个键盘按键被按下。
            2. onkeyup 某个键盘按键被松开。
            3. onkeypress 某个键盘按键被按下并松开。

         6. 选择和改变
            1. onchange 文本的内容被改变。
            2. onselect 文本被选中。

         7. 表单事件：
            1. onsubmit 确认按钮被点击。
                  * 可以阻止表单的提交
                     * 方法返回false则表单被阻止提交。
            2. onreset 重置按钮被点击。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2