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>