整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
.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）
演示视频在文章底部
1.页面内容居中显示方法
将这段代码<div style="width:50%;margin:auto;">放置在<body>标签之下。
将</div>放置在</body>之上。
将全部内容包裹在这个div中，就可以实现整个页面居中。
内容显示宽度为浏览器视窗宽度的50%。
margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。
2.导航栏悬停顶端方法
把四个a标签装到一个div中。
将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。
将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>之下。
position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。
默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。
3.鼠标滑过导航标题或链接时改变背景色提示
这就要介绍关于css的写法了。
简单来说，就是在<head></head>标签中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>标签。
hover指的是：当鼠标悬停在a上面时的状态。
使用：连接。
这个状态下要执行的内容在{}中。
background-color:#ffff00;即背景色为黄色。
3.隐藏滚动条方法
首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。
如果要取消视窗最右侧滚动条，就要控制内容高度。
把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。
在<p>标签色上面添加<div>。
在</map>标签下面添加</div>。
下面，为div规定尺寸，添加style="width:610px; height:530px;"。
这样，就不会超出视窗。但是代码写完后发现并不是，如图：
多出的文字内容超出div范围，右侧滚动条依然存在。
这就要在div的style中再增加一条语句"overflow-y:scroll;"
这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如图：
因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。
添加“overflow-x：hidden”即可，hidden（隐藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如图：hidden之后，将无法滚动或拖动画面。
最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。
从前面的例子可知，hidden是不行的，有没有别的办法？
那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：
这个div这样写即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同时还要给里面的div添加margin来让它们对齐
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 请自行脑补或参考源码-->
</div>
</div>
完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作
页就是一个HTML文件。
1、HTML结构
<!doctype html>
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
说明：
<!DOCTYPE html>
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范.
2、HTML标签和属性
写HTML文档时，必须遵循HTML语法规范。HTML文档实际上就是一个文本文件，它由标签和信息组合而成，当然标签和信息也不是随便组合的，需要遵循一定规则，否则无法正常显示。
有一起学习的吗？请点赞收藏+关注哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
