|
【石家庄校区】总结第三波
什么是HTML
怎么学好HTML： 学会预定好的标签
HTML：Hyper Text MArkup Language ----超文本标记语言。
标记语言：指的是通过一组标签的形式描述事物的一门语言。
超文本：比普通的文本更强大。
HTLM：的作用
HTML是用来制作页面（静态页面）。
HTML的使用
HTML文件的创建
一个HTML文件，扩展名是.html或者.htm结尾
HTML的结构标签
<html></html>---跟标签：
<head></head>---头标签
<结构标签<title></title>
<body></body>---体标签
<font></font>--字体标签
font的属性
color 颜色
英文单词设置:black,ren,green,blue..
使用16进制数设置:#FFFFFF
size 字体大小 1~7
face 字体
HTML的排版标签
标题标签：h标签<h1>...<h6>
段落标签：p
粗体标签：b
斜体标签：i
下划线 ：u
居中显示：center
换行 br
分割线 hr
原声标签 pre
HTML的图片标签<img>
属性
图片的来源：src
图片的宽度：width
图片的高度：height
找不到图片显示的内容： alt
图片的引入到的路径问题
路径：相对路径
如果引入的图片和html文件在同一级路径，
直接写文件名或者./文件名
如果在上一级就要写../文件名
HTML的列表表签
有序列表
<ol>
<li></li>
</ol>
有 type属性
strat属性 表示从哪里开始，只针对数字有效
无序列表
<ul>
<li></li>
</ul>
有type属性
display：
inline:显示在一行
HTML的超链接标签<a>
属性：
href：连接的路径
target：打开的方式
_sekf:在自身打开
_blank:在新窗口打开
_parent：多个窗口占用整个界面
HTML的表格标签
<table>-------表格
<tr>------行
<td>--列
</td>
</tr>
</table>
属性：
Width : 表格宽度
Height：表格高度
Border：表格边框
Align ：表格的位置
bgcolor：背景颜色
backgroud:背景图片
<td>的属性：
colspan:列合并数
rowpan：行合并数
HTML的表单标签<form>
属性：
action：提交路径，默认提交当前页面
method：提交方式，get和post
区别：
get 数据会显示到地址栏 提交有大小限制
post 数据不会显示到地址栏
表单元素：
<input type="下面">
test： 文本输入框
password: 密码输入框
属性：
name 表单元素的名称，必须有name属性，然后后台才能接收
value：文本框默认值
size：文本框的显示长度
maxlength：文本框输入的最大长度
readonly：只读文本
radio： 单选按钮
checkbox： 复选按钮
属性：
name:表单元素的名称.必须有name属性，然后后台才可以接收数据
value：单选按钮默认值
checked：单选按钮默认被选中
button： 普通按钮，没有任何功能
submit： 提交按钮
reset： 重置按钮
file： 文件上传的表单项
hidden： 隐藏字段
image: 图片按钮
HTML5扩展表单标签:
email： 检测是否为邮箱模式
date： 小日历
number： 检测是否为数字
color： 输入颜色
<select>: 下拉列表
属性：
option：添加选项
value： 选项的值
selected：默认选中
<textarea>: 文本域
属性：
cols：列数
rows：行数
HTML框架标签<frameset>与body标签冲突 二选一
属性：
rows：横切
clos：竖切
使用<frame>标签，frame代表切分的每个部分
特殊字符的标签
空格 &n
DIV
CSS：多层样式表
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
HTML相当于网站的骨架！CSS对股价进行美化！
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
常用属性：
color：颜色
border：边框
solid 实线
float:浮动
left：向左浮动
right：向右浮动
none：
clear:清除浮动
margin: 0 auto; 设置边距 auto 系统设置
line-height: 60px; 行高默认字体有多高就是多高，默认从左上角开始书写，如果把行高设置成和行高一样的话，字体就从行高中间开始写
盒子模型：
padding:内边距---》设置内容距离自己边框的边距
margin：外边距---》用来设定该元素举例其他元素的距离
【CSS的定位】
position属性设置定位：
relative：相对定位
absolute：绝对定位
使用另外两个属性：left，top
如何让子控件居中
相对父空间50% margin减去子控件大小的一半
cellspacing： 表格上下间距
【CSS的选择器】
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器: 给标签添加id属性 id不重复，js经常用
#d1{
border:2px solid red;
}
类选择器：给表签添加class属性 可以重复，css经常用
.divClass{
border:2px solid yellow;
}
属性选择器：
input[type="text"]{各种属性}
后代选择器：
div span查找的是所有div中的所有的span
子元素选择器
div span 只能查找第一层的span
并列选择器
input[type="text"],input[type="password"]{各种属性}
【伪类】
text-decoration：超链接的样式
link :未访问
visited :访问过之后
hover :鼠标放在上面
active :鼠标点击但不放开的时候
visibility和display的区别
visibility: 前者消失了,但是位置还占着
display: 后者也消失了,位置也没有占着了
JavaScript：
JS的用途：
使页面更加丰富，使页面动起来
JS基本语法
区分大小写
var+名+内容
数据类型：
原始类型：
undefind： 未定义类型
boolean： 布尔类型
number： 数字类型
string： 字符或字符串
null： 空
引用类型：
对象类型，对象类型的默认值是null
JS运算符
与JAVA基本一样
=== 全等于，判断类型和值
JS的通常开发的步骤
JS通常都由一个事件触发
触发一个函数，定义一个函数
获得操作对象的控制权t
修改要操作的对象的属性或值
定义函数：
function函数名称（）{
//函数体
}
window.onioad=function(){
}
JS的引入方式
两种
1.页面内直接编写JS代码，JS代码需要使用<script></script>
2.创建一个.js的文件使用<script src="ad.js"></script>
常用方法：
document: 获得操作对象的控制权
alert; 弹窗
match （“正则表达式”）：校验正则表达式
zhengze.text（）： 校验正则表达式
document.getElementById("username").value：获取值
document.getElementById("username").innerHTML=xxx：插入数据
BOM对象
Window
alert()：弹出对话框
setInterval():每隔多少毫秒去执行某个表达式
setTimeout():隔多久执行一次表达式
clearInterval()：清除定时
cleartimeout(): 清除定时
confirm(): 弹出一个确认窗口
prompt()： 弹出一个可输入的对话框
open()： 打开一个新的窗口
Navigator
Screen
History
【JS的输出】
document.getElementById(“”).innerHTML="HTML的代码";
document.write("");
【JS的事件】
onfocus: 获得焦点
onblur: 失去焦点
onsubmit： 提交的时候
onclick： 单击
ondblclick：双击
onsubmit:提交按钮被点击
根据checkFrom返回值来判断是否提交
onmouserover
onmouseout
onload: 某个页面或图像完全加载后触发
onchange:下拉列表改变事件
键盘事件
onkeydown
onkeyup
onkeypress
鼠标操作事件
onmousemover
onmouseout
onmouseover
【JS中的DOM对象】
DOM：Document Object Model:文档对象模型
将一个HTML的文档加载到内存形成一个树形结构，从而操作树形结构就可以改变HTML的样子
DOM的使用
直到document,element,attribute中的属性和方法
Document的常用方法
获得元素：
document.getElementById()： 通过ID获取元素
document.getElementsByName()： 通过name属性获得元素
document.getElementsByTagName()： 通过标签获得元素
创建元素：
document.createElement()：创建元素
document.createTextNode(): 创建文本
添加节点：
element.appendChild():在最后添加一个节点
element.insertBefore():在某个元素之前插入
删除节点
element.removeChild():删除元素
【JS Functions】
解码：
decodeURL();
decodeYRIComponent();
编码：
encodeURL();
encodeURIComponent();
eval函数：
将一段内容当成是JS的代码执行
var sss="alert(aaaa)"
parseFloat()解析一个字符串返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
| 
收藏
淘帖
踩
