本教程案例在线演示
有路网 PC 端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
网页开发工具
VSCode
或
WebStorm
HTML 简介
HTML：Hyper Text Markup Language
html 文本的外部根本构造
<!--
文档申明，标识以后网页的版本的
该申明标识网页是遵循 html5 语法标准的
编写网页时，肯定要编写的文档申明，在某些浏览器中，如果不写文档申明，会导致浏览器进入到怪异模式
-->
<!doctype html>
<!-- html 网页中根标签，一个页面中有且只有一个根标签
网页中的所有内容都应该写在根标签的外部
-->
<html>
<!--
网页的头部，head 标签中的内容，不会在页面中间接显示
浏览器依据 head 中的内容来解析网页，搜索引擎也能够依据他们来检索网页
-->
<head>
<!-- 应用 meta 来设置页面的字符集 -->
<meta charset="utf-8" />
<!--
网页的题目，个别会在页面的标签头部显示
所属引擎在检索一个网页时，会次要检索 title 中的内容
并根据该内容，来判断网页的次要内容，title 中的内容会影响到网站在搜索引擎中的排名
-->
<title> 我是 title</title>
</head>
<!-- 网页的主体，网页中所有的可见内容，都应该写在 body 中 -->
<body>
<h1> 这是一个十分丑陋的网页 </h1>
</body>
</html>html 的正文
<html>
<head>
<title> 网页的题目 </title>
</head>
<body>
<!--
正文 HTML 正文中的内容，不会在页面中显示，然而能够在源代码中查看
通过正文能够对代码进行解释阐明
肯定要养成良好的编写正文的习惯
编写正文时，要求简单明了
日期：作者：性能：通过正文能够将不心愿在页面中显示代码暗藏
HTML 正文不能嵌套（所有的多行正文都不能嵌套）-->
<!-- 这是页面的 1 级题目 -->
<h1> 这是我的第二个网页 </h1>
<!-- 我是一个正文 <!-- 我是正文中的正文 --> -->
</body>
</html> 题目标签，段落标签，水平线，换行，加粗，斜体
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> 罕用的标签 </title>
</head>
<body>
<!-- 题目标签
在 HTML 一共有 h1 ~ h6 六级题目
6 级题目中 h1 最大 h6 最小
从 h1 到 h6 重要性顺次升高
h1 最重要，h2 其次 顺次递加
搜索引擎检索页面时，h1 仅次于 title，也会影响到页面在搜索引擎中的排名
一个页面个别只有一个 h1 标签
个别页面中只会应用 h1 ~ h3
-->
<h1> 一级题目标签 </h1>
<h2> 二级题目标签 </h2>
<h3> 三级题目标签 </h3>
<h4> 四级题目标签 </h4>
<h5> 五级题目标签 </h5>
<h6> 六级题目标签 </h6>
<!-- 段落标签 应用 p 标签来示意一个段落
段落标签会独占一行，并和其余内容会有一个间隔
-->
<p> 第一次 </p>
<p> 今天天气真不错 </p>
<hr />
<!--
在 HTML 中，默认将多个空格和换行认为是一个空格
应用 br 标签来示意一个换行
-->
<p>
床前明月光 <br />
疑是地上霜 <br />
举头望明月 <br />
抬头思故土 <br />
</p>
<!-- 水平线，能够在页面的指定地位输入一条水平线 -->
<hr />
<!-- 加粗：<strong>…</strong>-->
<!-- 斜体：<em>…</em>-->
<strong> 简介 </strong>
<p>
<em>2008</em> 年设立人才实训核心 <br/>
<em>2009</em> 年成为教育部软件工程业余大学生实习基地 <br/>
</p>
</body>
</html>
列表标签
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> 列表 </title>
</head>
<body>
<!--
列表相似于购物清单
HTML 中一共有三种列表
1. 无序列表
- 应用 ul 标签来创立一个无序列表
- 应用 li 向无序列表中增加列表项
- 无序列表默认应用 圆点 来作为我的项目符号
2. 有序列表
- 有序列表和无序列表相似，不同的是它应用 ol 来创立其余的都和无序列表一样
- 有序列表应用有序的序号 作为我的项目符号
3. 定义列表
- 定义列表用来对一些内容做解释阐明的
- 应用 dl 来创立一个定义列表
- 在 dl 中应用 dt，来创立一个定义项
- 应用 dd 来创立一个对定义项的形容
- 列表之间能够相互嵌套，能够在有序列表中放无序列表，也能够在无序列表放有序列表
-->
<ul>
<li> 西红柿 </li>
<li> 大茄子 </li>
<li> 小辣椒 </li>
</ul>
<ol>
<li> 桃花源记 </li>
<li> 岳阳楼记 </li>
<li> 小石潭记 </li>
<li> 醉翁亭记 </li>
</ol>
<p> 菜谱 </p>
<ul>
<li>
鱼香肉丝
<ol>
<li> 鱼 </li>
<li> 香 </li>
<li> 肉丝 </li>
</ol>
</li>
<li> 宫保鸡丁 </li>
<li> 青椒肉丝 </li>
</ul>
<dl>
<dt> 武松 </dt>
<dd> 景阳冈上的大虎英雄，战斗力 99</dd>
<dd> 起初打死西门大官人，后逃逸，还俗为僧 </dd>
<dt> 武大 </dt>
<dd> 驰名餐饮企业家，战斗力 0 </dd>
</dl>
</body>
</html>
图像标签
常见的图像格式
JPG
GIF
PNG
BMP
图片的相对路径
所谓相对路径，就是绝对于本人的指标文件地位。例如下面的例子，“11111111.html”文件里援用了“11ha.jpg”图片，因为“11ha.jpg”图片绝对于“11111111.html”来说，是在同一个目录的，那么在“11111111.html”文件里应用以下代码后：
<img src=“11ha.jpg”alt=“小女孩”/> 只有这两个文件的绝对地位没有变 (也就是说还是在同一个目录内)，那么无论上传到 Web 服务器的哪个地位，在浏览器里都能正确地显示图片。
当图片在 image 文件夹里时：
src="image/11ha.jpg" alt="小女孩" /> 如果在 image 里很深的文件夹，也能够始终列举上来：
<img src="image/renwu/11ha.jpg" alt="小女孩" />
如果 html 文件在比图片深一层的文件夹里：
<img src="../11ha.jpg" alt="小女孩" /> 如果 html 文件在比图片深两层的文件夹里，就在后面再列举两个点“..”，深几层列举几次。
<img src=“../../11ha.jpg”alt=“小女孩”/> 图片在 html 文件上两级 image 文件夹中的 renwu 文件夹里
<img src=“../../image/renwu/11ha.jpg”/> 链接标签
<a href="path" target="指标窗口地位"> 链接文本或图像 </a>
href: 链接门路
target: 链接在哪个窗口关上, 罕用值：_self、_blank