HTML学习
###互联网的三大基石
- URL:统一资源定位符
- HTTP：超文本传输协议
- HTML：超文本标记语言
###HTML的标准文档格式
<html>
<head>
</head>
<body>
this is my first html.
</body>
</html>
###head标签
####前端开发工具介绍
Hbuilder：可以快速的生成标准文档结构，集成了很多方便的快捷键
- 网页标题标签
html 学习 - 编码格式标签
- 网页搜索优化标签
- 网页指定跳转标签
- 其他标签
例如：css引入标签和js引入标签
##HTML的body标签
<html>
<head>
<title>HTML的body标签-文本标签</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--标题标签-->
<h1 align="center">适合学习</h1>
<h2>适合学习</h2>
<h3>适合学习</h3>
<h4>适合学习</h4>
<h5>适合学习</h5>
<h6>适合学习</h6>
<hr width="900px" size="60px" color="red" align="left"/>
<p>
肺炎疫情的扩大，<u>各国确诊感染人数持续<增加</u>。<br />
据世卫组织最新数据，截至欧洲中部时间<i>3月13日10时</i>(北京时间13日17时)，
中国以外<b>新冠肺炎</b>确诊病例累计超过5万例。
</p>
<p>
随着新冠肺炎疫情的扩大，各国确诊感染人数持续增加。<br />
<del>据世卫组织最新数据，</del>截至欧洲中部时间3月13日10时(北京时间13日17时)，
中国以外新冠肺炎确诊病例累计超过5万例。
</p>
<p><b><i><u><del>今天天气真好，比较适合学习</del></u></i></b></p>
</body>
<!--
标题标签：显示依次减弱（块级标签）
属性：align="center"
水平线标签：
hr:会在页面显示一条水平线
属性：
width="900px" 设置水平线的宽度
size="60px" 设置水平线的高度
color="red" 设置水平线的颜色
段落标签：
p:会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便
特点：段落与段落之间会自动换行,段间距比较大
换行符
br:告诉浏览器在此位置换行
空各符
&nbsb:告诉浏览器在此位置增加
权重标签
b:会将内容加黑
i：会将内容斜体显示
u:会将内容增加下划线
del:增加中划线
以上标签不会自动换行，可以嵌套使用，没有顺序
注意：
1.属性是对标签的进一步补充
2.像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小
-->
</html>
###HTNL列表标签学习
<html>
<head>
<title>列表标签的学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>列表标签学习</h3>
<hr />
<h3>中国著名城市</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>驻马店</li>
</ul>
<h3>爱好</h3>
<ol type="I" >
<li>打游戏</li>
<li>睡觉</li>
<li>敲代码</li>
</ol>
<h3>学习课程系列</h3>
<dl>
<dt>IT课程：</dt>
<dd>java</dd>
<dd>python</dd>
<dd>大数据</dd>
<dt>美术课程：</dt>
<dd>素描</dd>
<dd>水彩</dd>
</dl>
</body>
</html>
<!--
作者：zwl
时间：2020-03-15
描述：列表标签的学习
有序列表：
ol
li:该标签中书写列表内容，一个li标签代表
列表中的一行数据
特点：自动给列表编码，格式从小到大
属性：type:可以改变编码的值，默认是阿拉伯数字
无序列表：
ul
li:该标签中书写列表内容，一个li标签代表
列表中的一行数据
特点：默认数据前有一个黑圆圈符号
自定义列表：
dl
dt:数据的标题
dd:数据的具体内容，一个dd表示一条数据
-->
##HTML图片标签
<html>
<head>
<title>图片标签的学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>图片标签的学习</h3>
<hr />
<!--
使用本地资源：图片位于电脑上
-->
<img src="img/1.gif" height="200px" title="焰火图"/>
<img src="img/5.jpg" height="200px" title="喷泉图" alt="图片加载失败"/>
<hr />
<!--
使用网络资源：
-->
<img height="200px" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1532420235,3267594051&fm=26&gp=0.jpg"/>
</body>
</html>
<!--
图片标签：(行内元素：不会自动换行)
img
src:图片路径
路径：一般本地资源使用相对路径
网络资源路径：图片资源的URL地址
width:设置图片的宽度，如果是单独设置，则在保证图片不失
真的情况下自动缩小、放大
height:设置图片的高度，如果是单独设置，则在保证图片不失
真的情况下自动缩小、放大
title:图片标题，鼠标放在图片上会显示
alt:图片加载失败后的提示语
注意：
相对路径： 从当前文件出发查找另一个文件经过的路径
绝对路径：从根盘符出发所查找文件的路径
-->
###超链接学习
<html>
<head>
<title>超链接标签的学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>超链接标签的学习</h3>
<hr />
<!--
超链接标签的学习：
a标签：
href:要跳转的网页资源路径
本地资源：相对路径
网络资源：网络资源的URL
target:指明要跳转的网页资源的显示
—self: 在当前页中刷新显示
-blank：在新的标签页中显示
-top:在顶层页面中显示
-parent:在父级页面中显示
注意：
超链接标签中一定要书写访问方式，可以是图片和文本
锚点学习：
作用 ：在一张网页中进行资源跳转
使用：
先使用超链接在指定的网页中增加锚点。格式为：<a name="锚点名"></a>
在需要跳转的地方使用<a href="#锚点名"></a>
-->
<!--本地资源-->
<h6>本地资源</h6>
<a href="05-HTML-图片标签.html">图片标签学习</a>
<hr />
<a href="04-HTML-body标签(列表标签).html"> <img src="img/4.jpg" height="200px"/> </a>
<!--网络资源-->
<hr />
<h6>网络资源</h6>
<a href="https://www.weishi100.com/live/" target="_blank">微师</a>
<hr />
<a href="https://www.weishi100.com/live/"><img src="img/4.jpg" height="200px"/></a>
<!--锚点学习-->
<hr />
<h6>锚点学习</h6>
</body>
</html>
###锚点学习
<html>
<head>
<title>锚点学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>锚点学习</h3>
<hr />
<h4>目录：</h4>
<a name="目录"></a>
<a href="#1">第一章</a><br />
<a href="#2">第二章</a><br />
<a href="#3">第三章</a><br />
<a href="#4">第四章</a><br />
<a href="#5">第五章</a><br />
<a href="#6">第六章</a><br />
<a href="#7">第七章</a><br />
<a href="#8">第八章</a><br />
<p>第一章：</p>
<a name="1"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第二章：</p>
<a name="2"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第三章：</p>
<a name="3"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第四章：</p>
<a name="4"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第五章：</p>
<a name="5"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第六章：</p>
<a name="6"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第七章：</p>
<a name="7"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p>第八章：</p>
<a name="8"></a>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<p> 人物、情节、环境是小说的三要素。
情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。<br />
环境包括自然环境和社会环境。
小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。<br />
按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、浪漫青春、游戏竞技等。
按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。<br />
</p>
<a href="#">回到顶部</a>
<a href="#目录">回到目录</a>
</body>
</html>
###表格标签的学习：
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8"/>
</head>
<!--
表格学习:
table:声明一个表格
tr:声明一行,设置行高及改行所有单元格的高度。
td:声明一个单元格，默认居左显示原始数据
<td>科目</td>
<td>分数</td>
<td>级别</td>
<td>说明</td>
th:声明一个单元格，表头格，默认居中加黑显示
<th>科目</th>
<th>分数</th>
<th>级别</th>
<th>说明</th>
注意：
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性：
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellspacing:设置边框的大小
cellpadding:设置内容距边框的距离
特点：
默认根据数据的多少进行表格的大小显示
单元格的合并：
先画好表格
根据要合并的单元格找到其开始的单元格
填写合并的单元格数，删除要合并的单元格
-->
<body>
<h3>表格标签的学习</h3>
<hr />
<table border="1px" cellspacing="0px",cellpadding="10px">
<tr height="50px">
<th width="100px">科目</th>
<th width="100px">分数</th>
<th width="100px">级别</th>
<th width="100px">说明</th>
</tr>
<tr height="50px">
<td>java</td>
<td>100</td>
<td>A</td>
<td >面向对象的语言</td>
</tr>
<tr height="50px">
<td>c</td>
<td>100</td>
<td>B</td>
<td>面向过程的语言</td>
</tr>
</table>
<hr />
<h4>单元格的合并学习</h4>
<table border="1px" cellpadding="10px" cellspacing="0px">
<tr height="50px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px" colspan="2" rowspan="2"></td>
<!--
<td width="100px"></td>
-->
</tr>
<tr height="50px">
<td colspan="2"></td>
<!--
<td></td>
-->
<td></td>
<!--
<td colspan="2"></td>
-->
<!--
<td></td>
-->
</tr>
<tr height="50px">
<td></td>
<td></td>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr height="50px">
<td></td>
<td></td>
<!--
<td ></td>
-->
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
