【HTML入门】
文章目录
主要内容
1.授课说明
2.程序员岗位简介
3.互联网技术概念入门
4.HTML入门
学习目标
| 知识点 | 要求 |
|---|---|
| 授课说明 | 了解 |
| 程序岗位介绍 | 了解 |
| CS和BS模式 | 了解 |
| 什么是html | 了解 |
| html的作用 | 了解 |
| 什么是html | 熟悉 |
| html的作用 | 熟悉 |
| Html的版本 | 熟悉 |
| html的标准结构 | 熟练 |
| IDE(常见开发工具安装) | 了解 |
| Hbuilder安装和使用 | 熟练 |
| Html基本结构 | 熟练 |
第一节:程序员岗位介绍
（1）概念区分
日常生活中，很多网页呈现出来的简洁布局、精心设计以及各种灵动效果总是让我们赞叹不已，而创造这些酷炫体验的，正是背后的 web 开发者。早在3年前，互联网就囊括了六亿八千多万的页面，这个数字还在持续快速增长。这意味着，web开发的人才需求空前繁盛。据估计，web开发方面的人才需求在接下来十年还会20%的增长，大大超过所有行业的平均水平。
（2）前端（web前端）
做页面 交互处理
Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，处理视觉和交互问题。在Web前端这个岗位兴起之前，html+css的工作是被视觉人员所承担的，而js这部分则是由后端完成的。随着智能手机和移动互联网的普及，PC端、手机端等五花八门的应用占领着每个人的手机，随之而来各种定制化的UI风格让兼容问题变得越来越头疼。因此，有企业开始把html+css+js这部分工作独立出来，由一个新的岗位来处理，成为了一个处理视觉和交互的综合岗位，这才有了Web前端这个岗位的出现。因此，Web前端开发行业是伴随Web兴起而细分出来的行业。实际上，Web前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，它存在在互联网的每个角落，我们使用的微信里面的各种功能、小程序等都离不开web前端技术。
一名优秀的Web前端工程师，需要JavaScript语言基础扎实，具有良好的规范开发习惯；熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；要熟悉MVVM、MVC开发模式；熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；熟练使用git版本管理工具。
此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。
目前前端的薪资水平：
（3）后端
是什么给网站前端提供支持？数据存放在哪里？这就涉及后端内容了。网站后端包括服务器、应用还有数据库。后端开发者构建并维护这些组件，为网站提供多方面支持。
为了让服务器、应用、数据库能够彼此交互，后端工程师需要具有如下技能：
用于应用构建的服务器端语言： PHP, Ruby,Python, Java, .Net 等；
数据相关工具： MySQL, Oracle, SQLServer,MongoDB,Redis等；
版本控制工具：SVN, CVS , Git 等；
还要熟练使用 Linux 作为开发和部署环境。
目前java工程师的薪资水平：
（4）全栈
有时前后端之间并没有明确的界限，"前端开发者通常需要额外学习后端技巧，反之亦然，尤其在特定市场条件下"，Matranga 说"开发者需要跨领域知识，有时甚至需要成为全才。"
全栈工程师，最初是6年多以前由 Facebook 带动的概念。全栈的核心，是指这批开发者能够承担包括前端、后端在内的所有功能开发任务，他们拥有一个技能全家桶。
"能够同时承担服务器端和客户端工作会为你带来更多机会，" Grovo 的全栈工程师 Federico Ulfo 说 "当然这也就意味着更多的挑战。以厨艺作类比，掌握烹饪和烘焙都需要时间与经验积累，同时掌握两者要花费更多精力。照着菜谱做谁都可以，我此处所说的是做出真正美味东西的能力。"
具体工具依项目和客户需求而定，全栈开发者需要对 Web 架构的每一个层次都有足够的了解：搭建和配置 Linux 服务器，编写服务器端 API，利用客户端 Javascript 代码驱动应用，将设计层面的东西转化到实际的 CSS 代码。
掌握并使用大量工具的同时，全栈开发者需要敏捷地分配服务器端和客户端任务，提供解决方案并对比不同方案的优劣。
目前全栈工程师的薪资水平：
（5）关系总结图
红色部分:前端
绿色部分:后端
（6）其他
以后我们同学可能做到的职位：java工程师，前端工程师，DBA，测试，产品/项目经理，运维，架构师（架构师++职位++ 都具备全栈++技能++）等。
第二节:互联网技术概念入门
（1）CS/BS模式
互联网软件的两种模式
Client/Server
客户端/服务器模式
王者荣耀 手机QQ 手机微信 极品飞车系列使命召唤系列 CF
1需要下载安装客户端
2软件有客户端和服务端两部分组成
3软件更新比较麻烦所有的客户端都需要更新
4运算压力可以分摊给各个终端服务器承担的运算压力可以大大减轻
Browser/Server
浏览器/服务器模式
各种网站 b站 尚学堂官网 京东 淘宝
1不需要下载安装客户端只需要有一个浏览器即可
2软件全部部署在服务器端
3软件更新比较简单只要更新服务器即可
4运算压力基本在服务端 一般不会用来做大型游戏
（2）互联网三大基石
三大基石：URL，HTTP协议，HTML
互联网软件依赖的三种基础技术
URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。
HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。（共同遵守的解析规范）
HTML：HTML称为超文本标记语言。
假设小明给小红传纸条
URL : 小红的地址 小红的座位
HTTP协议: 以中文发送"中文"就是一个共同遵守的解析数据的规范
HTML: 纸条上的内容 信息的载体 >>> 晚上去看电影呀
第三节:HTML入门
（1）什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: H yperT ext M arkup Language
a) 超文本：比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容（图片、视频等以文字的形式展现出来）
b) 一般由前端工作人员来完成,后台研发人员不需要编写
c) 标记：(标签/元素/标记)
标记通常被称为 HTML 标签 (HTML tag)。
· HTML 标签是由尖括号包围的关键词，比如
· 封闭类型标记（也叫双标记），必须成对出现,如
· 标签对中的第一个标签是开始标签，第二个标签是结束标签
· 开始和结束标签也被称为开放标签和闭合标签
· 非封闭类型标记，也叫作空标记，或者单标记，如
总结：我们学习HTML就是学习各种各样的标签，可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析，就可以在浏览器上展示好看的效果 。
（2）HTML的作用
通过使用HTML的各种标签，然后生成一个HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)
文件拓展名 windows 上每个文件都是有拓展名
文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序
一般win7和win10 默认隐藏文件拓展名 xp默认显示文件拓展名
网页文件 拓展名为 .html 或者.htm 的纯文本文件
（3）HTML版本
（4）HTML的标准结构
创建一个HTML文件
通过记事本编辑代码即可，用该语言编写的文件，以 .html或 .htm为文件拓展名。
HTML不区分大小写，建议小写
开始写代码：
步骤：
（1）新建一个文本文档，将文本文档的后缀改为.html
（2）右键-用记事本打开，编写代码
| 这是我的第一个html页面，入门页面，就是最基本的结构 |
|---|
（3）下载谷歌浏览器
（4）选择文本文档，右键-打开方式-谷歌浏览器
（5）展示页面效果
根标签 html 最外层的标签 所有其他的标签都放入该标签中
html根标签有两个一级子标签（直接包含在html里面，离html最近的） 分别是head body
head中一般放的是不显示在网页上但是又比较重要的信息
body中一般放的是显示在页面上的内容
（5）IDE介绍
集成开发工具 >>>> IDE
编码工具：
辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。
写代码也一样，需要借助工具来开发。
常见的编码工具有记事本、sublime Text、notepad++
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。
我们使用的是Hbuilder。
（6）用Hbuilder开发步骤
(1) 将我提供的Hbuilder.zip压缩包解压
(2) 在解压后的文件夹中找到Hbuider.exe,直接双击使用，无需安装
(3) 用邮箱注册，用的功能会更多一点
(4) 选择视觉效果(选择你能看到的最浅的颜色)
(5) 新建项目：
(6) 在项目下新建一个html文件：
(7) 编写代码：
html
<html>
<head>
<title></title>
</head>
<body>
this is my second html...
</body>
</html> (8) 用谷歌浏览器运行：
(9) 在浏览器上可以看到效果：
字符集应当与当前文件使用的字符集保持一致。
（7）HTML基本结构
HTML 标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
html
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
</body>
</html>head 标签
Head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
、、、</link></meta>
应该把 标签放在文档的开始处，紧跟在 后面，并处于 标签之前。
文档的头部经常会包含一些 标签，用来告诉浏览器关于文档的附加信息。
title 标签
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.title写和你网页相关的关键词有利于SEO优化
html
<html>
<head>
<title>我是页面的题目</title>
</head>
<body>...</body>
</html> SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。
网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。
meta 标签
META标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有：
Keywords(关键字)keywords用来告诉搜索引擎你网页的关键字是什么。
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
author作者 标注网页的作者
代码：
html
<html>
<head>
<!--
title 标题标签 定义显示在网页左上角的标题
-->
<title>第一个小网页</title>
<!--meta
一般定义一些当前网页的特殊属性
通过meta标签的属性定义页面的特征
<标签名属性1='' 属性2=''></标签名>
charset属性 定义当前页面的字符集告诉浏览器以什么字符集解析当前页面
name属性 一般用于定义当前网页的一些简单描述便于在搜索引擎上根据描述搜索到当前网页
keywords 关键字
author 作者
description 描述一段陈述文字,描述当前网页
html 属性值使用单引号或者是双引号皆可
-->
<meta charset="UTF-8" />
<meta name="keywords" content="尚学堂,北京尚学堂"/>
<meta name="author" content="许佳奇" />
<meta name='description' content="北京尚学堂目前有JAVA,大数据,人工智能python,PHP等主流的培训课程,为中国的IT行业培养了大量的技术人才" />
<!--在**秒后对网页进行刷新 -->
<meta http-equiv="refresh" content="5;http://www.baidu.com" />
<!--
link 学习 CSS样式的引入外部CSS样式文件
script 学习 js 脚本语言 引入脚本语言文件
-->
<link />
<script></script>
</head>
<body bgcolor="red">
<!--
注释:给人看的提示不显示出来的内容不执行的代码
选中文字 按 ctrl +shift + / 注释/取消注释
-->
武汉加油
</body>
</html>第四节：回顾
（1）代码
html
<!DOCTYPE html>
<html>
<head>
<!-- (1)title标签 标题标签 定义显示在网络左上角的标题 -->
<title>第一个小网页</title>
<!-- ******************************************************************** -->
<!-- (2)meta标签 一般定义一些当前网页的特殊属性
通过meta标签的属性定义页面的特征 某些标签只能使用某些特定的属性
<标签名 属性1='' 属性2=''></标签名>
1.charset属性 meta的一个属性，char为字符，set为集合，charset为字符集，定义当前页面的字符集，
告诉浏览器以什么字符集解析当前页面
2.name属性 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
html 属性值使用单引号或者是双引号 皆可
①keywords 关键字 用户在浏览器通过搜索关键字里面设置的content可以链接到此网页
②author 作者 当前网页是谁写的
③description 描述 一段陈述性文字，用于描述当前网页
3.http-equiv属性
①refresh 重新刷新 在几秒之后对网页进行刷新，刷新至指定网页
-->
<!-- 告诉浏览器以utf-8字符集解析文字 -->
<meta charset="utf-8"/>
<!-- 旧版本h4的写法 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!-- meta是标签名，name是标签的一个属性，属性值可以是keywords -->
<meta name="keywords" content="北京,上海" />
<meta name="author" content="谷乐"/>
<meta name="description" content="树欲静而风不止"/>
<meta http-equiv="refresh" content="5,http://www.baidu.com" />
<!-- ******************************************************************** -->
<!-- (3)link标签 学习CSS样式的 引入外部CSS样式文件
(4)script标签 学习js脚本语言 引入脚本语言文件
-->
<link />
<script></script>
</head>
<body bgcolor="red">
<!-- 注释:给人看的提示，不显示出来的内容，不执行的代码-->
<!-- 选中文字，ctrl+shift+/ 快捷键 -->
天气好
</body>
</html>（2）思维导图
（3）总结
HTML入门
做网页的 网页的主体结构
HTML的基本结构
html
一个根标签 <html></html>
两个一级子标签
<head></head>不显示在网页中 但是又比较重要的内容
<meta />
charset='utf-8' 设置页面解析的使用的字符集 告诉浏览器以什么字符集解析
设置的字符集要和文件本身存储所使用的字符集保持一致
name keywords 用来设置页面的搜索关键字
author 设置页面的作者
discription 简单描述页面
content 上述属性的内容
http-equiv='refresh' content='5;https://www.baidu.com'
<title></title> 定义网页小标题
<body>
</body>