企业官网建设流程全解析

中文游戏制作软件,沈阳seo哪家公司,详情页设计策划,找回微信一、HTML#xff1a;页面的骨架 核心作用#xff1a;定义页面的结构和语义#xff0c;告诉浏览器 “显示什么内容”。 基础语法 标签#xff1a;分为双标签#xff08;div/div、p/p#xff09;和单标签#xff08;img/、…一、HTML页面的骨架核心作用定义页面的结构和语义告诉浏览器 “显示什么内容”。基础语法标签分为双标签div/div、p/p和单标签img/、input/。属性标签的附加信息如id、class、src、href。核心标签分类语义化标签header页头、nav导航、main主体、article文章、footer页脚替代无意义的div。文本标签h1-h6标题、p段落、a链接、strong加粗强调。表单标签form表单容器、input输入框type 含 text/radio/checkbox/submit、select下拉框、textarea多行文本。多媒体标签img图片必填src和alt、audio音频、video视频。关键知识点标签嵌套规则块级标签可嵌套行内标签行内标签不能嵌套块级标签。字符实体nbsp;空格、lt;小于号、gt;大于号。二、CSS页面的皮肤核心作用美化页面控制元素的布局、颜色、大小等样式告诉浏览器 “内容怎么显示”。基础语法选择器 {属性值}例如div { color: red; }。核心选择器选择器类型示例作用标签选择器p { ... }选中所有对应标签元素类选择器.box { ... }选中所有 class 为 box 的元素最常用ID 选择器#header { ... }选中唯一 ID 为 header 的元素后代选择器.parent .child { ... }选中 parent 下的 child 元素伪类选择器a:hover { ... }选中元素的特殊状态如鼠标悬浮核心布局与样式盒模型每个元素是一个盒子包含margin外边距、border边框、padding内边距、content内容。现代布局Flex 布局一维布局适合行 / 列排列、Grid 布局二维布局适合复杂网格。定位relative相对自身定位、absolute相对最近定位父级、fixed相对视口固定。响应式media媒体查询根据屏幕宽度适配样式。CSS3 特效transition过渡动画、animation自定义动画、border-radius圆角、box-shadow阴影。样式优先级内联样式 ID 选择器 类选择器 标签选择器 继承样式。三、JavaScript页面的大脑核心作用实现页面的动态交互和逻辑告诉浏览器 “内容如何动、如何响应用户操作”。基础语法变量与数据类型let/const声明变量基本类型string/number/boolean/null/undefined、引用类型object/array/function。流程控制if-else、switch、for/while循环。函数函数声明 / 表达式、箭头函数、参数、返回值、作用域全局 / 局部、闭包。DOM 操作核心查找元素document.getElementById()、document.getElementsByClassName()、document.querySelector()。增删改元素createElement()、appendChild()、removeChild()、innerHTML。事件绑定onclick行内绑定、addEventListener()动态绑定、事件委托。异步编程重点回调函数解决异步问题但易产生回调地狱。Promise三种状态pending/fulfilled/rejectedthen/catch处理结果。async/await基于 Promise 的语法糖使异步代码同步化。BOM 操作window对象alert()、setTimeout()、setInterval()。location对象获取 / 修改 URLlocation.href跳转页面。history对象back()/forward()控制页面历史记录。八股一、HTML 篇什么是 HTML 语义化有什么好处定义用具有特定含义的标签如header/nav/article替代无意义的div清晰描述内容结构。好处提升代码可读性利于 SEO搜索引擎抓取方便无障碍阅读如屏幕阅读器。HTML5 新增了哪些特性语义化标签header/nav/main/article/footer/section。多媒体标签audio/video无需插件直接播放音视频。表单新特性新增type类型email/tel/number/date、placeholder/required/autofocus属性。其他本地存储localStorage/sessionStorage、Canvas 绘图、WebSocket 通信。src和href的区别src替换当前元素会暂停其他资源加载直到该资源加载完成如img/script标签。href建立关联不会阻塞页面渲染如a/link标签。HTML 中常用的 meta 标签有哪些字符编码meta charsetUTF-8。视口适配移动端meta nameviewport contentwidthdevice-width, initial-scale1.0。SEO 相关meta namekeywords content关键词、meta namedescription content页面描述。二、CSS 篇CSS 选择器优先级顺序优先级从高到低内联样式style ID 选择器#id 类选择器 / 伪类 / 属性选择器.class/:hover/[type] 标签选择器 / 伪元素div/::after 通配符* 继承样式。特殊!important会覆盖所有样式慎用会破坏样式层级。CSS 盒模型的两种标准及区别W3C 标准盒模型默认width/height 内容区域contentborder和padding会撑开盒子。IE 怪异盒模型width/height content padding border不会撑开盒子。切换方式box-sizing: content-box标准/border-box怪异开发常用。Flex 布局的核心属性容器 项目容器属性display: flex开启 Flex 布局。justify-content主轴方向对齐方式flex-start/center/space-between/space-around。align-items交叉轴方向对齐方式flex-start/center/stretch。flex-direction主轴方向row水平 /column垂直。项目属性flex: 1等价于flex-grow:1; flex-shrink:1; flex-basis:0%项目占满剩余空间。align-self单个项目交叉轴对齐方式覆盖容器align-items。BFC 是什么如何触发有什么作用定义块格式化上下文Block Formatting Context是一个独立的渲染区域内部元素布局不受外部影响。触发条件满足其一即可根元素html。float不为none。overflow为hidden/auto/scroll。display为flex/grid/inline-block。position为absolute/fixed。作用清除浮动、防止 margin 重叠、实现两栏自适应布局。响应式设计的实现方案媒体查询media (max-width: 768px) { ... }根据屏幕宽度适配样式。弹性单位rem基于根元素字体大小、vw/vh基于视口宽高。Flex/Grid 布局天然支持弹性适配。position的几个取值及区别static默认值正常文档流不受top/left影响。relative相对定位相对于自身原位置偏移不脱离文档流。absolute绝对定位相对于最近的定位父级偏移脱离文档流。fixed固定定位相对于视口偏移脱离文档流如回到顶部按钮。sticky粘性定位在top阈值内相对定位超出后固定定位。三、JavaScript 篇一基础语法let/const/var的区别特性varletconst作用域函数作用域 / 全局作用域块级作用域块级作用域变量提升存在可先使用后声明存在暂时性死区存在暂时性死区重复声明允许不允许不允许初始值可省略可省略必须赋值重新赋值允许允许不允许指向的引用不可变数据类型及判断方法基本类型string/number/boolean/null/undefined/symbol/bigint。引用类型object包含array/function/date等。判断方法typeof区分基本类型但typeof null object是坑。instanceof判断引用类型的具体构造函数如[] instanceof Array。Object.prototype.toString.call()万能方法如Object.prototype.toString.call(null) [object Null]。什么是闭包闭包的作用及缺点定义函数嵌套函数内层函数可以访问外层函数的变量即使外层函数执行完毕。作用延长变量生命周期、创建私有变量避免全局污染。缺点变量不会被垃圾回收机制回收容易导致内存泄漏解决及时手动释放变量。二DOM/BOM 操作DOM 节点的增删改查方法查document.getElementById()、document.getElementsByClassName()、document.querySelector()返回单个、document.querySelectorAll()返回集合。增document.createElement()创建节点、parent.appendChild(child)添加节点。删parent.removeChild(child)、element.remove()。改element.innerHTML替换内容有 XSS 风险、element.textContent纯文本安全。事件委托的原理及优势原理利用事件冒泡将子元素的事件绑定到父元素上通过event.target判断触发事件的子元素。优势减少事件绑定次数提升性能支持动态新增的子元素无需重新绑定事件。示例给ul绑定点击事件处理所有li的点击逻辑。三异步编程JavaScript 为什么是单线程异步的实现原理单线程原因避免 DOM 渲染冲突如果同时操作 DOM 会导致混乱。异步原理基于事件循环Event Loop分为同步任务和异步任务同步任务在主线程执行栈中依次执行。异步任务分为宏任务setTimeout/setInterval/ajax和微任务Promise.then/async/await/MutationObserver异步任务完成后进入任务队列等待主线程空闲后执行。执行顺序同步任务 → 微任务 → 宏任务。Promise 的三种状态及常用方法三种状态pending进行中→fulfilled成功/rejected失败状态一旦改变不可逆转。常用方法实例方法then()成功回调、catch()失败回调、finally()无论成功失败都会执行。静态方法Promise.all()所有 Promise 成功才返回一个失败则整体失败、Promise.race()第一个完成的 Promise 决定结果。async/await和 Promise 的关系优点关系async/await是Promise 的语法糖底层还是基于 Promise 实现。优点将异步代码写成同步代码的形式可读性更高解决了 Promise 的 “回调地狱” 问题。