<!--HTML注释-->
<html>
<head>
<!--网页编码格式-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--网页标题标签-->
<title>HTML学习-2020-04-08</title>
<!--
描述：网页关键字 提升网页在浏览器中的搜索概率
-->
<meta name="keywords" content="HTML,学习,DoubleShift" />
<!--
描述：网页描述 提升网页在浏览器中的搜索概率
-->
<meta name="description" content="这个是一个学习HTML的网页" />
<!--
描述：作者 提升网页在浏览器中的搜索概率
-->
<meta name="author" content="DoubleShift" />
<!--描述：n秒后自动刷新跳转到百度（必须是http开头的网址）-->
<meta http-equiv="refresh" content="5000;url=http://www.baidu.com" />
</head>
<body>
<!--
描述：锚点学习 在网页中进行资源跳转
-->
<h3>学习目录</h3>
<a href="#标题标签功能学习">标题标签功能学习</a> <br />
<a href="#段落标签功能学习">段落标签功能学习</a> <br />
<a href="#列表标签功能学习">列表标签功能学习</a> <br />
<a href="#图片标签功能学习">图片标签功能学习</a> <br />
<a href="#超链接标签功能学习">超链接标签功能学习</a> <br />
<a href="#表格标签功能学习">表格标签功能学习</a> <br />
<a href="#内嵌标签功能学习">内嵌标签功能学习</a> <br />
<a href="#框架标签功能学习">框架标签功能学习</a> <br />
<a href="#form表单标签功能学习">form表单标签功能学习</a> <br />
<!--
描述：标题标签 h1-h6 自带换行功能
标签属性
align 位置显示
-->
<a name="标题标签功能学习"></a>
<h1 align="center">[标题标签功能学习]</h1>
<h1>这里是h1标题</h1> 这里是普通文本
<h2>这里是h2标题</h2>
<h3>这里是h3标题</h3>
<h4>这里是h4标题</h4>
<h5>这里是h5标题</h5>
<h6>这里是h6标题</h6>
<h7>这里是h7标题</h7>
这里是对比h7的普通文本
<!--
描述：<hr> 水平线标签 可以自定义宽度和位置，加标签属性即可
标签属性
align 位置显示
width 宽度
size 大小，其实代表了高度
color 背景色
-->
<hr width="1200" align="left" />
<hr width="30%" align="right" size="30" color="aqua" />
<!--
描述：段落标签
<p> 将一段数据作为整体进行显示 会自动换行
<br /> 换行符
空格(一个字节)
<b> 加黑显示
<i> 斜体显示
<u> 添加下划线
<del> 添加中划线，即删除线
-->
<a name="段落标签功能学习"></a>
<h1 align="center">[段落标签功能学习]</h1>
<p>
[HTML的由来]<br /> HTML的英文全称是<i>Hyper Text Marked Language</i>，即<b>超文本标记语言</b>。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。<br />
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。
使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。<br />
HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。
事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，
只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，
从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。 <del>这里是一句废话，需要删除</del><br />
<b><i><u>效果重叠显示：加黑/斜体/下划线/换行</u></i></b><br />
<b>万维网（world wide web）</b>上的一个超媒体文档称之为一个页面（外语：page）。
作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，
主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，
通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。<br />
在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。
超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
<u>超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。</u>
</p>
<p>
[HTML的定义]<br /> 超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。<br />
网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。<br />
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，
编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
</p>
<hr width="1200" align="left" />
<!--
描述：列表标签
1、有序列表 type属性可以设置排序编码方式
<ol>
<li></li>
</ol>
2、无序列表 一个li代表一行数据
<ul>
<li></li>
</ul>
3、自定义列表
<dl>
<dt></dt> 1列表的说明
<dd></dd> 具体内容
<dt></dt> 2列表的说明
<dd></dd> 具体内容
</dl>
-->
<a name="列表标签功能学习"></a>
<h1 align="center">[列表标签功能学习]</h1>
<ul> <!--无序列表-->
<li><b>无序列表：北京</b></li>
<li>无序列表：上海</li>
<li>无序列表：广州</li>
<li>无序列表：深圳</li>
</ul>
<ol type="I"> <!--有序列表-->
<li>阿里巴巴</li>
<li>今日头条</li>
<li>网易</li>
<li>快手</li>
</ol>
<dl>
<dt>测试开发工程师需要掌握的技能</dt>
<dd>编程语言</dd>
<dd>数据库</dd>
<dd>Linux操作系统</dd>
<dd>测试思维</dd>
<dd>沟通能力</dd>
<dt>测试用例设计方式</dt>
<dd>等价类划分</dd>
<dd>边界值分析</dd>
<dd>边界值分析</dd>
<dd>正交试验法</dd>
</dl>
<hr width="1200" align="left" />
<!--
描述：图片标签
<img>
图片是行内元素，默认不换行的
src：图片路径，分为绝对路径和相对路径
height/width：设置其中一个，会保证图片不失真时自动调整大小
title：图片标题
alt：图片加载失败时显示的文字信息
-->
<pre>
描述：图片标签
img
图片是行内元素，默认不换行的
src：图片路径，分为绝对路径和相对路径
height/width：设置其中一个，会保证图片不失真时自动调整大小
title：图片标题
alt：图片加载失败时显示的文字信息
</pre>
<a name="图片标签功能学习"></a>
<h1 align="center">[图片标签功能学习]</h1>
<h3>动态图</h3>
<img src="../img/qingchun.gif" title="清纯妹子" alt="这里有个清纯妹子"/>
<h3>普通图片</h3>
<img src="../img/pigu.jpg" width="800"/>
<img src="../img/zhifu.jpg" height="300"/>
<img src="../img/meizi.jpg" width="300"/>
<img src="../img/daxiong.jpg" width="250"/>
<br />
<!--
描述：图片标签，使用网络资源 直接填写图片资源url即可
-->
<img src="http://pic.netbian.com/uploads/allimg/190902/155140-15674107008ad0.jpg" width="500"/>
<img src="http://pic.netbian.com/uploads/allimg/180509/110043-15258348439c34.jpg" width="500"/>
<img src="http://pic.netbian.com/uploads/allimg/170712/105942-149982838233e3.jpg" height="300"/>
<img src="sdafsad.jpg" alt="这里本来应该有一张图片"/>
<hr width="1200" align="left" />
<!--
描述：超链接标签 <a></a>
href：网页资源路径
访问方式可以是文字 也可以是图片
target：选择链接打开方式
_self 当前页面刷新显示
_blank 新标签页面打开
_top 在顶层页面中显示
_parent 在父级页面显示
-->
<!--文字超链接-->
<a name="超链接标签功能学习"></a>
<h1 align="center">[超链接标签功能学习]</h1>
<a href="../index.html" target="_self">本地资源</a> <br />
<a href="http://www.baidu.com" target="_blank">百度（在新标签中打开）</a> <br />
<a href="http://www.baidu.com">百度（在原标签中打开）</a> <br />
<!--图片超链接-->
<a href="http://www.netbian.com/" target="_blank"><img src="https://img.netbian.com/file/20150511/2e8ceb88fb3d6c226004a79053e5a7fb.jpg"
width="300" title="点击图片进入壁纸网站"/></a>
<hr width="1200" align="left" />
<!--
描述：表格标签<table>
<tr> 表示一行数据
<th> 表格标题，默认居中加黑显示
<td> 表示一个单元格
border 表格边框属性
注意：单元格的高度属性加到行上，宽度属性加到一个单元格上即可<br />
cellpadding：内容距边框的距离
cellspacing：设置边框的大小
-->
<a name="表格标签功能学习"></a>
<h1 align="center">[表格标签功能学习]</h1>
<table border="2px" cellspacing="0px" cellpadding="5px">
<tr height="50px">
<th width="60px">战队</th>
<th width="80px">中单</th>
<th width="80px">上单</th>
<th width="60px">打野</th>
<th width="500px">说明</th>
</tr>
<tr height="40px">
<td>IG</td>
<td>Rookie</td>
<td>TheShy</td>
<td>LeYan</td>
<td>覅哦啊首都附近咖色分开了微积分</td>
</tr>
<tr height="40px">
<td>FPX</td>
<td>Doinb</td>
<td>kHan</td>
<td>Tian</td>
<td>hiueehfuweue发文</td>
</tr>
</table>
<hr width="1200" align="left" />
<!--
描述：表格合并单元格
table>tr*3>td*5
colspan：合并一行中的单元格
rowspan：合并一列中的单元格
-->
<table border="2px" cellspacing="0px" cellpadding="5px">
<tr height="40px">
<td width="60px"></td>
<td width="60px"></td>
<td width="60px"></td>
<td width="60px"></td>
<td width="60px"></td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr height="30px">
<td colspan="3"></td>
<!--<td></td>
<td></td>-->
<!--<td></td>-->
<td></td>
</tr>
</table>
<hr width="1200" align="left" />
<!--
描述：内嵌标签学习
<iframe>
src：要显示的网页资源路径，可以是本地资源也可以是网络资源。默认当前页面打开
-->
<a name="内嵌标签功能学习"></a>
<h1 align="center">[内嵌标签功能学习]</h1>
<p>在网页内显示另外一个网页的内容：</p>
<iframe src="http://www.baidu.com" width="1500" height="300"></iframe>
<p>作业题-简历制作：</p>
<iframe src="02-HTML作业题.html" width="800" height="400"></iframe><br />
<a href="https://www.huya.com" target="_huya">HY直播</a>
<iframe src="" width="100%" height="540" name="_huya"></iframe>
<hr width="1200" align="left" />
<!--
描述：框架标签学习
<frameset> 需要删除body标签
-->
<a name="框架标签功能学习"></a>
<h1 align="center">[框架标签功能学习]</h1>
<hr width="1200" align="left" />
<!--
描述：
form表单标签学习
收集并提交用户数据给指定服务器
<form>
action：数据要提交的地址也就是url
method：提交方式get或post
get：适合小量数据
post：适合大量数据
form表单域标签
给用户提供可以进行数据书写或者选择的标签
input文本框
type
text：可见的文本
password：密码，不可见
radio
单选值，其中选项的name属性必须一致，才可以单选
checkbox
多选框，其中选项的name属性必须一致，value不一致即可
select
下拉选择框
name：多选项的属性，数据提交时的键名
option：具体的一个选项
textarea
文本域
rows：声明文本域的行数
cols：声明文本域的列数
button
普通按钮
value 默认值
checked：单选中的默认选择选项
-->
<a name="form表单标签功能学习"></a>
<h1 align="center">[form表单标签功能学习]</h1>
<form action="#" method="get">
用户名：<input type="text" name="username" value=""/><br />
密 码：<input type="password" name="password" value=""/><br />
<!--
描述：单选框
-->
性别：
男<input type="radio" name="sex" value="男" checked="checked"/>
女<input type="radio" name="sex" value="女"/><br />
<!--
描述：多选框
-->
爱好：<br />
玩游戏<input type="checkbox" name="favorite" value="game"/>
看书<input type="checkbox" name="favorite" value="study" checked="checked"/>
爬山<input type="checkbox" name="favorite" value="moutsin"/>
弹吉他<input type="checkbox" name="favorite" value="guitar"/><br />
<!--
描述：下拉框
-->
籍贯：<br />
<select name="address">
<option value="null">--请选择--</option>
<option value="beijing">北京</option>
<option value="shandong">山东</option>
<option value="shanghai">上海</option>
<option value="zhejiang">浙江</option>
<option value="guangdong">广东</option>
</select>
<br />
<!--
描述：文本域
-->
备注：<br />
<textarea name="beizhu" rows="10" cols="30"></textarea>
<br />
<input type="submit" value="登录"/>
<!--
描述：普通按钮
-->
<input type="button" id="button_1" value="这里是普通按钮" />
</form>
<hr width="1200" align="left" />
<!--
描述：底部锚点
-->
<a href="#">回到顶部</a>
</body>
</html>练习题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h2>注册页面</h2>
<!--
作者：doubleshift
时间：2020-04-20
描述：注册页面
提交数据：
2.html?username=admin&password=admin123&mail=9999999%40qq.com&phone=13600000000&
sex=man&favorite=game&favorite=study&favorite=guitar&address=beijing&intro=hhhhhhhsafasd1223&xieyi=true#
-->
<form action="#" method="get">
<table border="1px" cellspacing="0" cellpadding="10px">
<tr height="35px">
<td width="100px">用户名：</td>
<td width="300px">
<input type="text" id="username" name="username" value="" />
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text" id="mail" name="mail" value="" />
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text" id="phone" name="phone" value="" />
</td>
</tr>
<tr height="35px">
<td>性别：</td>
<td>
男<input type="radio" name="sex" id="sex" value="man" checked="checked"/>
女<input type="radio" name="sex" id="sex" value="woman" />
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
玩游戏<input type="checkbox" name="favorite" value="game"/>
看书<input type="checkbox" name="favorite" value="study" checked="checked"/>
爬山<input type="checkbox" name="favorite" value="moutsin"/>
弹吉他<input type="checkbox" name="favorite" value="guitar"/>
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="address">
<option value="null">---请选择---</option>
<option value="beijing">北京</option>
<option value="shandong">山东</option>
<option value="shanghai">上海</option>
<option value="zhejiang">浙江</option>
<option value="guangdong">广东</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人介绍：</td>
<td>
<textarea name="intro" rows="8" cols="20"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="xieyi" id="xieyi" value="true" />我已阅读隐私政策协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
效果展示：
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
