组成：
首先，我们需要了解下web前端由哪些组成：
1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java
2. 页面样式：css（Cascading Style Sheet，层叠样式表）
3. 页面交互：js（javascript）、jQuery、AJAX
一. 背景
1.1、软件系统结构：
C/S结构：Client-Server（客户端-服务器结构），如QQ、WeChat、LOL、淘宝APP。“胖”终端，对终端要求要高一些；维护相对复杂，服务器和客户端都需要更新和维护；安全性强。
B/S结构：Broswer-Server（浏览器-服务器结构），如学校官网、淘宝网、JD网站等。“瘦”终端，对终端要求要低一些；维护相对简单，只需要更新和维护服务器；安全性低一些。
1.2 动态网站和静态网站：
静态网站：不存在数据交互的网站，一般就是使用html静态页面开发。
动态网站：存在数据交互的网站，如淘宝网，比如使用jsp技术开发的网站。（php、.net(C#、asp)）
二.DOM树
2.1 概念：
HTML：Hyper Text Markup Language，超文本标记语言。1993年正式提出，2013提出了html5。
DOM：Document Object Model，文档对象模型。
2.2 DOM树：
2.3 HTML的结构：
2.4 HTML的语法：
标签：带有特殊含义的网页标记元素。（由W3C组织规定的标准）
基本格式：<标签名>标签体</标签名>
分类：
带有标签体的标签：比如<head></head>
有不带标签体的：比如<br>、<br/>
原则上标签应该是成对出现，有特例（<br>，<hr>）。
一个标签可以有多个属性，属性值必须使用双引号引起来，不同属性之间使用空格分隔开。如果一个标签中出现多个同名属性，那么会以第一次的属性值为准。
标签支持大小写，语法比较弱，习惯上小写。
三. HTML常见标签：
3.1 文本标签：
3.1.1、标题标签
h1/h2/h3/h4/h5/h6 内置了6个标题格式。可以直接使用。
3.1.2 水平分割线：
hr标签：<hr>、<hr/>（<HR>、<HR/>、<Hr>、<hR/>原则上都是正确写法，但是不推荐）
3.1.3 段落标签：
P标签：自动换行，设置默认的行间距和字体。
3.1.4 上标下标：
sup：
sub：
3.1.5 换行：
br：<br>或<br/>
3.1.6 原样输出：
pre：按照预定义的格式输出。保留文本中原样的空格、\t、\r的效果。
3.1.7 有序列表：
<ol>
<li>......<li>
<li>......<li>
</ol>
3.1.8 无序列表：
<ul>
<li>......</li>
<li>......</li>
......
</ul>
3.1.9 自定义列表：
<dl>
<dt>所属学院</dt>
<dd>计算机学院</dd>
<dt>所属专业</dt>
<dd>计算机科学与技术</dd>
</dl>
3.1.10 行标签和块标签：
行标签（内联标签）span：内容有多宽，在页面就占用多宽距离。
块标签div：始终要占满整行空间。
3.1.11 其他常用文本标签：
加粗：strong
倾斜：em
字体：font
颜色RGB：Red-Green-Blue，颜色值#000000-#FFFFFF，颜色值可以简写，如#000000可以写成#000、#FFFFFF可以写成#FFF。
3.2 字符实体：
空格、<、>、版权等字符实体需要掌握。
3.3 多媒体：
音视频：
<embed></embed>
属性：src-音视频的路径，hidden-音视频的隐藏与显示，默认取false。
元素的飘动：
marquee标签：
direction：飘动的方法（left、right、up、down）
loop：循环的次数（整数）
scrollamount：循环的速度（整数）
3.4 超链接：
<a href=”......” target=”????”>超链接</a>
3.4.1 跳转：
从一个页面跳转到另外一个页面。
href：指的是要跳转的目标位置（可以是互联网页面、可以是自定义页面、还可以是本地文件）；如果不希望页面跳转，值直接写#。
target：取值_blank——在新的页面打开目标页面；
取值_self——在当前页面打开目标页面（默认值）；
取值_parent——在父页面的窗口跳转到目标位置
取值_top——
取值_search——
3.4.2 锚链接：
在一个页面中，从一个位置跳转到另外一个位置。
当前位置：<a href=”#top”>返回顶部</a>
目标位置：<a name=”top”>顶部</a>
3.4.3 功能性链接：
QQ、MSN、邮箱？
3.5 图像：
3.5.1 img标签
3.5.2 图片链接
a和img的混合使用。
3.6 表格：
3.6.1 表格的基本格式:
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
......
</tr>
<tr>
<td>内容11<td>
<td>内容12<td>
<td>内容13<td>
......
</tr>
<tr>
<td>内容21<td>
<td>内容22<td>
<td>内容23<td>
......
</tr>
......
</table>
3.6.2 多个tbody：
<table>
<thead>表格的标题</thead>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</tbody>
</table>
3.7 表单：
3.7.1 form：
action（请求的路径）、method（请求方式get/post）、id、name、class......
get和post的区别：
get：把input输入框中的内容全部显示在浏览器的url中。不安全，容易泄露数据。能传输的数据量比较小。
post：不会把输入框的内容显示在url中，安全，不会泄露数据。能够传输的数据量比较大，对于保密性比较强或数据量比较大的操作，使用post。
get/post可以使用大写（GET/POST）。
3.7.2 input：
type属性——
text文本
password密码
submit提交
reset取消
file文件
button按钮、控件
radio单选框
checkbox复选框
hidden隐藏
email邮件
date
datetime
datetime-local
image
color
1、text/password/emai/submit/reset：
2、单选框radio：
3、复选框checkbox：
4、select标签：
5、文本域textarea：
6、按钮button：
课堂练习： 各位可以将所学内容绘画出下列效果。
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>课堂练习-注册表单</title>
</head>
<body>
<form action="#" method="post">
<table border="1" cellspacing="0" cellpadding="8">
<tr>
<td width="100"><label>用户名：</label></td>
<td width="400"><input type="text" size="22" placeholder="请输入用户名..."/></td>
</tr>
<tr>
<td><label>密码：</label></td>
<td><input type="password" size="22" placeholder="请输入密码..."/></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td>
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
<input type="radio" name="sex" value="-1"/>保密
</td>
</tr>
<tr>
<td><label>爱好：</label></td>
<td>
<input type="checkbox" name="hobby" value="1"/>游泳
<input type="checkbox" name="hobby" value="2" checked/>篮球
<input type="checkbox" name="hobby" value="3"/>排球
<input type="checkbox" name="hobby" value="4"/>其他
</td>
</tr>
<tr>
<td><label>城市：</label></td>
<td>
<select name="city">
<option value="2">南昌</option>
<option value="1" selected>北京</option>
<option value="3">武汉</option>
<option value="4">上海</option>
<option value="5">广州</option>
</select>
</td>
</tr>
<tr>
<td><label>靓照：</label></td>
<td><input type="file" name="photo"/></td>
</tr>
<tr>
<td><label>个人简介：</label></td>
<td><textarea cols="50" rows="6" name="introduction">大家好，我叫XXX......</textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
3.8 页面框架frame：
标签：
frameset：frame的集合
frame：某一个具体的框架（页面）
属性：
cols：列，其中值用逗号隔开
rows：行，其中值用逗号隔开
单位：相对距离（%）、绝对距离（px）
特殊符号*：表示的是，除了给定的距离之外的其他全部距离。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
