HTML
Hyper Text Markup Language :超文本标记语言。
超文本标记语言:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的语言,它不是编程语言
HTML文件都是以.html或者.htm结尾的,建议使用.html结尾!
Html文件分为头部分<head></head>
和体部分<body></body>
。
Html标签都是由开始标签和结束标签组成(<hr />
)。
Html标签忽略大小写,建议使用小写。
标题标签
从<h1>到<h6>
逐渐变小(加粗加黑显示)
水平线标签
<hr/>
段落标签
<p>
字体标签
<font 属性=值>内容</font>
color:设置字体的颜色,可使用英文单词或者16进制
size:设置字体的大小,从1到7逐渐变大,最大显示为7
face:设置字体
标签的src属性
<img/>
当前目录:直接写文件名称或者./文件名称上一级目录:…/文件名称下一级:目录名称/文件名称
width:设置图片的宽度 height:设置图片的高度
alt:当图片无法正常显示的时候给出的提示信息,它的显示效果与浏览器有关
列表标签:
有序列表:<ol type=”1” start=”4”><li></li></ol>
无序列表:<ul type=”circle”><li></li></ul>
超链接标签:
<a></a>
<a href=”http://www.baidu.com” target=”_self、_blank”>百度</a>
表格标签
<table>标记表示表格,以<table>开始以</table>结束
<caption>标题标签,给表格提供标题。
<th> 表头标签 一般对表格的第一行或者第一列进行格式化,就是粗体显示。
<tr> 行标签
<td> 单元格标签, 加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
常用的属性
border 表格的边框
width 宽度
height 高度
align 对齐方式 left左对齐 right右对齐 center 居中
th 用作表头标签
rowspan 合并行,上边合并下边
colspan 合并列,一般是右边合并
<table border=”1px” width=”” heigth=”” cellspacing=”” cellpadding=”” align=”” bgcolor=””>
<tr >
<td rowspan=”” colspan=””></td>
</tr>
</table>
框架标签
<frameset>
<frame src="头部页面.html"/>
<frameset>
<frame src="左边页面.html"/>
<frame src="中间页面.html"/>
<frameset/>
<frame src="底部页面.html"/>
<frameset/>
<frameset rows=”30%,*”>
<frame src=”” />
<frameset cols=”20%,80%”>
<frame src=”” />
<frame name=”” />
</frameset>
</frameset>
HTML表单&CSS
表单标签
作用:用于采集用户输入的数据,提交给后台程序处理。
<form> 表示一个表单。
<body>
<form action="#" method="get" name="regForm">
内容
</form>
</body>
常用的属性:
Action:表单提交到的地址
method:提交方式
get:提交的数据会放到地址啦上
get提交的数据不能超过1kb(只适合于一些简单的数据)
post:提交的数据不会放到地址栏上
post提交的数据没有限制(文件上传用post比较好)
<input type="text"> 单行输入域
<textaera><textaera/>
value属性 该输入域的默认值,一般是4-10位的字符
name 这个是必须填,该name的属性值是用于给后台程序获取该标签的内容
<input type="password"> 密码输入域,使用一个非明文的效果获取用户输入的数据
value 同上
name 同上
<input type="radio"> 单选按钮
注意:如果是同一组的按钮的单选选项,就是用相同的name属性值
<input type="checkbox"/> 多选按钮
<input type="hidden"/> 隐藏域 特点:不会显示到HTML页面上
属性:name属性就是后台程序获取的标记
这个value值就是发送给后台程序的内容。
<select name="籍贯"/> 下拉选项
name属性就是后台程序获取的标记
下拉选项的option标签中的value属性值一定要填,这个value值就是发送给后台程序的内容。
<option value="广东">广东<option/>
<input type="file"/> 文件选择器
<input type="submit"/> 提交按钮
属性:name
提交按钮,点击这个按钮,form中的全部数据就会发送到后台。
value:表示按钮的显示文本。
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
点击这个按钮,form中的数据返回到初始状态。
DIV和CSS
div就是html的一个普通标签,进行区域划分。
特性:独自占一行。独自不能实现复杂效果,必须结合CSS样式进行渲染
div通常是块级元素
<div></div>
可定义文档中的分区和节。
用id或class来标记
CSS称为层叠样式表,主要设置HTML页面中的文本内容(字体,大小,对齐方式),图片的外形以及版面的布局等外观显示样式。
CSS+DIV布局更加灵活。
CSS基本选择器
元素选择器
<style>
div{
font-size: 30px;
color: pink;
}
</style>
类选择器
<head>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div class="div2">
内容
</div>
</body>
id选择器
<head>
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div id="div5">
内容
</div>
</body>
层级选择器
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
属性选择器
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名;<input type="text" name="username"/><br />
密码:<input type="password" name="password"/>
</body>
CSS引入方式
内部引入
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
行内引入
<div style="font-size: 20px;color: blue;">
内容
</div>
外部引入
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
新建style.css文件
css属性
- color颜色
- font-size字体大小
- text-align对齐方式
- border边框-(left):1px solid red;
- line-height
- width
- height
- background: url() no-repeat不重复 center;
- background-color: yellow
盒子模型
控制布局
外边距margin-left: 50px
内边距padding
- box-sizing: border-box
浮动float
JavaScript
HTML:它是整个网站的骨架。
CSS:它是对整个网站骨架的内容进行美化(修饰)
Javascript:它能够让整个页面具有动态效果。
JavaScript组成部分
ECMAScript:它是整个javascript的核心,包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
DOM:文档对象模型,包含(整个html页面的内容)、
BOM:浏览器对象模型,包含(整个浏览器相关内容)
获取元素
document.getElementById(“id名称”);
获取元素里面的值
document.getElementById(“id名称”).value;
JavaScript事件
表单提交事件:onsubmit
JavaScript的输出
警告框:alert();
向页面指定位置写入内容:innerHTML(属性)
向页面写入内容:document.write(“”);
如何控制表单提交?
关于事件onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个返回值。
onsubmit = return checkForm()
<script> function checkForm(){
函数体
}
</script>
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
事件(onload) 定时操作:
setInterval(“changeImg()”,3000);
用法同事件onsubmit
<script> function init(){
setInterval("changeImg()",3000);
}
function changeImg(){ }
</script>
<body onload="init()"> 在指定位置定义id。
JavaScript的引入方式
内部引入方式
直接将javascript代码写到<script type=”text/javascript”></script>
外部引入方式
需要创建一个.js文件,在里面书写javascript代码,然后在html文件中通过script 标签的src属性引入该外部的js文件
BOM对象
BOM对象:浏览器对象模型(操作与浏览器相关的内容)
alert()警告框
setInterval():它有一个返回值,主要是提供给clearInterval使用。
setTimeout():它有一个返回值,主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作
Location对象
Location 对象包含有关当前 URL 的信息
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script> function tiao(){
window.location.href="http://www.ibaidu.com";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到百度首页</a> </body>
</html>
History 对象包含用户(在浏览器窗口中)访问过的 URL。
<input type=“button” value=" 返 回 上 一 个 页 面 οnclick=“javascript:history.back()”/>
go(参数)
参数:-1 返回上一个历史记录页面;-2返回上上一个历史记录页面,1进入下一个历史记录页面。
其他事件
JavaScrip框架之 JQuery
JQuery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
所有的jquery代码写在页面加载函数内
$(function(){
Jquery代码
});
获取元素方法
JS: document.getElementById();
JQ: $(“#id”);
注意 JQ对象只能操作JQ里面的属性和方法 JS对象只能操作JS里面的属性和方法。
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","pink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","pink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
BootStrap
基于HTML,CSS,JavaScript的前端框架,在JQuery的基础上工作,可以说是JQuery的一个插件