整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.HTML 介绍
是网页的后缀，txt 后缀是文本 ，py 后缀是 python ，html 后缀就是网页的意思。我们如果想创建一个网页的话，可以直接将文本的后缀改为 html 。HTMLSHI 超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
1.html 的介绍
页面整体分为两部分：
一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。
一部分是body部分，这部分内容则会在浏览器中展示出来
我们使用 pycharm 创建一个 html ，打开后就是下图模样。
（1）文档类型声明（默认的可以不用设置）
<!DOCTYPE html>（2）开始标签和结束标签
一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
开始标签：
<html lang="en">其中的 html 为根元素，是所有元素的基础。lang 表示语言，en 表示英文。
结束标签：
</html>（3）头部标签
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>其中 utf-8 表示字符编码格式，如果没有写这个就会发生乱码。Title 表示文档的标题。
（4）身体标签
<body>
</body>身体标签是文档的主题，可视化区域，所有的音频，视频，图片，文字都可在其中搭建，相当于我们打开网页时所看到内容。
（5）标签的特点
标签是由一对尖括号包裹单词构成的，标签要使用小写。 一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
二.标签
标签分为块级标签和内联标签（运行时点击右上角的谷歌模式的小圆圈就可以）
1.内容的书写
（1）块级标签（p）
两个 p 中间可随意书写内容
<p>故事和酒，淘宝都有</p>（2）内联标签（span）
<span>故事和酒，淘宝都有</span>完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 块级标签-->
<p>故事和酒，淘宝都有</p>
<!--内联标签-->
<span>故事和酒，淘宝都有</span>
</body>
</html>运行后：
运行后看不出块级标签和内联标签的区别，所有我们使用检查。右击后点击检查
在点击下图中左上角的方框箭头，变成蓝色说明正在运行，之后就可以查看有关的数据了
无需点击，只要将箭头放在文字上就会出现相关内容
上面两图可以明显看出两句话的宽度不相同。
块级标签：在不设置宽度的情况下，宽度始终和浏览器宽度保持一致。
内联标签：宽度和内容有关
2.设置高度宽度
<p style="width: 500px;height: 50px;">故事和酒，淘宝都有</p>
<span style="width: 500px;height: 50px;">故事和酒，淘宝都有</span>
如图所示，只有块级标签宽高改变了，内联标签不改变。由此可得，块级标签设置宽高有效，内联标签设置宽高无效。
3.多个标签同时存在
<body>
<!-- 块级标签-->
<p>故事和酒，淘宝都有</p>
<p>故事和酒，淘宝都有</p>
<!--内联标签-->
<span>故事和酒，淘宝都有22</span>
<span>故事和酒，淘宝都有22</span>
</body>
多个块级标签同时存在的情况下，排列方式从上往下
多个内联标签同时存在的情况下，排列方式从左往右
4.是否包含
<body>
<!-- 块级标签-->
<p>故事和酒，淘宝都有
<span>故事和酒，淘宝都有22</span>
</p>
<!--内联标签-->
<span>故事和酒，淘宝都有22
<p>故事和酒，淘宝都有</p>
</span>
</body>
由此可知，块级标签可以包含内联标签，但内联标签不可以包含块级标签，只可以包含内联标签。
5.块级标签与内联标签相互转换
（1）块级转内联
<body>
<!--将块级标签转化成内联标签-->
<p style="display: inline">故事和酒，淘宝都有</p>
<p style="display: inline">故事和酒，淘宝都有</p>
</body>
（2）内联转块级（display: block）
内联转为块级之后，具有了块级的性质。
<span style="display: block">故事和酒，淘宝都有222</span>
<span style="display: block">故事和酒，淘宝都有222</span>
（3）内联块元素（display: inline-block）
内联块元素包含了内联标签和块级标签的部分特性。
<span style="display: inline-block">故事和酒，淘宝都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘宝都有333</span>
（4）段落标签（p）
<!--段落标签-->
<p></p>（5）标题标签（h）
例
上标文本：
<p>这个文本包含 <sup>上标</sup> 文本。</p>
浏览器支持
所有主流浏览器都支持 <sup> 标签。
标签定义及使用说明
<sup> 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注，比如 WWW[1]。
提示：请使用 <sub> 标签定义下标文本。
HTML 4.01 与 HTML5之间的差异
无。
全局属性
<sup> 标签支持 HTML 的全局属性。
事件属性
<sup> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
TML <base> 元素
指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
包含属性href 和
target 可以指定a 标签的默认窗口打开行为
<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默认就打开新的窗口 <a href="aaa">123</a>
使用
<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>
虽然在codepen 的代码上编写的但是能够正确的通过base url + img 的src 定位显示出图片
content 标签
HTML <aside> 元素
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
HTML <blockquote> 元素
（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。
HTML <figure> 元素
代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
Inline text semantics
HTML 缩写元素（<abbr>）
用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。
ps: 完整描述样式貌似不能自定义
HTML键盘输入元素(<kbd>)
用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。
HTML标记文本元素(< Mark >)
表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
ps:项目中大量使用span 标记的做法不符合html5 的语义化
HTML Ruby Base（<rb>）
元素用于分隔<ruby>注释的基本文本组件（即正在注释的文本）。一个<rb>元素应该包装基本文本的每个单独的原子段。
ps: 拼音注解
<samp> 元素
用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。
HTML 中的<small>
元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
HTML <sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
ps: 下脚标
HTML <sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
ps: 上脚标
HTML <u> 元素
使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度，显示渲染，非文本注释，例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误
HTML <map>
与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).
HTML <track> 元素
被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕（或者基于时间的数据），例如自动处理字幕。
HTML <object> 元素
（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源
ps: 支持引入的资源类型
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
关于支持资源类型的测试
http://joliclic.free.fr/html/object-tag/en/index.php
*请认真填写需求信息，我们会在24小时内与您取得联系。
