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 Code
- chrome浏览器
- 深入了解网站开发
- 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浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核

Safari浏览器（9.44%）

第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。

Firefox浏览器（8.10%）

Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。

Chrome浏览器（66.60%）

Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。

深入了解网站开发

工作分配
UI设计师：设计稿
web前端开发工程师（H5开发）:
设计稿->代码
数据库里的数据->显示到页面
HTML+CSS
web后端开发工程师

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本地）
http://imgs.ppt118.com/ppt/beijing/detail/2019/03/29/2496_detail-2.jpg_w800 （在线）
代码示例

<img src="C:\Users\20248\Desktop\前端学习\CSDN\pic">

注：路径递进关系可用斜杠 " / " (建议使用)，也可用反斜杠 " \ "（尽量避免使用）；开头C：可以不写，会自动识别文件路径

跳转链接

链接标签

< a > < / a >
href属性：链接的地址
target属性：可以改变链接的打开方式（默认在当前页面打开 _self ；新窗口打开 _blank）

示例：

<a href="http://www.baidu.com" 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行

特殊符号

无序列表

< 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="http://baidu.com"><strong>百度</strong></a></li><li><a href="https://qzone.qq.com/">QQ空间</a></li><li><a href="https://www.w3school.com.cn/">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="http://baidu.com"><strong>百度</strong></a></li><li><a href="https://qzone.qq.com/">QQ空间</a></li><li><a href="https://www.w3school.com.cn/">w3school</a></li>
</ol>

定义列表

< dl > ：定义列表
< dt > ：定义专业术语或名词
< dd > ：对名词进行解释和描述
示例：

<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd>
</dl>