概述
一、 HTML是什么？
- html就是用来制作网页文件的,浏览器查看的网页都是.html或.htm文件,HTML叫做超文本标记语言 (Hypertext Markup language）,用于搭建网页的结构。
二、网页的组成
- 网页是由前端三层:HTML(结构层)，css(样式层)、JavaScript(行为层)，其他多媒体内容:图片、视频、音频、超级链接等组成的。
三、互联网运行过程
- 程序员将网页源文件上传到服务器进行存储，用户后期通过客户端(如浏览器软件)发送HTTP请求到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果
互联网原理
1.服务器
- 服务器(Server),就是一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，因此在处理能力，稳定性、可靠性、安全性等方面要求较高,
- 作用:对于web来讲，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理要求:对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作。
2.云服务器
- 目前绝大多数网站都采用的是云服务器(Elastic Compute Service,ECS),云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多平台云服务器。
3.客户端
- 客户端(Client)也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如常用的就是浏览器、app等，而web开发最主要的客户端形式还是浏览器。
- 浏览器(Browser),是一种用户上网搜索、查看信息资源的应用。
4.主流浏览器及内核
-
主流的Web浏览器有微软的IE和MICrosoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome及Opera软件公司的Opera。
-
浏览器内核因为不同的浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异。
浏览器 渲染引擎(内核) 说明 IE/Edge Trident IE内核 FireFox Gecko Firefox内核 Safarl Webkit --- Chrome Webkit > Blink 统称为Chromium内核或Chrome内核 Opera Presto>Webkit>Blink ---
5.浏览器功能
- 发送HTTP请求,发送的方式是在浏览器地址输入对应网址,或者点击超级链接。接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器。将接收到的HTML进行解析并显示。
6.HTTP协议
- Hypertext Transfer Protocol:超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议。
HTML版本及标签语法
- W3C: world wide web consortium,万维网联盟。专门发布和维护互联网的规范和标准。 |版本|发布时间|备注| |---|---|---| |HTML1.0|1993.06|互联网工程小组(IETF)发布的工作草案| |HTML2.0|1995.01|2000年6月发布之后被宣布已经过时| |HTML3.2|1997.01.14|W3C推荐标准| |HTML4.0|1997.12.18|W3C推荐标准，引入了样式表css,实现了结构和样式分离| |HTML4.01|1999.12.24|W3C推荐标准，修复了HTML4.0中的漏洞| |XHTML1.0|2000.01.20|在HTML4.01基础上进行的升级扩展和严格化| |HTML5.0|2008.1.22|HTML5在2012年已形成了稳定的版本|
- HTML基本结构
<!DOCTYPE html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体
</body>
</html>
html标签
- 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部
head标签
- 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部
title标签
- 让页面拥有一个属于自己的标题。
- title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
- 内部的内容会显示在搜索结果的标题部分。
- 作为浏览器收藏夹默认的网页标题。
body标签
- 定义网页的主体部分，用于存放所有的HTML显示内容的标签。
- body内部的元素内容会显示在浏览器窗口中。
HTML常用标签
标题标签
<h1>定义最大的标题<h6>定义最小的标题<h1>-<h6>标签都是双标签，都是容器标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p>标签是双标签且为文本级标签。内部只能放置文本、图片、表单元素。
<p>这是一个段落</p>
换行标签
<br>标签是html中一个简单的换行符,br标签是一个单标签。- 在需要换行的位置可以使用br标签书写，但是br与p不同，br没有建立新的 段落的语义，只是简单的进行强制换行。
<p>这是第一<br />个段落</p>
<p>这是第二个段落</p>
文本格式化标签
-
<b>定义粗体文本，bold -
<big>定义大号字 -
<em>定义着重文字，emphasis,自带斜体效果 -
<i>定义斜体字，italic -
<small>定义小号字 -
<strong>定义加重语气，自带加粗效果 -
<sub>定义下标字，subscript -
<sup>定义上标字，superccript -
<ins>定义插入字，自带下划线效果，insert -
<del>定义删除字，delete -
<s>赞成使用，使用del代替，strike的简化 -
<strike>不赞成使用，使用del代替 -
<u>定义下划线，不赞成使用，使用css中样式代替，underline
图像标签
-
标签的作用是在指定的位置插入一张图片。
-
在HTML文件，常用的插入图片的类型有：jpg、png、gif。
img常用属性
<src>表示图片的路径<width>表示图片的宽度<height>表示图片的高度<border>边框属性；它的值可以设置边框的厚度<title>设置提示文本<alt>设置图像没有找到时候的替换文本
相对路径
- 相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；
<img src="smile01.jpg"> - 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
<img src="images/smile02.png"> - 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。
<img src="../../smile04.jpg" />
绝对路径
- 绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。
