00-01-HTML（一）
一、系统结构
1. B/S架构
- Browser / Server（浏览器/服务器的交互形式）
- Browser支持的语言：
- HTML CSS Javascript
- 写HTML CSS Javascript代码的这些人称为WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西）
- 前端页面上的图片需要UI设计师完成。（PS对Java程序员来说没有太高的要求）
- B/S架构的系统的优缺点：
- 优点：升级方便，只需要升级服务端代码，维护成本低
- 缺点：速度慢，体验不好，界面不炫酷
- 企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公所需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做到数据的增删改查即可，并且企业内部更注重维护的成本
- B/S架构系统的代表：
- 京东、百度、天猫....
2. C/S架构
- Client / Server（客户端/服务器端的交互形式）
- C/S架构的优缺点：
- 优点：速度快，体验好，界面炫酷（娱乐性的系统都是C/S系统）
- 缺点：升级麻烦，维护成本较高
- 常见的C/S架构系统：
- QQ、微信、支付宝....
二、HTML概述
1. HTML：Hyper Text Markup Language
- 由大量的标签组成，每一个标签都有开始标签和结束标签
<标签> <标签> <标签 属性名="属性值" 属性名="属性值"> </标签> </标签> </标签> - 超文本：流媒体、图片、声音、视频....
- HTML可使用普通文本编辑器开发，创建的文件扩展名是.html或.htm
- HTML也有专业的开发工具，例如：
- Dreamweaver、HBuilder....
- 直接采用浏览器打开HTML文件就是运行
2. HTML的制定者
- W3C：世界万维网联盟
- W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码
- HTML规范目前最高的版本是：HTML5.0，简称H5
- 本文学习的是HTML4.0（主要是学习HTML的基本用法）
- W3C制定了很多规范：
- HTML、XML、http协议、https协议....
- 为了方便中国web前端程序员的开发，一些公司提供了大量的帮助文档（和W3C没有关系）
- w3school：先出现的
- w3cschool：后出现的
三、我的第一个HTML页面
HTML的基本框架
<!--
1. 这是html的注释
2. <!doctype html>表示HTML5语法，去掉表示HTML4.0
-->
<!doctype html>
<html>
<!--头-->
<head>
<title>网页标题</title>
</head>
<!--体-->
<body>
网页的主体内容。
</body>
</html>四、基本标签
1. 段落标记
- 示例代码
<p> 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 </p> <p> 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 </p> <p> 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 </p>
- 效果
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
2. 标题字
- HTML预留的格式，和word中的标题字相同
- 示例代码
<h1>h1标题</h1> <h2>h2标题</h2> <h3>h3标题</h3> <h4>h4标题</h4> <h5>h5标题</h5> <h6>h6标题</h6>
- 效果
h1标题
h2标题
h3标题
h4标题
h5标题
h6标题
3. 换行标记
- br标签是一个独目标记
- 示例代码
从这里开始<br>换行
- 效果
从这里开始
换行
4. 横线
- 独目标记
- 示例代码
<hr> <!-- color和width都是hr标签的属性 --> <hr color="red" width="50%">
- 效果
5. 预留格式
- 示例代码
<pre> 这里的 文本格式都 会被预留 像这样 包括缩进和空格 </pre> - 效果
这里的 文本格式都 会被预留 像这样 包括缩进和空格
6. 删除字
- 示例代码
<del>删除字</del>
- 效果
删除字
7. 插入字
- 示例代码
<ins>插入字</ins>
- 效果
插入字
8. 粗体字
- 示例代码
<b>粗体字</b>
- 效果
粗体字
9. 斜体字
- 示范代码
<i>斜体字</i>
- 效果
斜体字
10. 右下角加字
- 示例代码
H<sub>2</sub>O
- 效果
H2O
11. 右上角加字
- 示例代码
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
- 效果
a2+b2=c2
12. 字体标签
- 示例代码
<font color="green" size="40px"> 字体标签 </font> </body> </html> - 效果
五、实体符号
1. 实体符号特点
- 以&开始，以;结束。<是小于号，>是大于号
- 示例代码
<!-- < -->
1<2
<!-- > -->
3>2
<!-- （空格） -->
3.141 592 653 589 932...- 效果
1<2 3>2 3.141 592 653 589 932...
六、表格
1. 基本表格
- 示例代码
<!--
border="1px"表示设置表格的边框为1像素宽度。
width 宽度
height 高度
align 对齐方式
-->
<table align="center" border="1px" width="300px" height="150px">
<tr align="left">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<!--
使用百分比宽度，表格宽度可随页面宽度发生改变。
-->
<table align="center" border="1px" width="60%">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>- 效果
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
2. 单元格合并、th标签
- 示例代码
<!--
1.row合并的时候，删除下面的单元格。
2.col合并的时候，对删除哪个没有要求。
-->
<table border="1px" width="300px" height="150px">
<!-- th标签也是单元格标签，比td多的是加粗、居中。 -->
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td>
</tr>
<tr>
<td colspan="2">3-1</td>
</tr>
</table>- 效果
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | ||
3. thead、tbody、tfoot标签
- 示例代码
<!-- 在table中不是必须的，只是这样做便于后期JS代码的编写 -->
<table border="1px" width="300px" height="150px">
<!-- 头 -->
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<!-- 体 -->
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
</tbody>
<!-- 脚 -->
<tfoot>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td>
</tr>
<tr>
<td colspan="2">3-1</td>
</tr>
</tfoot>
</table>- 效果
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | ||
七、背景颜色和背景图片
- 示例代码
<!--
bgcolor 设置背景色
background 设置背景图片
以上的设置都是对背景进行设置
-->
<body bgcolor="#c85762" background="sources/img/00-01/00-01-07-01.jpg">
</body>- 效果
