Web前端基础
一、HTML、CSS是什么
1.HTML 是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言（标记语言是一套标记标签），HTML通过标记标签来描述网页。
2 CSS 层叠样式表（Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一种子集）等文件样式的计算机语言。它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页中各个元素进行元素化。CSS能对网页中元素位置的排版进行像素级别精确控制，几乎支持所有字体符号，拥有对网页对象和模型编辑的能力。
HTML和CSS互相配合，是做网站的编程语言，浏览器把代码解析后的样子就是我们看到的网站。（Web浏览器的作用是读取HTML文档，并以网页的形式显示它们。）
二、VS Code
如何安装使用插件？
1.语音包
编辑器的基本使用
1.设置：文件→首选项→设置（大小、是否换行 word wrap）
编辑器中的快捷键
1.ctrl + s = 保存
2.ctrl + c = 复制
3.ctrl + v = 粘贴
4.ctrl + a = 全选
5.ctrl + x = 剪切
6.ctrl + z = 撤销
7.ctrl + y = 前进
8.shift + end = 从头选中一行
9.shift + home = 从尾部选中一行
10.shift + alt +PgDn = 快速复制一行
11.shift + tab = 向前缩进
12.tab = 向后缩进
13.alt + 上下键 = 可快速移动某一行
14.alt + 鼠标左键 = 多光标
15.ctrl + d = 选择相同元素的下一个
三、浏览器
五大浏览器
IE浏览器
Windows Internet Explorer，原称Microsoft Internet Explorer，简称MSIE（一般称为Internet Explorer，简称IE），是微软公司推出的一款网页浏览器。虽然自2004年以来Internet Explorer丢失了一部分市场占有率，但依然是使用最广泛的网页浏览器。
chrome浏览器
Google浏览器，Google Chrome，中国官方译名：酷容浏览器（原网上叫做谷歌浏览器，官方给谷歌浏览器定名为酷容浏览器），官方译名：Google Chrome，官方译名：Google浏览器，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
firefox浏览器
Mozilla Firefox，中文俗称"火狐"(正式缩写为Fx或fx )，是一个由Mozilla开发的自由及开放源代码的网页浏览器。
opera 浏览器
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月。2019.1.31日最新版本58.0(58.0.3135.53)。
safari 浏览器
Safari是苹果公司所开发的网页浏览器，并内建于MacOSX。MacOSX中的图形技术能确保系统中所有软件，从iPhoto到FInalCutPro输出的图片都绚丽无比。Safari是唯一采用高级色彩管理、以最准确的色彩显示网络图片的浏览器。Safari在2003年1月7日首度发行测试版，并成为MacOSXv10.3与之后的默认浏览器，也是iPhone与iPodtouch的指定浏览器。图标外形是一个指南针。Windows版本的首个测试版在2007年6月11日推出，支援WindowsXP与WindowsVista，在2008年3月18日推出正式版。safari浏览器目前是全球三大浏览器之一。
四、深入了解网站开发
网站开发职位
- UI设计师：设计稿
- Web前端开发工程师（H5开发）：1.设计稿->代码 2.数据库里的数据->显示到页面 3.HTML + CSS
- Web后端开发工程师：后端开发一般也叫做后台，其负责是网站后台逻辑的设计和实现还有用户及网站的数据的保存和读取。
前端的另一项核心技术JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
五、Web前端的三项核心技术
- HTML ： 结构
- CSS : 样式
- JavaScript ： 行为（反应）
六、HTML基本结构与属性
HTML是一种超文本标记语言
结构
1.超文本：文本内容 + 非文本内容（图片、视频、音频等）
2.标记（标签）：<单词>
写法分为两种：单标签：<header>
双标签：<header> </header>
3.语言：编程语言
创建标签的快捷键：单词 + tab -> <单词>
标签可以上下排列，也可以组合嵌套（划分等级）
属性
来修饰标签的，设置当前标签的一些功能
例如：<标签 属性=“值” 属性2=“值2”>
七、HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
初始代码规范
！ + tab 可快捷输出初始代码
八、HTML注释
注释的代码，只有在文件里看得到，但是浏览器不显示出来。
1.注释格式
HTML注释的格式，是左尖括号开始，一个感叹号跟两个减号，然后写入注释内容，后面跟两个减号，以右尖括号结束
2.意义
- 把暂时不用的代码注释起来，方便以后使用
- 对开发人员进行提示作用
3.注释的快捷添加
- ctrl + /
- shift + alt + a（这个方法需将注释部分全体选中）
九、HTML语义化
根据网页中的内容的结构，选择合适的HTML标签进行编写。
优点：在没有CSS的情况下，页面也能呈现出很好的内容结构
有利于SEO，让搜索引擎爬虫更好地理解网页
方便其他设备解析（如屏幕阅读器、盲人阅读器等）
便于团队开发与维护
十、标题与段落
1.h标签
标题->双标签：<h1> </h1>…<h6> </h6>
在一个网页中，h1标题最重要且只能存在一个h1标题
2.p标签
段落->双标签：<p> </p>
十一、文本修饰标签
1.强调标签
<strong> </strong>:表强调 会对文本进行加粗
<em> </em>:表强调 会使文本斜体
区别：1.写法 2.展示效果 3.<strong>效果更强，<em>效果较弱
2.上下标文本标签
<sub> </sub>:下标文本
<sup> </sup>:上标文本
3.删除插入文本标签
<del> </del>:删除文本
<ins> </ins>:插入文本
注意：一般情况下，<del> 与<ins> 配合使用
十一、图片标签与图片属性
图片标签
<img>->单标签
图片属性
十二、引入文件的地址路径
1.相对路径
"."在路径中表示当前路径
“. ."在路径中表示上一级路径
2.绝对路径
十三、跳转链接
1.<a>标签
<a>标签->双标签
属性
- href:链接的地址
- target:改变打开链接方式，默认方式为：在当前页面打开（_self),可更改为新窗口打开( _blank)
2.<base>标签
<base>->单标签
作用是改变链接的默认行为，一般写在<head>中
十四、跳转锚点
实现方式：
1.“#” + id属性（加给h标签）
2.“#” + name属性（加给a标签）
十五、特殊符号
十六、列表标签
1.无序列表
<ul> : 列表的最外层容器
<li> : 列表中的具体项目
<ul>和<li>符合嵌套规范：组合出现中间不存在其他标签
属性：
type属性 ：改变列表前标记的样式（一般用CSS控制）
2.有序列表
<ol> : 列表的最外层容器
<li> : 列表中的具体项目
<ol>和<li>符合嵌套规范：组合出现中间不存在其他标签
同样具有type属性
3.定义列表
<dl> :定义列表 容器
<dt> :定义专业术语或名词
<dd> :对名词进行解释或描述
总结
需要勤加练习