[JavaWeb]前端三件套 HTMLCSSJavaScript 和 jQuery
Posted Spring-_-Bear
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JavaWeb]前端三件套 HTMLCSSJavaScript 和 jQuery相关的知识，希望对你有一定的参考价值。
一、HTML
1. 前端的开发流程
2. 网页的组成部分
内容（HTML）、样式（CSS）、行为（javascript）
3. HTML 简介
Hyper Text Markup Language（超文本标记语言）
4. html 的书写规范
<!-- 约束，声明 -->
<!DOCTYPE html>
<html lang="zh_CN">
<!-- html 标签一般包含两部分内容，head 和 body -->
<head>
<!-- 头部一般包含三部分内容，titile 标签、css 样式、js 代码 -->
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
HelloWorld
</body>
</html>
5. HTML 标签的使用注意事项
- 标签名大小写不敏感
- 标签拥有自己的属性（基本属性：bgcolor=“red” 、事件属性：οnclick=“alert(‘你好!’);”）
- 标签不能交叉嵌套、标签必须正确闭合、属性必须有值且用引号包括、注释不能嵌套
6. 标签的分类
- 单标签格式：<标签名 /> 换行：<br /> 水平线：<hr />
- 双标签格式：<标签名>data</标签名>
7. font 标签
<font color="blue" face="Consolas" size="7">Spring-_-Bear</font>
8. 特殊字符
<!-- > -->
>
<!-- < -->
<
<!-- 空格 -->
9. 标题标签 h1 - h6
<h1 align="center">Spring-_-Bear</h1>
10. 超链接标签
<!-- 跳转到新标签页 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 跳转到当前页面 -->
<a href="http://www.baidu.com" target="_self">百度</a>
11. 无序列表和有序列表
<!-- 无序列表 -->
<ul type="none">
<li>Spring</li>
<li>Bear</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>Spring</li>
<li>Bear</li>
</ol>
12. img 标签
<img src="../images/BeFree1.jpg" width="555" height="555" border="1" alt="Image can't find"></img>
13. 工程路径说明
- 正确格式：http://ip:port/工程名/资源路径
- 错误格式：盘符:/目录/文件名
14. table 标签
<table width="555" height="555" border="1" cellspacing="0" align="center">
<tr>
<!-- 合并列 -->
<th colspan="2">1.1</th>
<th>1.2</th>
<th>1.3</th>
<th>1.4</th>
</tr>
<tr>
<!-- 合并行 -->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2" align="center">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
15. iframe 标签
iframe 标签可以在 html 页面上打开一个小窗口，去加载一个单独的页面
<iframe width="333" height="333" name="abc"></iframe>
<ul>
<li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
<li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
<li><a href="SpringBear.html" target="abc">Spring-_-Bear</a></li>
</ul>
16. 表单
表单就是 html 页面中用来收集用户信息的所有元素的集合，然后将这些信息发送给服务器
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center" bgco lor="aqua">
<tr>
<td>用户名称：</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td> 性 别：</td>
<td><input type="radio" name="sex" checked="checked" value="man" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input type="checkbox" value="C" />C
<input type="checkbox" value="Java" />Java
<input type="checkbox" value="Python" />Python
</td>
</tr>
<tr>
<td> 国 籍：</td>
<td><select name="country">
<option value="china">中国</option>
<option value="japan">日本</option>
<option selected="selected" value="usa">美国</option>
</select></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="10" name="comment">积极向上好青年</textarea></td>
</tr>
<tr>
<td align="left"><input type="reset" value="重置"></td>
<td align="right"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
17. 表单提交的注意事项
action 属性设置表单提交的服务器地址
method 属性设置提交的方式 GET（默认）或 POST
表单项没有 name 属性值时数据项不会发送给服务器
单选、复选（下拉列表的 option 标签）都需要添加 value 属性，以便发送真实数据到服务器
GET请求（地址栏显示参数）：http://localhost:8080/?action=login&username=123&password=123&sex=man&country=china&comment=%E7%A7%AF%E6%9E%81%E5%90%91%E4%B8%8A%E5%A5%BD%E9%9D%92%E5%B9%B4
POST请求（地址栏隐藏参数）：http://localhost:8080/
18. 其他标签
div 标签默认独占一行
span 标签长度为封装数据的长度
p 段落标签默认在段落的上方或下方空出一行
二、CSS
1. CSS
（Cascading Style Sheet）层叠样式表单，用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
2. CSS 与 HTML 结合使用的三种方式
- 在各个标签中使用 style 单独定义样式
<div style="border: 1px solid red;">div标签一</div>
- 在 head 标签中，使用 style 标签来定义样式
<style type="text/css">
div
border: 1px solid blue;
span
border: 1px solid red;
</style>
- 将 css 样式写成一个单独的 css 文件，再通过在 html 文件头部使用 link 标签引入对应 css 文件
<link rel="stylesheet" type="text/css" href="css01.css"/>
3. 标签名选择器
<style type="text/css">
h1
font-size: large;
</style>
4. id 选择器
<style type="text/css">
#div01
color: blue;
font-size: 30px;
border: 1px red solid;
</style>
5. class 类型选择器
<style type="text/css">
.class01
color: blue;
font-size: 30px;
border: 1px red solid;
</style>
6. 组合选择器
<style type="text/css">
.class01, #div01, span
color: red;
border: 1px solid blue;
font-size: 20px;
</style>
7. CSS 常用样式
<style type="text/css">
div
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: gray;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
table
border: 1px red solid;
border-collapse: collapse;
td
border: 1px red solid;
a
text-decoration: none;
ul
list-style: none;
</style>
三、JavaScript
1. JavaScript 语言的特点
- 交互性（信息的动态交互）
- 安全性（不允许直接访问本地磁盘）
- 跨平台性（可以解析 JS 的浏览器都可以执行 js 代码）
2. JavaScript 与 HTML 结合使用的两种方式
- 在 head 或 body 标签中使用 script 标签书写 js 代码
<script type="text/javascript">
alert("Hello World");
</script>
- 使用 script 标签引入 js 文件从而运行 js 代码
<script type="text/javascript" src="hello.js"></script>
3. js 的六大变量类型与特殊的值
- number、string、object、boolean、null、undefined
- undefined：未定义，所有 js 变量未赋初值时默认值都是 undefined
- null：空值
- NaN：Not a Number，非数字非数值
4. js 变量类型应用案例
<script type="text/javascript">
var i;
alert(i); // undefined
i = 12;
alert(typeof (i)); // number
i = "lcx";
alert(typeof (i)); // string
var a = 12;
var b = "abc";
alert(a * b); // NaN
</script>
5. JavaScript 的关系运算
== 等于：等于是简单的做字面值的比较
=== 全等于：除了做字面值的比较外，还会比较两个变量的数据类型
var a = 12;
var b = "12";
// true
a == b;
// false
a === b;
6. JavaScript 的逻辑运算
- 在 JavaScript 语言中，所有的变量都可以作为一个 boolean 类型变量去使用。
0、null、undefined、""均认为是 false- 与（&&）运算：当表达式全为真时，返回最后一个表达式的值；当表达式有一个为假时，返回第一个为假的表达式的值
- 或（||）运算：当表达式全为假时，返回最后一个表达式的值；当表达式有一个为真时，返回第一个为真的表达式的值
7. JavaScript 的数组
<以上是关于[JavaWeb]前端三件套 HTMLCSSJavaScript 和 jQuery的主要内容，如果未能解决你的问题，请参考以下文章