一HTML5 input类型
<!DOCTYPE html>
<html>
<body>
<!--
form
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
-->
<form action="/example/HTML 5/demo_form.asp" method="get" name="myform">
<!--
form是网页开发中html语言中的表单
action 指定当这个表单提交到服务器端后处理数据的页面
点了表单的提交后，数据会发送到demo_form.asp这个页面去处理
method 指定从客户端传递数据到服务器端的方法，分为get和post两种
get就是可以看到数据的，post就不可以看到数据
-->
Email : <input type="email" name="user_email" /><br />
<!--
前面的Email表示最后的提交页面前面的提示输入符，
后面的type表示输入的必须是email类型的，否则就报错
<br />表示一个换行符的意思 <br >是一个空标签，没有结束的意思，
所以<br ><br />这样的表述是错的
/>也是类似的效果，表示输入结束。
-->
<input type="submit" />
<!--
添加一个提交键
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form action="/example/HTML 5/demo_form.asp" method="get" name="myform">
<!--
后面还加上了min和max，表示对于输入数字的控制。
step,规定合法数字的间隔，value表示默认值
-->
Email :<br/> <input type="url" name="user_url" min="1" max="10" step="6" value="10"/><br />
<!--
ex: http://mail.163.com/index.html 中：
1) http://: 这个是协议，也就是HTTP超文本传输协议，也就是网页在网上传输的协议。
2）mail：这个是服务器名，代表着是一个邮箱服务器，所以是mail.
3)163.com:这个是域名，是用来定位网站的独一无二的名字。
4)mail.163.com：这个是网站名，由服务器名+域名组成。
5）/：这个是根目录，也就是说，通过网站名找到服务器，然后在服务器存放网页的根目录
6:）index.html：这个是根目录下的默认网页（当然，163的默认网页是不是这个我不知道，只是大部分的默认网页，都是index.html）
7）http://mail.163.com/index.html:这个叫做URL，统一资源定位符，全球性地址，用于定位网上的资源。
-->
<input type="submit" />
</form>
</body>
</html>
当然除了像email这种type类型的，还有：
datetime , datetime-local , month , date , week , time 等类型。
二HTML5表单元素
<!DOCTYPE html>
<html>
<body>
<form action="/example/HTML 5/demo_form.asp" method="get" name="myform">
Webpage : <input type="url" list="url_list" name="link" />
<!--
datalist元素规定输入域的选项列表
如果需要把datalist绑定到输入域，要用输入域中的list属性引用datalist的id
-->
<datalist id="url_list">
<!--
列表是通过datalist中的option元素创建的。
option元素永远都要设置value属性。
-->
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<!--
keygen元素的作用是提供一种验证用户的可靠方法
keygen会生成私钥和公钥，前者用于存在客户端，后者发到服务器
但是浏览器不太支持它成为一种有用的安全标准。
-->
<input type="submit" />
</form>
</body>
</html>
建议计算器，原来看的代码不可以输出结果，后来自己修改了一下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA = document.getElementById("num_a").value;
numB = document.getElementById("num_b").value;
document.getElementById("result").value = Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用output元素的简易计算器 ：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> <input type="button" onclick="resCalc()" value="=" />
<!--
这里的“=”改成了 <input type="button" οnclick="resCalc()" value="=" />
否则没有时间激活JavaScript的计算方法。
-->
<output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>
或者改成这样，需要有东西去激活JavaScript的计算：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
var numA = document.getElementById("num_a").value;
var numB = document.getElementById("num_b").value;
document.getElementById("result").value = Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用output元素的简易计算器 ：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<input id="result" /><br />
<input id="result" value="submit" onclick="resCalc()"></output>
</form>
</body>
</html>
三是HTML引用图片
<!DOCTYPE html>
<html>
<body>
<form action="/example/HTML 5/demo_form.asp" method="GET" id="user_form">
E-mail : <input type="email" name="userid" /><br />
<img src="file://C:/Users/User/Desktop/fuck.png" width="122" height="122">
<!--
使用src来打开本地的图片，可以右键点击图片，然后查看里面的属性，记住路径和图片名称以及格式
记得把原来中的\改成/才行，前面的file://不要写漏了。然后这个是我们引用本地图片的方法
-->
<input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560663784414&di=64b5fc18bb80dfdf3c75d4bbe4726116&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140716%2F19240955_174351211669_2.jpg" width="99" height="99" /><br />
<!--
第二个写法是调用网络的图片，这里是以百度为例子，我们首先在网上找到一个图片，然后我们用
鼠标右击，可以看到有一个审查元素的按钮或者检查的按钮（N），我们打开之后会看到很多代码，
然后我们把鼠标从上往下滑动，当滑倒某个地方的时候我们可以看到整个图片都被选定了，那就是地址
或者我们直接找到类似于上面的格式，或者直接点击右键有一个“copy address”的标志，可以直接复制。
-->
</form>
</body>
</html>
四是HTML标签
（现在会的几个…)
一，< a >标签
<!DOCTYPE html>
<html>
<body>
<a href="http://www.sina.com.cn ">Visit sina.com.cn!</a>
<!--
<a>标签定义超链接，用于从一个页面链接到另一个页面，
<a>元素最重要的是href属性，它指定连接的目标。
在所有的浏览器中，连接默认的外观是：
未被访问的链接带有下划线而且是蓝色的。
已被访问的链接带有下划线而且是紫色的。
活动链接带有下划线而且是红色的。
-->
</body>
</html>
二，< abbr > 标签
<!DOCTYPE html>
<html>
<body>
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<!--
表示一个缩写的形式，通过对缩写的词语进行标记，我们就可以
为浏览器，拼写检查程序，翻译系统以及搜索分度器提供有用的信息。
在有些浏览器中，当我们把鼠标移到缩略词语上时，title可以用于展示表达的完整版本。
-->
</body>
</html>
三，< address >标签
<!DOCTYPE html>
<html>
<body>
<address>
Written by zhangheng <br />
<a href="xxxxxxx">Email us</a><br />
Address:xxxxxx <br />
Phone:xxxxx<br />
</address>
<!--
不应该使用<address>标签来描述邮政地址，除非这些信息是联系
信息的组成部分，最后出来的文本一般表示为斜体。
-->
</body>
</html>
四 ，映射标签
<!DOCTYPE html>
<html>
<body>
<p>请点击上面的图画用以放大</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560663784414&di=64b5fc18bb80dfdf3c75d4bbe4726116&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140716%2F19240955_174351211669_2.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="http://www.sina.com.cn " target="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href="http://www.sina.com.cn " target="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href="http://www.sina.com.cn " target="_blank" alt="Sun" />
</map>
<!--
这个例子展示了如何创建带有可以点击区域的图像映射，其中的每个
区域都是一个超级链接。
-->
<p><b>注释：</b>img 元素中的usemap属性引用map元素中的id或name属性（根据浏览器），
所以我么同时向map元素添加了id和name属性</p>
<!--
<b>表示字体加粗。
-->
</body>
</html>
五，< article >标签
<!DOCTYPE html>
<html>
<body>
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
As we all know...
</article>
</body>
</html>
1380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
