静态页面设计

常用的软件架构

常用的软件架构分为C/S、B/S两种模式。

C/S:

Client/Server 客户端/服务器端，在用户本地有一个客户端程序，在远程有一个服务器端程序，本地客户端通过应用程序访问服务器端内容。

优点：用户体验好

缺点：开发、安装，部署，维护 麻烦

B/S:

Browser/Server 浏览器/服务器端，只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。

 优点： 开发、安装，部署，维护 简单
 缺点：1. 如果应用过大，用户的体验可能会受到影响。2. 对硬件要求过高。

静态资源：使用静态网页开发技术发布的资源。

Html静态网页：

概念：是最基础的网页开发语言，Hyper Text Markup Language 超文本标记语言
        * 超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
        * 标记语言: 由标签构成的语言。<标签名称> 如 html，xml，标记语言不是编程语言

标签

围堵标签：

有开始标签和结束标签。

<h1> to <h6>：标题标签 h1~h6:字体大小逐渐递减的文字标题标签
<font>:字体标签
<ol>:有序列表，定义一个有顺序的列表，如123、ABC等
<ul>:无序列表，定义一个没有顺序的列表，列表每一项用符号表示
<li>:列表项
<a>:超链接标签，标签内的内容被点击会跳转到指导地址。属性href：指定访问资源的URL(统一资源定位符)、target：指定打开资源的方式=_self:默认值，在当前页面打开、_blank：在空白页面打开
<div>:块标签，每一个div块独占一行。
<span>:块标签，可以多个span块放入一行中
<header>/<footer>:语义标签，增强可读性的标签
<table>:表格标签，定义一个表格，属性width：宽度、border：边框、cellpadding：定义内容和单元格的距离、cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、bgcolor：背景色、align：对齐方式

        <tr>：定义行，属性bgcolor：背景色、align：对齐方式
        <td>：定义单元格，属性colspan：合并列、rowspan：合并行
        <th>：定义表头单元格
        <caption>：表格标题

<form>:表单标签，用于定义表单的，将输入框中的数据封装到表单进行提交。可以定义一个范围，范围代表采集用户数据的范围

属性action：指定表单提交数据后的URL、 method:指定提交方式，常用"get"."post"两种。          <input>:输入框，可以通过type属性值，改变元素展示的样式。属性type：text：文本输入框，默认值，placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息，password：密码输入框，显示输入的数据为符号，radio:单选框，要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。checkbox：复选框。file：文件选择框，label：指定输入项的文字描述信息。select: 下拉列表，option，指定列表项

自闭合标签：

开始标签和结束标签在一起。

<p>:段落标签,表示标签后跟的文字是一段文字
<br>：换行标签，将标签前与标签后的内容换行
<hr>：展示一条水平线，可以设置长度宽度颜色等
<b>：字体加粗
<i>：字体斜体
<center>:文本居中
<img>:图片，属性src指定图片的位置，并且可以设置图片的长宽高和超链接。路径./代表当前目录 。../代表上一级目录

css

css概念： Cascading Style Sheets 层叠样式表。层叠：多个样式可以作用在同一个html的元素上，同时生效。

    好处

        1. 功能强大
        2. 将内容展示和样式控制分离
            * 降低耦合度。解耦
            * 让分工协作更容易
            * 提高开发效率。

    分类

    内连样式，定义在标签内属性中的样式。
        作用在一个标签中
    内部样式，定义在页面头标签中的样式，可以供页面中全部标签使用。
        作用在一个页面中
    外部样式，在页面外建一个专门存放样式的文件，所有的页面使用link标签导入后都能使用
        可以作用在多个页面中

   选择器

    基础选择器
        id选择器，#id属性值{}，选择具体的id属性值的元素
        类选择器，.class属性值{}，选择具有相同的class属性值的元素。
        元素选择器，标签名称{}，选择具有相同标签名称的元素
    拓展选择器
        所有选择器，*{}，选择所有元素
        并集选择器，选择器1,选择器2{}，满足两者其一的都选择
        子选择器，选择器1 选择器2{}，筛选包含在选择器1元素下的选择器2元素
        父选择器，选择器1 > 选择器2{}，筛选拥有选择器2元素的选择器1元素
        属性选择器，元素名称[属性名="属性值"]{}，选择元素名称，属性名=属性值的元素
        伪类选择器，元素:状态{}，选择指定状态的元素