前端之HTML 和CSS

语义化标签

优点

有利于SEO（SEO是搜索引擎优化的逻辑，提升文章在搜索引擎中的自然排名。）
使得代码更具有可读性、减少差异有利于团队开发和维护
方便其他设备解析（如：屏幕阅读器、盲人阅读器、移动设备等）

行内、块级、行内块元素、空元素

行内（display: inline）

行内元素水平排列、不独占一行、相邻行内元素紧密排列、不可设置width、height属性

css 复制代码

* a - 锚点
 
* b - 粗体 ( 不推荐 )
 
* big - 大字体
 
* br - 换行
 
* i - 斜体
 
* img - 图片
 
* input - 输入框
 
* label - 表格标签
 
* q - 短引用
 
* span - 常用内联容器，定义文本内区块
 
* textarea - 多行文本输入框
 
* u - 下划线

块元素（display: block）

独占一行垂直排列、可设置 width、 height 属性

css 复制代码

div
h1 ~ h6
hr
p
ul - 无序列表
ol - 排序表单

行内块元素（display:inline-block）

既具有块级元素的特点，也有行内元素的特点

css 复制代码

<br/> //换行
 
<hr> //分隔线
 
<input> //文本框等
 
<img> //图片
 
<td> //单元格

空元素

只有开始标签没有结束标签

css 复制代码

br
hr
img
link
input

DOCTYPE (⽂档类型)

它的作用就是告诉浏览器应该以什么样的文档类型（XHTML或者HTML）来解析。它必须声明到文档的第一行浏览器渲染页面有两种模式：标准模式（默认）：浏览器以其所支持的最高标准来呈现页面。怪异模式：页面以一种比较宽松的向后兼容的方式来显示

HTML（超文本标记语言）、 XHTML（可扩展超文本标记语言）

XHTML 是一种以XML（可扩展标记语言）格式编写的HTML。它被视为更严格、更纯净的HTML版本。XHTML的目标是取代HTML 4.01 它的特点如下：

XHTML属性必须使用小写，属性值必须用引号包围，禁止属性的最小化。
元素必须始终关闭，文档必须有根元素。
元素必须被正确地嵌套并关闭

浏览器是如何渲染页面的

解析文档构建 DOM 树

解析完HTML/XHTML/SVG这三个文件之后生成 DOM 树，

解析样式表、生成CSS规则树，

解析JavaScript脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。
构建渲染树

解析完文档之后，浏览器引擎会将css规则树附着到 DOM树上，并根据DOM树和css规则树构造渲染树。
布局和绘制渲染树

defer 和 async

相同点： 都是用于异步加载和执行JavaScript脚本的方式

不同点：

defer 脚本会等到整个页面在内存中正常渲染结束（包括DOM结构的完全生成以及其他脚本的执行完成）后才会执行。这意味着如果页面包含多个defer脚本，它们的执行顺序是按照它们在HTML文档中出现的顺序进行的。
async 脚本一旦下载完，渲染引擎就会中断渲染并执行这个脚本，然后再继续渲染。因此，如果页面中存在多个async脚本，它们的执行顺序是不确定的，完全依赖于网络传输的结果，即谁先下载完毕谁先执行。

href 和 scr 之间的区别

相同点： 都是用于指定资源地址的重要属性 不同点：

href ：超文本引用，主要用于建立当前元素和文档之间的链接，通常用于link、a；它指向网络资源的位置。
scr：主要作用是将文件下载到html页面中，通常用于 img、script、iframe；它指向资源下载并应用到文档中（替换当前元素），

HTML5 drag（/dræɡ/：拖） API

dragstart：开始拖放操作时触发
drag：正在拖放时触发
dragenter：进入某个元素时触发
dragover：在某个元素内移动时触发
dragleave：正在移出某个元素时触发
drop（/drɒp/：下降）: 完全移出某个元素时触发
dragend：结束拖放操作时触发

canvas

js 复制代码

       <canvas id="myCanvas" width="900" height="900"></canvas>

    <script>

        const ctx=myCanvas.getContext("2d");
        ctx.beginPath(); // 开始绘图路径

        ctx.moveTo(100,100); // 移动到绘制点起点
        ctx.lineTo(50,200); //  移动到绘制点起点
        ctx.lineTo(150,200); 

        ctx.closePath();  //闭合绘图
        ctx.strokeStyle="#000000"; // 指定描边颜色
        ctx.stroke(); // 绘制图形的边界轮廓

        ctx.beginPath();
        ctx.arc(100,150,70,0,360*Math.PI/180,true); // 圆心、半径、起始弧度、 终止弧度、 是否逆时针
        ctx.stroke();
        ctx.closePath();  //闭合绘图
    </script>

如何用css画一个三角形

浮动

如何进行浮动

float：left、right、none或inherit[/ɪnˈherɪt/: 继承]（左浮动、右浮动、不浮动或继承于父级的浮动属性）

设置元素浮动后，该元素的 display 值自动变成 block

清除浮动

清除浮动的主要原因是。当子元素设置为浮动后，它们就不再占用原先的位置，因此无法撑开没有设置高度的父元素，这就导致父元素的高度变为0。在这种情况下，如果后续的结构直接往上跑，就会对页面布局造成混乱。

清除浮动的方式

给父级盒子设置固定高度

伪元素

css 复制代码

    .cleafix:after{
       content:'';

       display: block;

       clear: both;
    }

父级盒子添加overflow: hidden 触发BFC

一般情况使用2、3 即可

什么是BFC

块级格式化上下文、它会形成一个相对于外界的独立空间、使内部子元素不会影响到外部的元素

触发条件

浮动元素
overflow值不为 visible（默认）、为auto（根据情况来决定是否出现滚动条）、scroll（无论是否溢出都出现滚动条）、hidden（溢出裁剪）
定位
display的值为inline-block、table、inline-table、flex、inline-flex、grid、inline-grid

应用场景

防止margin塌陷
清除内部浮动

文本溢出省略号

单行

css 复制代码

.text {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示省略部分 */
}

多行

css 复制代码

.text {
  display: -webkit-box; /* Chrome, Safari, Opera （WebKit内核的浏览器）*/
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示省略部分 */
}

或
.text {
    position: relative;
    overflow: hidden;
    line-height: 20px; /* 控制行数 */
    height: 40px;
    ::after {};
    position: absolute;
    content："...";
}

css 权重优先级

!important（10000）> 内联样式（1000）> ID 选择器（100）> 类选择器（10）> 伪元素选择器（1）> 通配符选择器（0）

前端之HTML 和CSS

语义化标签

优点

行内、块级、行内块元素、 空元素

行内 （display: inline）

块元素（display: block）

行内块元素 （display:inline-block）

空元素

DOCTYPE (⽂档类型)

HTML（超文本标记语言）、 XHTML（可扩展超文本标记语言）

浏览器是如何渲染页面的

defer 和 async

href 和 scr 之间的区别

HTML5 drag（/dræɡ/：拖） API

canvas

如何用css画一个三角形

浮动

如何进行浮动

清除浮动

什么是BFC

文本溢出省略号

css 权重优先级

行内、块级、行内块元素、空元素

行内（display: inline）

行内块元素（display:inline-block）