小黑子的HTML入土过程
1. HTML+CSS系列教程第一章
1.1 了解什么是HTML和CSS
I.它们是做网站的编程语言。
HTML 英文全称是 （Hyper Text Markup Language），即超文本标记语言。 它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
II.浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？就是通过鼠标右键选择查看网页源代码。
III。每一个网站都由N个网页构成，而每一个网页就是HTML文件。
1.2 编译器VS Code
1.2.1 下载方式和设置
- 下载方式：
http:// code.visualstudio.com/
- 设置：
1.2.2 VS Code的快捷键基础用法
-
ctrl基础用法：
-
shift基础用法：
-
alt基础用法：
-
Tab基础用法：
1.3 了解网页开发
一个大型网站的开发，离不开团队内各个岗位的配合，每个岗位都不可或缺。
- 主要有三个岗位：
UI设计师：负责设计稿撰写
web前端开发工程师：主要负责页面视图
将设计稿编写为代码
将数据库里的数据显示到页面
编写HTML以及CSS
web后端开发工程师：主要负责后台存储数据
1.4 Web前端的三大核心技术
1.HTML:结构
2.CSS：样式
3.JavaScript：行为
1.5 HTML的基本结构和属性
什么是超文本标记语言？
超文本：文本内容+非文本内容（图片、视频、音频等）
语言：编程语言
标记（也叫做标签）：<单词>
单标签：<head>；<p>等
双标签：<head></head>;<p></p>等
创建标签的快捷键：单词+Tab键-> <单词>
HTML常见标签: http://www.html5star.com/manual/html5label-meaning/
标签可以上下排列，也可以组合嵌套
标签的属性：用来修饰标签，设置当前标签的一些属性
<标签 属性1="值1" 属性2="值2">
1.6 HTML的初始代码
每一个html文件都需要添加初始代码，要符合.html文件的规范写法
初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码
快速的创建HTML的初始代码：！+Tab键
例子：
<!DOCTYPE html> 文档声明：告诉浏览器这是一个.html文件
<html lang="en"> html的最外层标签，包裹着所有html标签代码
lang="en"：表示是一个英文网站
lang=“zh-CN”：表示这是一个中文网站
<head> 设置的内容
<meta charset="UTF-8">元信息:是编写网页中的一些赋值信息charset
="UTF-8"国际编码，让网页不出现乱码的情况
<title>Document</title> 网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
- 展示一下哪里是head，哪里是body：
1.7 HTML的注释
写法:
<!--注释的内容 --〉是在浏览器中看不到，只能在代码中看到注释的内容
意义：
1。把暂时不用的代码注释起来，方便以后使用。
2。对开发人员进行提示。
快捷添加注释与删除注释:
l.ctrl +i
2.shift + alt +a
1.8 HTML的语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。
1.9 标题与段落
- 标题
标题->双标签:<h1></h1> ... h6></h6>
逐级递减，标题会随着设置的数字变得越来越小
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，而
其他的可以h标签可以出现多个
h5、h6标签在网页中不经常使用。
- 段落
段落->双标签:<p> 写你想写的段落内容</p>
1.10 文本修饰标签
强调->双标签: <strong></strong>、<em></em>
区别:
1．写法和展示效果是有区别的，一个加粗、一个斜体
2. strong的强调性更强，em的强调性稍弱。
下标:<sub></sub>
上标:<sup></sup>
删除文本:<del></del>
插入文本:<ins></ins>
注:一般情况下，删除文本都是和插入文本配合使用的。
-
上标与下标的效果：
-
删除文本与插入文本的效果：
-
strong与em的强调效果：
1.11 图片标签和图片属性
写法：
<img src="图片位置" alt="当图片出问题时显示的文字
"title="提示图片信息"width="图片宽度"height="图片高度">
功能：
<img>：单标签（插入图片时需要输入）
src: 引入图片的地址(网址或文件路径)
alt：当图片出问题时显示的文字（不用即为没有）
title：提示图片信息（不用即为没有）
width：图片宽度（不用即为图片默认）
height：图片高度（不用即为图片默认
1.12 引入文件的地址路径
1.相对路径
（1）.在路径中表示当前路径
（2）..在路径中表示上一级路径
都用于寻找文件所在地
例如：<img src=" ../被设置链接的图片的地址" alt="">
alt=表示当图片出现问题时，可以写提示信息
2.绝对路径
在D盘也好或者在某个很深的文件夹也好，它都能够找到文件所在位置。
例如：E:/被设置链接的图片的地址
1.13 跳转链接
1.a->双标签<a></a>
（1）herf=“ ”属性：链接地址
写法：
文本链接：<a href="链接的地址"被设置链接的文本></a>
图片链接：<img src="被设置链接的图片的地址">
功能：为文本或图片设置跳转链接，点击可直接跳转至相应网页
（2）target属性：可以改变链接打开的方式，
默认情况下：在当前页面打开-self,新窗口打开-blank
写法： <target="_blank或_self">
功能：若选择_blank，则网页在新窗口打开
若选择_self，则网页在当前页打开
若没有选择，则默认为在当前页打开
2.base->单标签：作用是改变链接的默认行为
写法：<base target="_blank或_self">
功能：改变整个html链接的默认行为，
一般在整个.hrml文件的<head></head>部分
1.14 跳转锚点
1.定义：在本页面内跳转
2.实现方式1：#号 id属性id=“ ”
写法：
id属性：<a href="#设定的id属性">锚点的名字</a>
<h2 id="设定的id属性">被设定id属性的文本<h2>
3.实现方式2：#号 name属性name=“ ”（注意name属性加给的是a标签）
name属性：<a href="#设定的name属性">锚点的名字</a>
<a name="设定的name属性"></a>
<h2>强调的文本</h2>
功能：设定类似目录的锚点，点击即可跳转
1.15 特殊符号
- 编写一些文本时，经常会遇到输入法无法输入的字符，如R（注册商标)、(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
- 例：
写法：
1.&+字符
2，解决冲突啊左右尖括号、添加多个空格的实现
3.< > 等
1.16 无序列表
- ul列表和li列表项
<ul>列表：最外层容器和<li>列表项
必须符合嵌套规范，<ul> <li>--</li> </ul>两组标签间隔内不能添加其他标签
但<li></li>标签之间可以有其他标签
范例：
- type属性：改变前面标记的样式（一般用CSS去控制）
type属性详情参考:
https://www.jb51.net/w3school/tags/att_ul_type.htm
1.17 有序列表
- ol 和 li标签
<ol>、<li> 注意：有序列表用的非常少，经常用的是无序列表，无序列表
可以去代替有序列表。
和无序列表一样，有序列表的<ol><li>和</li></ol>两组标签之间不能添加
其他标签
写法：<ol type="type属性">
<li> 文本 </li>
</ol>
1.18 定义列表
1.<dl>:定义列表
2.<dt>定义专业术语或名词
3.<dd> 对名词进行解释和描述
写法：<dl><dd>列表项需要添加标题</dd>
<dt>对标题进行描述的内容</dt>
</dl>
功能：向列表项需要添加标题，添加对标题进行描述的内容
范例：
效果：
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
