元信息元素：meta
meta元素提供元数据信息，主要包括：
页面编码；
网页标题；
网页描述；
网页关键词。
这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，
页面就更容易被搜索引擎发现。
编码格式：charset
<meta charset="utf-8">
该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。
描述：description
描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。
通常description的写法如下：
<meta name="description" content="一句话描述网页内容">
关键词：keywords
同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。
通常keywords的写法如下：
<meta name="keywords" content="关键词一,关键词二,关键词三">
<img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>
姓名：<input type="text" name="nickName"></input>
密码：<input type="password" name="check" value="123"/>
value是默认值
单选框：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
1. HTML是什么语言？(单选题)<br>
<!-- ********* Begin ********* -->
<p><input type="radio" name="question"/>A：高级文本语言</p>
<p><input type="radio" name="question"/>B：超文本标记语言</p>
<p><input type="radio" name="question"/>C：扩展标记语言</p>
<p><input type="radio" name="question"/>D：图形化标记语言</p>
<!-- ********* End ********* -->
</body>
</html>
多选框：
<p><input type="checkbox" name="relax"/>逛街</p>
<p><input type="checkbox" name="relax"/>看电影</p>
<p><input type="checkbox" name="relax"/>宅</p>
带默认选项的单选框，多选框类似
带禁用选项加disabled属性
<p><input type="radio" name="marry" checked="checked"/>未婚</p>
<p><input type="radio" name="marry"/>已婚</p>
<label for="user">用户：</label>
<input type="text" id="user" name="user"/><br>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password"/>
<select>
<option>问答</option>
<option>分享</option>
<option>招聘</option>
<option selected="selected">客户端测试</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
width: 40%;
margin: 20px auto;
}
.common{
width:230px;
height: 30px;
}
span{
display:inline-block;
width: 150px;
text-align: right;
}
div{
margin-bottom: 10px;
}
</style>
</head>
<body>
<form class="container">
<!-- ********* Begin ********* -->
<div>
<span>用户名：</span>
<input type="text" class="common"/>
</div>
<div>
<span>昵称：</span>
<input type="text" class="common"/>
</div>
<div>
<span>性别：</span>
<input type="radio" id="male" name="sex"/>
<label for="male">男</label>
<input type="radio" id="female" name="sex"/>
<label for="female">女</label>
<input type="radio" id="other" name="sex" disabled="disabled"/>
<label for="other">保密</label>
</div>
<div>
<span>教育程度：</span>
<select class="common">
<option>高中</option>
<option>中专</option>
<option>大专</option>
<option selected="selected">本科</option>
<option>硕士</option>
<option>博士</option>
<option>其他</option>
</select>
</div>
<div>
<span>婚姻状况：</span>
<input type="radio" id="single" name="state" checked="checked"/>
<label for="single">未婚</label>
<input type="radio" id="married" name="state"/>
<label for="married">已婚</label>
<input type="radio" id="secret" name="state"/>
<label for="secret">保密</label>
</div>
<div>
<span> 兴趣爱好：</span>
<input type="checkbox" id="football" name="hobby"/>
<label for="football">踢足球</label>
<input type="checkbox" id="basketball" name="hobby"/>
<label for="basketball">打篮球</label>
<input type="checkbox" id="film" name="hobby" checked="checked"/>
<label for="film">看电影</label>
</div>
<div>
<span>描述自己的特点 ：</span>
<textarea class="common" maxLength="20"></textarea>
</div>
<div>
<span></span>
<input type="submit" class="common" value="提交" />
</div>
<!-- ********* End ********* -->
</form>
</body>
</html>
