HTML5基础知识.doc

Html5·JS基础
Html5是超文本标记语言，不属于编程语言。
Html5不考虑对IE9及以下版本的支持。
1. html5基础
div布局中设置浮动：float: right;
清除浮动：clear: both;
表格布局中合并2个单元格：colspan="2"
要在网页上显示预留关键字可以直接百度HTML实体。
XHTML的语法和书写格式更加严格规范。

1.1. html基础格式
//声明:html各版本的声明方式不同，这里是html5版本
//en表示英文，zh表示中文

//编码格式
叉叉学院

大叉叉家族
hello //这里的两排文字是没有格式的，不会分两排显示,可使用换行符
//这里的两排文字是有格式的，会分两排显示
//html图片

换行符：hello dachacha hello dagou

1.2. html标签属性
1) 通用属性：
class：规定元素的类名
id：规定元素唯一ID
style：规定元素样式
title：规定元素的额外信息
2) 键/值属性：
打开本地
点击打开本地，进入href_file.html。href="#"表示点击链接后跳转到自身
3) 常用属性：
在顶级页面打开（相当于浏览器当前页面）
_parent:在父级页面打开（承载当前框架的框架内打开）
打开本地
1.3. html格式化
定义粗体文本
定义删除字
定义着重字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
欢迎来到叉叉学院
1.4. html样式
1) 外部样式表
创建外部样式文件mystyle.css然后在head中引用该样式：

2) 内部样式表
直接将外部样式文件的内容写到head中，p标签装的是需要改变样式的文本

p{
color: aqua;
}

3) 内联样式表
直接在标签内定义格式
叉叉学院
1.5. html链接
文本链接：

img中若添加属性alt="chachalogo"则当image01不存在时，会显示alt里面的内容
name标签：在页面内部跳转，点击跳转到，则跳转到hello
hello

跳转到
1.6. html表格
>定义表格标题
image01.jpg"
单元格颜色背景：bgcolor="aqua"
单元格间距：cellspacing
1.7. html列表
1) 有序列表
表的嵌套
4) 自定义列表：
}
2) 内联元素
内联元素通常不会以新行开始，如，，
Span可作为文本的容器，
rea>文本域
控制标签
input type="checkbox"> //复选框输入
看小说

请选择大叉叉的性别;

男 //单选框输入
女

请找出大叉叉的爱犬：
//下拉框选项
15、 大狗狗
大豚豚

//添加按钮
//提交内容
密码等信息显示在地址栏，一般用于资源定位
]."密码:".$_GET['password'];
?>
1.10. html框架
内联框架不需要写在body里面，直接写在html里面就行。

如果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中定义标签：t-size: 40px;}
body{color: yellow;}
2.3. 选择器
2.3.1. 派生选择器
通过依据元素在其位置的上下文关系来定义样式。
素指定特定样式，以#来定义。
d-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:规定文本的换行规则

yuan上、像素、颜色值
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

list-style-image: url("image/icon.gif"); //图片做标志
}
ul.ul1{
list-style-position: inside; //往里面靠一点
}
ul.ul2{
list-style-position: outside; //往左外靠一点
}
2.8. CSS表格

order: 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:边框颜色
bordertop-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的引入，如：

myjs.js脚本中写具体内容：
document.write("值为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

var i=10;
if(i>10){
document.write("i>10");
}else if(i<10){
document.write("i<10");
}else {
document.write("i=10");
</p><p style='height:0px;padding:0;overflow:hidden'>48、 }

3.3.2. switch

var i=5;
switch (i){
case 1:
document.write("i=1");
break; //跳出当前循环
case 2:
document.write("i=2");
break;
default:
document.wr</p><p style='height:0px;padding:0;overflow:hidden'>49、ite("条件不满足case");
break;
}

3.3.3. for

var i=[1,2,3,4,5,6];
var j=0;
for(;j<6;j++){
document.write(i[j]+",");
}

for-in:

var i=[1,2,3,4,5,6];
var j;
for(j in i){
document.write(i[j]+";")
}

3.3.4. while

var i=1;
while (i<10){
document.write("</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js">

关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2025 宁波自信网络信息技术有限公司  版权所有客服电话：4009-655-100  投诉/维权电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：