本文详细探讨了HTML5在C/S和B/S架构中的应用，解析了HTML5中常用的标签，特别是无序列表和页面分割技术，旨在帮助读者深入理解HTML5在网页设计中的核心作用。
/**
* C/S, B/S 架构
* html5 常用标签
* 列表标签
* 页面分割
*/
1.C/S, B/S 架构
1.1 C/S 架构（客户端/服务器）
1.1.1 C/S 架构的客户端程序需要单独安装以后，才可以实现与服务器的交互
1.1.2 它主要是应用在局域网中，使用范围较小，安全性高
1.1.3 C/S 架构维护成本比较高
1.2 B/S 架构（浏览器/服务器）
1.2.1 B/S 架构中的客户端不用安装，打开浏览器就可以作为客户端与服务器交互
1.2.2 它主要是应用在互联网中，使用范围大，安全性不如 C/S 架构高
1.2.3 B/S 架构维护成本低
注意：编写 B/S 架构的应用程序，需要使用一种技术-----html
2.html页面介绍与常用标签
<!DOCTYPE html> <!-- 声明当前 html 的版本为 html5 -->
<html lang="en"> <!-- html 的页面，代码的开始 -->
<head> <!-- 用于设置页面的头部信息 -->
<meta charset="UTF-8"> <!-- 设置当前的网页编码为 UTF-8 中文编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是标题</title> <!-- 网页的标签页名 -->
</head>
<body> <!-- 网页的主体 -->
<b>html:hypertext markup language 超文本标记语言</b> <!-- b标签：加粗 -->
<hr> <!-- 水平线标签 -->
<a href="main.html">我是超链接标签，可以点击跳转其它页面</a>
<br> <!-- 换行标签 -->
<img src="img/scroll_3.jpg" width="500px" height="188px" alt="图片不存在"/> <!-- 图片标签 -->
alt----------图片找不到的提示信息
<hr>
<a href="demo/index2.html">去 demo 目录下的 index2 页面</a>
<hr>
<a href="demo/index2.html" target="_blank">去 demo 目录下的 index2 页面</a>
target="_blank"---------当前页不变，产生一个新的页面显示跳转以后的结果
<hr>
<a href="#aa">aa</a> <!-- 点击跳转到 id 为 aa 的标签位置 -->
<a id="aa">ssdassaa</a>
<hr>
<!-- 标题标签 h1 最大，h6 最小 -->
<h1>1</h1>
<h6>6</h6>
<hr>
<!--
1.下一级目录的文件：目录名/文件名（后缀也要）
2.上一级目录的文件：../文件名
-->
<!-- 链接可以外链 -->
<a href="http://www.baidu.com/">百度</a>
<hr>
<!-- 图片链接 -->
<a href="main.html">
<img src="https://www.baidu.com/img/dong_528d34b686d4889666f77c62b9a65857.gif"/>
</a>
</body>
</html> <!-- html 代码的结束 -->
注意：如果在写 html 代码时，没有指定html,body,head这些标签，写的内容将会默认包含在 body 中
3.列表标签
<p>第一段</p> <!-- 段落标签 -->
<p>第二段</p>
3.1 无序列表标签（ul）
每一行列表前，会有一个黑圆点
<ul>
<li>张三</li>
<li>李四</li>
</ul>
3.2 有序列表标签（ol）
每一行列表前，会有一个编号（连续的）
<ol>
<li>张三</li>
<li>李四</li>
</ol>
3.3 描述列表标签
一般用于描述图片、文字信息，会向后缩进
<dt></dt>---------用于包含图片
<dd></dd>---------用于包含文字
<dl>
<dt><img src="note/1.jpg" ></dt>
<dd>笔记</dd>
</dl>
4.页面分割
<!-- body 去掉或放最下面 -->
<body></body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--body只有一个页面，怎么把一个页面分成多个页面呢？-->
<!-- rows 按行分割：上面的页面部分占20%，下面的页面部分占剩下的全部（80%） -->
<frameset rows="20%,*">
<!-- 上面部分放 top.html 页面 -->
<frame src="top.html" scrolling="no"> <!-- scrolling="no" 不要滚动 -->
<!-- cols 按列分割：左边的页面部分占200px，右边的页面部分占剩下的全部 -->
<frameset cols="200px,*" frameborder="0"> <!-- frameborder="0" 边框为 0 -->
<!-- 左面部分放 left.html 页面 -->
<frame src="left.html">
<!-- 右边部分放 rigth.html 页面 -->
<frame src="rigth.html" name="rigth"> <!-- name 面板的名字 -->
</frameset>
</frameset>
<body></body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
