应用程序的分类
客户端/服务器
Client / Server CS模式
用户需要下载安装一个客户端才能使用。如通讯工具、网游、购物软件等。
特点:功能丰富,安装略微繁琐,需要更新,不同平台,软件不同
浏览器/服务器
Browser / Server BS模式
用户只需要一个流量拿起就能使用。如各种商业网站、XXX系统等。
特点:功能较独立的客户端略简单,无需下载安装,无需更新,平台无关。
HTML
Hyper Text Markup Language 超文本标记语言
超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件、超链接等。
标记:也可以称为标签,用<>括起来的一个特定单词,整体称为标记或标签,分为单标签和双标签。
- 单标签:<单词/>
- 双标签:<单词></单词>
标签的类型
- 块级元素,占页面中的一整行。block
- 行内元素,占一行中的一部分。inline
标签的属性
标签第一个中括号中,使用 属性=“值” ,让某个标签拥有特定属性。
如<meta charset="utf-8">
中,charset="utf-8"就是meta标签的属性
chartset称为属性名,utf-8称为属性值。
如果有多个属性,使用空格隔开。
如<div id="xxx" class="xxx"></div>
。
网页基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
创建一个文本文档,将以上内容进行保存,文档的后缀名改为.html,用浏览器就能解释运行。
HTML注释
<!-- HTML中的注释 -->
页面种显示颜色的方式
- 颜色单词,如red、blue、green等
- 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色,数字范围[0,255],值越大,对应的颜色越深
- 颜色的十六进制RGB。#FF0000表示红色,相当于RGB(255,0,0)
资源的路径
-
绝对路径:资源的完整地址。如在线图片地址或带有盘符的地址
-
相对路径:从当前页面出发,找到图片所在位置
- 使用“…/”跳出当前目录
- 使用"xxx/"进入xxx目录
常用标签
文字
标签名 | 作用 |
---|---|
h1~h6 | 块级元素。标题。文字加粗,1最大,6最小。通常用h1~h3 |
p | 块级元素。段落。 |
span | 行内元素。 |
pre | 块级元素。预处理标签。 |
i | 行内元素。倾斜。 |
u | 行内元素。下划线。 |
b | 行内元素。加粗。 |
sub | 行内元素。文字下标。 |
sup | 行内元素。文字上标。 |
以上标签都是双标签 |
用法:复制表情对应的十进制或十六进制的代码,最好使用span显示
<!--十进制 &#特定值;-->
<span>⭐</span>
<!--十六进制 &#x特定值; -->
<span>⌛</span>
图片img
单标签,行内元素
<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">
列表ul/ol/li
双标签,块级元素,li是ul或ol的子标签
无序列表ul
默认每一项前用实心圆符号修饰
通过type属性修改符号
- disc 默认,实心圆
- circle 空心圆
- square 正方形
- none 去掉修饰符号
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
有序列表ol
默认每一项前用自增数字修饰
通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>
表格table
表格中的标签 | 作用 |
---|---|
tr | 表格中的行 |
td | 每行中的单元格 |
th | 特殊的单元格,表头,文字加粗居中 |
td可以通过
colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行
<table border="1">
<tr>
<th></th>
<th>上课时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<th>8.00-8.45</th>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<th>9.05-9.50</th>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<th>10.10-10.55</th>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<th>11.05-11.50</th>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td colspan="7" align="center">午休</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<th>14.00-14.45</th>
<td>体育</td>
<td>音乐</td>
<td>科技</td>
<td>自然</td>
<td>美术</td>
</tr>
<tr>
<th>14.45-15.00</th>
<td colspan="5" align="center">眼保健操</td>
</tr>
<tr>
<th>15.10-15.55</th>
<td>音乐</td>
<td>体育</td>
<td>自然</td>
<td>美术</td>
<td>科技</td>
</tr>
<tr>
<th>16.05-16.50</th>
<td colspan="6" align="center">大扫除</td>
</tr>
<tr>
<td colspan="7" align="center">放学</td>
</tr>
</table>
多媒体
音频audio
<audio controls autoplay loop muted >
<source src="xxx.mp3