HTML-新手入门
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基础结构
<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%">
<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>2sup>
10<sub>msub>
显示为
**
（3）
改变字体颜色、大小用font标签
属性：color（颜色）、size（大小）
<font color=red size=50>字体标签font>
显示为：
**
HTML实体符号
（1）大于小于号
实体符号特点是：以&开始，以；结束
<是小于号，>是大于号（l和g按照箭头方向指向）
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>atd>
<td>btd>
<td>dtd>
tr>
<tr>
<td>etd>
<td>ftd>
<td align="center">gtd>
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>
<tr>
<th>员工编号th>
<th>员工薪资th>
<th>部门名称th>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>4td>
<td>5td>
<td rowspan="2">6 9td>
tr>
<tr>
<td colspan="2" >7 8 td>
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>etd>
<td>ftd>
<td>gtd>
tr>
tbody>
<tfoot>
<tr>
<td>htd>
<td>itd>
<td align="center">jtd>
tr>
tfoot>
**
HTML背景颜色和背景图片
bgcolor:设置背景色
background:设置背景图片
以上的设置都是对背景进行设置
注意：图片过小，背景会呈现重复现象
<html>
<head>
<meta charset="utf-8">
<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>
**