1.HTML概述
1.1什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本了，HTML命令可以说明文字、图片、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息的方式将分布在不同位置信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
概念：hyper text markup lauguage 超文本标记语言
超文本：超链接，音频，图片...
标记性/描述性：用特定标签描述内容
标签：html,title,head,body,p,h1-h6,table,tr,td,form,ul,ol,dt,dd
编程语言的分类：
描述型/解释型语言：html,xml
编译型语言：c,c++，java,c#1.2 HTML的作用
编写网页，开发网站
1.3 开发工具
a.记事本工具
①建记事本文件
②写html代码
③修改记事本文件的扩展名,将txt改为html
④用浏览器打开
b. editplus(主要使用editplus来开发)
①打开editplus工具
②编写页面内容
③保存网页，注意选择文件编码
④使用浏览器打开网页
c.hbuilder
①下载
②新建项目
③新建html页面
④运行页面
d.vscode
2.HTML基本结构
2.1网页基本结构
标签：
单标签：<标签名 />
双标签：<标签名>内容</标签名>
网页基本结构
<html>根标签
<head>头标签
<title></title>标题标签
</head>
<body>身体标签
</body>
</html>
'html':是网页的根标签，网页上所有的定义都要放在根标签中
’head':定义网页的头部，对于网页文档进行配置。里面可以写网页标题，引入css,引入js。定义网页内容的字符编码。定义搜索引擎的相关内容。head中定义的内容不会直接在浏览器窗口中呈现。
'title':网页文档标题
'body':网页要呈现在浏览器主窗口的内容，全部写到body中。
（电脑中的文件类型由后缀名决定，是windows处理文件的主要依据。）
网页文件的类型：XXX.html/xxx.htm 一样的
就是在本地开发xxx.html网页文件--->>>运行于浏览器中。
三种方式打开网页文件：
①双击默认出发浏览器打开
②先打开浏览器，再将网页拖入浏览器中
③右键选中文件，选择打开方式，找到对应的浏览器打开
本地文件协议
le://E:/xxx.html
文本传输协议
http://
https:// 加密协议
文件传输协议
ftp://192.168.21.28
2.2HTML常用标签
2.2.1标签的格式
①使用< >包起来
两类：单标签/双标签
<标签名>标签体</标签名> 双标签
<标签名 /> 单标签
②标签必须闭合，标签名字字母都用小写
③必须正确的嵌套
2.2.2常用标签
①h1--h6内容标题标签
<!-- h1--h6 标题标签 -->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!-- 标题标签只有 h1-h6没有其他的标题 -->
<h7>这是普通内容</h7>
<h8>这是普通内容</h8>
这是一个普通内容.
②段落标签：p 换行: br 分割线：hr
<!-- 段落p, br换行，hr分隔线 -->
<!--
p段落标签之间会有段间距
br每行之间没有间距
-->
<!--水平线 hr -->
<hr/>
<!--段落标签有段间距-->
<p>
这是一个段落内容
<p>
<p>
这是一个段落内容
</p>
<p>
这是一个段落内容
</p>
<hr/>
<!--换行标签：只是换行显示，没哟段间距-->
这是一行文字<br/>
这是一行文字<br/>
这是一行文字<br/>
③图像标签img
<img src="图片来源" alt="提示" width="宽度" height="高度" align="对齐方式"/>
src: 图片来源(相对路径或绝对路径)
alt:图片无法显示时的提示信息
width:宽度
height:高度
align:设置对齐方式，设置文字环绕效果
格式：<img src="" alt="" />
<!-- src : 写的就是图片的路径地址 alt:当图片加载失败时显示的内容 -->
<!-- 图像标签：向网页中插入图片 image-->
<!-- 思考：图片从哪来？本地，网络 -->
<!-- 1.绝对路径：从跟目录/盘符开始 -->
<!-- 2.相对路径:从当前位置出发 ————>目标文件到的位置 -->
<!-- ./ 代表当前目录 可以不写 -->
<!-- ../ 代表返回上级目录 -->
<!-- 3.引入网络图片 -->
<!-- 步骤：打开浏览器 --》找到想要的图片--》F12-左上角箭头---》点击想要的图片--》复制 src属性。 -->
<!--图片标签
img中src指明图片来源:
1.用相对路径的方式指明图片来源
2.用绝对路径的方式指明图片来源
-->
<!--相对引用: 图片与页面文件在同一位置-->
<img src="book01.jpg"/>
<img src="./book01.jpg"/>
<br/>
<!--相对引用:图片在页面的下级文件目录-->
<img src="img/a/book02.jpg"/>
<img src="./img/a/book02.jpg"/>
<br/>
<!--相对引用:图片在页面的上级目录-->
<!--
./ :表示当前文件位置
../ :表示上级目录
-->
<img src="../book03.jpg"/>
<img src="./../book03.jpg"/>
<!--
绝对引用: 表示使用绝对路径定位目标位置
1. 网络上的绝对路径,带服务器根地址的路径
http://www.baidu.com/xxx/aaa/qqq.jpg
2. 本地磁盘的绝对路径,带本地磁盘根盘符
d:/ftp_smx/qy151/book01.jpg
-->
<img width="400" height="300" src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F1217%2Fe940e897p00q2nwip00fwc000wa00ikm.png&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648022667&t=2d2683f27b680bf282e09b5eb05efe39"/>
<!--当图片无法显示的时候，用file协议-->
<img src="file:///D:/ftp_smx/QY151/demo2/1.jpg"/>
<img src="file:///d:/book03.jpg"/>
要注意的问题，editplus新建页面之后一定要保存，确保文件是有完整路径的，不然无法使用相对路径引用关联目标资源。
④列表标签
有序列表：有序号
无序列表：无序号
自定义列表
列表嵌套
注意的问题：ul,ol的二级节点必须是li，不能是其他元素，li中可以嵌套其他内容
<!-- 有序列表 --><!-- ol和ul只控制是否有序，li才是列表 list -->
<!--
无序列表: 表示列表项之间没有特定次序
ul: unordered list ,无序列表
li: list item 列表项目
-->
<h1>你喜欢的水果?</h1>
<hr/>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>橘子</li>
<li>山楂</li>
</ul>
<hr/>
<!--有序列表: 列表项目有先后次序
ol: ordered list 有序列表
li: list item 列表项
-->
<h1>将大象放入冰箱有几个步骤？</h1>
<ol>
<li>将大象牵到冰箱旁边</li>
<li>打开冰箱门</li>
<li>将大象装入冰箱</li>
<li>关上冰箱门</li>
</ol>
<hr/>
<!--
自定义列表:
dl:definition list 自定义列表
dt:definition title 列表标题
dd:definition data 列表数据
介绍一个商品:
1.描述品牌:格力
2.描述价格:2000
3.描述产地:深圳
-->
<img src="kt.jpg" />
<dl>
<dt>商品品牌:</dt>
<dd>格力</dd>
<dt>商品价格:</dt>
<dd>2000元</dd>
<dt>商品产地:</dt>
<dd>深圳</dd>
</dl>
<hr>
<!--用列表嵌套，实现多级菜单-->
<!--一个月有几周，一周有几天-->
<ul>
<li>
一月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
<li>
二月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
<li>
三月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
</ul>
⑤a标签
<a href="目标页面地址#锚点" target="目标窗口">内容</a>
href:链接的目标页面
target:指定页面打开的窗口
跳转页面
<a href="目标页面地址">链接显示的内容</a>
跳转锚点
<a href="#锚点名字">内容</a>
定义锚点
<a name="锚点名字">内容</a>
做超链接标签 跳转页面
<!-- 跳转网络地址 -->
<a href="http://www.baidu.com">百度</a>
<!-- 本地网页 -->
<a href="123.html">123.html</a>
做锚点 锚标记 锚记
概述：使用命名的锚点可以快速的链接到同一个网页或指定网页中的某个位置
<!--
锚点的实现:
1.方式一:
使用a标签的name属性定义锚点:<a name="锚点名字">内容</a>
跳转到锚点: <a href="#锚点名字">内容</a>
2.使用任意标签的id属性定义锚点: <h1 id="锚点名字">内容</h1>
跳转到锚点: <a href="#锚点名字">内容</a>
-->
<!--
超链接标签:a
1. 跳转页面功能
a.跳转到网络中的某个页面
b.跳转到本地页面
2. 锚点的使用：跳转到某个页面的某个位置
a. 使用a标签的name属性设置锚点
b. 使用任意标签的id属性设置锚点
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">京东</a>
<a href="http://www.taobao.com">淘宝</a>
<hr/>
<a href="test1.html">跳到test1</a>
<a href="test2.html">跳到test2</a>
<!--从第一个页面直接跳转到第二个页面的某个位置:跨页面跳转锚点-->
<a href="Noname2.html#junshi">访问咨询页面的军事新闻</a>
发邮件mailto
<a href="mailto:1423432@qq.com">发邮件</a>
通过超链接关联一个磁盘文件，下载功能（扩展）
<a href="本地文件">内容</a>
⑥文本标记font字体 i斜体 b粗体 u下划线 sup上标 sub下标
<font size="大小" color="颜色" face="字体类型">字体内容</a>
i: italic 斜体
b: bold 粗体
u: underline 下划线
sup: 上标
sub: 下标
<font size="7" color="red" face="隶书">齐天大圣孙悟空</font><br/>
这是普通内容<br/>
<b>这是一个文字</b><br/>
<u>这是一个文字</u><br/>
<i>这是一个文字</i><br/>
<hr/>
X<sub>1</sub> + Y<sub>1</sub> = 24 <br/>
X<sub>1</sub><sup>2</sup> + Y<sub>1</sub><sup>2</sup> = 36 <br/>
⑦音频标签audio，视频标签video
<audio src="" autoplay controls="controls"></audio>
<audio src="../新二神曲.mp3" autoplay controls="controls">
<source src="../111.mp3"></source>
<source src="../111.mp2"></source>
<source src="../111.flac"></source>
</audio>
<video src="../书法大师.mp4" autoplay controls="controls">
<source src="../111.mp4"></source>
<source src="../111.avi"></source>
<source src="../111.flv"></source>
</video>
⑦table表格
布局：三行三列 两行两列 一行十列
caption：标题
table：表格
tr:行，一个tr中嵌套几个td就是几列，每一行的列数都一样，除非单元格合并
td:单元格，内容写到td里
th:单元格，但是一般用于表头，加粗居中
2.2.3 特殊字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | | ||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 镑 | £ | £ |
| ￥ | 日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
3.一个小练习
<!DOCTYPE HTML >
<html>
<head>
<title> 这是一个小说 </title>
<meta charset="">
</head>
<body>
<table frame="box" rules="all" align="center" width="800">
<tr>
<th colspan="4" id="00">金光御九界之墨世佛劫</th>
</tr>
<tr align="center">
<td><a href="#01">第01集 钟破 钵散 天门留憾</a></td>
<td><a href="#02">第02集 正面交锋</a></td>
<td><a href="#03">第03集 佛劫来临</a></td>
<td><a href="#04">第04集 雁王开局</a></td>
</tr>
<tr align="center">
<td><a href="#05">第05集 佛杀如来</a></td>
<td><a href="#06">第06集 佛劫再临</a></td>
<td><a href="#07">第07集 兄弟决裂</a></td>
<td><a href="#08">第08集 月凝湾的秘密</a></td>
</tr>
<tr align="center">
<td><a href="text/09.html">第09集 无法回头的选择</a></td>
<td><a href="text/10.html">第10集 始战佛劫</a></td>
<td><a href="text/11.html">第11集 王者 亡者</a></td>
<td><a href="text/12.html">第12集 扩散的救赎</a></td>
</tr>
<tr align="center">
<td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第13集 光明无水两分界 鸿飞岂复计东西</a></td>
<td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第14集 咫尺天涯</a></td>
<td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第15集 光明中的黑暗战役</a></td>
<td><a href="https://baike.baidu.com/item/%E9%87%91%E5%85%89%E5%BE%A1%E4%B9%9D%E7%95%8C%E4%B9%8B%E5%A2%A8%E4%B8%96%E4%BD%9B%E5%8A%AB/17183232?fr=aladdin#%E5%88%86%E9%9B%86%E5%89%A7%E6%83%85">第16集 最后的王牌</a></td>
</tr>
</table>
<a name="01"><h3>第01集</h3></a>
<p>紫金钵之秘，揭开千年圣战，墨乱未止，佛劫再起。</p>
<a href="#00">返回</a>
<hr/>
<a name="02"><h3>第02集</h3></a>
<p>重拾止戈流的俏如来，能否顺利打败玄狐？四方之斗，多方之决，欲星移、铁骕求衣、凰后、雁王，四人汇聚尚贤宫，这场算计之中的摊牌，是否会出现新的牺牲者？天门覆灭，地门再兴，新一波的武林危机，慢慢酝酿成形。面对内忧外患，俏如来要如何排解这重重难关呢？</p>
<a href="#00">返回</a>
<hr/>
<a name="03"><h3>第03集</h3></a>
<p>雁王无预警突会神蛊温皇，两人之间有什么恩仇纠葛？一步禅空重现，是幻觉？是灵体？还是颠倒梦想的心魔驱使？锦烟霞要如何再一次面对悲剧？地门钟声再现，是否代表地门另一波的攻势即将开启？银燕、忆无心，又被交托怎样的任务，他们会遇上何种难关？</p>
<a href="#00">返回</a>
<hr/>
<a name="04"><h3>第04集</h3></a>
<p>俏如来再开止戈流，九尾风华、墨狂，两口神兵首次交锋！面对学得剑十一与一剑无悔的玄狐，俏如来是否真能取胜，消灭玄狐？雁王的盘算又是什么？未现身的凰后是否又在暗中排布？漏泄至天门之外的钟声，是偶然？还是代表地门势力的扩张？银燕、忆无心、飞渊，他们三人又会有怎样的奇遇呢？</p>
<a href="#00">返回</a>
<hr/>
<a name="05"><h3>第05集</h3></a>
<p>佛杀如来、立身光明下的影形</p>
<a href="#00">返回</a>
<hr/>
<a name="06"><h3>第06集</h3></a>
<p>俏如来瞬入无水汪洋，这是缺舟一帆渡的奇幻手法，或者另有神秘？俏如来面临记忆净化首度危机！万雪夜佛国之行，又会有怎样的收获？神秘的地门，是否将对中原伸出魔掌？再出的玄狐，又有什么目的呢？得到古燐原晶的黑水城，是否能恢复动力？初始力量，忆无心意识中的传承遗志，又是什么？</p>
<a href="#00">返回</a>
<hr/>
<a name="07"><h3>第07集</h3></a>
<p>兄弟决裂</p>
<a href="#00">返回</a>
<hr/>
<a name="08"><h3>第08集</h3></a>
<p>异变的村庄，俏如来身陷危境，地门影响力逐渐扩大，俏如来该如何抵抗大智慧的侵袭？踏入月凝湾的风逍遥，又会有怎样的诡异遭遇呢？地门之中，万雪夜身份遭受质疑，这场冲突将如何了结？雪山银燕与剑无极这对兄弟，是否从此走向不同的道路呢？浪辰台中，针锋相对，欲星移有何算计排布？</p>
<a href="#00">返回</a>
<hr/>
</body>
</html>
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
