Document

Web前端,CSS

2023-08-19
dfer
428
前端 css CSDN

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标签主要包含两大功能:

数据展示渲染
页面布局(过时)

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

caption(非必须):标题，用于设置表格标题
colgroup(非必须):对表格中的列进行设置
thead(非必须):表头
tbody(非必须):表格的主体区域
tfoot(非必须):表格的地步区域
tr(必须):表格中的行，一个tr就是一行
td/th:表格中的列

上一篇：前端= 结构（HTM

下一篇： CSS:html进阶