-1. HTML&CSS 基础总结

2023-11-13

HTML&CSS Favorite

1.基础知识

1.HTML

1.1基本结构标签

1.骨架
<html>
	<head>
        <meta charset="UTF-8">
        <title></title>
    </head>    
    
    <body>
        
    </body>
</html>

2.排版标签
标题标签   <h1> 标题文本 </h1>h1>  h1~h6
段落标签   <p> 段落文本内容 </p>
水平线标签  <hr/>   水平线
换行标签    <br/>  换行  
布局标签    <div> 这是一个区域 </div>   division
    	  <span> 今日价格 </span>	

3.文本格式化标签
文字粗体     <b></b> <strong>粗体字</strong>
文字斜体	 <i></i> <em>斜体字</em>
文字加删除线  <s></s> <del>加删除线</del>
文字加下划线  <u></u> <ins>加下划线</ins>

4.标签属性
<标签名 属性1=“属性值1” 属性2="属性值2">内容</标签名>

5.图像标签
<img  src=" " alt=" " title=" " width=" " height=" " border=" " />

src="URL" 图形的路径,必填
alt="文本" 图像不能显示时的替换文本
title="文本" 鼠标悬停时显示的内容 
width/height="数字"  设置图像的宽高
border="数字"  边框的厚度

6.链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href="外部链接/内部链接/空连接/超链接"
<a href="http://www.baidu.com"></a>
<a href="index.html"></a>
<a href="#"></a> <a href=""></a>
<a href="http://www.baidu.com"><img src="banner.jpg"/></a>

target="self/blank/"  self为默认值,blank为新窗口打开
<base  target="_blank" />   把所有的连接都默认添加target,写在<head>里

text-decoration: none;
    
7.注释标签
<!-- 我是注释 -->

8.锚点
 <h3 id="two">第二集</h3>        创建链接锚点
 <a href="#two">跳转到第二集</a>   跳转接口

1.2进阶组件标签

1.表格 --多用来展示数据
<table></table>
tr - th
tr - td
tr - td

<table border="1" width="500" height="200" align="center" 
       cellspacing="0" cellpadding="1 0">
    <caption>表格顶部大标题</caption>
    <thead class="表格的头部">
		<tr class="表格的标题行">
        	<th>标题行01</th>
            <th>标题行02</th>
            <th>标题行03</th>
        </tr>
	</thead>
	<tbody class="表格的主体行">
		<tr class="表格第一行">
    		<td>第一行单元格01</td>
        	<td>第一行单元格02</td>
        	<td rowspan="2">第一行单元格03,跨行合并下边一格</td>
   		 </tr>
        <tr class="表格第二行"> 
    		<td>第二行单元格01</td>
        	<td>第二行单元格02</td>
        	<td>第二行单元格03,被跨行合并应删除</td>
   		 </tr>
        <tr class="表格第三行"> 
    		<td>第三行单元格01</td>
        	<td>第三行单元格02</td>
        	<td>第三行单元格03</td>
   		 </tr>
	</tbody>
    <tfoot class="表格的底部行">
    	<tr class="表格底部"> 
    		<td>底部单元格01</td>
        	<td>底部单元格02</td>
        	<td>底部单元格03</td>
   		 </tr>
    </tfoot>
</table> 

border 设置表格的边框,默认border="0"无边框
align  设置表格在网页中的水平对齐方式,left center right
cellspacing  设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白距离

rowspan  跨行合并,合并上下 rowspan="合并单元格的个数"
colspan  跨列合并,合并左右 colspan="合并单元格的个数"

2.列表 --多用来布局
ul - li    /无序列表
ol - li    /顺序列表
dl - dt    /标题列表
   - dd

<ul class="无序列表">
    <li>列表项01</li>    * 无序列表列表项01
    <li>列表项01</li>	  * 无序列表列表项01
    <li>列表项01</li>	  * 无序列表列表项01
</ul> 

<ol class="有序列表">
    <li>列表项01</li>    1.有序列表列表行项01
    <li>列表项01</li>	  2.有序列表列表行项01
    <li>列表项01</li>	  3.有序列表列表行项01
</ol>

<dl class="自定义列表">
    <dt>中国</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>

list-style:none; //取消列表样式

3.表单

<form action="URl地址" method="提交方式" name="表单名称">
    
</form>

action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式,其取值为get或post
name 用于指定表单的名称,以区分同一个页面中的多个表单

4.input控件
<input type="属性值" value="控件内显示的默认文本" />

<form action="URl地址" method="提交方式" name="表单名称">
    <input type="属性值" value="控件内显示的默认文本" name="控件名称"
           size="空间在页面内显示的宽度" checked="checked定义默认选中的项" 
           maxlength="允许输入最多的字符数" placeholder="First name"/>
</form>

男 <input type="radio" checked="checked" name="sex"/>
女 <input type="radio" name="sex" />

type="text/password/radio/checkbox/button/submit/reset/image/file"

5.label标签
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 
-用法一,label直接包含表单    
<label> 用户名:<input type="text" /> </label>    
-用法二,通过for 和 id来控制    
<label for="male">Male</label>    
<input type="radio" name="sex" id="male" value="male">
    
6.textares文本域控件
<textares cols="每行中的字符数" rows="显示的行数">
文本内容
</textares>

7.下拉菜单列表
请选择:
<select>
    <option selected="selected默认选中">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

1.3 HTML用例

//字体布局
<p>
    JavaScript,CSS, <em class="加效果">HTML</em>,Java,C##,<strong>Android</strong>,
</p>

<p>
    <del class="删除线">¥5800</del> <strong>¥4900</strong>
</p>  

1.4 Emmet快捷键语法

1. div+tab键
2. div*3
3. ul>li
4. div+p
5. .className
6. #idName
7. .className$*3   //生成有顺序的自增的类名

1.5 HTML5新增

1. 新增语义化标签 
<header>头部</header>
<nav>导航</nav>
<article>内容标签</article>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>底部</footer>

2. 新增多媒体标签
<audio/video controls loop > 
	<source src="" type="video/mp4" >  
    <source src="" type="audio/ogg" > 
</audio>
-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕,或者用户没有点击播放前显示的封面
-width:视频的宽度

3. 新增input表单属性
<input type="text" list="subjects" placeholder="提示文字" autofocus="autofocus" 
   required="required" accesskey="" multiple="multiple" autocomplete="on/off">

<datalist id="subjects">
	<option value="前端与移动开发" label="javascript"/>
</datalist>

<output>总金额:¥100.00</output>

4. 新增type属性 
- type=  text/password/email/tel/url/number/range/color/time/date/
datetime-local/month/week

-常用 type= 'email/url/date/time/number/tel/search/color'


5. 进度条
<progress max="100" value="100"></progress>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>

6. 内嵌入边框线的文字
<fieldset>
   <legend>内嵌入边框线的文字</legend>
</fieldset>

2.CSS

2.1 CSS基础

2.1.0 CSS基础

  1. 建议书写顺序:定位/盒子/文本

  2. 文本:(颜色,水平位置,垂直位置,首行缩进,下划线)

  3. 字体:(大小,字体,粗细,倾斜)

  4. 背景:(背景颜色,背景图片,背景透明,背景平铺,背景位置,背景滚动)

  5. 盒子模型:(宽高,边框线,外边距,内边距)

  6. 定位与浮动

  7. 显示与隐藏

    1.文本:(颜色,水平位置,垂直位置,首行缩进,下划线)
    color: black //前景色(文字颜色)
    text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式

    height: 50px; //搭配使用,行高等于高度,垂直居中
    line-height: 50px/24px;//行高,设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线(baseline)之间的间距

    vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
    baseline;bottom;text-bottom;top;

    text-indent: 2em; //首行缩进,设置第一行内容的缩进,1em就是一个汉字的宽度
    text-decoration:none;underline;overline;line-through //设置文字的装饰线

    text-shadow: //给文字添加阴影效果

    direction:
    letter-spacing
    word-spacing:
    text-transform:
    white-space:

    2.字体:(大小,字体,粗细,倾斜)
    font: font-style font-variant font-weight font-size/line-height font-family

    font-size: 16px;2em(200%) //文字大小,16px为默认
    font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体,多个字体
    font-weight:normal(400);bold(700) //用于设置文字的粗细(重量)
    font-style: normal;italic;oblique //设置文字的常规、斜体显示
    font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母

    3.背景:(背景颜色,背景图片,背景透明,背景平铺,背景位置,背景滚动)
    background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
    image position/size repeat attachment color
    background: rgba(0,0,0,0.3) //背景半透明,最后一个参数Alpha透明度,取值0~1之间
    background-color: #000000;transparent;//透明色
    background-image: url(“bg001.png”);
    background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
    background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
    background-attachment: scroll;fixed; //背景图片跟随元素关系,滚动/固定
    background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
    : left;center;right;
    : top;center;bottom;
    : center top; //常用定位

    background: linear-gradient(起始方向,颜色1,颜色2, …);
    background: linear-gradient(left,red,blue); //背景颜色线性渐变
    background: -webkit-linear-gradient(left,red,blue);

    cursor:auto;default;pointer;text;none; //设置鼠标指针(光标)在元素上面时的显示样式
    opacity: 0.2; /盒子半透明/

    4.盒子模型:(宽高,边框线,外边距,内边距)
    width: min-width;max-width;
    height: min-height;max-height;

    border: 1px solid #f00;1px solid transparent; //透明边框
    border-width:1px;
    border-style:none;dotted;dashed;soild;double;groove;ridge;inset;outset;
    border-color: #fff;

    border-radius: 50%; // 缩写属性,50%一个圆
    border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
    border-top-left-radius: 20px; //上左
    border-top-right-radius: 20px; //上右
    border-bottom-right-radius: 20px; //底右
    border-bottom-left-radius: 20px; //底左

    border-collapse:collapse; //相邻边框合并在一起

    margin: //外边距, margin一般是用来设置兄弟元素之间的间距,左右外边距
    padding: //内边距, padding一般是用来设置父子元素之间的间距

    margin: 0 auto; //块级盒子水平居中,盒子须有宽度
    text-align: center; //文字,行内元素,行内块水平居中

    box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);

    box-sizing: //用来设置盒子模型中宽高的行为
    content-box; //padding、border都布置在width、heig
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

-1. HTML&CSS 基础总结 的相关文章

  • 正睿OI补题(搜索)

    搜索 目录 P1036 NOIP2002 普及组 选数 P2392 kkksc03考前临时抱佛脚 P1025 NOIP2001 提高组 数的划分 P6201 USACO07OPEN Fliptile S P1460 USACO2 1 健康的
  • 【学习笔记】模糊控制算法

    本文目录 0 前言 1 概述 2 模糊集合 2 1 集合和论域 2 2 模糊集合的概念 2 3 模糊集合的表示方式 2 4 模糊集合的运算 3 模糊关系与模糊关系合成 3 1 笛卡尔积 3 2 关系与模糊关系 3 3 模糊关系的运算 3 4
  • Latex学习笔记二——Overleaf在线练习

    锵锵 本文是基于Overleaf的Latex学习的第二部分 目录 1 结构化文档 2 添加图表 让论文更生动可读 2 1 Graphics 2 2 Floats 2 3 Tables 3 Bibliographies 1 结构化文档 这一部
  • ZYNQ 库函数学习之SPI

    SPI是串行外设接口 Serial Peripheral Interface 的缩写 是一种高速的 全双工 同步的通信总线 并且在芯片的管脚上只占用四根线 节约了芯片的管脚 同时为PCB的布局上节省空间 提供方便 正是出于这种简单易用的特性
  • Game101现代计算机图形学入门学习笔记(七)

    光线追踪 一 光线追踪 1 为什么要使用光线追踪 二 基础光线追踪算法 1 光线 2 光线投射 1 着色过程 3 递归光线追踪 Whitted Style 1 基本过程 2 光线 表面相交 1 光线方程 3 轴对称包围盒 AABB 1 Un
  • 指针作函数返回值

    include
  • Python入门教程完整版,Python所有方向学习体系,学完即可就业

    今天给大家带来了干货 Python入门教程完整版 完整版啊 完整版 言归正传 小编该给大家介绍一下这套教程了 希望每个小伙伴都沉迷学习 无法自拔 本套教程学习时间15天 1 3天内容 为Linux基础命令 4 13天内容 为Python基础
  • java I/O流的一些常用操作

    java i o 的一些操作 文件流 FileInputStream FileOutputStream FileReader FileWriter 这四个类是专门操作文件流的 用法高度相似 区别在于前面两个是操作字节流 后面两个是操作字符流
  • 学习笔记-Spark环境搭建与使用

    一 20 04 Ubuntu安装 清华源ISO源 https mirrors tuna tsinghua edu cn ubuntu releases 20 04 下载链接 https mirrors tuna tsinghua edu c
  • CentOS 7 挂载本地光盘作为镜像源

    1 上传iso文件到 usr local src 一定要确保这个ISO文件上传完毕后再进行下面的操作 2 创建挂载目录 mkdir media CentOS7 3 挂载iso文件 mount t iso9660 o loop usr loc
  • C++ STL概述

    STL就是封装好的一些数据结构以及一些算法 C STL 标准模板库 是一套功能强大的 C 模板类 提供了通用的模板类和函数 这些模板类和函数可以实现多种流行和常用的算法和数据结构 如向量 链表 队列 栈 Standard Template
  • 如何利用JS生成二维码

    问题来源 最近在做一个项目 有这么个需求 通过生成二维码来实现网页的分享 问题分析 脑海的第一反应 当然是用js来实现 自己手写 当然不是 解决方案 使用 QRCode js QRCode js 是一个用于生成二维码的 JavaScript
  • Kerberos

    kerberos身份认证过程 第一步 账号和KDC互相认证 账号A向KDC证明自己的身份 1 账号A首先会把自己的密码hash 得到一把秘钥Kclt 2 Kclt会把当前的时间戳加密 生成一个字符串 使用 时间戳 Kclt来表示 3 将生成
  • Matlab导出动态链接库dll

    1 新建 m文件 内容 function c Add a b c a b end 保存为 Add m 2 命令行输入 gt gt mex setup MEX configured to use Microsoft Visual C 2013
  • 图像识别小车(电机部分)——电赛学习笔记(2)

    图片来源 B站唐老师讲电赛 目录 一 电机部分结构 二 步进电机示例 三 伺服电机示例 四 我们的方案 一 电机部分结构 二 步进电机示例 1 驱动器 L298N CSDN搜索使用方法 控制器 stm32 电源暂时用12V直流源 2 控制
  • python入门指南

    python入门指南 python是一门简单易学且功能强大的编程语言 它拥有高效的高级数据结构 并且能够简单而又高效的方式进行面向对象编程 python是一门解释性语言 因为无需编译和链接 在开发中节省时间 使用python解释器 调用py
  • centos7 Jumpserver堡垒机部署以及使用详情

    一 跳板机 堡垒机的概念 1 跳板机 跳板机就是一台服务器 运维人员在使用管理服务器的时候 必须先连接上跳板机 然后才能去操控内网中的服务器 才能登录到目标设备上进行维护和操作 跳板机的缺点 仅仅实现服务器登录安全 但是没有实现对于运维人员
  • 【学习笔记】开源中文对话预训练模型调研总结

    开源中文对话预训练模型调研 文章目录 开源中文对话预训练模型调研 1 CDial GPT 主要工作 LCCC数据集 数据清洗策略 基于规则的清洗 基于分类器的清洗 模型 输入表征 训练 2 GPT2 chitchat 3 EVA1 0 WD
  • 不在傻傻for循环!完美解决JPA批量插入问题

    前言 jpa在简单的增删改查方面确实帮助我们节省了大部分时间 但是面对复杂的情况就显得心有余而力不足了 最近遇到一个批量插入的情况 jpa虽然提供了saveAll方法 但是底层还是for循环save 如果遇到大量数据插入频繁与数据库交互必然
  • CSS 实现不规则元素的阴影

    大伙在工作中 尤其写页面样式 相信很多地方用到 box shadow 阴影属性 但是这个属性只能用到规则的元素上 亦或者说只能用到一个元素上 那当我们遇到不规则的元素时 想加阴影就比较棘手了 但是 CSS 提供了此问题的解决方案 今天 我们

随机推荐

  • 微信公众平台开发笔记4(关注回复自定义消息)

    基于WXJava开发 最终目的 实现关注回复自定义消息 一条文本 一条图片 点击菜单发送视频或音频 音乐可以发送但是不能正常播放 猜测是填写的地址有问题 音频上传时需要先在接口测试平台多媒体文件上传接口上传缩略图 jpeg 新建WxMess
  • 从0实现基于Linux socket聊天室-实现聊天室的登录、注册功能-3

    上一篇我们已经讲了如何搭建一个多线程的服务器模型 可以支持多个客户端同时连接服务器 本篇我们来实现多个客户端 如何实现向服务器注册信息 并实现登录的功能 想了解更多Linux 编程知识 请关注 公众号 一口Linux 数据结构 接着上一篇的
  • Redis学习:哨兵模式

    主从切换技术的方法是 当主服务器宕机后 需要手动把一台从服务器切换为主服务器 这就需要人工干预 费事费力 还会造成一段时间内服务不可用 这不是一种推荐的方式 更多时候 我们优先考虑哨兵模式 一个典型哨兵模式 哨兵配置文件 sentinel
  • freeCAD part工作台,两个物体做合集相加的布尔组合先后顺序区别

    两个紧挨 空间尺寸上无缝隙 的物体 在part 工作台下做union的布尔操作 先选中和后选中的物体顺序还是有区别的 之前一直没注意 一直遇到问题才发现 例如有如图的2个物体 这里面的cut和fusion003已经做好了 现在我想把他组合到
  • c语言中英文转换器在线转换器,汉英转换器

    路由器之家网今天精心准备的是 汉英转换器 下面是详解 汉译英 英语是国际语言 因此我们非常重视英语的 English is an international language Thus we attach great importance
  • 深入学习jquery源码之isFunction()和isPlainObject()

    深入学习jquery源码之isFunction 和isPlainObject isArray obj 概述 测试对象是否为数组 参数 obj Object 用于测试是否为数组的对象 b append isArray b true b isF
  • 网关Netfilx Zuul:---(Eureka高可用操作)

    之前我们创建完成了3个Eureka的客户端的服务操作 你会发现我们还是没有能够通过微服来进行对他访问 还是必须通过自己服务的端口号来进行访问 那么我们的微服务是没有能够完成的 这个时候我们就需要通过网关进行操作 其实网关就是为客户端提供统一
  • 使用IntelliJ IDEA中的Spring Initializr来快速构建Spring Boot/Cloud工程

    我相信许多初学者都看了Spring Boot和Spring Cloud相关的博文中 都会涉及Spring Boot工程的创建的问题 而一般所看到的都是使用IntelliJ IDEA 工具来创建 并且方便许多 而创建的方式多种多样之前我是通过
  • 标签下载文件重命名失败,download 无效

    最近用到 a 标签实现文件下载并对文件进行重新命名 遇到了一些问题 文件重命名一直失败 所幸最终还是解决了 在此记录一下 避免后来者踩坑 HTML a 元素可以创建一个到其他网页 文件 同一页面内的位置 电子邮件地址或任何其他URL的超链接
  • 极验滑块识别-通用滑块识别

    遇到滑块问题 在写爬虫的时候 经常会遇到滑块问题 很多次都想过尝试如何攻破滑块 但是每次都没成功 除了最开始的极验滑块 当时通过原图和滑块图的对比 能够得出缺口坐标 但是随着极验 网易 腾讯滑块的更新 已经不能够找到原图了 下面给出滑块通杀
  • MATLAB中表示点形状、颜色的常见符号

    颜色字符串有 c m y r g b w 和k 分别表示青 红紫 黄 红 绿 白和黑 线型字符串有 为实线 为虚线 为点线 为点虚线 及 none 表示不用线型 标记形式有 o 和 x 填入 s 代表正方形 d 代表菱形 A 为上三角形 v
  • 2020第十一届蓝桥杯10月份省赛真题(JavaB组题解)

    2020第十一届蓝桥杯10月份省赛真题 JavaB组题解 试题 A 门牌制作 试题 B 寻找 2020 试题 C 蛇形填数 试题 D 七段码 试题 E 排序 试题 F 成绩分析 试题 G 单词分析 试题 H 数字三角形 试题 I 子串分值和
  • 代码质量的评价标准

    如何评价代码质量 代码质量的评价比较主观 一般会使用以下几个词汇 可读性 可扩展性 可维护性 灵活 优雅 可重用性 可测试性 这些是从不同方面来评价 但是各个维度都彼此关联 譬如可读性和可扩展性好 我们就说这段代码的可维护性比较好 代码质量
  • QT多线程下的信号与槽机制

    目录 1 QThread类 2 创建并启动线程 3 多线程信号与槽 4 信号与槽的调用线程 5 调整信号与槽所在线程的依附关系 6 信号与槽的连接方式 QT 中 QObject 作QT中类的最终父类 具有自定义信号与槽的能力 只要继承自这个
  • javaj经典程序编程50题

    JAVA基础编程练习50题 本文对50道经典的java程序题进行详细解说 对于初学者可以跳过一些逻辑性太强的题目 比如第一题用到了方法的递归 初学者可能不理解 最好先看那些有if for while可以简单解决的程序题 但是 对于比较深入学
  • 4键电子手表说明书_4键电子手表怎么调时间的方法

    现在除了很多喜欢购买机械表以外 还有很多人喜欢购买石英表 其中就有很多人购买了4键电子手表 但是很多人往往却并不知道4键电子手表怎么调时间 那么我们今天拿卡西欧4键电子手表为例子 给大家讲解以下4键电子手表怎么调时间 首先 我们可以轻松观察
  • Linux删除文件夹命令

    Linux删除文件夹命令 linux删除目录很简单 很多人还是习惯用rmdir 不过一旦目录非空 就陷入深深的苦恼之中 现在使用rm rf命令即可 直接rm就可以了 不过要加两个参数 rf 即 rm rf 目录名字 r 就是向下递归 不管有
  • milvus笔记01--部署测试版本 milvus

    milvus笔记01 部署测试版本milvus 1 milvus 简介 2 milvus cpu 部署 2 1 基于sqlite部署milvus 2 2 基于mysql部署milvus 3 常见命令 3 1 api 案例 3 2 RESTf
  • 使用 Github Action 将 github 仓库同步到 gitee

    背景 最近将 CI CD 流程改造了一波 使用 ArgoCD 做 gitops 这样所有的集群 Yaml 文件就都存放在了 github 上的一次仓库里 但是小服务器放在家里 从 github 上拉代码时总是时不时有网络问题 导致集群资源无
  • -1. HTML&CSS 基础总结

    HTML CSS Favorite 1 基础知识 1 HTML 1 1基本结构标签 1 骨架 2 排版标签 标题标签 h1 标题文本 h1 h1 gt h1 h6 段落标签 p 段落文本内容 p 水平线标签 hr 水平线 换行标签 br 换