Web前端从入门到精通（第一周）
HTML+CSS系列之导学
1.拨云见日：HTML、CSS、切图流程、PC企业布局、PC游戏站布局 2.溯本求源：扩展HTML、扩展CSS、HTML5新语法、CSS3新语法、兼容与hack 3.风生水起：弹性布局、网格布局、移动端布局、响应式布局、Bootstrap 4.巧夺天工：预编译CSS、postcss、CSS架构、高级功能、CSS与JS交互
目录
Web前端从入门到精通（第一周）拨云见日HTML、CSS的概念宇宙第一编辑器 VS Codechrome浏览器深入了解网站开发web前端三大核心技术HTML基本结构与属性HTML初始代码HTML中的注释HTML语义化标题与段落文本修饰标签图片标签与图片属性引入文件的地址路径跳转链接跳转锚点特殊符号无序列表有序列表定义列表拨云见日
HTML、CSS的概念
1.搜索学习
HTML-百度百科
CSS-百度百科
2.个人理解
HTML在网页设计中主要负责信息的组织，收纳，是一个宏观框架的主要工程师。CSS主要负责对网页在静态或是动态方面进行极致地修饰。一个简单的理解：HTML是房子结构的建构者，CSS则为房子进行装修美化。
HTML
CSS
宇宙第一编辑器 VS Code
1.VS Code 全称 Visual Studio Code，来自微软，是一个开源的、基于 Electron 的轻量代码编辑器。
功能介绍
扩展：相当于一个插件商店，须联网使用，推荐首先安装Chinese (Simplified) (简体中文)、Auto Rename Tag、CSS Peek、open in browser以及view in browser以便使用。
（注：JS-CSS-HTML Formatter不推荐使用）
2.基本使用
创建文件、文件夹、重命名、删除、搜索快捷键：
ctrl+s：保存
ctrl+a：全选
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
alt+鼠标左键：多光标
ctrl+d：选择相同元素的下一个
chrome浏览器
1.常见浏览器
2.五大浏览器以及其所占市场份额（10月13日）
IE浏览器（0.75%）（7月）
IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。结果可想而知，微软大获全胜，网景不得不将自己卖给AOL公司。但实际上事情并没有结束，网景后来开发了风靡一时的Firefox火狐，至今Firefox也成为世界五大浏览器之一。1996年，微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权，开始开发自己的浏览器IE。后来，微软以IE和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。
Opera浏览器（2.85%）
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核
Safari浏览器（9.44%）
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
Firefox浏览器（8.10%）
Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
Chrome浏览器（66.60%）
Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。
深入了解网站开发
工作分配UI设计师：设计稿web前端开发工程师（H5开发）:
设计稿->代码
数据库里的数据->显示到页面
HTML+CSSweb后端开发工程师
2.JavaScript
概念：搜索学习-百度百科HTML与CSS及JS的关系：
这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：
HTML与CSS、JS是不同的技术，可以独立存在；
HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；
JS可以脱离HTML和CSS而独立存在；
JS可以操作HTML和CSS。
总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。
web前端三大核心技术
HTML：结构CSS：样式JavaScript：行为HTML基本结构与属性
1.基本结构（超文本、标签、语言）
超文本：文本内容+非文本内容（图片、视频、音频等）标签（标记）：<单词>（包括单标签、双标签；可以上下排列也可以组合嵌套）创建标签的快捷键：单词+tab-> <单词>语言：编程语言
2.属性
用于修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”…>
HTML初始代码
每个html文件都要添加，任何网页都需要
1.创建初始代码快捷键：！+ tab
2.初始代码一览
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
3.文档声名（告诉浏览器这是一个html文件）
<!DOCTYPE html>
4.最外层标签（包裹着所有html标签代码）
<html lang="en">
lang="en"表示这是一个英文网站（若引号内是zh-CN表示中文网站）
5.元信息（编写网页中的一些赋值信息）
<meta charset="UTF-8">
charset="UTF-8"是国际编码，避免网页乱码
6.设置网页的标题
<title>Document</title>
7.显示网页内容的区域
<body></body>
HTML中的注释
注释的代码，只有在文件中看得到，浏览器无法显示
写法：<! - - 注释内容 - -＞
意义： 把暂时不用的代码注释起来，方便以后使用；
对开发人员进行提示。
快捷键：
ctrl+/（添加注释）
shift+alt+a（删除注释）
HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构；
2.有利于SEO，让搜索引擎爬虫更好的理解网页；
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）；
4.便于团队开发与维护。
标题与段落
标题（双标签）<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件只能出现一次h1标签；h5、h6标签在网页中不常使用。 段落（双标签）
<p></p>
文本修饰标签
强调（双标签）加粗(强)
<strong></strong>
斜体（稍弱）
<em></em>
2. 下标文本
<sub></sub>
3. 上标文本
<sup></sup>
4. 删除文本
<del></del>
5. 插入文本
<ins></ins>
（注：一般情况下删除文本和插入文本配合使用）
图片标签与图片属性
img（单标签）src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height：图片的大小（改善用户感官体验）演示
<img src="图片地址" alt="提示文字" title="提示信息" width="像素值" height="像素值">
引入文件的地址路径
相对路径. 在路径中表示当前路径
. . 在路径中表示上一级路径绝对路径
示例：C:\Users\20248\Desktop\前端学习\CSDN\pic （windows本地）
/ppt/beijing/detail//03/29/2496_detail-2.jpg_w800 （在线）代码示例
<img src="C:\Users\20248\Desktop\前端学习\CSDN\pic">
注：路径递进关系可用斜杠 " / " (建议使用)，也可用反斜杠 " \ "（尽量避免使用）；开头C：可以不写，会自动识别文件路径
跳转链接
链接标签
< a > < / a >
href属性：链接的地址
target属性：可以改变链接的打开方式（默认在当前页面打开 _self ；新窗口打开 _blank）
示例：
<a href="" target="_blank">访问百度</a>
< base >
作用：改变链接的默认行为
示例：
<base target="_blank">
注：该标签位置应放在< head > < / head >内
跳转锚点
用于实现页面菜单或返回顶部等功能
#号与id属性
示例：
<a href="#html">HTML</a><h2 id="html">HTML超文本标记语言</h2>
#号与name属性
示例：
<a href="#html">HTML</a><a name="html"></a><h2>HTML超文本标记语言</h2>
原理：第一行映射name行而name行不占位置，即可认为第一行映射到id行
特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，如 ®（注册商标）、©（版权符）等，还有在一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
无序列表
< ul >、< li >分别表示列表的最外层容器和列表项注：ul和li必须是组合嵌套出现的，他们之间不能有其他标签type属性：改变前面标记的样式（一般都是用CSS控制）（文档查询）示例：
<ul type="square"><li>HTML</li><li>XHTML</li><li>CSS</li></ul>
加上链接
<ul type="square"><li><a href=""><strong>百度</strong></a></li><li><a href="/">QQ空间</a></li><li><a href="/">w3school</a></li></ul>
有序列表
< ol >、< li >分别表示列表的最外层容器和列表项注：有序列表使用的非常少，经常用的是无序列表，无序列表可以代替有序列表type属性：改变前面标记的样式（一般都是用CSS控制）（文档查询）示例：
<ol type="I"><li>HTML</li><li>XHTML</li><li>CSS</li></ol>
加上链接
<ol type="I"><li><a href=""><strong>百度</strong></a></li><li><a href="/">QQ空间</a></li><li><a href="/">w3school</a></li></ol>
定义列表
< dl > ：定义列表< dt > ：定义专业术语或名词
< dd > ：对名词进行解释和描述示例：
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd></dl>
