一、导学
HTML+CSS系列教程：
A 拨云见日：
HTML→CSS→切图流程→PC企业站布局→PC游戏站布局
B 溯本求源：
扩展HTML→扩展CSS→HTML5新语法→CSS新语法→兼容与hack
C 风生水起：
弹性布局→网格布局→移动端布局→响应式布局→Bootstrap
D 巧夺天工：
预编译CSS→postcss→CSS架构→高级功能→CSS与JS交互
二、拨开云雾见天日 守得云开见月明
1.什么是HTML和CSS：
是做网站开发的编程语言
浏览器把代码解析后的样子就是我们看到的网站
- 如何看到网站的原始代码呢？
通过鼠标右键选择查看网页源代码 - 一个网站是由N个网页组成的（每个网页=xx.html文件）
- 创建xx.html文件最简单的方法
目录（xx盘）→右键/新建/文本文档/重命名xx.html→右键/打开方式（拖拽/双击）/记事本 - HTML的定义：全称为超文本标记语言，是一种标记语言。包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
- CSS的定义：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.宇宙第一编译器VS Code
定义：全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器
下载地址：添加链接描述
- 安装编辑器插件
左侧→扩展→输入/自定义插件（语言包、open in brower/view in brower）→安装 - 编辑器基本使用
创建文件、创建文件夹、重命名、删除和搜索
设置：文件→首选项→设置（大小、是否换行、word、wrap） - 快捷键使用
ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end: 从头选中一行
shift+home: 从尾选中一行
shift+alt+向下键: 快速复制一行
shift+alt+向上键或向下键: 快速移动一行
tab：向后缩进
tab+shift：向前缩进
多光标：alt+鼠标左键
ctrl+d：选择相同元素的下一个
3.chrome浏览器
Chrome下载地址：添加链接描述
市场上常见的浏览器：IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器
4.深入了解网站开发
团队配合，不可或缺
- UI设计师：设计稿
- Web前端开发工程师（H5开发）：
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
HTML：结构
CSS：样式 - Web后端开发工程师
JavaScript与HTML、CSS之间的关系：
- HTML与CSS、JS是不同的技术，可以独立存在
- HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想
- CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的； JS可以脱离HTML和CSS而独立存在
- JS可以操作HTML和CSS
5.Web前端三大核心技术
- HTML：结构
- CSS：样式
- JavaScript：行为
6.HTML基本结构与属性
HTML：超文本标记语言
- 超文本：文本内容+非文本内容（图片、视频、音频等）
- 标记（标签）:<单词>
1.写法分为两种：
a 单标签 <单词>
b 双标签 <单词></单词>
2.创建标签的快捷键：单词+tab键→<单词>
3.标签是可以上下排列，也可以组合嵌套
4.标签属性：来修饰标签的，设置当前标签的一些功能
<标签 属性=“值” 属性2=“值2”……>
7.HTML初始代码
定义：每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码
！+tab键：快速创建html文件的初始代码
<!DOCTYPE html> 文本声明：告诉浏览器这是一个html文件
<html lange="en"> html文件的最外层标签：包裹着所有html标签代码lang="en"表示一个英文网站 lang="zh
-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页中赋值信息 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>
8.HTML中的注释
写法:<!- - 注释的内容 - - > 在浏览器中看不到，只能在代码中看到注释的内容
意义：
- 吧暂时不用的代码注释起来，方便以后使用
- 对开发人员进行提示
快捷添加注释与删除注释：
- ctrl+/
- shift+alt+a
9.HTML语义化
定义：所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构
- 有利于SEO，让搜索引擎爬虫更好的理解网页
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）
- 便于团队开发与维护
网页标签：添加链接描述
10.标题与段落
- 标题 （双标签) ：
<h1></h1>......<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签 - h5、h6标签在网页中不经常使用
段落 （双标签）：<p> 段落内容 </p>
11.文本修饰标签
<strong> </strong>：表示强调，会对文本进行加粗 (双标签）
<em> </em>：表示强调，会对文本进行斜体（双标签）
区别：
- 写法和展示效果是有区别的，一个加粗，一个斜体
- strong的强调行更强，em的强调性稍弱
<sub> </sub>：下标文本
<sup> </sup>：上标文本
<del> </del>：删除文本
<ins> </ins>：插入文本
注：一般情况下，删除文本都是和插入文本配合使用的
12，图片标签与图片属性
<img> ：图片（单标签）
属性
- src：引入图片地址
- alt ：当图片出现问题的时候，可以显示一段友好的提示文字
- title ：提示信息
- width、height： 图片的大小（数字）
13.引用文件的地址路径
a .相对路径：
- 在路径中表示当前路径
- 在路径中表示上一级路径
b .绝对路径
14.跳转链接
- a→双标签：
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下，在当前页面打开_self ，在新窗口打开_blank - base→单标签：作用就是改变链接的默认行为的
15.跳转锚点
- 实现一：#号 + id属性
- 实现二：#号 + name属性（注意name属性加给的是a标签）
16.特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，如注册商标、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为中心特殊字符准备了专门的代码
& + 字符
解决冲突啊 左右尖括号、添加多个空格的实现
常用：<；%gt；7nbsp；
17.无序列表
<ul> 、<li>：列表的最外层容器、列表项 （符合嵌套的规范）
注：ul和li必须是组合出现的，他们之间是不能有其他标签的
正确写法
<ul>
<li>......</li>
<li>......</li>
</ul>
type属性：改变前面标记的样式（一般都是用CSS去控制）
18.有序列表
<ol> 、<li>：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表，无序列表可以代替有序列表
type属性：改变前面标记的样式（一般都是用CSS去控制）
19.定义列表
定义：列表项需要添加标题进行描述的内容
<dl> ：定义列表
<dt> ：定义专业术语或名词
<dd> ：对名词进行解释和描述
2599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
