一，HTML介绍
HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
二，开发环境
市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。
这里我使用sublime Text 来进行HTML的演示。
文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名
三，文档结构
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档；
<html></html>称为根标签，所有的网页标签都在<html></html>中。<head></head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。- 在
<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。
四，head标签
<!DOCTYPE html> <html lang="en"> <html> <head> 1.head 标签 <!--文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） --> 2.title 标签 <!-- 文档的标题 --> <title>火影忍者</title> 3.meta 标签 <!-- 常用的两个属性 --> （1）. http-equiv属性 <!-- 它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 --> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="5;URL=http://www.baidu.com"> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> （2）.name属性 <!-- 主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 --> <!-- 为了我们的SEO优化 --> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="路飞学城"> 4.link 标签 <!--引入外部样式表文件--> <link rel="stylesheet"type="text/css" href="mystyle.css"> <!--定义icon图标（网站的图标）--> <link rel="icon" href="fav.ico"> 5.style 标签 <!--定义内部样式表--> <style type="text/css"> </style> 6.script标签 <!-- 定义内容脚本文件 --> <script type="text/javascript"></script> <script src="myscript.js"> </script> </head> <body> </body> </html>
五，body标签
1.常用标签一
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>常用标签一</title> </head> <body> <div class="p1"> <p style="height: 2000px"id="p1">顶部</p> <!-- 增加2000的高度 --> </div> <!-- body相关标签 --> <div class="heading"> 1.标题标签 h1-h6 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。<br>因此，<h3>请不要利用标题标签来改变同一行中的字体大小。</h3>相反，我们应当使用css来定义来达到漂亮的显示效果。 <hr> 标题标签通常用来制作文章或网站的标题。 <!-- heading:标题h1~h6 没有h7标题 --> <!-- 块级元素：1.独占一行 2可以设置宽高--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <h7>六级标题</h7> </div> <div class="p1"> 2.段落标签p <!-- 文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜体 3. `<u></u>`：下划线 4. `<s></s>`：删除线 5. `<sup></sup>`：上标 6. `<sub></sub>`：下标 --> <p><b>路费学城</b>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p> </div> <div class="anchor"> 3.超链接a标签 <!-- a标签属于行内标签：在一行显示设置宽高不起作用 --> <!-- target self:默认值：在当前网站打开资源 blank:在新网站打开资源 --> <a href="https:www.baidu.com"target="blank"title="baidu">百度一下</a> <a href="a.zip">下载压缩包</a> <a href="mailto:[email protected]">联系我们</a> <!-- 转不过去 必须要装个软件什么的--> <!-- 返回到页面顶部内容 --> <a href="#">跳转到顶部</a> <a href="#p1">跳转到顶部标签</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码， 而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </div> <div class="lists"> 4.列表标签ul,ol <!-- (1).无序列表 type可以定义无序列表的样式--> <ul type="none"> <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ul> <!-- ul标签的属性： type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识 --> <!-- (2).有序列表 type可以定义有序列表的样式 --> <!-- <ol type="I"> --> <ol style="list-style: none"> <!-- 可以看看另外一种隐藏方式 --> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ol> <!-- ol标签的属性： type：列表标识的类型 1：数字 a：小写字母 A：大写字母 i：小写罗马字符 I：大写罗马字符 --> </div> <div class="image"> <!-- 1.可以设置宽高2在一行内显示，它叫行内块标签 --> 5.图片标签img <img src="01李.png"alt="洛克李"style="width: 200px;height: 200px"> <img src="02李.png"alt="洛克李"style="width: 200px;height: 200px"> </div> 6.span标签 <!-- 行内标签-白板 --> 7.盒子标签div <!-- <div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区 --> 8.其他标签br hr <!-- 换行标签 <br> <br> --><!-- 标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。 分割线 <hr> <hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容 --> 9.常用的特殊符号 <!-- 在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 -- 。 --> <!-- 空格 > > < < & & ¥ ¥ 版权 © 注册 ® --> </body> </html>
2.常用标签二table
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>04-body常用标签二-table</title> </head> <body> <!-- 表格 --> <table border="1"cellspacing="0"> <!-- border边框 cellspacing间隙 --> <!-- 表格头 --> <thead> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主题 --> <tbody> <tr> <!-- 表格主题的每一行 --> <!--表格列，【注意】这里使用的是td--> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>生物</td> </tr> <tr> <!-- 表格主题的每一行 --> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>生物</td> </tr> <tr> <!-- 表格主题的每一行 --> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>生物</td> </tr> <tr> <!-- 表格主题的每一行 --> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>生物</td> </tr> <tr> <!-- 表格主题的每一行 --> <td>语文</td> <td>数学</td> <td>英语</td> <td>化学</td> <td>生物</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html>
3.常用标签三form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>表单控件</title> </head> <body> <div class="form"> <!-- form 标签是块级元素 被提交--> <form action="https://www.baidu.com"method="get"> <p> <!-- label标签是行内元素 --> <label for="user">用户名:</label> <input type="text" name="username"id="user" placeholder="请输入用户名"> </p> <p> <label for="password">密码:</label> <input type="password" name="password"id="password" placeholder="请输入密码"> </p> <!-- 1.单选框 checked是默认值，要产生互斥效果，name值要相同--> <p> 用户性别： <input type="radio" name="sex"value="男"checked="男">男 <input type="radio" name="sex"value="女">女 </p> <!-- 2.复选框 --> <p> 用户的爱好： <input type="checkbox" name="checkfav"value="吃">吃 <input type="checkbox" name="checkfav"value="喝">喝 <input type="checkbox" name="checkfav"value="玩">玩 <input type="checkbox" name="checkfav"value="乐">乐 </p> <p> <!-- 3.文件上传 --> <input type="file" name="textFile"> </p> <p> <!-- 4.文本域 --> <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea> </p> <p> <!-- 5.下拉列表 --> <select name="sel" size="3"> <option value="深圳">深圳</option> <option value="沙河">沙河</option> <option value="北京">北京</option> <option value="山东">山东</option> <option value="福建">福建</option> </select> </p> <p> <!-- 6.显示普通按钮 disabled禁用按钮，可以不填值--> <input type="button" name="btn"value="提交"disabled=""> <!-- 7.重置按钮 --> <input type="reset" name=""> <!-- 8.提交form表单使用type=submit按钮--> <input type="submit" name="btn"value="submit"> </p> </form> <!-- 按钮 --> <button type="button">按钮</button> </div> </body> </html>
六，标签分类与嵌套规则
（1）标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的行内元素：
<a> <span> <br> <i> <em> <strong> <label>
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的行内块状元素：
<img> <input>
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
（2）嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
<span><div></div></span> ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、pli元素可以嵌入ul，ol，div等标签
感谢观看，如有不对，一定要指出。小木在这里谢谢了