导图社区 Web前端基础
这是一个关于Web前端基础的思维导图，主要内容有1、网页与网站2、五大浏览器及其及内核【笔试题】3、网页(Web )标准4、HTML简介等。
这是一个关于Web前端基础Day19的思维导图，包含网格布局的基本概念、容器属性、项目属性等。
这是一个关于Web前端基础Day18【项目】响应式的思维导图，复习PC端和移动端开发、 响应式开发等。
这是一个关于Web前端基础Day17的思维导图，包含transform 转换(变化)、animate动画库等。
社区模板帮助中心，点此进入>>
论语孔子简单思维导图
《傅雷家书》思维导图
《童年》读书笔记
《茶馆》思维导图
《朝花夕拾》篇目思维导图
《昆虫记》思维导图
《安徒生童话》思维导图
《鲁滨逊漂流记》读书笔记
《这样读书就够了》读书笔记
妈妈必读：一张0-1岁孩子认知发展的精确时间表
Day01
1、网页与网站
1.1、网站是在因特网展示特定内容相关的网页集合
1.2、网页是网站的一页，是构成网站的基本元素。 网页是由图片、文字、链接、音视频等元素组成。
2、五大浏览器及其及内核【笔试题】
IE【2022.6.15停止维护】
Trident
Safari【苹果】
Webkit
Chrome【谷歌】
Firefox【火狐】
Gecko
Opera【欧朋】
前:Presto 现:Blink
3、网页（Web）标准
前端技能三要素
HTML:（HyperText Markup Language）超文本标记语言
CSS：（Cascading Style Sheets）层叠样式表
JavaScript：简称JS，用于网页交互的解释性脚本语言
W3C组织
W3C全称：Word Wide Web Consortium（万维网联盟） W3C 创建于1994年10月 W3C 由 Tim Berners-Lee 创建 蒂姆·伯纳斯·李（Tim Berners-Lee）爵士（1955年出生于英国）是万维网的发明者，互联网之父。
4、HTML简介
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。
通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。
5、HTML语法规范
5.1、HTML标签是由尖括号包围的关键词。<html>
5.1.1、标签的分类
双标签：成对出现 <开始标签></结束标签>
单标签:单个标签出现【空标记、空元素】
5.1.2、标签的关系
包含关系（父子关系）
并列关系（兄弟关系）
5.2、HTML属性：标签属性就是在开始标签中描述标签附属信息的键值对。
5.3、HTML注释：注释即对代码的解释和说明，不会被浏览器解析执行。
5.3.1、作用：解释说明，代码调试
5.3.2、语法：HTML中的注释以 <!-- 开头，以 --> 结束，开始和结束中间为注释内容。
5.3.3、生成注释：ctrl+/ 添加或者取消
6、HTML文档（网页）
6.1、创建HTML文档：打开vscode--文件--新建.html文件，输入!或html:5 + 回车生成文档基本代码。
6.2、文档基本代码说明：
6.2.1、【笔试题】文档类型声明：<!DOCTYPE html>
DOCTYPE是用来声明文档类型
告诉浏览器以html5的规范来进行文档解析
不是 HTML 标签
6.2.2、文档骨架标签
每个网页都会有一个基本的结构标签html，head，body(也称为骨架标签
html标签：
定义整个HTML文档，包含head和body
html属性lang=“en”：作用：定义当前文档显示文字的语言
en定义语言为英语
zh-CN定义语言为中文
head标签
定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。
文档字符集<meta charset="utf-8"> 在标签内,通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
文档标题：<title>文档标题</title>
body标签
定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。
7、常用HTML标签
7.1、块级标签
7.1.1、标题标签h1-h6 （1）、<h1>标题内容</h1>
(2)语义：表示标题，HTML 包括六个级别的标题， <h1>–<h6> 依据重要性递减，用于指定内容的标题和子标题
(3)默认样式：文字加粗、字号依次变小、自带间距、独占一行
(4)典型应用：logo、文章页标题、内容章节标题、产品标题、模块标题等
注意：不要使用标题元素来加大、加粗字体 使用标题保持页面结构清晰【对于无障碍访问 和 搜索引擎优化 等问题非常有意义】 避免跳过某级标题：始终要从 h1开始，接下来依次使用 避免在同一个页面上重复使用 h1——logo、文章页、产品详情页的大标题 通常标题标签包含文字、图片和其它行内元素
7.1.2、段落：<p>段落内容</p>
表示段落，用于将网页中的文字有条理地显示出来
通常用来包含文字、图片、不可以包含它自己
7.1.3、无序列表：ul嵌套li
(2)语义：无序列表，用于将没有数字顺序的一组数据或内容进行分组。
(3)默认样式：默认间距(外边距、内边距) 列表样式：实心圆
(4)典型应用：新闻列表、产品列表、导航、分页、选项卡
(5)type属性：disc列表样式实心圆 circle 列表样式空心圆 square列表样式为小方块 注意:type属性不常用，通常使用css属性替代。
7.1.4、有序列表：ol嵌套li
(2)语义：有序列表用于将顺序是有意义的一组数据或内容进行分组
(3)默认样式：默认间距 列表样式：数字编号
(4)典型应用：烹饪食谱中的各个步骤 指路时的各处转弯方向 营养信息标签上 按含量排序的成分列表 面包屑导航
(5)type属性：a : 小写字母 A : 大写字母 i : 小写罗马数字 I : 大写罗马数字 1 : 数字 注意:type属性不常用，通常使用css属性替代。
7.1.5、定义列表：dl嵌套dt+dd
(2)语义：包含术语定义以及描述的列表 dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述） 用于将一组项目及其相关的描述进行分组
(3)默认样式：默认dl，dd带有间距
(4)典型应用：名词解释、分类（大分类-细节的类别） 键-值对列表 （内存：100M）
注意: 允许使用多条项目定义与描述。 允许使用带有多个描述的单个项目定义。
7.1.6、div：用于将内容分区（盒子装东西）
7.2、行级标签
超链接：<a href="#"></a>
(1)语法：<a href="">文字或图片</a>
(2)语义：超链接
(3)默认样式：不独占一行 默认当前窗口打开 默认带有下划线、文字颜色
(4)超链接属性
href属性：指定链接跳转的地址
target属性：指定目标地址的打开方式
_blank 新窗口打开
_self 当前窗口打开（默认值 ）
title属性：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示
(5)链接的类型
空链接：如果当时没有确定链接的目标时使用空链 <a href="#">商品</a
外部链接：链接到站外其他 网站的链接 （绝对地址）<a href="https://www.baidu.com"> 百度 </a>
内部链接 （相对地址）：网站内部页面之间的相互链接。直接链接内部页面的名称<a href="index.html">首页</a>
下载链接：如果href里面的地址是一个文件或压缩包，会下载这个文件<a href="1.txt">下载文本文件</a>
(6)锚点链接
跳转至当前页面指定位置的锚点： 定义锚点： <标签名 id="id名"></标签名> 使用锚点： <a href="#id名">需要点击的文字</a>
跳转至其它页面的锚点： 定义锚点： <标签名 id="id名"></标签名> 使用锚点： <a href="需要找到跳转的页面地址#id名">需要点击的文字</a>
注意: a可以嵌套其他元素，比如图片、标题、段落、div，a标签不能嵌套自己
行块级标签
图像 <img src="" alt="">
(2)标签属性: src属性：用于指定图像文件的路径和文件名 注意：是标签的必须属性 alt属性:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验 width/height属性：指定图片宽度/高度 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放 title属性：鼠标悬停时显示的文字
(3)默认样式 多张图片可以交列在一行显示 默认产生下间隙
(4)典型应用: 作为内容展示的图像：产品图、广告图、详情页、文章页中插图。
(5)图像路径:
相对路径
绝对路径
