目 录
1.1 C-S结构（Client-Server 客户端-服务器端）
3. HTML （HyperText Markup Language 超文本标记）
1. 软件结构分类
1.1 C-S结构（Client-Server 客户端-服务器端）
特点：1）特定的客户端程序
2）服务器软件升级，客户端软件需同步升级（否则用不了新功能）
典型应用：飞秋、QQ、红蜘蛛
1.2 B-S结构（Broswer-Server 浏览器-服务器端）
特点：1）不需要特定客户端（只需要浏览器软件）
2）服务器软件升级，浏览器客户端不需要升级
典型应用：百度官网、游戏官网
2. 网站
服务器端的软件都是基于B-S结构，俗称“网站”。
网站由网页组成，一个网页就是一个HTML页面。
3. HTML （HyperText Markup Language 超文本标记）
1）第一门网页制作的语言 ，最简单。
2）由标记/标签组成。
3) 后缀名为.html/htm，浏览器打开即可。
3.1 HTML 基本结构
<html> --html开始标签
<head> --文件头（用户在浏览器主体看不到）
</head>
<body> --文件体（用户在浏览器主体看得到）
</body>
</html> --html结束标签
3.2 head文件头
作用：告诉浏览器如何解析html页面
插叙：Adobe旗下软件：PhotoShop Flash
<html>
<head>
<!-- html注释(不会被解析为标签)-->
<!-- head文件头作用：告诉浏览器如何解析html页面-->
<!-- 标题：在窗口的标题栏看到-->
<title>这是标题</title>
<!-- 告诉浏览器使用什么码表解析html文件-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- 关键词：keywords
搜索引擎：百度官网输入"java培训"，会出现多个页面
网页的排名（怎么上首页?)
1. 推广 SEO
2. SEO优化
关键词（这里为"java培训,net培训,php培训",多个关键词以,隔开)是网页排名的一个因素
"java培训" 权重100%
"java培训,net培训" 权重50%
"java培训,net培训,php培训" 权重33.3%
关键词越多，每个关键词的权重就越小，并不是越多越好（3-5个合适）
-->
<meta name="keywords" content="java培训,net培训,php培训"/>
<!-- 每个搜索出的结果为：
标题
描述
标题
描述
-->
<meta name="description" content="这是一家专门做IT职业培训的公司"/>
</head>
<body>
body的内容
</body>
</html>
NOTE： html标签分类：
有标签体标签：有开始有结束 <title></title>
没有标签体标签（空标签） <meta />
3.3 body文件体
(w3c组织，制作网页制作的规范，官网https://www.w3school.com.cn/）
文本标签
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html文本标签</title>
</head>
<body>
<!-- 正文 -->
标题1
<!-- 标题（h1~h6) 和word文档中的标题一样，标题号越大字越小 -->
<h1>标题1</h1>
<h6>标题6</h6>
<!-- 水平线(hr)-->
<hr/>
<!-- 段落(p) -->
<p>第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容</p>
<p>第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容第二个章节内容</p>
<!-- 段落缩进(blockquote) -->
<blockquote>第三个章节内容第三个章节内容第三个章节内容第三个章节内容第三个章节内容第三个章节内容第三个章节内容第三个章节内容第三个章节内容</blockquote>
<!-- 上下标(sup和sub）用于公式 -->
数学公式：y=x的平方 y=x<sup>2</sup>
水的化学式：H<sub>2</sub>O
<!-- 换行(br) -->
<br/>
下一个内容
<!-- 原样输出(pre)：按照编辑器的效果直接输出 -->
<pre>
凉州词
葡萄美酒夜光杯，欲饮琵琶马上催。
醉卧沙场君莫笑，古来征战几人回。
</pre>
<pre>
function checkName(){
alert("用户名不能为空！");
}
</pre>
<!-- 有序列表：ol(有序号的，默认1,2,3，可以改成别的) li(序列项内容) -->
<a name="list"></a>
你最喜欢的明星?
<ol type="a"><!-- type属性：序号的类型 -->
<li>吴亦凡</li>
<li>易烊千玺</li>
<li>胡歌</li>
</ol>
<!-- 无序列表：ul(无序号，默认实心圆disc) li(序列项内容) -->
学生管理系统
<ul type="disc"><!-- type属性：circle空心圆 square方块-->
<li>学生管理</li>
<li>成绩管理</li>
<li>系统管理</li>
</ul>
<!-- 项目列表标签(dl dt dd) 一般用于选项有层次结构的（只有两级，三级可以用css样式控制）-->
软件公司的组织架构
<dl>
<dt>技术总监</dt>
<dd>攻城狮1号</dd>
<dd>攻城狮2号</dd>
<dd>攻城狮3号</dd>
<dt>财务总监</dt>
<dd>出纳1号</dd>
<dd>出纳2号</dd>
<dd>出纳3号</dd>
</dl>
<!-- 行内标签(span)
块标签(div)
一般在css中用得较多
div+css网页布局
-->
<span>span的内容</span>
<div>div的内容</div>
</body>
</html>
超链接标签
超链接作用：
1）链接到资源
2）作为锚点使用
打锚点：<a name="锚点名称"></a>
去到锚点：<a href="#锚点名称">内容</a> （当前页面的某锚点处）
<a href="链接地址#锚点名称">内容</a> （链接到的资源页某锚点处）
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html超链接标签</title>
</head>
<body>
<!-- a 超链接标签：
常用的属性：
href 链接到的地址(文件或者资源)
target 打开资源的方式 _self:当前窗口打开 _blank:新窗口打开
协议执行资源的基本流程（超链接原理）：
使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行
举例：http协议执行的流程(https://www.baidu.com)
127.0.0.1 localhost
ip地址 域名
域名(www.baidu.com)在本机hosts文件(c:/windows/system32/drivers/etc/hosts)中是否有注册
有:访问对应的ip地址
比如：http://localhost就找到了域名localhost，然后访问ip地址127.0.0.1(本机ip地址)
没有：联网，找到网络运营商(DNS服务器：保存ip地址和域名)
比如：找到www.baidu.com域名，匹配找到对应的ip地址，然后访问百度服务器
再根据端口号找到此服务器上的应用程序，最后根据协议规则进行请求。。
常见的协议：
file:// 本地（局域网）协议 href的默认协议
http:// http协议 链接到域名或者IP地址(直接到达，省略根据域名找IP的过程)
thunder: 迅雷下载软件的协议
maito: 调用本地发送邮件的客户端软件(比如：联系客服)
-->
<a name="top"></a>
<!-- 同级目录下的文件中的某锚点-->
<a href="02.html文本标签.html#list" target="_blank">链接到文件</a>
<br/>
<!-- 相对路径：.代表当前目录 ..代表上一级目录 -->
<a href="./a.jpg">链接到图片</a>
<br/>
<a href="https://www.baidu.com">链接到百度</a>
<br/>
<a href="http://www.movie.com/fuchouzhe.avi">复仇者联盟(普通通道，用浏览器本身下载)</a>
<br/>
<a href="thunder://www.movie.com/fuchouzhe.avi">复仇者联盟(迅雷通道，用迅雷下载)</a>
<br/>
<a href="maito:wtt@qq.com">发送邮件</a> <!-- wtt@qq.com直接作为收件人邮箱 -->
<br/>
<a href="#ch01">去到第一章</a> <!-- 去到当前页面的某锚点 -->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a><!-- 不用拖滚，在要到达的地方打上锚点 -->
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容
<br/>
<a href="#top">返回顶部</a>
</body>
</html>
图像标签
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html图像标签</title>
</head>
<body>
<!-- img图像标签
常用属性：
src 图片源位置 路径写错了也会有个小图标
width 图片宽度
htight 图片高度
alt 替代文本 src属性失效时，alt属性的内容才会生效；否则不生效
title 提示文本 鼠标放图片上面出现
px:像素
地图(热点区域)map可以有多个热点area
-->
<!-- 相对路径，.表示当前目录，..表示上一级目录 -->
<img src="../b.jpg" alt="自拍照" usemap="#Map" title="提示文字"/>
<map name="Map">
<!-- (429,673)为左上角坐标 (597,761)为右下角坐标 -->
<area shape="rect" coords="429,673,597,761" href="03.html超链接标签.html" target="_self">
<!-- (252,346)为圆心坐标 47为半径长度 -->
<area shape="circle" coords="252,346,47" href="02.html文本标签.html" target="_blank">
</map>
</body>
</html>
转义字符
在html中，存在一些特殊字符（不能原样输出）。若想让特殊字符原样输出，需要进行转义。
特殊字符 转义字符
< < (letter than)
> > (greater than)
& &
空格
" "
' ' (IE不支持)
分 ¢
磅 £
日圆 ¥
节 §
版权 ©
注册商标 ®
乘号 ×
除号 ÷
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html转义字符</title>
</head>
<body>
<h3>标题3</h3>
<br/>
新西兰 奥克兰
<br/>
蒙牛<sup>®</sup>
<br/>
版权所有<sup>©</sup>
</body>
</html>
表格标签
用户请求服务器，若某网页只有一个table，则服务器从table的开始标签开始读，读到table的结束标签才将table的内容发送给用户。导致用户体验感差！！！因为要等所有的内容读完，才能看到所有内容。可不可以分区域读呢？
html的table划分成三个部分，每部分读完立刻返回给用户，优化表格读取的效率，提高用户体验！（但不会影响页面结果）
<thead> 头
<tbody> 体
<tfoot> 脚
NOTE：浏览器会自动加上<thead>、<tbody>、<tfoot>三个标签
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html表格标签</title>
</head>
<body>
<!--
表格中没有列的概念，有列的标签
常用的标签：
table 表格 (一个表格有多行)
tr 行 (一行有多个单元格)
td 行的单元格 (普通单元格)
th 表头的单元格 (默认居中，加粗)
caption 标题 表格第一行(居中)
rowspan 行合并
colspan 列合并
常用的属性：
border 表格的边框（默认没有） 单位：像素
width 宽度
height 高度
align 对齐方式 left：左对齐 center:居中对齐 right:右对齐
-->
<!-- 设置的是表格对齐方式，而不是单元格 -->
<table border="1" width="400px" height="200px" align="center">
<caption>2019年期末考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>软件1班</td>
<td>80</td>
</tr>
<tr>
<!-- 表示将2行单元格合并（李四占某列的2行) -->
<td rowspan="2">李四</td>
<td>软件2班</td>
<td>75</td>
</tr>
<tr>
<td>英语4班</td>
<td>85</td>
</tr>
<tr>
<td>王五</td>
<td>软件3班</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- 表示将2列单元格合并（平均分占某行的2列) -->
<td colspan="2">平均分</td>
<td>80</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html表格练习</title>
</head>
<body>
<table border="1" align="center" width="300px" height="200px">
<tr>
<th colspan="3">学生成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
</body>
</html>
表单标签
作用：采集用户输入的数据，提交给后台程序处理。
常见的表单标签：
<form> 一个表单
<input type="text"/> 单行输入域
<textarea></textarea> 多行输入域
<input type="password"/> 密码输入域 非明文的效果获取用户输入的数据
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<input type="hidden"/> 隐藏域(不会显示在页面上，但可以携带数据)
<input type="file"/> 文件选择器
<input type="submit"/> 提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
<select/> 下拉选项 <option> 下拉选项
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html表单标签</title>
</head>
<body>
<!-- 表单标签
常用的属性
action: 表单提交到的地址 点了submit按钮，表单就将数据提交到action的地址
method: 提交方式
两种提交方式：
get
1)提交的数据出现在地址栏 不安全
2)get提交的数据不超过1kb：简单数据
post
1)提交的数不会据出现在地址栏 安全
2)post提交的数据没有限制：上传文件
-->
<form name="http://localhost:8080/Web/GetData" method="post">
<!-- 单行输入域
常用的属性
value: 输入的默认值
name: 必须填，用于后台程序获取该标签的内容
size: 输入的字符数量（看到）
-->
用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25"/>
<br/>
密码：<input type="password" name="userPwd"/>
<br/>
<!-- 单选
注意：
1）同一组的单选选项使用相同的name属性就是单选按钮
2）单选选项的value属性必填（发送给后台程序的内容），不加value就什么都不发
-->
性别：<input type="radio" name="gender" value="男"/>男<!-- value中的"男"用于传送给后台 -->
<input type="radio" name="gender" value="女"/>女<!-- 标签后的"女"用于显示给用户看 -->
<br/>
<!-- 多选按钮
注意：
1）同一组的多选选项使用相同的name属性就是多选按钮
2）多选选项的value属性必填（发送给后台程序的内容），不加value就什么都不发
-->
爱好：<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
<br/>
<input type="hidden" name="id" value="001"/><!-- 后台根据id拿到001这个值-->
籍贯：
<!-- 下拉选项
name: 必须填，用于后台程序获取该标签
value: 下拉选项的value属性必填（发送给后台程序的内容），不加value就不发
-->
<select name="jiguan">
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
<option value="安徽">安徽</option>
</select>
<br/>
个人简介：
<!-- 多行输入域：输入多行文本
name: 必须填，用于后台程序获取该标签
rows: 一共有几行
cols: 一行可以输入几个字符
-->
<textarea name="info" rows="5" cols="20">
</textarea>
<br/>
<!-- 提交按钮：form表单中所有的数据都会发送到后台
value: 按钮显示内容
-->
<input type="submit" value="提交"/>
<!-- 重置按钮：form表单中所有的标签返回到初始默认状态-->
<input type="reset"/><!-- 按钮默认显示"重置" -->
</form>
</body>
</html>
框架标签
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>html框架标签</title>
</head>
<!--
格式：<frame src=""/>
src 框架内包含的页面
1）整体也是一个frame/frameset
2）一般从上往下（从左到右）划分，一个frame包含一个页面
3）有两个或两个以上的frame放在frameset（框架集）中
frameset 框架集
常用的属性
rows:按照行的方向划分框架（从上往下）
cols:按照列的方向划分框架（从左往右）
值填写子框架的比例或者长度，*表示其他框架分配之后剩下的比例
NOTE:框架标签必须放在<body></body>的外面，否则无法显示！
-->
<frameset rows="10%,*,10%">
<frame src="header.html"/>
<frameset cols="20%,*">
<frame src="menu.html"/>
<frame src="main.html" name="main"/>
</frameset>
<frame src="footer.html"/>
</frameset><noframes></noframes>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>头部页面</title>
</head>
<body>
<h3>学生选课系统</h3>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>左边菜单页面</title>
</head>
<body>
<h3>菜单选项</h3>
<ul>
<!-- 超链接可以跳转，但是显示的位置不对，应该在main.html中
target属性：指定某frame的name名称，表示指定在此frame中打开href链接中的页面
-->
<li><a href="student.html" target="main">学生管理</a></li>
<li>课程管理</li>
<li>教师管理</li>
<li>选课管理</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>中间主页面</title>
</head>
<body>
欢迎来到学生选课系统
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>底部页面</title>
</head>
<body>
<center>新希望学校<sup>®</sup> 版权所有<sup>©</sup>2018-2019</center>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>学生管理页面</title>
</head>
<body>
<center><h3>学生管理列表</h3></center>
<table border="1" align="center" width="500px" height="300px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>计算机1班</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>计算机1班</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>计算机1班</td>
</tr>
</table>
</body>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
