学习实践
结合之前学习的文本格式化、区块、布局、表单等知识点编写用户信息收集表。
标签 | 描述 |
---|---|
<form> |
定义供用户输入的表单 |
<input> |
定义输入域 |
<textarea> |
定义文本域 (一个多行的输入控件) |
<fieldset> |
定义了一组相关的表单元素,并使用外框包含起来 |
<legend> |
定义了 元素的标题 |
<select> |
定义了下拉选项列表 |
<option> |
定义下拉列表中的选项 |
<button> |
定义一个点击按钮 |
<div> |
定义文档区块,块级(block-level) |
<span> |
定义 span,用来组合文档中的行内元素。 |
<img> |
定义 img,用来引用图像。 |
<b> |
定义粗体文本 |
<em> |
定义着重文字 |
<strong> |
定义加重语气 |
<ins> |
定义插入字 |
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息收集</title>
<style type="text/css">
p{text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/}
</style>
<div style="width:800px;margin:0 auto;background-color:#f5f5f5">
<div>
<img style="width:800px;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=858456685,3477534936&fm=26&gp=0.jpg">
</div>
<div>
<h1 align="center">措施</h1>
<p>致力践行 <em>“对人责”</em>的理念,坚持 <strong>“内出”</strong>的。</p>
<p><b>(一)加强管理。</b>市员工<ins>宿舍、食堂、厕所</ins>进行全方工。</p>
<p><b>(二)加强管理。</b>内各工地坚作。</p>
<p><b>(三)加强教育。</b>市。</p>
<p><b>(四)加强应急处理。</b>市大传播。</p>
<p><b>(五)做好监督检查。</b>染。</p>
</div>
<hr>
<div id="header">
<form>
<fieldset>
<legend>居民身份信息收集:</legend>
姓名: <input type="text" size="30" name="username"><br>
年龄: <input type="text" size="30" name="age"><br>
联系电话: <input type="text" size="30" name="telephone"><br>
性别: <select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select><br>
居住地:<textarea></textarea><br>
近一月是否有去过其他地区 :<br>
<input type="radio" name="behavior" value="True">是<br>
<input type="radio" name="behavior" value="False">否<br>
是否有一下症状表现(多项):<br>
<input type="checkbox" name="symptom" value="发热">发热<br>
<input type="checkbox" name="symptom" value="咳嗽">咳嗽<br>
<input type="checkbox" name="symptom" value="胸闷">胸闷<br>
<input type="checkbox" name="symptom" value="呼吸困难">呼吸困难<br>
</fieldset>
<input type="submit" value="提交">
</form>
</div>
</div>
</head>
<body>
</body>
</html>
显示效果