|
[石家庄校区]技术笔记
HTML的概述:
Hyper Test Markup Language -----超文本语言
标记语言:
通过一组标签的形式描述事物的一门语言
超文本:
比普通的文本更强大,
HTML的作用:
HTML是用来制作页面(静态页面)
HTML在那些地方使用:
再设计网站的页面的时候都要用到HTML
HTML的文件创建
一个ＨＴＭＬ文件，扩展名是．ｈｔｍｌ或．ｈｔｍ
HTML的结构标签
跟标签:<html></html>
头标签 <head>---html的头标签
尾标签 <body>------html的体标签
<font>标签的属性:
属性:
color属性:字体颜色
英文单词设置:black,red,green,blue...
使用16进制数设置:#FFFFFF,#FFF
换行<br/>
size的值只能是1-7;
face字体
HTML的排版标签:
标题标签
<h1>一级标题</h1>
段落标签:P标签
<p>内容</p>
字体粗体标签:b标签
<b>内容</b>
斜体标签:i
下划线:u
center:居中标签
标签的嵌套
横的分割线hr
 wi:空格/\
pre:显示原来的样子
HTML的图片标签:
图片标签:<img>
格式<img src="图片"
属性:
src:图片的来源
width:图片的宽度
height:图片的高度
alt:图片找不到显示的内容
图片引入的路径问题:
如果引入的图片和html文件在同一级路径
直接写文件名或者./文件名
直接写文件名或者
../退一级
HTML的列表标签
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
超链接标签
<a></a>
属性:
href:链接的路径
target:打开的方式
_self:在自身页面打开
_blank:新打开一个窗口
_parent
无序列表的属性:type属性
有序列表的属性:type属性
start属性:从哪开始(只针对数字有效)
HTML的表格标签
<table>
<tr>(行)
<td></td>(列)
</tr>
</table>
属性:
width:表格宽度
Heigeht:表格高度
Border:边框
Align:表格水平位置
<td>的属性
colspan="列数"
rowspan="行数"
align="center"居中
HTML的表单标签<fom>
HTML中元素:
<input type="text":文本框(name=username必须有)size:文本框的长度
maxlength:文本框输入的最大长度 img
<input type="password>密码框
<input type="radio:单选按钮 checked:单选按钮默认
<input type = "checkbox>:复选按钮
<input type="button>:普通按钮,没有任何功能的按钮
<input type="submit>提交按钮
<input type="reset:重置按钮
<input type=file>:文件上传的表单项
<input type="hidden>:隐藏字段
<input type="image>图片按钮
<select> :下拉列表 se
<option></option>
<textarea>:文本域 cols rows
<form>属性
action:提交的路径,默认提交到当前页面
method:请求的方式,get和post默认是get
get和post的区别:
Get:数据会显示到地址栏中get方式提交有大小的限制
post:数据不会显示到地址栏中没有大小限制
扩展表单标签
<input type="email>
<input type="date>
<input type="nuber>
<input type="color>
HTML的块标签
<div></div>:默认一个div独占一行
<span></span>:默认在同一行
css的引入方式
行内样式:直接在HTML的元素上使用style属性设置CSS
页面内样式:在html的<head>标签中使用<style>标签设置Css
选择器{属性:属性值;属性:属性值......}
外部样式:
<link href=" type="text/css>
框架标签<frameset>标签与ubody标签是冲突,有frameset就可以没有body
属性:
rows(横)
cols(竖)
使用<frame>标签,frame代表切分的每个部分
src:引入界面
css的基本语法:
任何标签都能用style属性
css选择器:(
元素选择器
ID选择器(一般js经常使用)
#ID号
类选择器:(一般css的设置经常用到这个属性)
.任意名{class="任意名"}
属性选择器:
inputt[type="text"]
后代选择器
DIV 空格 名称
子元素选择器
div>span找这个div中的第一层的|span元素
并列选择器
inputt[type="text"],inputt[type=""]
background:背景颜色
css浮动:
float:DIV浮动:
left:向左浮动
right:向右浮动
clear:both:清除
margin:0 auto
边框:border
外边距:margin
内编剧:padding
position属性设置定位:
relative:相对定位
absolute:绝对定位
两个属性:left,top
a:hover:变颜色
visibility和di
js的基本语法:
区分大小写
弱变量类型语言:
var i = 3;
分号可有可无
数据类型:
原始类型:
undefned:未定义
boolean:布尔
number:数字类型
String :字符串
null:空
引用类型:
对象类型.对象类型默认值是null
[js的运算符]
js中有一个 ===全等于.全等于是类型和值都一直的情况下才为true
[js的语句]:
js中的语句与java的语句一致!
[js的通常开发的步骤]
js通常都由一个事件触发|:
触发一个函数,定义一个函数
获得操作对象的控制权
修改操作的对象属性或值
定义函数:
function 函数名称(){
//函数体
}
window.onload=function(){
}
常用事件:onclick,ondblclick,onmouseover,
[js的引入方式]
通常两种方式:
一种:页面内直径编写js代码,js代码需要使用<script></script>
两种:
onsubmit="return checkForm():触发事件
function checkForm(){
获得文本值框的值:
var username = document.getRlementByid("username).value;
if( username=="){
alert(对不起用户名不能为空)
return false;}
js校验正则标的式就有两个方法:String对象中的match方法
HTML的window对象
setInterval("|change(),5000):每隔多少毫秒执行某个表达式
setTimeout():各多少毫秒执行一次表达式
onload:触发事件
innerHTML:插入文字
cearInterval():清除定时
display
block:显示元素
none:隐藏元素
confirm:弹出一个确认窗口
prompt:弹出一个可输入的文本框
js的输出
document.getElementByld().innerHTML=HTML的代码
document.weite()
jS的事件
onfocus:获得焦点
onblur:失去焦点*-
onsubmit:提交的时候
onchange:下拉列表改变事件
ondblclick:双击某个元素事件
使用js获得控制的表格元素:
var tabl = document.getElementByid()
var len = tabl.rows.length;
什么是DOM\
DOM:Document Object Model:文档对象模型
将一个htm的文档加载到内存形成一个树形结构.从而操作出行结构就可以改变htm的样子
dom的使用
知道docnumet,element,attribute中的属性和方法
Document的常用的操作
获得元素
docnumet,.getElementByid():通过id获得元素
创建元素
docnumet.createElement():创建元素
docnumet.createTextNode():创建文本
添加节点
element.appendChild():在最后添加一个节点
element.insertBefore():在某个元素之前插入
删除节点
element.remo
创建属性
docnumet.createAttribute
|
|
收藏
淘帖
踩
