HTTP协议（Hypertext Transfer Protocol,超文本传输协议）是互联网数据传输的常见协议
一次HTTP事务是由“HTTP请求”和“HTTP响应”构成
往直前的http：//就表示http协议请求页面
输入网址（IPAD、手机、PC端）输入网址或者扫描二维码，向服务器发出（HTTP请求），服务器会正确识别发来的HTTP请求，分析出用户想看的是那个文件夹的哪个文件，最终发回给用户（HTTP响应）
1.HTTP请求
2.在服务器上，java、php、Python等程序将允许，执行数据库“增删改查”等业务员，它们就是后端语言
3.HTTP响应
4.在浏览器中，HTML、CSS、JS程序将运行，执行页面结构渲染、美化、交互效果等业务，它们就是前端语言
方法一：
（1）创建一个空文件夹，在VS code编辑器中打开这个文件夹
（2）按ctrl+N快捷键新建文件，保存格式必须手动填写。html后缀
方法二：
（1）在文件夹中直接点击鼠标右键“新建文本文件”
（2）将。txt格式文件改为。html文件
（3）必须设置操作系统“文件扩展名”为可见
html是纯文本的
网页虽然是花花绿绿的，但html文件本身都是纯文本的
html骨架的生成
输入！（英文模式下输入的感叹号），按tab键，即可自动生成html5骨架
如果骨架没有生成，就说明你没有将网页保存，或者网页保存哥是不是。html后缀
浏览网页的方法
方法一：
直接在文件夹中双击网页图标，即可查看网页
Chrome浏览器非常适合开发，所以要将Chrome浏览器设置成默认浏览器，杀毒软件、管家通常会组织这个操作，请妥善处理设置杀毒软件相关设置
方法二：
给VScode安装Live Server插件，顾名思义，这个插件可以让“实时热更新”网页，自动刷新网页
安装完插件后，在html文件中，按ctrl+shift+p键，选择"open with live server"即可
使用这种方法必须注意：网页必须存放在文件夹中，且VScode已经打开这个文件夹
自由编程
（1）文档类型声明DTD
HTML文件第一行必须是DTD（Document Type Definition,文档类型声明）
不写DTD会引发浏览器的一些兼容问题
不同版本的HTML有不同的DTD写法 HTML5：
W3C（The World Wide Web Consortium，万维网联合会）是万维网的注意国际标准组织。该联盟成立玉1994年，负责制定Web标准，主要是HTML和CSS
（2）认识标签对
lang属性表示网页的语言，zh表示中文，不改也行
（3）认识和标签对
缩进 选中代码+Tab
<head></head>标签对儿是网页的配置，不要认为是网页的头部
<body></body>标签对儿中书写网页的内容，包括网页的头部，主要内容、页脚等各个部分
<meta charest=“UTF-8”>
meta:元标签，表示网页的基础配置
charset：字符集
UTF-8：字符集（UTF-8/GB2312（GBK））
更改网页的字符集：无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同的字符集，否则会出现乱码，然后更爱meta标签 <meta charest=“UTF-8”> <meta charest=“GB2312”> <meta charest=“GBK”>
Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集
（1）title
title设置出现的位置 <title>Document</title>
title标签用来设置网页的标题，文字会显示在浏览器的标签栏上 <title>慕课网-程序员的梦工厂</title>
title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的
（2）网页关键词和页面描述
合理设置网页的页面的关键词和页面描述，也是SEO的重要手段
SEO（Search Engine Optimization,搜索引擎化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益
使用meta标签设置网页关键词和页面描述，name属性非常关键，用来设置meta的具体功能
<meta name=“Keywords” content=“慕课网，imooc，JAVA，前端，Python，大数据”>
<meta name=“Description” content=“慕课网（IMOOC）是IT技能学习平台。慕课网（IMOOC）课程设计JAVA、前端、Python、大数据等60类主流技术语言，覆盖了面试就业、职业成长、自我提升等需求场景，帮助用户实现从技能提升到岗位提升的能力闭环”>
（1）HTML叫做"超文本标记语言"，超文本标记就是标签
（2）这些标签都有不同的功能
（3）标签通常都是成对儿出现的
（4）标签对： p标签表示段落
（起始标签） 不负韶华，只争朝夕
（结束标签）
h1标签表示一级标题 <h1>（起始标签） 不负韶华，只争朝夕（结束标签）
（5）标签可以给文字设置不同的"语义"
（6）单标签：有的标签不是成对儿的，而只有其实标签，称为但标签
（7）在HTML4，但标签必须写一个结尾的反斜杠，HTML5不用写<meta charset=“UTF-8” />
HTML叫做"超文本标记语言"，超文本标记就是标签 超文本标记： <p> </p>
1.标题标签
（1）h系列标签表示”标题“含义，h是headline的意思
（2）搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容放到<h1></h1>中，比如网页的logo等
（3）<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊
2.段落标签
（1）<p></p>标签表示段落标签，p是英语paragraph的意思
（2）任何段落都要放到<p></p>标签中，因为HTML中即使代码换行了，页面显示效果页不会换行，必须写道<p></p>中
（3）<p></p>标签中不能嵌套h系列标签和其他p标签
3.编程练习
div是英语division"分割"的缩写，顾名思义，<div></div>标签对用来将相关内容组合到一起，以和其他内容分割，是文档内容更清晰
比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中
<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”
<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为盒子
标签可以添加class属性表示“类名”，类名服务于css
区域 类名
页头 header
logo logo
导航条 nav
横幅 banner
内容区域 content
页脚 footer
1.空白折叠现象
（1）文字和文字之间的多个空格，换行会被折叠成一个空格
（2）标签“内壁”和文字之间的额空格会被忽略
2.转义字符
请首先自己试试看：在网页中显示”今天我们学习了<p></p>标签的功能是段落“
常见转义字符（字符实体）：
转义字符 意义
< 小于
> 大于
  空格（不会被折叠）
© 版权符号
3、HTML注释
为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示
HTML的注释语法如下，可以在VScode编辑器中使用ctrl+/键输入
1.工作开发流程
产品经理：提出需求，画出原型图
设计师（UI/UE）：画出设计图
前端开发工程师
2.项目起步
创建文件夹结构，主要文件夹如下 images（存放图片） css（存放样式表） js（存放js文件）
网站首页index.html:绝大多数服务器默认的网站首页名为index.html
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery