HTML部分标签总结<小甲鱼html视频的精简版>
本帖最后由 小脑斧 于 2020-5-11 09:00 编辑之前看着甲鱼的视频，做着课后习题，自己对html内容进行了总结，便于随时回温{:10_254:}排版可能有些凌乱
总结第一弹【图片，链接，文字】：
<!DOCTYPE.html>
<html>
<head>
<title>总结（1-10）</title>
<!--搜索引擎优化-->
<meta name="keywords" content="小甲鱼开发教学">
<meta name="author" content="小甲鱼">
<meta name="viewport" content="width=device-width, initial-scale=0.1"><!--网页自适应-->
<meta http-equiv="refresh" content="100000; https://fishc.taobao.com"><!--meta自动跳转-->
<!--链接css文件-->
<link rel="stylesheet" type="text/css" href="text.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen.css">
<link rel="icon" type="image/x-icon" href="img/FishC.png">
<!--内嵌css-->
<style>
body {
background-image: url("bluebackground.jpg");
}
h1 {
text-align: center;
color: #ADFF2F;
}
h2 {
margin-left: 60%;
color: #ADFF2F;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color:black;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body {
background-image: url("greenbackground.jpg");
}
h1 {
text-align: center;
color: white;
}
h2 {
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color:#FFEBCD;
}
</style>
<style media="print">
h1 {
color: black;
}
h2 {
color:black ;
}
p {
color: black;
}
</style>
<!--js 定义文档内嵌代码-->
<script type="text/javascript" >
/*document.write("qqqqqqq");*/
</script>
<!--js 定义外部脚本-->
<script type="text/javascript" src="test.js" defer></script>
<noscript>
<p>您的网页不支持JavaScript，将自动跳转到一个神奇的网站 -> http://demo.fishc.com</p>
<meta http-equiv="refresh" content="1; http://demo.fishc.com">
</noscript>
</head>
<body>
<h1 style="color:white">《0基础入门学习WEB开发》配套学习资料</h1>
<p style="color:#FFFAF0">课堂案例演示： <a href="https://ilovefishc.com/html5/" target="_blank">传送门 </a></p>
<p>HTML5速查宝典： <a style="color:yellow; background:black" href="https://man.ilovefishc.com/html5/" target="_blank">传送门 </a></p>
<p>CSS3速查宝典： <a href="https://man.ilovefishc.com/css3/" target="_blank">传送门 </a></p>
<p>扩展知识，知识点备忘： <a href="https://fishc.com.cn/forum-354-1.html" target="_blank">传送门 </a></p>
<p>点击图片跳转页面</p>
<a href="https://fishc.com.cn/" target="_blank"><img src="1.jpg"alt="鱼C论坛"></a>
<h1>如何减少频繁分配内存（malloc或者new）造成的内存碎片</h1>
<h2>作者：网友</h2>
<p><b>高性能之内存池（频繁使用malloc和new会降低性能）内存池(Memory Pool)是一种内存分配方式。通常我们习惯直接使用new、malloc等API申请分配内存，这样做的缺点在于：由于所申请内存块的大小不定，
当频繁使用时会造成大量的内存碎片并进而降低性能。内存池则是在真正使用内存之前，先申请分配一定数量的、大小相等(一般情况下)的内存块留作备用。当有新的内存需求时，就从内存池中分出一部分内存块，若内存块不够再继续申请新的内存。这样做的一个显著优点是尽量避免了内存碎片，使得内存分配效率得到提升。
（1）针对特殊情况，例如需要频繁分配释放固定大小的内存对象时，不需要复杂的分配算法和多线程保护。也不需要维护内存空闲表的额外开销，从而获得较高的性能。
（2）由于开辟一定数量的连续内存空间作为内存池块，因而一定程度上提高了程序局部性，提升了程序性能。
（3）比较容易控制页边界对齐和内存字节对齐，没有内存碎片的问题。
（4）当需要分配管理的内存在100M一下的时候，采用内存池会节省大量的时间，否则会耗费更多的时间。
（5）内存池可以防止更多的内存碎片的产生
（6）更方便于管理内存利用C/C++开发大型应用程序中，内存的管理与分配是一个需要认真考虑的部分。
本文描述了内存池设计原理并给出内存池的实现代码，代码支持Windows和Linux，多线程安全。
内存池设计过程中需要考虑好内存的分配与释放问题，其实也就是空间和时间的矛盾。
有的内存池设计得很巧妙，内存分配与需求相当，但是会浪费过多的时间去查找分配与释放，这就得不偿失；
实际使用中，我们更多的是关心内存分配的速度，而不是内存的使用效率。基于此，本文按照如下思想设计实现内存池。
主要包含三个结构：StiaticMemory, MemoryChunk和MemoryBlock</b>
</p>
<pre><!--定义预格式化的文本-->
<code>
<!-- 下面代码获取用于获取用户输入并显示到网页上 -->
<p>你最喜欢吃的水果是：<span id="fruit"></span></p>
<script type="text/javascript">
var user_input = prompt("你最喜欢吃的水果是：");
document.getElementById("fruit").innerHTML = user_input;
</script>
</code>
</pre>
<pre>
__.
.-".' .-. _..._
.' .' .' \ .-""__ ""-.
// .' : --..:__.-""""-. \
:: / ;.d[ DISCUZ_CODE_789 ]nbsp; sbp_.-""-:_:
;: : ._ :P .-. ,"TP
: \ \T--...-; : d$b:d$b
\ `. \`..' ; $ [ DISCUZ_CODE_789 ]nbsp; ;$ [ DISCUZ_CODE_789 ]nbsp;
`. "-. ). : T$P:T$P
\..---^.. / `-' `._`._
.' "-. .-" FISHC
/ "-._.-" ._ '^' ;
: \.`. >
; -. \`."-._.-'-'
: <!-- 这是一条狗 --> .'\ \ \ \ \
;; /:\ \ \ . ;
: : ,;`.`.;:
; \ ; ; "-._:;
: `. : : \/
; /"-. ; :
: / "-. : : ;
: .' K-; ; ;
; : ; ; /:
; ; : : .' ;
: : ;: _..-"\ :
: \ : ; / \ ;
; . '. '-; / ; :
;\; : : : : '-.
'.._L.:-' : ; ; . `.
; : :?; :
: '-.. '.._L.:-'
; , `.
: \; :
'..__L.:-'
</pre>
<!--字符实体-->
<div>
<p>大于号>小于号，他俩都是预留字符实体，HTML还有其他符号（字符）实体：©（À）等，详情见<mark><a href="https://man.ilovefishc.com/pageHTML5/ISO.html">网址</a></mark></p>
</div><br><br>
<!--blockquote-->
<p><cite>《中国合伙人》中有很多文字还是很不错的：</cite></p>
<blockquote>
<p>梦想是什么，梦想就是一种让你感到坚持就是幸福的东西。</p>
<p><mark>当才华撑不起野心的时候，只能安静读书。</mark></p>
<p>最大的骗子其实是我们自己，因为我们总是想改变别人，而拒绝改变自己。</p>
<p>确实，扎心了</p>
<p>年轻的时候，不该什么都不想，也不能想太多。想得太多会毁了你，我相信这话……成功路上最心酸的是要耐得住寂寞、熬得住孤独，总有那么一段路是你一个人在走，一个人坚强和勇敢。也许这个过程要持续很久，但如果你挺过去了，最后的成功就属于你。
我从来就没有什么梦想，我也不知道什么是梦想，我只知道什么是失败，中国的学生是全世界学生里最容易失败的，因为你们面临的是全世界最残酷的考试。失败无处不在，人生如此绝望，这就是现实！掉在水里你不会淹死，呆在水里你才会淹死，你只有游，
不停地往前游。那些从一开始就选择放弃的人他不会失败，因为他们从一开始就失败了，失败并不可怕，害怕失败才真正可怕
<p>所以最后或许没有游上岸，但是成为了游泳健儿，开辟了第二家园</p>
</blockquote>
</body>
</html>
所需css文件：
所需图片：
部分效果：
如有错误，欢迎敲打{:10_254:}
总结第二弹：【表单表格输入框】
<!DOCTYPE.html>
<html>
<head>
<title>程序</title>
<meta name="keywords" content="小甲鱼开发教学">
<meta http-equiv="refresh" content="100000; https://fishc.taobao.com" >
<meta name="author" content="小甲鱼">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="stylesheet" type="text/css" href="text.css">
<link rel="stylesheet" type=定义列表使用 dl 元素来实现，该元素定义了一个包含术语定义以及描述的列表。
使用 dl 元素，还需要 dt 元素和 dd 元素来实现。其中，dt 元素用于定义列表中的项目部分内容，而 dd 元素则用于定义描述部分内容。"text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen.css">
<link rel="icon" type="image/x-icon" href="img/FishC.png">
<!--base href="http://demo.fishc.com/html5/lesson4/" target="_blank"-->
<noscript>
<meta http-equiv="refresh" content="0; http://demo.fishc.com">
</noscript>
<style>
ul.a {list-style-type: square;}
span{color: red}
ol{list-style-type:lower-roman;}
ol.b{list-style-type:disc;}
ul.c{list-style-image:url("../lesson12/test5/img/turtle.png");}
table{border:2px solid black;
border-collapse:collapse;
}
th{border:1px solid black;
padding:5px;
}
td{border:1px solid red;
padding:10px;
}
</style>
<style>
body {
font-family: Arial;
font-size: 14px;
line-height: 180%;
padding-top: 20px;
width:620px;
background-repeat:no-repeat;
}
table {
width: 600px;
border-top: 1pt solid #C1DAD7;
border-left: 1pt solid #C1DAD7;
margin: 0 auto;
}
td {
padding: 5px 10px;
border-right: 1pt solid #C1DAD7;
border-bottom: 1pt solid #C1DAD7;
text-align:center
}
th{
background:blue;
color:white;
}
/* odd 标识奇数行，even 标识偶数行 */
tr:nth-of-type(odd) {
background: #c6f9f7
}
/* 鼠标悬停后表格背景颜色 */
tr:hover {
background: #E0F0F0;
}
</style>
</head>
<body>
<a href="test1">第一个例子</a>
<a href="test2">第二个例子</a>
<a href="test3">第三个例子</a><br><br>
<!--0.格式引用-->
<!--加引号-->
X<cite>XX</cite>X<q>XX</q><br><br>
<!--文本显示顺序-->
<bdo dir="rtl">
<!--加拼音-->
<ruby>磊<rp>（</rp><rt>lei</rt><rp>）</rp></ruby>
<ruby>子<rp>（</rp><rt>zi</rt><rp>）</rp></ruby>
</bdo>
<!--简称或者缩写-->
<p><abbr title="鱼C工作室">Ilove fishc.com</abbr>欢迎你</p>
<!--1.字体设置：加粗/斜体/划线-->
<p>学习中最重要的是<em><b>练习</b></em>而不是<s>摸鱼</s></p>
<p>这是<del>旧网站</del>不用了。请访问新网站<ins>xxxxx</ins></p>
<p>鱼C的官方主页不是 <u>i love fishc.com</u>，是 <a href="https://ilovefishc.com">ilovefishc.com</a> 才对。</p>
<p><dfn>HTML</dfn>一门<i><strong>标记</strong></i>语言</p>
<p>b元素也可以让内容<b>倾斜</b>，只不过它没有附带任何表示强调的语义。</p>
<p>i元素也可以让内容<i>倾斜</i>，只不过它没有附带任何表示强调的语义。</p>
<p><small> Copyright 2010-2060 by FishC.</small></p><!-- 使用 small 元素表示小字号文本 -->
<p><b>看<sup>山<sub>是</sub><small>山</small></sup>，看<sub>山<sup>不是</sup><small>山</small></sub>，看<sup>山<sub>还是</sub><small>山</small></sup></b></p>
<p>这个文本包含 <sub>sub-下标</sub>文本。</p>
<p>这个文本包含 <sup>sup-上标</sup> 文本。</p>
<p>E = MC<sup>2</sup></p>
<p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>
<!--2.无序（有序）列表:类似分级标题-->
<ol class="a" start="0">
<li>咖啡
<ol class="b">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
</li>
<ol>
<li>零基础入门学习Web开发（HTML5+CSS3）</li>
<li>零基础入门学习Web开发（JavaScript）</li>
<li>零基础入门学习Web开发（Jquery）</li>
<li>零基础入门学习Web开发（BootStarp）</li>
<li>零基础入门学习Web开发（Vue）</li>
<li>零基础入门学习Web开发（PHP）</li>
</ol>
<li>茶
<ul class="c">
<li><a href="http://www.Ilovefishc.com">咖啡</a></li>
<li>茶</li>
<li>牛奶</li>
</ul>
</li>
<li>牛奶</li>
</ol>
<ul class="a"><!--style格式-->
<li>Coffee</li>
<li>Tea</li>
<li>Me</li>
</ul>
<ul>A
<li>零基础入门学习 Web 开发（HTML5+CSS3）；</li>
<li>零基础入门学习 Web 开发（JavaScript）；</li>
<li>零基础入门学习 Web 开发（PHP）</li>
</ul>
<!--3.列表嵌套-->
<ul>B
<li>把冰箱门打开；</li>
<li>把大象装进去；</li>
<ul>
<li>确保温度低于零下 10 度；</li>
<li>将大象放在冷冻室；</li>
<li>一定不要撒盐</li>
</ul>
<li>把门关上。</li>
</ul>
<!--定义列表-->
<!-- 单条术语与描述 -->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
</dl>
<!-- 多条术语，单条描述 -->
<dl>
<dt>fishc.com.cn</dt>
<dt>bbs.fishc.com</dt>
<dd>一个神奇的论坛。</dd>
</dl>
<!-- 单条术语，多条描述 -->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
<dd>一个可以结识一群志同道合的朋友的地方。</dd>
</dl>
<!-- 多条术语，多条描述 -->
<dl>
<dt>fishc.com.cn</dt>
<dd>一个神奇的论坛。</dd>
<dd>一个可以结识一群志同道合的朋友的地方。</dd>
<dt>ilovefishc.com</dt>
<dd>鱼C工作室的新主页。</dd>
</dl>
<!--表格设置-->
<table>
<caption>练习表</caption>
<!-- 将第 1 列的背景颜色设置为红色 -->
<!-- 将第 2、3 列的背景颜色设置为绿色 -->
<colgroup>
<col span="2“style="background: #F0FFFF">
<col style="background: #FF69B4">
</colgroup>
<tr>
<th>name</th>
<th>age</th>
<th>img</th>
</tr>
<tr>
<td>小甲鱼</td>
<td>40</td>
<td><img src="1.jpg" alt="本人" width="30"></td>
</tr>
<tr>
<td>伪表头1</td>
<td>伪表头2</td>
<td>伪表头3</td>
</tr>
<tr>
<td colspan="2" >表格1</td><!--合并表格行/列-->
<td>表格3</td>
</tr>
<tr>
<td>表格11</td>
<td rowspan="2">表格12</td>
<td>表格13</td>
</tr>
<tr>
<td>表格21</td>
<td>表格23</td>
</tr>
</table><br><br>
<aside>
<p><a href="https://ilovefishc.com">鱼C主页</a></p>
<p><a href="https://ilovefishc.com">鱼C主页</a></p>
</aside><br><br>
<fieldset>
<legend>点击三角有惊喜</legend>
<details>
<summary> 输入内容</summary>
<p><mark>Tim Bernes Lee</mark> 发明了HTML蒂姆·伯纳斯·李为了方便世界各地的物理学家能够进行合作研究与信息共享，创造了HTML语言。
他是英国计算机科学家、万维网的发明者。2004年，英女皇伊丽莎白二世向伯纳斯-李颁发大英帝国爵级司令勋章。
2009年4月，他获选为美国国家科学院外籍院士。被《时代》杂志列为时代100人：本世纪最重要的人物。
在2012年夏季奥林匹克运动会开幕典礼上，他获得了“万维网发明者”的美誉。
2017年，他因“发明了万维网、第一个浏览器和使得万维网得以扩展的基础协议及算法”而获得2016年度的图灵奖。</p>
</details>
</fieldset><br><br>
<label>课程：<input list="myDatalist" name="datalist"></label>
<datalist id="myDatalist">
<option>《零基础入门学习Python》</option>
<option>《零基础入门学习Web开发》</option>
<option>《零基础入门学习Scratch》</option>
<option>《带你学C带你飞》</option>
</datalist><br><br>
<label>课程：<input list="urllist" name="datalist"></label>
<datalist id="urllist">
<option value="https://ilovefishc.com">鱼C主页</option>
</datalist>
<input type="submit"><br><br>
<!--5.图像映射；注意坐标参数设置-->
<img src="1.jpg" alt="《零基础入门学习C语言》" usemap="#book">
<map name="book">
<area shape="circle" coords="24,33,9" alt="eye" href="https://fishc.com.cn" target="_blank">
<area shape="poly" coords="36,73 90,68 59,87" alt="eye" href="https://item.jd.com/12573534.html" target="_blank">
<area shape="rect" coords="91,27,108,47," alt="mouth" href="https://man.ilovefishc.com" target="_blank">
</map><br><br>
<!--表单设置（服务器）-->
<form action="welcome.php method="post" enctype="multipart/form-data"><!--正则表达式-->
<input type="hidden" name="MAX_FIFE_SIZE" value="1024">
<label>传输文件：<input type="file" name="type" accept="image/*" multiple></label><br><br>
<label>邮箱：<input type="email" name="email" autocomplete="off" pattern="\w[-\w.+]*@(126.com|163.com)" placeholder="仅限163和126的邮箱"></label><br><br>
<label>电话：<input type="tel" name="tel" autocomplete="off" pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}" placeholder="仅限11位号码"></label><br><br>
<label>网址：<input type="url" name="url" autocomplete="off" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限http和https开头" size="30" maxlength="22" list="urllist"></label><br><br>
<textarea name="say" col="15" rows="12" wrap="hard" >WWW诞生蒂姆成功开发出了世界上第一个Web服务器和第一个Web客户机。虽然这个Web服务器简陋得只能说
是CERN的电话号码簿，它只是允许用户进入主机以查询每个研究人员的电话号码。但它却实实在在是一个所见即所得的超文本浏览/编辑器。蒂姆为他的发明正
式定名为World Wide Web（万维网），即我们熟悉的WWW。 </textarea>
<br><br>
</form>
<form action="welcome.php" method="post" autocomplete="off" target="_blank">
账号：<input type="text" name="name" autocomplete="off"><br><br>
密码：<input type="password" name="password"><br><br>
年龄：<input type="text" name="age"><br><br>
性别：<input type="text" name="sex" autocomplete="on" value="女"><br><br><br><br>
<button type="submit" formmethod="get">GET</button>
<button type="submit" formmethod="post">POST</button> <br><br>
<label>名字：<input type="text" autofocus ></label><br><br>
<label for="1">性别：
<select name="1">
<option value="male">男</option>
00<option>女</option>
</select>
</label><br><br>
<label for="2">邮箱：<input type="text" name="email" name="2" ></label><br><br>
<button type="button" onclick="()" >点我</button>
<button type="reset" >重置</button>
<input type="submit" value="提交">
<!--select选择框-->
<p>你喜欢的曼威英雄？</p>
<select name=“fruits” multiple>
<option value="1">死侍</option>
<option value="2">小角鱼</option>
<option value="3">绿巨人</option>
<option value="4">蜘蛛侠</option>
<option value="5">美国队长</option>
<option value="6">金刚狼</option>
<optgroup label="《极客Python之效率革命》">
<option value="gp002">绘图篇</option>
<option value="gp001">办公篇</option>
<option value="gp000">爬虫篇</option>
</optgroup>
</select>
<br><br>
<!--单选框（name属性值必须一致）-->
<div>
<strong><span style="font-size:medium;">请问您是否购买会员？</span></strong>
<span class="type">[单选]</span>
</div>
<label><input type="radio" name="sex" value="male">男</label>
<label><input type="radio" name="sex" value="female">女</label><br><br>
<!--多选框-->
<input type="checkbox" name="hero[]" value="1">死侍
<input type="checkbox" name="hero[]" value="2">小角鱼
<input type="checkbox" name="hero[]" value="3">绿巨人
<input type="checkbox" name="hero[]" value="4">蜘蛛侠
<input type="checkbox" name="hero[]" value="5">美国队长
<input type="checkbox" name="hero[]" value="6">金刚狼
<br><br>
<!--时间设置-->
<label>时间：<input type="time" name="time"></label><br><br>
<label>日期：<input type="date" name="date"></label><br><br>
<label>年月：<input type="month" name="month"></label><br><br>
<label>星期：<input type="week" name="week"></label><br><br>
<label>本地日期和时间：<input type="datetime-local" name="datetime-local"></label><br><br>
<label>你想看小角鱼哪个视频？<input type="search" name="search"></label><br></br>
<input type="submit" value="提交"><br><br>
</form>
<!--表单内相关元素分组-->
<fieldset>
<legend>调查内容</legend>
<label for="q1">您是否使用过鱼C论坛：</label><input type="text" name="age" id="age"><br><br>
<label for="q2">您使用鱼C论坛的目的是：</label><input type="text" name="age" id="age"><br><br>
<label for="q3">您使用鱼C论坛的频率是：</label><input type="text" name="age" id="age">
</fieldset>
</body>
</html>
所需文件：
代码小甲鱼写的{:10_254:}
部分效果图
如有错误，欢迎敲打{:10_254:}
总结第三弹【视频，嵌入，滚动条】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web总结3（视频/网页/地图/..）</title>
<style>
header{
color:white;
text-align:center;
background-color:blue;
}
</style>
</head>
<body>
<!--加载视频-->
<div>
<video id="FishC" src="test.mp4" width="780" height="550" controls muted loop poster="FishC.png">
<track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default>
非常抱歉，本视频由于不可抗拒因素，导致无法播放……
</video>
<p>鱼油选择播放速率：<select id="selRate">
<option value="0.5">0.5</option>
<option value="1" selected>1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="2">2.0</option>
</select></p>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">正常</button>
<script>
var rate = document.getElementById('selRate');
var video = document.getElementById('FishC');
// 开始/暂停播放
function playPause() {
if (video.paused)
video.play();
else
video.pause();
}
// 放大
function makeBig() {
video.width = 960;
}
// 缩小
function makeSmall() {
video.width = 320;
}
// 正常
function makeNormal() {
video.width = 640;
}
// 改变播放速率
rate.addEventListener('change', function () {
video.playbackRate = this.value;
});
</script><br><br>
</div>
<div>
<!--加载音频-->
<audio src="....">加载失败</audio>
</div><br><br>
<div>
<!--数值滚动条-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)" action="welcome.php" method="get">
0<input type="range" id="a" value="50" min="0" max="100">100 +
<input type="number" id="b" value="50"> =
<output name="x" for="a,b">100</output>
</form>
</div><br><br>
<div>
<!-- 嵌入网页-->
<iframe src="https://ilovefishc.com" width="800px" height="600px" >哦
</iframe>
<!--嵌入百度地图-->
<iframe src="https://map.baidu.com/@12989872.35,2658432.29z" width="800px" height="600" >抱歉，打开错误</iframe>
</div><br><br>
<!--使用meter元素显示一个范围的值-->
<div>
<p>又到月底了，您的零花钱还剩下：</p>
<meter id="money" high="0.8" low ="0.2" optimum="0.6" value="0.2" min="0" max="1"></meter>
<p>
<button type="button" value="0.1">10%</button>
<button type="button" value="0.6">60%</button>
<button type="button" value="0.9">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
var meter = document.getElementById("money");
for (var i = 0; i < buttons.length; i++) {
buttons.onclick = function(e) {
meter.value = e.target.value;
};
}
</script>
</div>
<!--使用progress元素显示一个范围的值-->
<div>
<p>学习web进度</p>
<progress max="1" value="0.4"></progress>
</div>
<!--定义文档或节的页脚-->
<footer>
© 2001-2017 Comsenz Inc.
</footer>
</body>
</html>
效果：
如有错误，欢迎敲打{:10_254:}
static/image/hrline/line1.png
。。。。。网页你在哪游荡了5个小时又回来了⊙▽⊙ 小脑斧 发表于 2020-5-8 08:09
。。。。。网页你在哪游荡了5个小时又回来了⊙▽⊙
日常随缘更新。 小脑斧 发表于 2020-5-8 08:09
。。。。。网页你在哪游荡了5个小时又回来了⊙▽⊙
说实话那狗画的是真不错，
确实挺花里胡哨的{:10_256:} _2_ 发表于 2020-5-8 09:54
说实话那狗画的是真不错，
确实挺花里胡哨的
狗也是甲鱼老师的，{:10_254:}是web课后习题里的
页:
[1]