Web前端从入门到精通

一，HTML+CSS系列教学之导学

做网站的编辑语言

1.拨云见日

基础：HTML、CSS
切图流程:传统切图、智能切图、公司流行切图
实战阶段:PC企业站布局、PC游戏站布局

2.溯本求源

基础扩展:扩展HTML、扩展CSS
HTML5新语法、CSS3新语法
不同浏览器之间的兼容问题和解决方案（兼容与hack）

3.风生水起

流行布局:弹性布局（Flex)、网格布局（Grid）、移动端布局（流式布局、rem布局）、响应式布局（用一套代码适应多种不同的设备）
响应式布局的框架：Bootstrap（可快速搭建一个网页）

4.巧夺天工

工程方面：预编译CSS、postcss
CSS架构（划分文件）
高级功能
CSS与JS交互

二，宇宙第一编辑器vs code（来自微软，开源）

VS Code，全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。

VS Code下载地址：https://code.visualstudio.com/
如何安装插件？ 语言包、open in browser view in browser
学习编辑器基本使用？
设置：文件 ->首选项->设置（大小、是否换行word wrap）
创建文件、创建文件夹、重命名和删除、搜索

ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
多光标：alt+鼠标左键
ctrl+d：选择相同元素的下一个
tab：向后缩进
tab+shift：向前缩进

三，Chrome浏览器

Chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/

百度统计浏览器市场份额：https://tongji.baidu.com/data/browser
五大浏览器：
IE,Firefox，chrome，Safari，Opera
深入了解网站开发：
UI设计师：设计稿
Web前端开发工程师（H5)：设计稿->代码 数据库里的数据->显示到页面
Web后端开发工程师

四，Web前端的三大核心技术HTML

HTML：结构
CSS:样式
JavaScript（与用户交互）：行为

五，HTML基础结构与属性1.超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

HTML：超文本 标记 语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言

标记也叫做标签：
< header >
< footer >
写法分成两种：
单标签< header >
双标签< header >< /header >
（header、footer都是双标签）
创建标签的快捷键：tab+单词-><单词>

标签可以上下排列，也可以组合嵌套。

HTML：在这里插入图片描述

标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>

六，HTML初始代码

每一个html文件都有的代码叫初始代码，要符合html文件的规范写法。
!+tab键：快速的创建html的初始代码
< !DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
< html lang=“en”> html文件的最外层标签：包裹着所有html标签代码 ，lang="en"表示是一个英文网站，lang=“zh-CN”表示一个中文网站
< head>
< meta charset=“UTF-8”> 元信息：是编写网页中的一些赋值信息，charset="UTF-8"国际编码，让网页不出现乱码的情况
< title>Document< /title > 设置网页的标题
< /head>
< body>
显示网页内容的区域
< /body>
< /html>

七，HTML中的注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

写法：< !–注释的内容-- >
意义：1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
快捷添加注释与删除注释：
1.ctrl+/
2.shift+alt+a

八，HTML语义化

HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO,让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
便于团队开发和维护。
网页标题：https://h5o.github.io/

1.标题与段落

标题->双标签：< h1 >< /h1 > …< h6 >< /h6 >
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落->双标签：< p >< /p >

2.文本修饰标签

< strong >：表示强调，会对文本进行加粗（双标签）
在这里插入图片描述
< em >：表示强调，会对文本进行斜体（双标签）
在这里插入图片描述
区别：
1 .写法和展示效果是有区别的，一个加粗、一个斜体
2 .strong的强调性更强，em的强调性稍弱。
< sub >、< sup >：下标文本、上标文本（双标签）
在这里插入图片描述
< del >、< ins >：删除文本、插入文本
在这里插入图片描述
注：一般情况下，删除文本都是和插入文本配合使用的。

3.图片标签 图片属性

< img >：图片（单标签）
src：引入图片的地址。
alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息
width、height：图片的大小

4.引入文件的地址路线

相对路径
. 在路径中表示当前路径
在路线中表示上一路径