HTML实例【五】

端午节前赶完了HTML的东西，去约饭啦～
这里是表单和输入框、引入内联框架、头元素、脚本这四个大块，接下来准备更css的东西～冲！

<h1>10、HTML Forms and Input</h1>
	<p>10.1 文本域和密码域</p>
	<form action="">
		First name:<input type="text" name="firsrname" /><br />
		Last name:<input type="text" name="lastname" /><br />
		Password:<input type="password" name="password" />
		<p><b>注意：</b>表单本身是不可见的。且一个文本字段的默认宽度是20个字符。</p>
		<p><b>注意：</b>密码字段中的字符是隐藏的（显示为星号或者圆圈）</p>
	</form>
	<p>10.2复选框checkbox,提交按钮解释在下面10.8</p>
	<form action="https://www.runoob.com/try/demo_source/demo-form.php" method="get">
		<input type="checkbox"  name="vehicle" value="Bike"/>I have a bike<br />
		<input type="checkbox" name="vehicle" value="Car" checked="checked"/>I have a car.<br />
		<input type="submit" value="提交" />
	</form>
	<p>10.3单选框radio</p>
	<form action="https://www.runoob.com/try/demo_source/demo-form.php">
		<input type="radio" name="sex" value="male"/>Male<br />
		<input type="radio" name="sex" value="female" />Female<br />
		<input type="submit" value="提交" />
	</form>
	<p><b>注意：</b>当用户点击一个单选按钮时，他就会被选中，其他的同名按钮就不会被选中</p>
	<p>10.4简单的下拉列表,selected为预选</p>
	<form action="">
		<select name="cars">
			<option value="volvo">沃尔沃</option>
			<option value="audi">奥迪</option>
			<option value="Ferrari" selected>法拉利</option>
		</select>
	</form>
	<p>10.5 多行文本输入控件</p>
	<textarea rows="10" cols="30">I am a textarea.</textarea>
	<p>10.6按钮</p>
	<form action="">
		<input type="button" value="变美！" />
	</form>
	<p>10.7在数据周围绘制一个带标题的框。</p>
	<form action="">
		<fieldset>
			<legend>Personal information:</legend>
			Name:<input type="text" size="30" /><br />
			E-mail:<input type="text" size="30"/><br />
			Date of birth:<input type="text"  size="10"/>
		</fieldset>
	</form>
	<p>10.8带文本域和输入域的表单</p>
	<p>action 属性规定当提交表单时，向何处发送表单数据。 HTML5 中，action="URL" 属性不再是必需的.绝对 URL - 指向另一个网站（比如 action="http://www.example.com/example.htm"）相对 URL - 指向网站内的一个文件（比如 action="example.htm"）</p>
	<form action="https://www.runoob.com/try/demo_source/demo-form.php">
		First name:<input type="text" name="Fristname" value="Mickey" /><br />
		Last name:<input type="text" name="Lastname" value="Mouse" /><br />
		<input type="submit" value="提交" />
	</form>
	<p> 点击“提交”按钮，表单数据将被发送到服务器上action=“”</p>
	<p>10.9发送邮件表单</p>
	<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
		Name:<br />
		<input type="text" name="name" value="your name" /><br />
		E-mail:<br />
		<input type="text" name="mail" value="you email" /><br />
		Comment:<br />
		<input type="text" name="comment" value="your comment" size="50" /><br /><br />
		<input type="submit" value="发送" />
		<input type="reset"  value="重置"/>
	</form>
	
	<h1>11、HTML iframe</h1>
	<p>内联框架（HTML页面中插入框架），通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe src="URL"。iframe可以显示一个目标链接的页面。目标链接的属性必须使用iframe的属性</p>
	<iframe src="lala.jpg" name="iframe_a" width="700" height="600"></iframe>
	<p><a href="https://www.baidu.com/" target="iframe_a">Baidu</a></p>
	<h1>12、HTML头部元素</h1>
	<p>12.1、浏览器中包含body元素的内容，浏览器的标题包含title元素的内容</p>
	<p>12.2 HTML页面中默认的URL链接</p>
	<img src="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>-注意这里设置的是图片的相对地址，能正常显示是因为在head部分设置了base标签，该标签指定了该页面所有链接的默认URL，所以该图片的访问地址为//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
	<br /><br />
	<a href="//www.baidu.com/">百度</a>--注意该链接会在新窗口打开，即便没有设置target=“_blank”,因为base标签里设置过target属性为“_blank”了。
	<p>12.3、提供文档元数据</p>
	<p>meta标签提供关于HTML文档的元数据。[meta元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。]元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。</p>
	<p>所有 meta 标签显示在 head 部分...</p>
	
	<h1>13、HTML脚本</h1>
	<p>13.1插入一个脚本</p>
	<script>
	document.write("Hello!")
	</script>
	<p>13.2 使用noscript标签</p>
	<script>
	document.write("Hello!")
	</script>
	<noscript>抱歉，不支持JavaScript！</noscript>
	<p>不支持JavaScript的浏览器会使用&lt;noscript&gt;元素中定义的内容（文本）代替</p>

老样子，全部源码放在同名资源包里，欢迎下载交流，喜欢的点个赞哈～