1.前端的组成:内容(HTML)+样式(CSS)+页面交互特效(javascript);
2.前端编译(解析)器:浏览器.(浏览没有统一,所以每个浏览内核不同,导致同一个页面用不同 浏览器解析出效果不同(兼容性).)
3.前端开发工具:记事本,nodepad++,HBuilder,Dreamweaver,WebStorm,eclips,myeclips,idea.
4.html:超文本标记语言.后缀名:.htm 或.html.
(html由标签组成一种语言,每个标签都有自己的意义)
5.html规范:
5.1:html不区分大小写,但是W3C提倡标签名和属性名全用小写.
5.2:html页面必须有根标签,根标签必须是
5.3:html标签必须关闭:
单标签:<标签名 属性名1=“值1” 属性名2=“值2” />
双标签:<标签名 属性名1=“值1” 属性名2=“值2”></标签名>
5.4:html的标签的属性值一定要写在引号中.
5.5:html的标签都已经定义好了,每个标签都有独特含义,不能自定义.
5.6:html的标签可以嵌套,嵌套要正确.<标签名1><标签名2></标签名2></标签名1>
6.html组成:文档声明+html基本结构.
7.html的文档声明:
7.1:STRICT（严格类型）:
7.2:TRANSITIONAL（过渡类型):<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7.3:FRAMESET（框架类型):<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
8.html基本结构
9.html注释:
10.html中头部常用标签:
10.1:页面标题标签:
10.2:设置页面字符编码:
10.3:网页描述:
10.4:设置搜索关键字:
10.5:设置当前页面几秒后跳转到另一个页面:
11.html中body常用标签:
11.1:块级标签:标签要独占一行.
11.1.1:标题标签:
~
字体由大到小.
11.1.2:段落标签:
11.1.3:水平线标签:
11.1.4:无序列表
- 面条
- 泡面
- 燕窝
- 空气
11.1.5:有序列表
- 有钱的
- 女的
- 肤白貌美
- 活的
11.1.6:自定义列表
<!--自定义列表:用于对概念的解释说明,或图文混排-->
<dl>
<!--dt中存放的要解释的概念或图片-->
<dt>java</dt>
<!--dd中存放的对dt的说明文字-->
<dd>java是一种纯面向对象的语言</dd>
<dd>java是一种跨平台的语言</dd>
</dl>
11.1.7:表格:跨行rowspan="行数" 跨列:colspan="列数"
注意:拿到表格的题目,先按最细的行和列来写好,再一行一行找到那些列要跨 行和跨列,找到后再跨行跨列,跨完后将对应的列删除.
<!--表格-->
<table border="1" width="400" height="300">
<!--行-->
<tr>
<!--列-->
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<!--行-->
<tr>
<!--列-->
<td>赵公子</td>
<td>20</td>
<td>男</td>
</tr>
<!--行-->
<tr>
<!--列-->
<!--跨行-->
<td rowspan="2">赵公子2</td>
<!--跨列-->
<td colspan="2">21</td>
</tr>
<!--行-->
<tr>
<!--列-->
<td>22</td>
<td>男</td>
</tr>
</table>
功能表格:
<!--功能表格-->
<table border="1" width="600" height="300px">
<!--表的标题-->
<caption>年中宿舍报表</caption>
<!--表头-->
<thead>
<!--行-->
<tr>
<!--列-->
<th>宿舍号</th>
<th>水费</th>
<th>电费</th>
</tr>
</thead>
<!--表的主体-->
<tbody>
<!--行-->
<tr>
<!--列-->
<td>101</td>
<td>50</td>
<td>1000</td>
</tr>
<tr>
<!--列-->
<td>102</td>
<td>70</td>
<td>800</td>
</tr>
<tr>
<!--列-->
<td>103</td>
<td>60</td>
<td>1200</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<!--行-->
<tr>
<!--列-->
<th>总计</th>
<th>180</th>
<th>3000</th>
</tr>
</tfoot>
</table>
11.1.8:表单:整个表单是块级标签,表单中每个元素是等级标签.
<!--表单-->
<form method="get/post" action="5.特殊表格.html" enctype="application/x-www-form-urlencoded">
<!--文本框--><!--placeholder:在框中显示提示语-->
用户名:<input type="text" name="" value=""
placeholder="用户名"/><br/>
<!--密码框--><!--只读属性:readonly-->
密码:<input type="password" name="" value="123456"
readonly="readonly"/><br/>
<!--单选按纽:同一组单选按纽的name属性值相同-->
性别:<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman" checked="checked"/>女<br/>
<!--多选按纽:同一级多选按纽的name属性值相同-->
爱好:<input type="checkbox" name="hobby" value="sing" checked="checked"/>sing
<input type="checkbox" name="hobby" value="dance"/>dance
<input type="checkbox" name="hobby" value="rap" checked="checked"/>rap
<input type="checkbox" name="hobby" value="sleep"/>sleep
<input type="checkbox" name="hobby" value="study"/>study
<input type="checkbox" name="hobby" value="basketball"/>basketball<br/>
<!--下拉列表框-->
出生城市:<select name="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shengzhen" selected="selected">深圳</option>
</select><br/>
<!--文件域-->
头像:<input type="file" name=""/><br/>
<!--隐藏域的内容页面看不到,专门用来传值-->
隐藏域:<input type="hidden" name="" value=""/><br/>
<!--多行文本(文本域)-->
协议:<textarea rows="6" cols="20">
请阅读以下协议
dfeifiefefefeffefe,fefefefefefefefefefefefefefefef
</textarea>
<input type="checkbox" name=""/>同意协议<br/>
<!--普通按纽--><!--禁用disabled-->
<input type="button" value="普通按纽"
disabled="disabled"/>
<!--提交按纽-->
<input type="submit" value="提交"/>
<!--图片按纽,也有提交功能-->
<input type="image" src="image/btnLogin.jpg"/>
<!--重置按纽-->
<input type="reset" value="重置"/>
</form>
11.1.9:容器标签:<div></div>
11.2:行级标签(内联标签):内容有多大占多大的位置.
11.2.1:换行标签:<br/>
11.2.2:<img src="图片路径" title="鼠标止悬停文字"
alt="图片加载失败提示文字"/>
11.2.3:超链接:
11.2.3.1:页面间链接:<a href="跳转的地址">内容</a>
11.2.3.2:锚链接:跳转到指定页面的指定位置.
页面内锚链接:
在目标地方作标记:<a name="标记名">内容</a>
跳转地方:<a href="#标记名"></a>
页面间锚链接:
在目标地方作标记:<a name="标记名">内容</a>
跳转地方:<a href="页面地址#标记名"></a>
11.2.3.3:功能性链接:<a href="mailTo:邮箱地址"></a>
11.2.4:范围标签:<span></span>
12.框架集:框架集与标签不共存.页面要么不用框架集,要用框架集,整个页面必须全 用.
作用:用于将页面划分几个模块来布局.
优点:方便布局.
缺点:加载速度慢;灵活性差.
13.内联框架:可以在页面上任意地方引入其他页面.优点:灵活性高.
14.特殊符号
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
做项目的步骤:
1.读清题意
2.创建数据库和表,及插入测试数据
3.创建项目,导包
4.编码:
4.1:抽出题目中所有的类
4.2:抽出每个类中有哪些属性和方法
4.3:编写类,完成每个方法.
回顾:
1.html的头部:
2.html的body:
块级标签:
~
,
,
,
- -
- ,
- -
- ,dl-dt-dd,table-tr-td,
行级标签:
,