一、互联网基本原理
在本地开发，在服务器共享
本地：.html .css .js需要上传到服务器上才能被用户看见
二、HTTP协议
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已经打开这个文件夹
自由编程
五、认识HTML5骨架
（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字符集
七、title、关键词及页面描述
(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
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标签
div是英语division"分割"的缩写，顾名思义，<div></div>标签对用来将相关内容组合到一起，以和其他内容分割，是文档内容更清晰
比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中
<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”
<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为盒子
区域 类名
页头 header
logo logo
导航条 nav
横幅 banner
内容区域 content
页脚 footer
十二、HTML5特性
1.空白折叠现象
(1)文字和文字之间的多个空格，换行会被折叠成一个空格
(2)标签“内壁”和文字之间的额空格会被忽略
2.转义字符
请首先自己试试看：在网页中显示”今天我们学习了<p></p>标签的功能是段落“
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uDSnHEsP-1610270759974)(D:\Desktop\1.2.7.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/bf5018d5e888c37c740a3e8dde62fd50.jpeg)
常见转义字符(字符实体)：
转义字符 意义
< 小于
> 大于
  空格(不会被折叠)
© 版权符号
3、HTML注释
为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示
HTML的注释语法如下，可以在VScode编辑器中使用ctrl+/键输入
十三、小慕医生项目开发
1.工作开发流程
产品经理：提出需求，画出原型图
设计师(UI/UE):画出设计图
前端开发工程师
2.项目起步
创建文件夹结构，主要文件夹如下 images(存放图片) css(存放样式表) js(存放js文件)
网站首页index.html:绝大多数服务器默认的网站首页名为index.html
课程总结
1.HTML是什么？如何创建网页？如何浏览网页？
HTML:Hypertext Markup Language 超文本标记语言
2.HTML5骨架是什么结构？什么是DTD？
3.标题和段落标签、div标签要如何使用？
4.网页的字符集有什么区别？UTF-8；GB2312（GBk）
5.常见的SEO配置项和应该遵守的规则有哪些？
6.HTTP是什么？我们做好的网页如何被用户看见？
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
