Web从入门到放弃
一.HTML、CSS系列之导学
1.拨云见日：HTML、CSS、切图流程、PC企业布局、PC游戏站布局
2.溯本求源：扩展HTML、扩展CSS、HTML5新语法、CSS3新语法、兼容与hack
3.风声水起：弹性布局、网格布局、移动端布局、响应式布局、Bootstrap
4.巧夺天工：预编译CSS、postcss、CSS架构、高级功能、CSS与JS交互
5.什么是HTML和CSS
HTML（Hyper Text Markup Language）：简称“超级文本语言”，是一种组织信息的方式，通过超链接的方法将本文中的文字与图表的其他信息媒体相关联。HTML独立于windows、macos和Linux等操作平台。目前HTML5是使用最广的版本。另外，HTML不允许应用程序开发者为具体的应用环境定义，其只能用于显示。
CSS（cascading style sheets）：简称“层叠样式表”，能够对网页中的元素的位置的排版进行像素级精确控制，支持几乎所有的字体号样式，拥有对网页对象和模型样式的编辑能力。 ##HTML和CSS是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础。
三.宇宙第一编译器VS Code
1.VS Code，全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编译器。
2.VS Code保姆级教程
下载地址：https://code.visualstudio.com/ 安装按提示点击下一步即可，注意不要将其安装在c盘。 在扩展搜索栏搜索“chinese”，安装中文语言包、open in broswer、view in broswer
3.编译器的基本使用
（1）设置:文件->首选项->设置(大小、是否换行 word wrap）
（2）创建文件、创建文件夹、重命名和删除、搜索
（3）编译器的保存：ctrl+s
(4)全选：ctrl+a
(5)复制：ctrl+c
(6)粘贴：ctrl+v
（7）剪切: ctrl+x
（8） 撤销：ctrl+z
（9） 前进：ctrl+y
（10）shift+end:从头选中一行
（11）shift+home:从尾部选中一行
（12）shift+alt+↓：快速复制一行
（13）alt+↑或↓：快速移动一行
（14）tab：向后缩进
（15）tab+shift:向前缩进
（16）alt+鼠标左键：多光标
（17）ctrl+d：选择相同元素的下一个
四.chrome浏览器
1.谷歌浏览器（Google Chrome）是一款可让你更快速、轻松、且安全地使用网络的浏览器。
下载地址：https://www.google.cn/chrome/index.html
百度统计市场份额：谷歌浏览器市场占比66.88%
五.深入了解网站开发
1.UI工程师：设计端
2.Web前端开发工程师（H5开发）
（1）设计稿->代码
（2）数据库里的数据->显示到页面
（3）MTHL+CSS
HTML:结构
CSS:样式
3.Web后端开发工程师：存储数据
六.Web前端三大核心技术
1.HTML:结构
2.CSS：样式
3.JavaScript：行为
七.HTML基本结构与属性
1.超文本 标记 语言
（1）超文本：文本内容+非文本内容（图片、视频、音频等）
2.标记:<单词>
（1）单标签<header> 双标签<header></header>
创建标签的快捷键：tab键+单词-><单词>
标签可以上下排列，也可以组合嵌套。
标签的属性：修饰标签，设置当前标签的一些功能。
<标签 属性=“值” 属性2“值”>
语言：编程语言
八.HTML的初始代码
1.含义：每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
！+tab键：快速创建html初始代码
(1)<!DOCTYPE html> 文档生命：告诉浏览器其这是一个html文件
(2)<html lang="en">： 包裹着所有html代码html文件的最外层标签代码，lang=“en表示是一个英文网站
(3)” <head> <meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息,国际编码，让网页不出现乱码
(4)<title>Document</title> 设置网页的标题
(5)</head> <body> 显示网页内容区域
(6)</body> </html>
九.HTML中的注释
1.写法：<!--注释的内容--> 在浏览器中看不到，只在代码中看到注释的内容
2.意义：
（1）把暂时不用的代码注释起来，方便以后使用。
(2)对开发人员进行提示
3.快捷添加注释与删除注释：
(1)crtl+/
(2)shift+alt+a
十.HTM语义化
1.定义：所谓HTML语义化指的是，根据网页中的内容结构，选择合适的HTML标签进行编写。
2.好处：
（1）在没有CSS的情况下，页面也能呈现出很好的内容结构。
（2）有利于SEO，让搜素引擎爬虫更好的理解网页。
（3）为方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
（4）便于团队开发与维护。
十一.标题与段落
1.标题->双标签：
<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签（除h1外可以有多个并列的标题），h5和h6不经常使用。
2.段落->双标签：
<p></p>
十二.文本修饰标签
1、 强调类型
（1） <strong></strong>表示强调，会对文本进行加粗
（2）<em></em>表示强调，会对文本进行斜体
区别：
1.写法和效果有区别，一个加粗，一个斜体。
2.strong的强调性更强，em相对来说较弱。
2. 下标文本和上标文本
(1)<sub></sub>上标文本
a<sup>2</sup>+b<sup></sup>=c<sup></sup>
勾股定理
(2)<sup></sup>下标文本
H<sup>2</sup>O
水分子
3.删除文本、插入文本
(1)<del></del>删除文本
(2)<ins></ins>插入文本
注意：一般情况下，删除文本和插入文本配合使用。
十三.图片标签和图片属性
1.img->单标签
（1）src：引入图片的地址。
（2）alt：当图片出现问题的时候，可以显示一段有好的文字。
（3）title：提示信息
（4）width、height：图片的大小
十四.引入文件的地址路径
1.相对路径
（1）**.**在路径中表示当前路径
（2）*…**在路径中表示上一级路径
2.绝对路径
相对路径容易移植，用相对路径较好
十五.跳转链接
1.a->双标签<a></a>
（1）herf=“ ”属性：链接地址
（2）target属性：可以改变链接打开的方式，默认情况下：在当前页面打开-self,新窗口打开-blank
2.base->单标签：作用是改变链接的默认行为的
十六.跳转锚点
1.定义：在本页面内跳转
2.实现方式1：#号 id属性id=“ ”
3.实现方式2：#号 name属性name=“ ”（注意name属性加给的是a标签）
十七.特殊符号
1.编写时，经常会遇到输入法无法输入的字符在HTML中，为这些字符专门准备了代码。
十八.无序列表
1.<ul>列表的最外层容器、<li>列表项
（1）注意：符合嵌套规范，但两者必须是组合出现的，他们之间是不能有其他的标签的
（2）<type>属性：改变前面标记的样式（一般用CSS去控制）
十九.有序列表
1.<ol>、<li>
（1） 注意：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
（2）type属性，改变前面标记的样式（一般用CSS控制）
5390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
