HTML系统结构
（1）
B/S架构：Browser / Server （浏览器/服务器的交互形式）
Browser支持哪些语言：HTML、CSS、 JavaScript
B/S架构的优缺点：
优点：升级方便，只升级服务器端代码即可。维护成本低
缺点：速度慢、体验不好、界面不炫酷
常见系统：京东、百度、天猫
（2）
C/S架构：Client / Server （客户端/服务器端的交互形式）
C/S架构的优缺点：
优点：速度快，体验好，界面炫酷
缺点：升级麻烦，维护成本较高
常见系统：QQ、微信、支付宝
**
HTML语法结构
HTML：Hyper Text Markup Language （超文本标记语言）
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签> （结束标签）
超文本: 流媒体、图片、声音、视频....
**
HTML开发工具与规范
开发HTML工具：
(1)文本编辑器，文件扩展名为 .html或 .htm
(2)DreamWeaver、HBulider…
运行HTML：
直接采用浏览器打开HTML文件
HTML的制定：
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。
HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5
前端网站帮助
提供大量文档：w3school、w3cschool
**
HTML基础结构
<!doctype html><!--此行表示HTML5的语法，去除为H4-->
<html> <!--根-->
<head></head> <!--头-->
<title>网页标题</title>
<!--网页标题，显示在网页左上角-->
<body><!--体-->
网页主体内容
</body>
</html>
注意：HTML不区分大小写，语法不严格，最好具体写
**
HTML标签
（1）段落标签
<p>一段一段一段一段</p>
<p>一段一段一段一段</p>`
**
（2）标题字标签
h1~h6 从大到小
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
**
（3）换行标签（独目标签）
<br>
**
（4）横线标签（独目标签）
属性：color（颜色）、width（宽度）
<hr>
<hr color="red" width="50%">
<!--颜色红色，宽度50%的线，居中-->
<hr color='blue' width=30%>
<!--"" '' 不用都可以-->
**
（5）预留格式
（写什么样子呈现出什么样子）
<pre>
for;;;;;;
sssss
</pre>
显示为：for;;;;;;
sssss
**
（6）字体标签
（1）
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
显示为：
**
（2）
sup标签是字体右上加字
sub标签是字体右下加字
10<sup>2</sup>
10<sub>m</sub>
显示为
**
（3）
改变字体颜色、大小用font标签
属性：color（颜色）、size（大小）
<font color=red size=50>字体标签</font>
显示为：
**
HTML实体符号
（1）大于小于号
实体符号特点是：以&开始，以；结束
<是小于号，>是大于号（l和g按照箭头方向指向）
b<a>c
<!--显示为b<a>c-->
<!--因为大于小于号和<>冲突，所以使用此符号来区分-->
**
（2）空格号
 ：空格
abc def
<!--直接加空格不显示-->
<!--正确写法如下-->
abc efg
**
HTML表格
（1）普通表格
1.table是表格 tr是行 td是列
2.align是HTML中的一个设置文本或者图片对齐方式的标签,center是align的一个属性值，表示居中，center是align的属性值。
3. border=“1px” 设置表格的边框为1像素宽度，width（ 宽度），height （高度）
<body>
<center><h1>列表</h1></center><!--让标题居中-->
<hr> <!--横线-->
<table align="center" border="1px" width="30%" height="150px">
<tr align="center"> <一行的数据都居中>
<td>a</td>
<td>b</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td align="center">g</td><!--g居中-->
</tr>
<!--两行三列-->
</table>
</body>
显示为：
**
（2）合并表格
1.row（行）合并的时候，删除“下面的”的单元格
2.col（列）合并的时候，删除哪个无所谓
<tr>
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
</tr>
3.th标签也是单元格标签，比td多的是居中、加粗
<body>
<center><table border="1px" width="50%"></center>
<!--border="1px" 设置表格的边框为1像素宽度-->
<!--width="50%"设置表格占页面总体宽度50%，可以随页面变化-->
<tr>
<th>员工编号</th><!--th居中加粗-->
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6 9</td>
<!--rowspan-行合并-->
</tr>
<tr>
<td colspan="2" >7 8 </td>
<!--colspan-列合并-->
</tr>
</table>
</body>
显示为：
**
（3）thead tbody tfoot
thead tbody tfoot在table中不是必须的，只是便于后期的JS代码的编写
格式如下：
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>h</td>
<td>i</td>
<td align="center">j</td>
</tr>
</tfoot>
**
HTML背景颜色和背景图片
bgcolor:设置背景色
background:设置背景图片
以上的设置都是对背景进行设置
注意：图片过小，背景会呈现重复现象
<html>
<head>
<meta charset="utf-8">
<!--告诉浏览器用哪一种字符编码方式打开这个文件，并不是设置这个文件的字符编码方式-->
<!--文件用的是什么编码方式，就写哪种 GBK是简体中文-->
<title>HTML背景颜色和背景图片</title>
</head>
<body bgcolor="red" background="ing/111.jpeg">
<!--图片是相对路径-->
</body>
</html>
**
HTML图片
1.设置图片的高度和宽度的时候，只设置宽度，高度会进行等比例缩放
2.img标签就是图片标签
3.src属性就是图片的路径
4.width设置宽度，height设置高度
5.title设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息
<body>
<img src="ing/111.jpeg" width="100px" title="我是图片" alt="图片找不到">
<br><br><br>
<img src="ing/111.jpeg" >
<br><br><br>
<img src="in/111.jpeg" alt="图片找不到">
</body>
**
1423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
