1.系统结构:
B/S架构:
Browser / Server (浏览器/服务器的交互形式)
Browser支持哪些语言:HTML CSS JavaScript
写HTNL CSS JavaScript代码的这波人叫做:WEB前端开发工程师。
前端页面上的图片需要UI设计师来完成
s是服务端Server,Server端的语言很多:C C++ java python
B/S架构的系统有什么优点 和缺点
优点:升级方便,只升级服务端代码即可
缺点:速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统
不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业内部更注重维护的成本。
B/S架构的系统有哪些代表?
京东
百度
天猫
...
页游和端游的区别
C/S架构 就是要下载客户端
Client / Server (客户端/服务端的交互形式)
缺点:升级麻烦,维护成本较高。
优点:速度快,体验好,界面炫酷。(娱乐性的系统多数是C/S架构的) 需要写客户端,升级则需要重新 下客户端
dreamweaver:网页开发工具(网页制作三剑客)
2.什么是HTML?怎么开发HTML?怎么运行HTML?
HTML:Hyper Text Markup Language (超文本标记语言)
由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</>标签
</>标签
超文本:流媒体、图片、声音、视频...
*HTM开发的时候使用普通的文本编辑器就行了,创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具,例如:DreamWeaver、HBuilder...
* 直接采用浏览器打开HTML文件就是运
3.HTML是谁制定的?
W3C:世界万维网联盟
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码
HTML最新的规范为html5.0,简称H5.但是现在学习html4.0
主要是链接HTML的基础
W3C定制了许多协议:
https,http协议,XML
wschool:可以查询一些开发帮助,开发中需要用的东西
第一个HTML程序
<!--
1.这是HTML的注释
2.可以多行注释
3.html不区分大小写
-->
以下为HTML语法格式
<!doctype html> //有这一句代表执行html5.0规则,没有代表html4.0
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题显示在左上角-->
<title>网页标题</title> //如果是包含的关系,必须要有缩进
</head>
<!--体-->
<body>
欢迎学习HTML
</body>
</html>
html 的基本标签
<!doctype html>
<html>
<head>
<title> HTML基本标签</title>
</head>
<body>
<!--段落标记-->
<p>sdsdasdasdasdasd</p>
<p>adsadasdasdasdaasdasdasdasdasdasd</p> //这样在<p></p>之间会自成一段
<!--标题字:是HTML预留的格式,word中的标题字一样-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5> //这个会跟word文档中一样,出现不同级的标题 在<h1></h1>之间是一级标题
<!--换行标记-->
hello <br> world! //<br> 是一个独目标记
<!--加一个横线-->
<hr>
<!--color和width是hr标签的属性-->
<hr color = "red" width = "50%">
<hr color = red width = '50%'> //在给标签赋值的时候,打双引号,单引号都行,比较松散
<!--预留格式-->
<pre>
for(int i=5;i<10;i++)
{
System.out.println(i);
}
</pre> //预留格式标签,在<pre></pre>之间的格式不会改变
<!--下面几个标签作为了解-->
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>m</sub>
<!--字体标签front-->
<front color="red" size = 50>字体标签</front>
</body>
</html>
实体符号
大于>
小于<
因为< >这两个符号和html一些符号冲突
所以实体符是规避这种冲突的所以等号’=‘不冲突没有实体符号
空格也会冲突,所以一个空格也要实体符号来表示:
<!doctype html>
<html>
<head>
<title>实体符号</title>
</head>
<body>
<!--加小于号,想输出a<b>c-->
<!--< 是实体符,代表小于,>也是实体符,代表大于-->
b<a>c
<!--空格的实体符,表示ab之间有5个空格-->
a b
</body>
</html>
html 表格
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!--最大的属性为表格table,次之的是tr 代表一行,td代表行里面的格子-->
<table border = "1px" width = "60%" align = "center"> <!--boder="1px" 设置表格的边框为1像素宽度-->
<!--width="30px" 设置表格的边框的宽度为1像素宽度-->
<!--width="60%" 设置表格的边框的宽度占浏览器窗口的百分之60,会同比例改变-->
<!--height="150px" 设置表格的边框的高度为1像素宽度-->
<br><br><br>可以不断换行
<tr align = "center"> <!--align表示对齐方式-->
<td>no</td>
<td>name</td>
<td>date</td> //这样代表了这行里面加了三个格子
</tr> //这样代表 新建了一个表格的行
<tr>
<td>1</td>
<td>w</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>h</td>
<td>23</td> //这样就建立了一个三行三列的表格,但是同时要注意到在有包含关系的需 要缩进
</tr>
</table>
</body>
</html>
表格单元格合并 以及 th标签
<!doctype html>
<html>
<head>
<title>表格单元格的合并以及th标签</title>
</head>
<body>
<table border = "1px" width = "50%" height = "50%">
<tr>
<th>天</th>
<th>地</th>
<th>人</th> <!--th标签也是单元格标签,和td标签相比起来只是多了居中加粗的 功能 -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<td rowspan = "2">3</td>
</tr> <!--要想合并两个格,要用到rowspan这个属性,还要删掉其中一个个格子,而且都是删下面的格子,rowspan后面跟合并格子的数量-->
<!--row是上下两行合并-->
<tr>
<td>a</td>
<td>b</td>
//<td>c</td> <!--想要合并3 和c 两个格,则要删掉其中一格,这里删除c这格-->
</tr>
<!--下面是删除左右两列-->
<!--用col没有左右要求-->
<tr>
<td colspan = "2">x1</td>
// 删除<td>x2</td> <!--想要合并x1 x2左右两列的话,选择左右两列任一个删除,并在另一列写colspan 并在后加合并格子的数量-->
<td>x3/td>
</tr>
</table>
</body>
</html>
操作表格的三个标签 thead、tbody、tfoot标签
这个不是必须的,只是这样做方便后期js代码的编写
<html>
<head>
<title> </title>
</head>
<body>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot> 将一个表的分为头,体,脚三大部分,方便与管理
</body>
</html>