Web服务本质

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

HTML是什么？

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名： .html或.htm

HTML不是什么？

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页

HTML文档结构

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

<!DOCTYPE html>声明为HTML5文档

html标签

作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个HTML文档
注意：其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

作用：用于给网站添加一些配置信息
列如：外挂一些外部的css/js文件；添加一些浏览器适配相关的内容
注意：一般情况下，写在head标签内部的内容不会显示给用户查看，也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
注意：title标签必须写在head标签里面

body标签

作用：专门用于定义HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频）
注意：虽然说有时候将内容写到了别的地方在网页中也能看到，但是千万不要这么干，一定要将需要显示的内容写在body中；一对html标签中（一个html开始标签和一个html标签结束）只能有一对body标签

HTML标签

HTML标签格式

HTML标签是有尖括号包围的关键字，如<html>,<div>等
HTML标签通常是陈规定出现的，比如：<div>和</div>, 第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg"/>等。
标签里面可以有若干属性，也可以不带属性。

标签的语法

<标签名属性1="属性值1" 属性2="属性值2"......>内容部分</标签名>
<标签名属性1="属性值1" 属性2="属性值2"....../>

几个很重要的属性

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名(classname)（CSS样式类名）
style：规定元素的行内样式（CSS样式）

HTML标签分类

单标签：只有开始标签没有结束标签，也就是由一个<>组成的

<meta charset="UTF-8" />

双标签：有开始标签和结束标签，也就是由一个<>和一个</>组成的

<html>
</html>

HTML标签关系分类

并列关系（兄弟/平级）

    <head>
    </head>
    <body>
    </body>

嵌套关系（父子/上下级）

<head>
        <meta charset="UTF-8" />
        <title>百度一下,你就知道123</title>
</head>

Meta标签介绍：

http-equil属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">```
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="百度一下">

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<!--p标签：段落标签，注意：在浏览器中会单独占一行-->
<p>段落标签</p>

<!--标题标签-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线 分割线-->
<hr>

div和span标签

div：div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span：span标签用来定义内联（行内）元素，并无实际的意义。主要是通过CSS样式为其赋予不同的表现。
div和span有什么区别?

1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签
块级元素与行内元素的区别

所谓块级元素，是以另起一行开始渲染的元素，行内元素则不需要另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

HTML5布局之路