资源描述
Html5·JS基础
Html5是超文本标记语言，不属于编程语言。
Html5不考虑对IE9及以下版本的支持。
1. html5基础
div布局中设置浮动：float: right;
清除浮动：clear: both;
表格布局中合并2个单元格：colspan="2"
要在网页上显示预留关键字可以直接百度HTML实体。
XHTML的语法和书写格式更加严格规范。
1.1. html基础格式
<!DOCTYPE html> //声明:html各版本的声明方式不同，这里是html5版本
<html lang="en"> //en表示英文，zh表示中文
<head>
<meta charset="UTF-8"> //编码格式
<title>叉叉学院</title>
</head>
<body>
大叉叉家族
hello //这里的两排文字是没有格式的，不会分两排显示,可使用换行符
<h1>大狗狗</h1> //html标题
<h2>大豚豚</h2>
<p>hello dachacha</p> //html段落
hello //这里的两排文字是有格式的，会分两排显示
<a href=" //html链接
<img src="images/image01.jpg"> //html图片
</body>
</html>
换行符：hello dachacha <br/> hello dagou
1.2. html标签属性
1) 通用属性：
class：规定元素的类名
id：规定元素唯一ID
style：规定元素样式
title：规定元素的额外信息
2) 键/值属性：
<a href="href_file.html">打开本地</a>
点击打开本地，进入href_file.html。href="#"表示点击链接后跳转到自身
3) 常用属性：
<h1>:align对齐方式，有right,left,center
<h1 align="right">title</h1>
<body>:bgcolor背景颜色，颜色是十六进制符号来定义的
background背景，如background="image01.jpg"
<a>:target规定在何处打开链接。_blank：在新页面打开（浏览器的新页面）
_self：在当前页面打开（当前框架页面）
_top:在顶级页面打开（相当于浏览器当前页面）
_parent:在父级页面打开（承载当前框架的框架内打开）
<a href="href_file.html" target="_blank">打开本地</a>
1.3. html格式化
<b>定义粗体文本
<del>定义删除字
<em>定义着重字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<b>欢迎来到叉叉学院</b>
1.4. html样式
1) 外部样式表
创建外部样式文件mystyle.css然后在head中引用该样式：
<link rel="stylesheet" type="text/css" href="mystyle.css">
2) 内部样式表
直接将外部样式文件的内容写到head中，p标签装的是需要改变样式的文本
<style type="text/css">
p{
color: aqua;
}
</style>
3) 内联样式表
直接在标签内定义格式
<a style="color: aqua">叉叉学院</a>
1.5. html链接
文本链接：<a href="
图片链接：点击图片进入链接
<a href="
<img src="image01.jpg width="200px" height="200px">
</a>
img中若添加属性alt="chachalogo"则当image01不存在时，会显示alt里面的内容
name标签：在页面内部跳转，点击跳转到，则跳转到hello
<a name="tips">hello</a>
<br><br><br><br><br><br><br><br><br><br>
<a href="#tips">跳转到</a>
1.6. html表格
<table>定义表格
<caption>定义表格标题
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格的单元
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚
<col>定义表格的列属性
<table border="2" cellpadding="9"> //表格边框2，单元格边距9
<caption>大叉叉学院成员表</caption> //标题
<tr> //定义行
<th>组号</th> //定义表头
<th>成员</th>
</tr>
<tr>
<td>001</td> //单元格
<td>
<ul> //定义列表
<li>大叉叉</li> //列表项
<li>大狗狗</li>
</ul>
</td>
</tr>
</table>
单元格图片背景：background="image01.jpg"
单元格颜色背景：bgcolor="aqua"
单元格间距：cellspacing
1.7. html列表
1) 有序列表
<ol>有序列表，即有编号列表。默认数字编号，可设置start编号起始，也可设置A、a、l、i编号
<ol type="A">
<li>大叉叉</li>
</ol>
2) 无序列表
<ul>无序列表，没有编号。默认实心圆disc，可设为空心圆circle或实心方块square
<ul type="circle">
<li>大叉叉</li>
</ul>
<li>列表项
3) 嵌套列表：有序列表和无序列表的嵌套
4) 自定义列表：<dl>自定义列表
<dt>列表项
<dd>对列表项的描述
<dl>
<dt>大狗狗</dt>
<dd>大狗狗是大叉叉的</dd>
</dl>
1.8. html块
1) 块元素
块元素显示时通常以新行开始，如<h1>，<p>，<ul>
<div>组合html元素的容器，通常结合css使用
<div id="hid">
<p>hello,dachacha</p>
<a>hello,dagougou</a>
</div>
Css中指定p标签效果：
#hid p{
color: aqua;
}
2) 内联元素
内联元素通常不会以新行开始，如<b>，<a>，<img>
Span可作为文本的容器，
<div id="hid">
<p><span>hello,hello</span>dachacha</p>
</div>
可以在head中对span更改格式：
<style type="text/css">
span{
color: antiquewhite;
}
</style>
1.9. html表单
1) 表单基础
表单用于获取不同类型的用户输入。
<form>表单
<input>输入域
<textarea>文本域
<lable>控制标签
<fieldset>定义域
<legend>域的标题
<select>选择列表
<optgroup>选项组
<option>下拉列表中的选项
<button>按钮
<form>
用户名：
<input type="text"> //用户名输入
<br/>
密码：
<input type="password"> //密码输入
<br/>
大叉叉的换习惯：
<br/>
打游戏<input type="checkbox"> //复选框输入
看小说<input type="checkbox">
<br/>
请选择大叉叉的性别;
<br/>
男<input type="radio" name="sex"> //单选框输入
女<input type="radio" name="sex">
<br/>
请找出大叉叉的爱犬：
<select> //下拉框选项
<option>大狗狗</option>
<option>大豚豚</option>
</select>
<input type="button" value="签章"> //添加按钮
<input type="submit" value="确定"> //提交内容
</form>
大叉叉个人简介：
<textarea cols="25" rows="2">我叫大叉叉</textarea> //文本框输入
2) 表单与PHP交互
post:不会将用户名密码等信息显示在地址栏
get:会将用户名密码等信息显示在地址栏，一般用于资源定位
<form action="http://localhost/service.php" method="get">
用户名：<input type="text" name="name">
密码：<input type="password" name="password">
<br>
<input type="submit" value="提交">
</form>
Service.php文件：注意编码问题，保存的时候要选择utf-8，否则乱码
<?php
echo "用户名:".$_GET['name']."<br>密码:".$_GET['password'];
?>
1.10. html框架
内联框架不需要写在body里面，直接写在html里面就行。
<iframe src="framea.html" frameborder="0" width="200px" height="200px">
</iframe>
如果framea里面的内容太多，超过框架尺寸，其内容会以进度条的形式展示。
iframe经常和a标签配合使用。
1.11. 拖放
可以拖放图片到网页的指定位置，还可以拖放本地资源到网页中。
ondragstart:调用了一个函数drag(even)，它规定了被拖放的数据
setData()：设置被拖放数据的数据类型和值
ondragover：规定在何处放置被拖动的数据
ondrop：当放置被拖数据时，会发生drop事件，即屏蔽掉默认事件的发生
2. CSS基础
css是层叠样式表。
2.1. 常用操作
尺寸操作：
height:设置元素高度
line-height:设置行高
max-height:设置元素最大高度
min-height:设置元素最小高度
max-width:设置元素最大宽度
min-width:设置元素最小宽度
width:设置元素宽度
分类操作：
clear:设置一个元素的侧面是否允许其他的元素浮动
cursor:规定当指向某元素之上时显示的指针类型
display:设置是否及如何显示元素，如：display:inline可将多个列表项显示在一行，block以块显示
float:定义元素在哪个方向浮动
position:把元素放置到一个相对的、绝对的、固定的或静态的位置
visibility:设置元素是否可见或不可见
图片操作：
img{
margin: 5px; //图片在容器中的内边距
opacity: 0.5; //透明度，1是不透明，0是完全透明
}
2.2. CSS语法
1) 基础语法
属性之间用分号隔开，属性值大于1个单词，需要加上双引号。
body中定义标签：<h1>叉叉学院</h1>
head中引用css：<link href="mycss.css" type="text/css" rel="stylesheet">
css中设置样式：h1{color: darkblue;font-size: 40px;}
2) 高级语法
选择器分组：多个标签使用同一个样式
h1,a,h2{color: darkblue;font-size: 40px;}
继承：除了h1等单独更改颜色的标签，其余body标签均使用yellow样式
h1,a,h2{color: darkblue;font-size: 40px;}
body{color: yellow;}
2.3. 选择器
2.3.1. 派生选择器
通过依据元素在其位置的上下文关系来定义样式。
<p><strong>hello da cha cha</strong></p>
<ul>
<li><strong>hello xiao cha cha</strong></li>
</ul>
css中指定样式:
li strong{
color:palevioletred;
}
strong{
color: aqua;
}
2.3.2. id选择器
可以为标有id的HTML元素指定特定样式，以#来定义。
<p id="pid">dachacha<a href="
css中指定样式：只改变a标签颜色
#pid a{
color: aqua;
}
2.3.3. 类选择器
类选择器以一个点显示，class也可作为派生选择器。
<p class="pclass">dachacha<a href="
css中指定样式：只改变a标签颜色
.pclass a{
color: aqua;
}
注意：id是唯一的，不可重复的，classa是可以重复的。
2.3.4. 属性选择器
对带有指定属性的HTML元素设置样式。
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
head中指定样式：
<style type="text/css">
[title]{
color: aqua;
}
[title=te]{
color: red;
}
</style>
2.4. CSS背景和轮廓
background-attachment:背景图像是否固定，或随着页面其余部分滚动
background-color:设置元素背景颜色
background-image:将图片设置为背景
background-position:设置背景图片起始位置
background-repeat:设置背景图片是否及如何重复
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
background-size:规定背景图片尺寸
body{
width: 140px; //设置内容显示宽度
background-image: url("image01.jpg"); //设置图像背景
background-size: 100px,100px; //设置背景图尺寸
background-repeat: no-repeat; //禁止背景图重复
background-position: right top; //在屏幕右边显示背景图，从图像顶部开始显示，也可设置数值
background-attachment: fixed; //禁止背景图随着页面滚动而滚动
}
CSS轮廓用于突出元素
outline:设置轮廓属性
outline-color:设置轮廓颜色
outline-style:设置轮廓样式
outline-width:设置轮廓宽度
2.5. CSS文本和字体
color:文本颜色
direction:文本方向
line-height:行高
letter-spacing:字符间距
text-align:对齐元素中的文本
text-decoration:向文本添加修饰
text-indent:缩进元素中文本的首行
text-transform：元素中的字母处理
unicode-bidi:设置文本方向
white-space:元素中空白的处理方式
word-spacing:字间距
text-shadow:向文本添加阴影
word-rap:规定文本的换行规则
<body>
<div>
<h2>chachaxueyuan</h2>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
</div>
</body>
CSS设置：
h2{
text-indent: -2em; //首行缩进负2个像素
padding-left: 2em; //文本缩进2个像素
text-transform: uppercase; //文本转换为大写字母
}
p{
padding-left: 2em;
text-shadow: 5px 5px 1px #FF0000;//文字阴影距左、距上、像素、颜色值
width: 200px; //段落宽度
text-wrap: normal; //正常自动换行
}
font-family:字体系列
font-size:字体尺寸
font-style:字体风格
font-variant:以小型大写字体或正常字体显示文本
font-weight:字体粗细
font-size: 20px;
font-family: Arial;
2.6. CSS链接
CSS链接四种状态：
a:link:普通的，未被访问的状态
a:visited:用户已访问的链接
a:hover:鼠标指针位于链接的上方
a:active:链接被点击的时刻
常用链接方式：
text-decoration:大多用于去除链接中的下划线
设置背景颜色：
background-color
<body>
<a href="
</body>
CSS样式：
a:link{
color: #FF0000; //字体颜色
text-decoration: none; //去除下划线
background-color: aliceblue; //字体背景颜色
}
2.7. CSS列表
可以放置、改变列表标志，或者将图像作为列表项标志。
list-style:简写列表项
list-style-image:列表项图像
list-style-position:列表标志位置
list-style-type:列表类型，如圆圈
<body>
<ul class="ul1">
<li>大狗狗</li>
</ul>
<ul class="ul2">
<li>大叉叉</li>
</ul>
</body>
CSS样式：
ul li{
list-style-image: url("image/icon.gif"); //图片做标志
}
ul.ul1{
list-style-position: inside; //往里面靠一点
}
ul.ul2{
list-style-position: outside; //往左外靠一点
}
2.8. CSS表格
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>大叉叉</td>
<td>28</td>
<td>男</td>
</tr>
<tr class="alt">
<td>大狗狗</td>
<td>5</td>
<td>男</td>
</tr>
</table>
</body>
CSS样式:
#tb{
width: 400px;
border-collapse: collapse; //折叠边框,即设置为单条边框
}
#tb th{ //表头
border: 1px solid blue; //边框宽度
height: 30px;
text-align: center; //文字居中
background-color: antiquewhite;
}
#tb td{
border: 1px solid blue;
color: white; //文字颜色
text-align: center;
background-color: yellowgreen;
padding: 5px; //文字内边距
}
#tb tr.alt td{
background-color: darkgoldenrod;
}
2.9. CSS盒子模型
外边距：
外边距默认为透明区域，外边距接受任何长度单位、百分数值。
margin:外边距，如margin:0px auto，上下边距0，左右自适应
margin-bottom:底边距
margin-left:左边距
margin-right:右边距
margin-top；上边距
边框：
border:边框
border-style定义了10种非继承样式
border-top-style:上边框样式
border-left-style:左边框样式
border-right-style:右边框样式
border-bottom-style:底边框样式
border-width:边框宽度
border-top-width:上边框宽度
border-color:边框颜色
border-top-color:上边框颜色
CSS3边框：圆角边框border-radius
边框阴影 box-shadow: 10px 10px 5px #FFccFF //右移，下移，透明度，颜色值
边框图片：border-image
内边距：
padding:所有内边距
padding-bottom:设置底边距
padding-left:设置左边距
padding-right:设置右边距
padding-top:设置上边距
content:内容
外边距合并：
盒子1边距10，盒子2边距20，合并之后边距会是20，即盒子的叠加。
2.10. CSS定位和浮动
CSS定位：改变元素在页面上的位置。
定位机制：普通流：元素按照其在html中的位置顺序决定排布的过程
浮动：
绝对布局：
CSS定位属性：
position:把元素放在一个静态、相对、绝对或固定的位置中
static:偏移量不起任何效果
relative:配合偏移量使用，其余内容不能占用该位置
absolute:其余内容可以占用该位置
fixed:滚动鼠标，元素不会移动
top:元素向上的偏移量
left:元素向左的偏移量
right：元素向右的偏移量
bottom:元素向下的偏移量
overflow:设置元素溢出其区域发生的事情
clip:设置元素显示的形状
vertical-align:设置元素垂直对齐的方式
z-index:设置元素的堆叠顺序
#position1{
width: 100px;
height: 100px;
background-color: beige;
position: relative;
left: 20px;
top: 30px;
z-index: 2; //后放position1代表的div
}
#position2{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 50px;
top: 10px;
z-index: 1; //先放position2代表的div
}
CSS浮动属性：
folat属性可用值：left元素向左浮动，浮动到左上角
right元素向右浮动
none元素不浮动
inherit从父级继承浮动属性
设置了浮动的话，主容器装不下时，会自动换行
clear属性可用值：left、right去掉元素向左、向右浮动
both去掉元素两侧的浮动
inherit从父级继承来clear的值
通常对容器内的文本需要去掉浮动。
2.11. 瀑布流和动画
瀑布流:
淘宝等商城常用的将多张图片放在在网页中，图片宽度相同，高度不同。
.div{
column-width: 250px; //多列列宽
-webkit-column-width: 250px; //须要做浏览器适配（谷歌）
-webkit-column-gap: 5px;
column-gap: 5px; //图片的间距
}
动画:
CSS中可以创建多列来对文本或区域进行布局.都须要做浏览器适配
column-count：分列的数量
column-gap：每列之间的间距
column-rule：每列之间间隔的那条线，以及线的格式颜色，如column-rule:5px outset #FF0000
动画过渡：
transition：设置4个过渡属性
transition-property：过渡的名称
transition-duration：过渡效果花费的时间
transition-timing-function：过渡效果的时间曲线
transition-delay：过渡效果开始时间，是延时开始的时间
div{
width:100px;
height: 100px;
background-color: antiquewhite;
-webkit-transition: width 2s ,height 2s;
transition: width 2s ,height 2s;
}
div:hover{
width: 200px;
height: 200px;
}
3. JavaScript
3.1. JavaScript基础
JavaScript脚本可以放置在head和body中，通常放在head中作为js的引入，如：
<script src="myjs.js"></script>
myjs.js脚本中写具体内容：
document.write("<h1>hello,dachacha</h1>")
语法:
语句之间最好用分号隔开.
标识符必须以字母\下划线或美元符号开始.
对大小写非常敏感.
JS会忽略空格.
单行注释: // 多行注释同HTML一样/* */
数据类型：
可以通过赋值为null的方式清除变量
字符串：string var string=”hello”
数字：number var i=10
布尔：boolean var flag=true
数组：array var arr=[1,2,3] var arr=[“hello”,”dachacha”] var arr=new Array(“hello”,”dachacha”);
var arr=new Array(); arr[0]=10; arr[1]=20;
对象：object
空：null
未定义： var r;
3.2. 运算符
算术运算符：
++在前面是先++再运算，++在后面是先运算再++
var i=10; var j=++i // j=11,i=11
var i=10; var j=i++ // j=10,i=11
var i=11;var j=5;var m= i+=j //m=16,i=i+j
字符运算符：
var i=”hello”;var j=”dachacha”;var m=i+j; //m=”hello,dachacha” 字符串相加是拼接
var j=”5”+5 //j=”55”
比较运算符：
var i=”10”;var j=10;
document.write(i==j) //true
document.write(i===j) //false类型必须一致
document.write(i!=j) //false
document.write(i!==j) //true类型必须一致
document.write(!(i==j)) //false表示取反
document.write(i>9?”i大于9”:”i小于9”) //i大于9，为真则输出第一个，为假则输出第二个
3.3. 语法
3.3.1. if-else
<script>
var i=10;
if(i>10){
document.write("i>10");
}else if(i<10){
document.write("i<10");
}else {
document.write("i=10");
}
</script>
3.3.2. switch
<script>
var i=5;
switch (i){
case 1:
document.write("i=1");
break; //跳出当前循环
case 2:
document.write("i=2");
break;
default:
document.write("条件不满足case");
break;
}
</script>
3.3.3. for
<script>
var i=[1,2,3,4,5,6];
var j=0;
for(;j<6;j++){
document.write(i[j]+",");
}
</script>
for-in:
<script>
var i=[1,2,3,4,5,6];
var j;
for(j in i){
document.write(i[j]+";")
}
</script>
3.3.4. while
<script>
var i=1;
while (i<10){
document.write("
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
