网站模板整站优化师培训
1.web标准
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
1.1 结构
结构用于对网页元素进行整理和分类，核心技术：HTML。
HTML (HyperText Markup Language)：超文本标记语言，用于定义网页的内容和结构，使用标签来描述文本、图像、链接和其他元素，形成网页的骨架。
1.2 表现
表现用于设置网页元素的版式、颜色、大小等外观样式，核心技术：CSS。
CSS(Cascading Style Sheets)：层叠样式表，用于控制网页的样式和布局。它将内容和样式分离，使网页的设计更灵活、更易于维护。CSS提供了各种属性来控制文本、颜色、字体、布局、响应式设计等方面。CSS 的层叠性允许多个样式表同时作用于同一个元素，并遵循一定的优先级规则。CSS的使用遵循 W3C 的规范，最新的版本CSS3引入了许多新的特性，例如Flexbox和Grid布局，使网页的布局更加灵活和强大。
1.3 行为
行为是指网页模型的定义及交互的编写，核心技术：Javascript。
JavaScript：是种脚本语言，用于为网页添加交互性和动态效果，可以响应用户的操作，例如点击、鼠标移动等，并动态地更新网页的内容。JS也用于处理AJAX请求、操作DOM(文档对象模型)、创建动画和特效等。
2.标签
2.1 标签分类
标签分类有：双标签(如:<html></html>)和单标签(如:<br />)
2.2 标签关系
标签关系分为：包含关系和并列关系。
2.3 基本结构标签
<html></html>根标签
<head></head>头部标签，必须包含<title></title>
<body></body>主体标签
2.4 常用标签
标题标签<h1></h1> ~ <h6></h6> 独占一行
段落标签<p></p> 段落间有较大空隙，如csdn编辑时的回车
换行标签<br /> 换行标签无空隙，如csdn编辑时的shift+回车
加粗标签<b></b>和<strong></strong>
倾斜标签<i></i>和<em></em>
删除线标签<s></s>和<del></del>
下划线标签<u></u>和<ins></ins>
大布局标签<div></div> 一个div标签独占一行，行内可分割，放图片、文字等
小布局标签<span></span> 多个连续的span占同一行，跨距放置
图像标签<img src="图像URL" alt="无图片时文本" title="图片标题文本" width="500" height="500" border="15" />
①src为img的必须属性，指明图片路径；
②当路径图片不存在时，alt属性可补充文本说明；
③title属性为图片提示文本，鼠标放置图片上方时会显示该文字，一般指该图片内涵；
④width和height属性用于修改宽度和高度，一般情况修改一个即可，会等比例缩放;
⑤border属性为图片距离边框大小
2.5 其他标签
<!DOCTYPE html>文档类型声明标签，这里声明为html文档
<html lang="en">当前文档语言种类定义，en表英文、zh-CN表中文
<meta charset="UTF-8">字符编码为UTF-8
3. vscode插件推荐
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code：中文翻译。
Auto Rename Tag：能自动同步重命名HTML或XML标签。当你修改开始标签时，结束标签也会自动更新，反之亦然，避免了手动修改两个标签时可能出现的错误。
open in browser：提供便捷的方式在不同的浏览器中打开当前文件，方便进行跨浏览器测试。
Live Server：支持实时刷新，当你保存代码更改时，浏览器会自动重新加载页面。
vscode-icons：图标主题插件，它会为你的 VS Code 文件资源管理器添加更清晰直观的图标。
Easy LESS：提供了 LESS 的语法高亮、代码补全和编译功能，方便你使用 LESS 编写 CSS。
会了吧：英文翻译软件，可查询当前代码文件含有的英文生词。