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标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同网页的功能。
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标签。
网友评论