整体介绍
互联网基本原理 HTML5基础入门 HTML5的基本标签 HTML5的特性 项目开发
互联网基本原理
在本地开发，在服务器共享
本地开发：.html、.css、.js文件 服务器共享：24h不断电的超级计算机，本地文件上传服务器共享 比如将a.html文件传输到Vercel服务器的b文件夹中，此时这个文件就拥有了www.vercel.app/b/a.html,所有用户都可以访问这个网址看见我们做的网页啦 其中www.vercel.app称为域名。
通过浏览器输入网址通过http请求协议即可访问
前端与后端
W3C组织
W3C(The World Wide Web Consortium）万维网联合会是万维网的主要国际标准组织。该联盟成立于1994年，负责制定web标准，主要是HTML和CSS。
HTML5骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>小技巧：
<!DOCTYPE html>
文档类型声明DTD：
不同类型HTML的DTD：
<html lang=“en”>
lang属性表示网页语言，zh代表中文，不改也行
<meta charset=“UTF-8”>
meta:元标签，表示网页的基础配置 charset:字符集 UTF-8：是一种字符集
g2312相比UTF-8节约一个字节
注意：更改字符集时一定要将编辑器(VSCODE通过编码保存)设置为相同字符集，否则会出现乱码
<title>Document</title>
title标签用来设置网页的标题，文字会显示在浏览器的标签栏上 title标签也是搜索引擎收录网站时显示的标题，为吸引用户点击，合理设置是必要的
网页关键词和页面描述
SE0(Search Engine Optimization)搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益 合理设置网页的网页的关键词和页面描述，也是SEO的重要手段 使用meta标签设置网页关键词和描述，name属性非常关键用来设置meta的具体功能
<meta name="Keywords" content="MK网,imooc,JAVA,前端，Python,大数据">
<meta name="Description" content="MK网(IMOOC)是IT技能学习平台。MK网(IMOOC)课程涉及JAVA、前端、Python、大数据等6O类主流技术语言，覆盖了面试就业、职业成长、自我提升等需求场景，帮助用户实现从技能提升到岗位提升的能力闭环。">
认识标签
什么是标签
HTML叫做“超文本标记语言”，超文本标记就是标签，这些标签都有不同的功能
标签对
<p>…</p>
标签通常成对儿出现： <p>:起始标签 </p>:结束标签 不同功能的标签有不同的功能： p标签表示段落 h1标签表示一级标题
单标签
<meta charset=“UTF-8”>
有的标签不是成对儿的，而是只有起始标签，称为单标签 在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写 <meta charset=“UTF-8”/>
标题与段落标签
标题标签
<h1></h1> h系列标签表示”标题”语义，h是headline的意思
搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容放到<h1></h1>中，比如网页的logo等
<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊 提示：实际开发中，也会出现多个<h1>标签的情况，只是不推荐
段落标签
<p></p> <p></p>标签表示段落标签，p是英语paragraph的意思
任何段落都要放到<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>中 <p></p>标签中不能嵌套h系列标签和其他p标签
div标签
<div></div> div是英语division”分割”的缩写，顾名思义
<div></div>标签对用来将相关的内容组合到一起，以和其 他内容分割，使文档结构更清晰 比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中
<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做”DIV+CSS”
<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称<div></div>为”盒子”
HTML5特性
空白折叠现象
文字和文字之间的多个空格、换行会被折叠成一个空格 标签“内壁”和文字之间的空格会被忽略
转义字符
常见转义字符（字符实体）:
HTML注释
<!—注释⇒
项目开发
工作开发流程
原型图和设计图
原型图以简单线条大致描述布局和功能，细节比如颜色、样式无具体标注 设计图一比一还原网页的最终实现样式 前端开发工程师需要根据设计图或原型图测量出数据，进行编程 测量： 曾经很长久一段时间，前端开发工程师要使用PS和FW对设计图进行测量 现在测量原型图非常先进，设计师使用Axure或者Sketch等软件，可以直接给我们“直观标注”的原型图/设计图。 既可以获取图片数据，也可以得到图片资源
图片有多种格式，小中大格式适应不同屏幕进行使用
项目起步
绝大多数服务器默认网站首页名为index.html。 接下来创建资源文件夹：
div标签类名
<div>标签可以添加class属性表示”类名”，类名服务于css 一般默认命名（推荐）
