自用 HTML学习复习

<!--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 /> 换行符&nbsp; 空格(一个字节)<b> 加黑显示<i> 斜体显示<u> 添加下划线<del> 添加中划线，即删除线--><a name="段落标签功能学习"></a><h1 align="center">[段落标签功能学习]</h1> <p>[HTML的由来]<br />&nbsp;&nbsp;&nbsp;&nbsp;HTML的英文全称是<i>Hyper Text Marked Language</i>，即<b>超文本标记语言</b>。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。<br />&nbsp;&nbsp;&nbsp;&nbsp;用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。<br />&nbsp;&nbsp;&nbsp;&nbsp;HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。 <del>这里是一句废话，需要删除</del><br /><b><i><u>效果重叠显示：加黑/斜体/下划线/换行</u></i></b><br />&nbsp;&nbsp;&nbsp;&nbsp;<b>万维网（world wide web）</b>上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。<br />&nbsp;&nbsp;&nbsp;&nbsp;在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。<u>超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。</u></p><p>[HTML的定义]<br />&nbsp;&nbsp;&nbsp;&nbsp;超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。<br />&nbsp;&nbsp;&nbsp;&nbsp;网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。<br />&nbsp;&nbsp;&nbsp;&nbsp;浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</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*5colspan：合并一行中的单元格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：数据要提交的地址也就是urlmethod：提交方式get或postget：适合小量数据post：适合大量数据form表单域标签给用户提供可以进行数据书写或者选择的标签input文本框typetext：可见的文本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>

效果展示：

自用 HTML学习复习相关推荐

草柴返利:淘宝天猫开学季怎么购买学生学习复习资料便宜又划算？
开学季是指每年寒假后春季开学和暑假后秋季开学,每学期的开学季淘宝天猫会举办淘宝天猫开学季活动. 淘宝天猫开学季怎么购买学生学习复习资料便宜又划算? 1.打开淘宝或天猫选择要购买的学习.复习资料,并点击 ...
自用的快速复习Java基础知识，不适用于每一个人
自用的快速复习java基础知识,不适用于每一个人问题背景 1. 类定义出来的变量称为**对象** [IDEA安装](https://www.jb51.net/article/193853.htm) ...
【博学谷学习记录】超强总结，用心分享 | 狂野大数据shell脚本个人学习复习记录—PART-03
shell脚本个人学习&复习记录--PATR-01 shell脚本个人学习&复习记录--PATR-02 Shell的函数 function可以不用写 ()中不能放任何东西#定义函数-- ...
【博学谷学习记录】超强总结，用心分享 | 狂野大数据shell脚本个人学习复习记录—PART-02
shell脚本个人学习&复习记录PART-01:CSDN 7.shell的流程控制语句 if语句数字判断 -eq:等于 -ne:不等于 -gt:大于 -lt:小于 -ge:大于等于 -le: ...
FRM学习复习2（持续更新中..）
(此文仅记录学习进程,加油!) FRM学习复习2(持续更新中..) Framework框架 overview of risk management风险管理概述 framework overview R ...
艾宾浩斯记忆表格excel_Excel全年学习复习计划表(艾宾浩斯遗忘曲线)
最近准备考在职博士,刷刷学历,不得不又拿起必考的英语来,发现由于这几年敲代码,日常生活词汇忘了很多,只好买本考博词汇背诵,不过三十而立的人背起来确实费劲了,所以开始寻找好的背诵方法. 又想起了当年步步 ...
Python学习——复习5次课（12月2日）
任务: 复习5次课(12月2日) 1.8 递归列出目录里的文件 1.9 匿名函数 2.0-2.4 内建函数笔记: 递归的注意事项必须有最后的默认结果 if n == 0 递归参数必须向默认结果收敛 ...
自用 Java 学习(JDBC)
JDBC 今日目标掌握JDBC的的CRUD 理解JDBC中各个对象的作用掌握Druid的使用 1,JDBC概述在开发中我们使用的是java语言,那么势必要通过java语言操作数据库中的数据.这就 ...
学习沐神课程自用深度学习笔记05 线性回归基础优化算法
线性回归&基础优化算法线性回归导入: 美国买房价格的影响因素: 卧室个数卫生间个数房屋大小据此给出一个价格影响因素记为关键因素成交价记为y 权重为w 偏差为b 关键因素:x1, ...

自用 HTML学习复习

自用 HTML学习复习相关推荐

最新文章

热门文章