Welisit的博客

移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；原生App开发（iOS、Android、RN、uniapp、Flutter等）小程序开发（原生小程序、uniapp、Taro等）Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）

在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？过多的使用div不够语义化不利于SEO的优化

官方文档的翻译：vertical-align会影响在一个中的位置思考：一个div没有设置高度的时候，会不会有高度？但是内容撑起来高度的本质是什么呢？行高为什么可以撑起div的高度？

bottom : 0;} .box2 {} .box3 {/* 两件事情:1.让元素向下位移父元素的50%2.让元素向上位移自身的50%*/ /* margin-top的百分比是相对于包含块(父元素)的宽度 */ /* margin-top: 50%;top : 50%;

Flexbox翻译为弹性盒子:flex布局是目前web开发中使用最多的布局方案：◼ 为什么需要flex布局呢?原来的布局存在哪些痛点呢? 举例说明:所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了;自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.flexbox 在使用时, 我们最担心的是它的兼容性问题:两个重要的概念：当flex container中的子元素变成了flex item时, 具备一下特点:设置 display 属性为 flex 或

◼ 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。◼ 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果◼ 可以通过float属性让元素产生浮动效果，float的常用取值将多个行内级元素(间隙)去除的方法3.jd多列布局案例一由于浮动元素脱离了标准流，变成了元素，所以不再向父元素汇报高度解决父元素高度坍塌问题的过程，一般叫做 清浮动（清理浮动、清除浮动）清浮动的目的是如何清除浮动呢? 使用 属性clear 属性是做什么的呢?clear 的常用取值那么我们可以

默认情况下，元素都是按照（标准流、常规流、正常流、文档流【document flow】）进行排布在标准流中，可以使用对元素进行定位比较明显的缺点是如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:定位在开发中非常常见:利用position可以对元素进行定位，常用取值有5个:默认值:使用下面的值, 可以让元素变成 定位元素(positioned element)position属性的默认值元素按照 normal flow 布局，原有

◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:◼ 假如我们将border宽度设置成50会是什么效果呢?

emmet

◼ 在开发一个网页的过程中, 很多数据都是以列表的形式存在的◼ 事实上现在很多的列表功能采用了不同的方案来实现:方案一: 使用来实现(比如汽车之家, 知乎上的很多列表)方案二: 使用, 使用元素语义化的方式实现;◼ 事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:◼ HTML提供了3组常用的用来展示列表的元素◼ ol（ordered list）◼ li（list item）◼ ul（unordered list）◼ li（list item）◼ dl（definit

background-position可以用于设置背景图片一直处于居中显示，很多网页为了让背景图片在浏览器窗口缩放时背景图片一直处于居中显示，就会用到这个值。◼ background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面。◼ 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。/* 设置背景的尺寸 *//* 设置背景图片 *//* 设置背景图片 *//* 设置背景图片 *//* 设置背景图片 */

◼ HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性内容（content） : 元素的内容width/height内边距（padding） : 元素和内容之间的间距边框（border） : 元素自己的边框外边距（margin）: 元素和其他元素之间的间距◼ 因为盒子有四边, 所以都包括四个边:在浏览器的开发者工具中◼ 设置内容是通过宽度和高度设置的:◼ 注意: 对于来说, 设置!◼ 另外我们还可以设置如下属性:◼ 下面两个属性不常用:4.内边距 - padding◼ 用于设

◼ CSS的某些属性具有继承性(Inherited):如果一个属性具备继承性, 那么在该元素上设置后, 它的;当然, 如果, 那么(不管继承过来的属性权重多高);◼ 如何知道一个属性是否具有继承性呢?常见的都具有继承性;这些不用刻意去记, 用的多自然就记住了;◼ 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:.boxcolor;*//* 相对于自身字体(父元素的字体) *//* 浏览器 16px */font-size;

◼ link元素是外部资源链接元素，规范了文档与外部资源的关系◼ 最常用的链接是样式表（CSS）；◼ link元素常见的属性：href：此属性指定被链接资源的URL。URL 可以是绝对的，也可以是相对的。rel：指定链接类型，常见的链接类型：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_typesicon：站点图标；stylesheet：CSS样式；

常用的伪元素有:before、::before:after、::after为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line。

font-size。

text-decoration用于设置文字的装饰线noneunderlineoverlinea元素有下划线的本质是被添加了text-decoration属性div;p;h1;/* 去除a标签原有的下划线 */a;

CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表），是为网页添加样式的代码。◼ CSS是一种语言吗？(知道即可)

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站， 以及提高网站在有关搜索引擎内排名的方式。◼ 蛋糕网站为例。

一个完整的HTML结构包括哪几部分呢？

简单来说，注释就是一段代码说明-- 这是一段注释 -->注释是只给开发者看的，浏览器并不会把注释显示给用户看。