本教程案例在线演示
有路网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