【石家庄校区】总结第三波
什么是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() 解析一个字符串并返回一个整数
|