python之web前端day01-优快云博客

本文深入解析了C/S架构与B/S架构的区别，详细介绍了浏览器与服务器的工作原理，涵盖了HTML、CSS、JS等页面组成元素，以及notepad++、chrome等开发与测试工具的使用。同时，文章提供了HTML标签的全面指南，包括全局架构标签、文本修饰标签、格式控制标签及字符实体的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

C/S与B/S架构

C/S架构
- client：客户端
- server：服务器
B/S架构
- browser：浏览器
- server：服务器

WEB工作原理

浏览器 => 服务器：发送请求，索取相关数据。
服务器 => 浏览器：接收请求并解析，处理业务，返回数据(响应)
页面组成：HTML、CSS、JS

开发工具

编辑工具：notepad++
测试工具：chrome

HTML简介

说明：超文本标记语言，所见即所得的文本
后缀：.html或.htm，现在统一使用.html

标签格式

格式：
- 双边：<标签名属性1=“值1” 属性2=‘值2’ 属性3=值3>内容</标签名>
- 单边：<标签名属性1=“值1” 属性2=‘值2’ 属性3=值3 />
特点：
- 成对出现
- 容错性强
- 标签名已预定义
- 全部小写，注意格式
- 属性使用双引号包括
说明：标签就是HTML的骨架，最重要的组成部分。

全局架构标签

- 示例：
      <html>
      	<!--注释-->
      <head>
      	<title>网页标题</title>
      </head>
      <body text="red" bgcolor="#0000ff">
      	这是页面的内容
      </body>
      </html>
- 说明：
  - html：是文档中最大的标签，所有标签都要放在该标签内部
  - head：头部，存放页面显示以外的内容，如：标题、字符集等
  - body：身体，存放页面要显示的内容，其中的内容会显示在页面中。
- 属性：
  - text：字体颜色
  - bgcolor：背景色
- 几乎每个标签都有的属性：
  - class、id、name、style
  - 后面集合CSS与JS经常使用

常用标签(文本修饰)

- 标题：h1~h6，字体从大到小；h1一个页面中最多一个，不要为了调整字体大小而使用。
- 加粗：<b></b>、<strong></strong>
- 斜体：<i></i>、<cite></cite>、<em></em>
- 下划线：<u></u>
- 删除线：<s></s>
- 上标：<sup></sup>
- 下标：<sub></sub>
- 字体：<font></font>
  - size：大小
  - color：颜色
  - face：脸型(字体类型)

常用标签(格式控制)

- 换行：<br />，对于任意多个空格或回车，浏览器都解析为一个空格
- 段落：<p></p>，表示一个段落
- 横线：<hr />，水平的直线
- 滚动：<marquee></marquee>
- 原样：<pre></pre>，浏览中显示的内容与文档中的格式一样
- 无序列表：<ul></ul>，其中的每个元素都是一个<li></li>
  - type：disc(实心圆，默认)，circle(空心圆)，square(实心方框)
- 有序列表：<ol></ol>
  - type：1、a、A、I
  - start：序号的其实位置

字符实体

- 说明：HTML 中的预留字符必须被替换为字符实体，否则无法显示。
- 提醒：不用刻意记录字符实体，用的时候查一下就可以了。
- 示例：
      &lt;		小于 <
      &gt;		大于 >
      &nbsp;		空格
      &amp;		&
- 参考：http://www.w3school.com.cn

URL(重点)

- 说明：统一资源定位符，是URI的一种，可以唯一的标识一个网络资源。
- 组成：协议://主机:端口/文件?参数1=值1&参数2=值2
  - http：80端口，会自动省略
  - https：443端口
- 例子：http://www.baidu.com:80/index.html?page=3&wd=python

超链接(a)

- 名称：<a></a>
- 说明：超链接，可以完成页面的跳转
- 属性：
  - href：指定跳转地址
  - title：光标放上去的提示信息
  - target：新页面的打开目标
    - _self：当前标签栏
    - _blank：新的空白标签栏
    - _parent：覆盖父级页面
    - _top：覆盖最外层页面
  - name：设置锚点，可以用于跳转定位
    - 设置该属性后，可以根据其值进行跳转定位(设置a标签的href属性)
    - 如：<a name="p5"></a>，使用：<a href="xxx#p5"></a>
    - 说明：不但可以在一个页面内部跳转，也可以在不同页面间跳转。