#

字符实体

编写的 HTML 代码如何被解析

• 如果使用小于号(<), 浏览器会将其后的文本解析为一个 tag
• 例如<span>hw<hjk</span>这种确实需要在代码中使用一个<，这个时候就需要使用到字符实体

HTML 中字符实体

• HTML 中字符实体是一段以连字号(&)开头，以分号(;)结尾的文本
• 实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符（如　不换行空格）
• 也可以使用字符实体代替其他不能使用标准键盘输入的字符

常见的字符实体

URL

url 代表的是统一资源定位符(Uniform Resource Locator)

• url 其实就是一个给定资源在 web 上的地址
• 每个有效的 url 都指向一个唯一的资源
• 资源可以是 HTML 页面，css 文档，图像等

URL 格式

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

和 URI 的区别

• URI(Uniform Resource Identifier) 统一资源标识符，用于标识 web 技术使用的逻辑或物理资源
• URL(Uniform Resource Locator) 统一资源定位符，俗称网络地址，相当于网络中的门牌号

URI

• URI 在某一规则下能把一个资源独一无二的识别出来
• URL 作为一个网络资源地址， 可以将将一个资源唯一的识别出来，所有 URL 是一个 URI
• URL 是 URI 的子集
• URI 并不一定是 URL

元素语义化

元素语义化就是使用正确的元素做正确的事情

标签语义化的好处

• 方便代码维护
• 减少开发者沟通成本
• 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
• 有利于 SEO 优化
• ...

SEO

搜索引擎优化(Search Engine Optimization) 是通过了解搜索引擎的运作规则来调整网站，提高网站在有关搜索引擎内的排名

单行显示超过宽度显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipis;

多行超出部分显示省略号, 前提条件：容器的宽度必须是设置固定的

overflow: hidden;
text-overflow: ellipis;
display: -webkit-box;
-webkit-line-clamp:2; // 保留几行
-webkit-box-origent: vertical;

引用其他网站图片被拒绝的解决方案

<img src="" referrerpolicy="no-reference"/>

HTML CSS 书写顺序

1. 重置样式(body/a/ul 等)
2. 先整体，后局部，从里向外，从上往下的顺序
3. 去除重复的代码，将重复的逻辑放到一个单独的 class 中，不同的代码抽到不同的 class

边框形状

border 主要是用来给盒子增加边框的，实际开发中也可以使用 border 的特性实现一些形状

案例一

<style>
  div.box{
    width: 100px;
    height: 100px;
    background-color: red;
    box-sizing: border-box;
    border: 30px solid orange;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: purple;
  }
</style>
<div class="box"></div>

div.box-no-center {
  width: 100px;
  height: 100px;
  background-color: red;
  box-sizing: border-box;
  border: 50px solid orange;
  border-top-color: blue;
  border-right-color: green;
  border-bottom-color: purple;
}

可以使用 CSS 设置各种形状

https://css-tricks.com/the-shapes-of-css/#top-of-site

web 网络字体

使用 font-family 设置 web 字体无法满足一些特殊定制的字体，即所谓的 web-safe 字体；如果需要使用这种特殊字体就需要 web fonts

web fonts 的工作原理

• 首先需要先获取到对应的字体文件，
• 当浏览器请求渲染页面字体时首先会根据 font-family查询系统中对应的字体，如果没有找到就根据@font-face()中关联的字体文件中查询，解析，使用对应的字体
• 最后在浏览器中展示
• 需要注意，在部署静态资源时需要将 HTML，CSS，JavaScript，Font 文件一起部署在静态资源服务器中，这样当用户在浏览网页时只要有引入字体文件就会被下载下来

使用步骤

• 下载字体，默认下载下来的时.ttf文件
• 使用字体
  • 将字体放到对应的目录中
  • 通过@font-face来引入字体，并且设置格式
  • 使用字体
  • @font-face的作用就是用于加载一个自定义字体

.ttf字体是 TrueType 字体，开发中某些浏览器会存在兼容性问题，需要设置其他格式的字体

• OpenType/TrueType 字体， 扩展名是.ttf, .otf 建立在 TrueType 字体之上
• Embedded OpenType 字体，扩展名是.eot, OpenType 字体的压缩版
• svg 字体，扩展名是 .svg, .svgz
• woff 表示 Web Open Font Format Web 开放字体，扩展名为.woff, 建立在 TrueType 字体上

web fonts 兼容性写法

web 字体图标

字体可以设置为各种各样的形式，如果把字体直接设置为图标的样子称之为字体图标‘

字体图标的好处

• 放大不会失帧
• 可以任意切换颜色
• 用到很多个图标时，文件相对图片较小

CSS 精灵图

什么是 CSS Sprite

• 是一种 CSS 图像合成计数，将各种小图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分

使用 CSS Sprite 的好处

• 减少网页的 http 请求数量，加快网格员响应速度，减轻服务器压力
• 减少图片总大小
• 解决了图片命名的困扰，只需要针对一张集合的图片命名

精灵图的使用

• 精灵图的原理是通过显示图片的很小一部分来展示的
• 通常使用背景
  • 设置对应元素的宽度和高度
  • 设置精灵图作为背景图片
  • 调整背景图片的位置来展示

cursor 属性

cursor 用来设置鼠标在元素上面时的显示样式 常见的值

• auto： 浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
• default: 由操作系统决定，一般是一个小箭头
• pointer: 一只小手
• text: 一条竖线
• none: 没有任何指针显示在元素上面

text-indent 属性

text-indent 属性对于行内非替换元素是无效的

line-height 对行内非替换元素的影响

line-height 属性不能撑开行内非替换元素的高度，但是实际占据的高度是行高的高度,但是可操作的范围仅有内容本身的高度

<style>
  .box {
    line-height: 50px;
    background-color: red;
  }
  div {
    border: 1px solid #000;
    height: 20px;
  }
</style>
<span class="box">hahah</span>
<div>div</div>

需要添加 box-sizing: border-box 的场景

• 有明确的设置盒子的宽度和高度的时候起作用

box-size 不起作用的场景

• 块级盒子嵌套，子元素盒子没有明确的设置宽高
• 定位，盒子的宽高通过 left, right, top, bottom 属性定位，即使占满父元素容器，设置 box-size 仍然不起作用
• flex 布局， flex 布局的子元素高度会被自动拉伸为父元素的高度

文字超出宽度显示省略号

一行显示省略号

 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

显示指定行数，最后一行超出部分显示省略号

 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置显示多少行 */
  -webkit-box-orient: vertical;
}

文字垂直方向显示

 {
  writing-mode: vertical-lr; /* 文字垂直方向显示 */
  letter-spacing: 5px; /* 文字之间保持一点距离 */
}