Web前端,CSS

1.Web开发技术概述

1.1 软件架构CS & BS

1.1.1 CS架构

  CS(Client/Server):客户端服务器模式

1.1.1.1优点

1.响应速度快

2.对于客户端网络要求低

3.用户端体验好

1.1.1.2缺点

1.对硬件要求高,维护成本高,一旦更新,所有用户都要更新

2.平台性不好,操作系统不兼容

3.对人员要求较高

1.1.2 BS架构

BS(Browser/Server)浏览器服务器模式

1.1.2.1 优点

1.维护成本低,对客服端硬件要求较低

2.跨平台性好,所有终端都可用

3.人员要求较低,只需服务端人员

1.1.2.2 缺点

1.对网络传输效率要求高

2.用户体验较差 

1.2. Web开发相关技术介绍

1.2.1.Web前端

  • HTML:是一种标记性语言,用于进行页面结构的设计(骨架)

  • CSS:是一种描述性语言,用于对网页结构进行美化(肉身外貌)

  • JavaScript:是一种编程语言(脚本语言),用于实现网页的动态效果,与服务端进行交互(灵魂)

  • jquery:JS库

  • Bootstrap/Layui/ElementUI

  • VUEJS

  • 小程序

1.2.2.Web后端

  • Tomcat

  • Servlet/JSP/WebSocket

  • 框架技术

  • 分布式微服务技术 

2.1常用标签

2.1.1 标题标签

<!--emmet:快捷生产html标签的语法-->
<!--h${这是第$级标签}*6-->
<h1 align="center">这是第1级标签</h1>
<h2 align="right">这是第2级标签</h2>
<h3 align="left">这是第3级标签</h3>
<h4 dir="ltr">这是第4级标签</h4>
<h5 dir="rtl">这是第5级标签</h5>
<h6 dir="auto">这是第6级标签</h6>

2.1.2 段落标签

xxxxxxxxxx <p>    震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事    震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事    ,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事    ,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事,震惊,两男子竟然私下发生这种事</p><p>    很不幸,今天进局子了</p>

2.1.3 文本标签

   2.1.3.1字体标签

<!--过时-->
<font face="楷体" size="30px" color="red">这是一个字体标签</font

   2.1.3.2 加粗文本

<!--加粗-->
<b>粗体文本1号</b>
<strong>粗体文本2号</strong>

   2.1.3.3 斜体文本

<!--斜体文本-->
<i>斜体文本1号</i>
<em>斜体文本2号</em>
<cite>斜体文本3号</cite>

2.1.9 多媒体标签

  2.1.3.4 下划线文本

<!--下划线文本-->
<u>下划线1号</u>
<ins>下划线2号</ins>

  2.1.3.5 删除线文本

<!--删除线文本-->
<del>删除线1号</del>
<strike>删除线2号</strike>

2.1.4 列表标签

    2.1.4.1 无序列表

<!--无序列表,有五个列表项-->
<!--ul>li{编程语言$}*5-->
<ul type="circle">
    <li>编程语言1</li>
    <li>编程语言2</li>
    <li>编程语言3</li>
    <li>编程语言4</li>
    <li>编程语言5</li>
</ul>

<ul type="square">
    <li>Java</li>
    <li>C++</li>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

    2.1.4.2 有序列表

<!--ol>li*5-->
<ol type="I">
    <li>不允许迟到</li>
    <li>不允许早退</li>
    <li>不允许上课睡觉</li>
    <li>不允许上课玩手机</li>
    <li>不允许上课刷视频</li>
</ol>

    2.1.4.3 自定义列表

<!--自定义列表-->
<dl>
    <dt>java技术栈</dt>
    <dd>Spring</dd>
    <dd>Mybatis</dd>
    <dt>前端技术栈</dt>
    <dd>WebTomcat</dd>
    <dd>Vue.JS</dd>
    <dd>Mysql</dd>
</dl>

    2.1.4.4详情列表

<!--详情列表-->
<details>
<!--    列表标题-->
    <summary>Java面向对象</summary>
<!--    列表详情(其他列表)-->
    <ol>
        <li>类</li>
        <li>对象</li>
        <li>构造器</li>
        <li>封装</li>
        <li>多态</li>
    </ol>
</details>

    2.1.4.5 列表嵌套

<ul>
    <li>视频管理
        <ul>
            <li>视频上传
                <ul>
                    <li>本地视频</li>
                    <li>外链视频</li>
                </ul>
            </li>
            <li>视频列表</li>
            <li>视频检索</li>
        </ul>
    </li>
    <li>类别管理
        <ul>
            <li>类别添加</li>
            <li>类别筛选</li>
        </ul>
    </li>
    <li>用户管理
        <ul>
            <li>用户列表</li>
            <li>用户查询</li>
        </ul>
    </li>
    <li>权限管理</li>
</ul>

2.1.5 超链接

<a href=""></a>

    target :用于设置跳转方式及跳转目标

    _blank:在新页面中打开链接不替换当前页面

   _self(默认)替换当前页面

_parent 在父页面中打开链接(常见与框架)

_top 在当前页面所在的顶层打开链接

2.1.6 iframe标签

<ul>
    <li><a href="https://www.baidu.com" target="content">跳转到百度</a></li>
    <li><a href="http://www.softeem.com" target="content">跳转到软帝</a></li>
    <li><a href="http://www.taobao.com" target="content">跳转到淘宝</a></li>
    <li><a href="Html08.html" target="content">跳转到12306</a></li>
</ul>

<iframe src="http://www.softeem.com" name="content" frameborder="0" width="100%" height="500px"></iframe>

以上的链接跳转目标为iframe

iframe常见属性:

  • src:用于在iframe中呈现的资源

  • frameborder:边框粗细

  • scrolling:是否出现滚动条,包含三个取值:yes,no,auto

  • width:设置框架的宽度

  • height:设置框架的高度

2.1.7 图片标签

<!--使用本地资源-->
<img src="img/curry.png" alt="此图片已经不见了,以后漂流瓶联系" title="三分王" width="300px" height="300px" border="10px" hspace="200px">
<!--使用在线资源-->
<img src="https://p0.pipi.cn/mmdb/fb738633dddddd230fddd2291917e3b884f3c.jpg?imageView2/1/w/160/h/220" alt="">

图片标签相关属性:

  • src:用于指定图片的地址(可以是文件地址,资源地址,base64值)

  • alt:图片标签的一个候补属性,当图片无法正常显示,使用该属性的文本进行替换

  • border:用于设置图片的边框

  • vspace:设置图片之间的垂直间距

  • hspace:设置图片之间的水平间距

2.1.8表格标签,单元格合并

HTML中经常会需要显示一些表格数据(从服务端数据库中获取的数据),以及对页面进行布局,此时我们可以使用table标签实现,所以Html中table标签主要包含两大功能:

  1. 数据展示渲染

  2. 页面布局(过时)

table标签通常会结合一些子标签进行使用:

  • caption(非必须):标题,用于设置表格标题

  • colgroup(非必须):对表格中的列进行设置

  • thead(非必须):表头

  • tbody(非必须):表格的主体区域

  • tfoot(非必须):表格的地步区域

  • tr(必须):表格中的行,一个tr就是一行

  • td/th:表格中的列