day02 - HTML基础及标签学习1. 网站开发流程 1.1. 互联网职位介绍要想了解一个网站的开发流程，我们先要

1. 网站开发流程

1.1. 互联网职位介绍

要想了解一个网站的开发流程，我们先要知道几个互联网核心的岗位：

产品经理（PM又称为产品狗），是产品的缔造者（其实是听命于老板，老板才是缔造者），我们要做什么产品他有什么功能、用户群体是谁、盈利模式是什么等等，就像盖房子产品经理告诉你房子应该盖成什么样子，他会给到我们一张图纸，当然在互联网行业给到我们的叫做原型（交互、需求、功能）

modao.cc/app/afbCkZe…

#移动端-分享

上面就是原型图，大家可以看到原型的目的只是为了说明我们的产品都有什么功能，做成什么样、如何布局等等，是对互联网产品的整体说明展示，产品经理会把整套原型（因为一款互联网产品会有很多个网页组成）给到相关部门

UI设计，把原型转换成漂亮的页面同时需要设计交互效果，比如我们经常会看到网站的右下角有一个按钮“返回顶部”(www.jd.com/)，那么当用户点击返回顶部按钮的时候要不要添加动画效果呢？那动画应该是什么样子？都需要UI设计师来完成。UI设计师产出的是psd效果图和交互文档获交互演示模型
前端开发（HTML5、Android、IOS、小程序、鸿蒙），把UI设计师给到的效果图通过HTML和CSS转换成漂亮的网页，通过JavaScript把交互效果进行开发实现，最终产出具有动画效果的HTML网页，最后我们还需要后端开发的支持为我们提供API接口提供数据，我们再来完成数据的交互。
后端开发，操作数据库，通过编写代码把数据提供给前端开发，为前端工程师做数据交互提供支持
测试，产品研发完毕需要通过质量检测才能部署在线上供互联网用户访问
运营，公司投了大量的时间、金钱好不容易完成了，当然我们得好好养着我们得产品让他发展的更好，拿京东来举个例子我们可以看到，每到一个节日京东商城就在大肆搞宣传，目的是为了吸引更多的用户来京东购物，这就是运营的一种方式。还每到春节支付宝就集五福，这是支付宝运营的又一种方式

1.2. 互联网产品开发流程

课堂互动

效果图是谁负责完成的？
- A：后端
- B：前端
- C：产品经理
- D：UI设计
接口、数据库是谁负责完成的？
- A：后端
- B：前端
- C：产品经理
- D：UI设计
页面、交互效果、数据交互是谁负责完成？
- A：后端
- B：前端
- C：产品经理
- D：UI设计

2. HTML概述

2.1. 什么是网页和网站

网页：网页通常由图片、链接、文字、声音、视频等元素组成，是构成网站的基本元素
网站：用于展示相关内容的网页的集合

例：京东商城 www.jd.com/

总结：网站是由网页构成的，网页又是由文本、图片、视频、音频等元素构成的，多个网页组合而成了一个网站

2.2. Web的三大标准

2.3. 什么是超文本

html就叫做超文本标记语言

文本：意思是只能输入文字

超文本：意思是超越了文本的限制，不光可以输入文字还可以有其它的元素比如：图片、视频、音频等等

超文本就是用超链接的方法将不同的信息组织在一起的网状文本

标记用来区分网页的不同部分，比如文字、图片等

html是描述网页的超文本标记语言（并不是编程语言是超文本标记语言）

2.4. HTML是什么

HTML是超文本标记语言：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
它还可以从一个html文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

课堂互动

web核心的三大标准是什么？
- A：html结构
- B：css美化
- C：JavaScript行为
- D：UI设计

3. HTML基本结构

3.1. HTML标记语言的语法

HTML中的标签分为两种：双标签和单标签

双标签：<标签名>内容</标签名>

单标签：<标签名 />

双标签的标签关系可以分为两类：

包含关系

<head>
  <title></title>
</head>

并列关系

<head></head>
<body></body>

3.2. HTML基本结构

<html>
  <head>
    <title>页面标题内容</title>
  </head>
  <body>
    主体内容
  </body>
</html>

记忆方法：

3.3. HTML案例讲解

案例效果：

代码示例：

<html>
  <head>
    <title>这是我的第一个网页</title>
  </head>
  <body>
    <!-- 网页上所有的内容都要放在body标签里面 -->
    你好，程序员！
  </body>
</html>

课堂互动

标签嵌套语法格式正确的是
- A：文字内容
- B：文字内容
- C：文字内容
- D：文字内容

4. 元素和标签区别

4.1. 元素

元素是构成HTML文档的基本组成部分之一。一个HTML元素由一个开始标签（start tag）、可能的内容（如文本或其他元素）和一个结束标签（end tag）组成。元素定义了文档的结构和内容

<p>熊大</p>

<p>是开始标签，</p>是结束标签，而熊大是该段落元素的内容

4.2. 标签

标签是用于定义元素的标记。它由尖括号 < 和 > 包围，并且可以包含属性来进一步定义元素的行为。每个元素都由一对开始标签和结束标签表示，除非它是自闭合元素

<a href="https://www.baidu.com/" class="link">去百度</a>

<a>是开始标签，href和class是属性，</a>是结束标签

5. 浏览器

5.1. 浏览器大战历史

我们都知道在东汉末年的时候黄巾起义开始，直到曹丕称帝结束，持续36年，这段时间内诸侯割据，互相攻伐兼并。东汉末年，由于土地兼并越加尖锐，地主豪强拥有自己的兵马，再加上朝廷内部政治腐朽黑暗，外戚宦官干政，又无力管辖地方势力，因而造成群雄割据]的局面。

与三国混战类似的还有近代的军阀混战，清政府的腐败落后，使得帝国主义在中国长驱直入，在这一历史背景下，产生了一种特殊势力——军阀统治，民国时期的军阀统治给人民带来了深重的灾难。

在互联网行业有没有什么大战呢？ 世界历史从不缺少史诗般的权力斗争，有东汉末年的三国争霸，清朝末年的军阀混战。Web 浏览器的历史也大抵如此。学术先驱们编写出引发信息革命的简易软件，并为浏览器的优势和互联网用户而战。

在1995年以前，网景是互联网浏览器的绝对标准，因为虽然它的正式版本要收费，但是评估版是随便下载而且免费的。尽管微软从1995年8月开始发布IE 1.0，但真正惊动市场的是1997年10月份发布的IE4.0浏览器。这一款浏览器比网景更好的遵循了World Wide Web Consortium (W3C)提出的互联网标准，并能够提供一些诸如MP3播放之类的功能。自此以后，IE破竹之势一发不可收拾，再加上微软巨大的财力、人力后盾，网景终于在1998年以48亿美元的价格出售给了AOL公司。而后，网景被AOL变成了它ISP业务的门面，网景浏览器的核心团队至此已经全部离队。于是，第一回合微软大胜

然而，事情并没有就此结束。1998年网景公开了它的浏览器源码，并重新命名为Mozilla，全部程序进行了重写。2002年发布了第一个版本。2004年基于Mozilla源码的Firefox（火狐）首次登台，拉开了第二次浏览器大战的序幕。直到同年2月份，微软的浏览器份额已经从最高点的96%下降到了85%，主要是由于Firefox的强烈市场攻势。于是乎，微软再次全力以赴，迅速提前了原定配合Longhorn Windows版本的IE 7.0的发布日期，用来与火狐狸（Firefox）抗衡

第二次大战并不像第一次那么简单。这次不只是IE和火狐狸的斗争了。一些新的基于不同引擎的浏览器也加入了阵营，比如挪威的Opera （欧朋)和中国的Maxthon（遨游）、Chrome（谷歌）、Safari（苹果）等等浏览器也加入了阵营并且还创立了W3C组织（万维网联盟）共同抗衡抵制IE，市场份额遭到了蚕食，最终以W3C获胜。在W3C浏览器中最为突出的就是Chrome， 2008 年 Google 推出 Chrome 浏览器，其卓越的性能、简洁的界面以及捆绑 Google 搜寻的优势，快速攻城掠地，除了侵蚀原有属于 Firefox 的市场之外，也同时痛殴老旧的微软 IE。到了 2012 年，Google Chrome 在流量统计机构 Statcounter 的数量里终于超越 IE，成为全球第一大浏览器。

正因为浏览器的标准几乎统一因此现在大家做网页无需再过多考虑兼容性的问题，在2013年前做网页有些细节在不同的浏览器展示出来的效果是不相同的这就是兼容的问题，当时还需要针对不同的浏览器进行不同代码的编写才能做到一个网页在浏览器显示效果相同。

第一战：网景和微软的，微软赢了

第二战：W3C阵营（火狐、欧朋、谷歌、苹果等）对战微软，W3C赢了，最大的获益者是谷歌

兼容性的概念：早些年浏览器的厂商他们的标准不统一，举个例子，比如说不同的浏览器解析我们的html标签是不一样的，最简单的例子，IE6在解析margin-left：20px;外边距，在标准W3C浏览器下面会把margin-left:20px;解析为10px

5.2. 浏览器和网页的关系

网页是由 html标签描述出来，然后通过浏览器解析来显示给用户的

前端工程师完成代码的编写 -> 浏览器解析代码 -> 生成漂亮的网页

5.3. 常用浏览器

360浏览器	谷歌浏览器	搜狗浏览器	百度浏览器

qq浏览器	火狐浏览器	IE浏览器	UC浏览器

5.4. 代表性浏览器

IE浏览器：如果大家用的是windows系统必装IE浏览器

火狐浏览器（Firefox）：火狐浏览器它的插件比较多调试程序比较方便而且安装插件不用翻墙（受国情限制不能访问国外的网站，想要访问的话我们需要借助于第三放的一些代理工具）

谷歌浏览器（Chrome）：市场占有量最高的浏览器（我们以后浏览器网页都要谷歌浏览器）弊端就是安装chrome插件需要翻墙，还有一种方法就是本地安装，后续用到的时候一步步演示给大家看

Safari（苹果）：相对用的少一些

Opera（欧朋）：少之又少了

查看浏览器市场份额：

gs.statcounter.com/

tongji.baidu.com/research/si…

课堂互动

浏览器两次世界大战结果正确的是？
- A：第一次世界大战是IE赢了，第二次还是IE赢了
- B：第一次世界大战是IE赢了，第二次是W3C赢了
- C：第一次世界大战是Firefox（赢了）赢了，第二次是W3C赢了
- D：第一次世界大战是Firefox（赢了）赢了，第二次是IE赢了

6. 标题标签

6.1. 标题标签及特点

HTML提供了6个等级的标题标签，即h1 - h6

用在这里

标题标签是以h开头的双标签一共六个
<h#>内容</h#> #代表的是1-6

例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1. 标题文字自动加粗;
2. 一级标题字号最大,六级标题字号最小;
3. 独占一行

6.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>
    <h1>星之守护者杯 魔法少女解除快乐封印 引爆克隆之夜！</h1>
    <h2>超豪华阵容 你想不到的混搭</h2>
    <h3>四大战队 pick哪一队?</h3>
    <h4>【可可爱爱队】人如队名，全员可爱</h4>
    <h5>冯提莫、盗月社食遇记、你的苏暖、艾克本人、gini酱</h5>
    <h6>【百因必果队】搞笑大师戳中每个笑点，游戏赛场秒变群口相声</h6>
  </body>
</html>

6.3. 标题标签属性

6.3.1. 什么是属性

6.4. 属性的书写格式

双标签： <标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
单标签:  <标签名 属性1="属性值1" 属性2="属性值2"/>

小口诀

开始标签有属性

两者之间加空格

属性与值等号连

属性值外用引号

6.4.1. 标题标签属性align

h标签里面内容的水平位置

语法：

<h# align="位置">内容</h#>

位置取值：
左：left（默认值）
中：center
右：right

代码：

<!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>标题标签的讲解练习</title>
  </head>
  <body>
    <h1 align="center">h1标签：星之守护者杯 魔法少女解除快乐封印 引爆克隆之夜！</h1>
    <h2 align="right">h2标签：超豪华阵容 你想不到的混搭</h2>
    <h3 align="center">h3标签：四大战队 pick哪一队?</h3>
    <h4 align="center">h4标签：【可可爱爱队】人如队名，全员可爱</h4>
    <h5 align="center">h5标签：冯提莫、盗月社食遇记、你的苏暖、艾克本人、gini酱</h5>
    <h6 align="center">h6标签：【百因必果队】搞笑大师戳中每个笑点，游戏赛场秒变群口相声</h6>
  </body>
</html>

效果：

课堂互动

关于HTML属性，语法格式正确的是？不对的说出哪里不对
- A：<标签名>属性="属性值"文本</标签名>
- B：<标签名属性="属性值">文本</标签名>
- C：<标签名属性="属性值">文本</标签名>
- D：<标签名属性:"属性值">文本</标签名>

7. 段落标签

7.1. 段落标签格式及应用

段落标签就像上学时候写的作文一样，一段一段的

用在这里

<p>段落内容</p>

内容用不用P标签包裹，在网页的视觉上是一样的，那为什么还要用p标签呢？

p是独占一行
为了SEO，同样一段内容用p包裹的那么当百度蜘蛛看到以后就给给予更高权重，如果没有用p标签包裹的那么百度蜘蛛不会给予权重
昨天讲的h1标签权重要比p高的多（p标签的权重现在在SEO可以忽略不计）

SEO，翻译过来就是搜索引擎优化，大白话为了百度的排名！

我们搜索“晓东”关键字排在第一的并不是咱班的晓东而是导演晓东，为什么呢？就是导演晓东的知名度最高流量最大，那如果我想让咱们班的晓东排名靠前该怎么做呢？

百度如何抓取我们网页的信息或者是内容呢？

百度有个机器人一般我们百度蜘蛛
当你的网站完成后你可以提交给百度
百度看到了你的提交那么他就会审核你的网站内容，排除蜘蛛抓取内容然后分析内容

常见的搜索引擎：

百度
360搜索
搜搜
微软bing
Google

7.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>标题标签</title>
  </head>
  <body>
    <p>
      英雄联盟*哔哩哔哩直播将举办“星之守护杯”，极致混搭知名主播和UP主，打造最快乐的英雄联盟克隆模式之夜，4月12日20:00，锁定英雄联盟官方电视台及哔哩哔哩直播英雄联盟分区，看谁能憋笑到结束!
    </p>
    <p>
      新生代女歌手，人美歌甜冯提莫撞上淄博梗王朴实无华朱一旦;在线爆笑峡谷的变形五憨憨偶遇最强鳄鱼Gogoing;靠脸吃饭的徐大王碰上百因必有果你的报应就是我的韩美娟，遇上想来当天的峡谷必定快乐非凡!~
    </p>
  </body>
</html>

7.3. 属性

语法：

<p align="位置">内容</p>

位置取值：
左：left（默认值）
中：center
右：right

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p align="center">超豪华阵容 你想不到的混搭</p>
</body>
</html>

效果：

8. 水平线标签

8.1.1. 水平线标签格式

用在这里

<hr />
单标签（单身狗）

效果图

<!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>标题标签</title>
  </head>
  <body>
    <h1>星之守护者杯 魔法少女解除快乐封印 引爆克隆之夜！</h1>

    <hr />

    <p>英雄联盟*哔哩哔哩直播将举办“星之守护杯”，极致混搭知名主播和UP主，打造最快乐的英雄联盟克隆模式之夜，4月12日20:00，锁定英雄联盟官方电视台及哔哩哔哩直播英雄联盟分区，看谁能憋笑到结束!</p>
    <h3>超豪华阵容 你想不到的混搭</h3>
    <p>新生代女歌手，人美歌甜冯提莫撞上淄博梗王朴实无华朱一旦;在线爆笑峡谷的变形五憨憨偶遇最强鳄鱼Gogoing;靠脸吃饭的徐大王碰上百因必有果你的报应就是我的韩美娟，遇上想来当天的峡谷必定</p>
    <h3>四大战队 pick哪一队?</h3>
    <h4>【可可爱爱队】人如队名，全员可爱</h4>
    <p>冯提莫、盗月社食遇记、你的苏暖、艾克本人、gini酱</p>
    <h4>【百因必果队】搞笑大师戳中每个笑点，游戏赛场秒变群口相声</h4>
    <p>韩美娟Amir、靠脸吃饭的徐大王、守护茶茶、布锅锅、永夜的星指引</p>
    <h4>
      【最强劳力士队】最壕战队，旦总领衔
    </h4>
    <p>朱一旦的枯燥生活、Gogoing、英雄联盟官方频道、朱一旦的非洲队员*2</p>
    <h4>【变形兄弟】再度合体，人帅梗多</h4>
    <p>徐大虾咯、力元君、啊吗粽、在下哲别、福乐小哥</p>
  </body>
</html>

8.1. 水平线标签属性

水平线标签的属性

(1)宽度属性: width
属性值: 数字+像素
例:<hr width="300px"/> 水平线宽300像素

(2)粗细属性: size
属性值: 数字+像素

例:<hr size="5px"/> 水平线粗5像素

(3)颜色属性: color
属性值: 颜色的英文单词/16进制/rgba（不准确）

例:<hr color="red"/> 水平线颜色为红色
<hr color="#FF0000"/> 水平线的颜色为红色
<hr color="rgba(255,0,0)"/> 也代表红色，但是rgba形式在HTML标签内书写不会生效，在后面将要学习的css中会用到


<!-- 
小拓展：
1.十六进制是一种基数为16的计数系统，是一种逢16进1的进位制。通常用数字0、1、2、3、4、5、6、7、8、9和字母A、B、C、D、E、F（a、b、c、d、e、f）表示，其中:A~F表示10~15，这些称作十六进制数字。
2.rgba是代表red（红色）green（绿色）blue（蓝色）和alpha(透明度)的色彩空间,可通过数值获取不同的颜色。
-->

(4)水平对齐方式属性: align
属性值: left、center（默认值）、right
左     中     右

例：<hr align="left"/> 水平线水平向左对齐
<hr align="center"/> 水平线水平居中对齐
<hr align="right"/> 水平线水平向右对齐
(5)noshade：分割线不包含阴影
<hr noshade />

8.1.1. 水平线标签案例练习

效果图

代码

<!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>标题标签</title>
  </head>
  <body>
    <h1>星之守护者杯 魔法少女解除快乐封印 引爆克隆之夜！</h1>

    <hr color="black" size="5px" width="240px" align="center"/>

    <p>英雄联盟*哔哩哔哩直播将举办“星之守护杯”，极致混搭知名主播和UP主，打造最快乐的英雄联盟克隆模式之夜，4月12日20:00，锁定英雄联盟官方电视台及哔哩哔哩直播英雄联盟分区，看谁能憋笑到结束!</p>
    <h3>超豪华阵容 你想不到的混搭</h3>
    <p>新生代女歌手，人美歌甜冯提莫撞上淄博梗王朴实无华朱一旦;在线爆笑峡谷的变形五憨憨偶遇最强鳄鱼Gogoing;靠脸吃饭的徐大王碰上百因必有果你的报应就是我的韩美娟，遇上想来当天的峡谷必定</p>
    <h3>四大战队 pick哪一队?</h3>
    <h4>【可可爱爱队】人如队名，全员可爱</h4>
    <p>冯提莫、盗月社食遇记、你的苏暖、艾克本人、gini酱</p>
    <h4>【百因必果队】搞笑大师戳中每个笑点，游戏赛场秒变群口相声</h4>
    <p>韩美娟Amir、靠脸吃饭的徐大王、守护茶茶、布锅锅、永夜的星指引</p>
    <h4>
      【最强劳力士队】最壕战队，旦总领衔
    </h4>
    <p>朱一旦的枯燥生活、Gogoing、英雄联盟官方频道、朱一旦的非洲队员*2</p>
    <h4>【变形兄弟】再度合体，人帅梗多</h4>
    <p>徐大虾咯、力元君、啊吗粽、在下哲别、福乐小哥</p>
  </body>
</html>

课堂互动

Hr标签的属性应用，语法格式正确的是？不对的说出原因

A：<hr width="500" color="red" align="center" />
B：<hr size="2" width="400" align="center"></hr>
C：<hr size="1" color="red" width="400"/>
D：<hr width="400" size="3" align="top" />

9. html5

9.1. 快速生成html基本结构

在VSCode中按住shift不要松然后按!，就会出现如下图

按下回车键(enter)或者是tab，就会生成基本的html结构

9.2. 遵循版本

<html>
	<head>
		<title>这是我的第一个网页</title>
	</head>
	<body>
		<h6>六级标题</h6>
	</body>
</html>

以上这段代码到底是按照html哪个版本规范去解析的呢？你并没有告诉浏览器！绝大多数的浏览器会按照最新的html5的规范去解析网页，为了保证所有的浏览器能够按照统一的规范去解析渲染网页因此我们得明确的告知浏览器按照哪个html版本规范去渲染我们的网页

HTML也分为很多版本，到底让浏览器按照哪个版本去识别你的网页标签（h1 - h6、p、hr以及等等所有的标签和特性）呢？

html最新的版本是5简称HTML5，是2014年发布的版本

9.3. html5文档声明

意义就是告诉浏览器按照哪个html版本去渲染网页

<!DOCTYPE html>
<!-- DOC是document的缩写 TYPE就是TYPE类型的意思 html意思代表的就是html5 ，必须写在html文档的第一行-->

<!DOCTYPE html><!-- 告诉浏览器渲染这个html页面的时候遵循html5的规范 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

developer.mozilla.org/zh-CN/docs/…

9.4. 其它html文档声明

www.w3.org/QA/2002/04/…

10. html5文档编码

编码发展历史：

ASCII：大写字母、小写字母、数字、一些符号，共计128个

ISO8859-1：在ASCII基础上扩充了一些希腊字符等，共计256个

GB2312：继续扩充，收录了6763个常用汉字，682个字符

GBK：收录了汉字和符号达到了20000+支持繁体中文

UTF-8（万国码）：包含了世界上所有的语言，所有文字和符号，常用！

原则：存储时，务必采用合适的字符编码，否则无法存储数据会丢失（IE浏览器如果不指定编码会被解析成乱码）

绝大多数浏览器默认的解码方式是utf-8，但是为了保证全部的浏览器不出问题能够全部使用统一的编码方式，因此我们需要指定

<html>
  <head>
    <meta charset="utf-8 />
    <title></title>
  </head>
</html>

11. 语言设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hello
</body>
</html>

12. Emmet语法

是一个能大幅度提高前端开发效率的一个工具

后代: >使用方法: div>ul>li

<div>
  <ul>
    <li></li>
  </ul>
</div>

兄弟: +使用方法: div+p

<div></div>
<p></p>

重复多份: 使用方法: p5

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

id缩写: #id名使用方法: #header

<div id="header"></div>

5. class缩写: .class名使用方法: .title

<div class="title"></div>

Emmet语法扩展：docs.emmet.io/cheat-sheet…

13. 扩展

13.1. 调试技巧

你要看网页上面哪块儿的内容，这么操作

鼠标放到你要查看的内容那里

单击鼠标右键，选择检查

就会把你要查看的内容定位到了具体的源代码位置

day02 - HTML基础及标签学习

1. 网站开发流程

1.1. 互联网职位介绍

1.2. 互联网产品开发流程

2. HTML概述

2.1. 什么是网页和网站

2.2. Web的三大标准

2.3. 什么是超文本

2.4. HTML是什么

3. HTML基本结构

3.1. HTML标记语言的语法

3.2. HTML基本结构

3.3. HTML案例讲解

4. 元素和标签区别

4.1. 元素

4.2. 标签

5. 浏览器

5.1. 浏览器大战历史

5.2. 浏览器和网页的关系

5.3. 常用浏览器

5.4. 代表性浏览器

6. 标题标签

6.1. 标题标签及特点

6.2. 标题标签案例练习

6.3. 标题标签属性

6.3.1. 什么是属性

6.4. 属性的书写格式

6.4.1. 标题标签属性align

7. 段落标签

7.1. 段落标签格式及应用

7.2. 段落标签案例练习

7.3. 属性

8. 水平线标签

8.1.1. 水平线标签格式

8.1. 水平线标签属性

8.1.1. 水平线标签案例练习

9. html5

9.1. 快速生成html基本结构

9.2. 遵循版本

9.3. html5文档声明

9.4. 其它html文档声明

10. html5文档编码

11. 语言设置

12. Emmet语法

13. 扩展

13.1. 调试技巧

14. 作业

14.1. 作业1

14.2. 作业2