<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″> <!– 表示支持中文–>
<title>my page</title>
</head>
<body>
<header>中文</header>
<form>
<fieldset>
<legend>我是标题</legend><!– legend表示fieldset的标题–>
姓名:<br> <!– br表示换行–>
<input type=”text” name=”yourName”>
<br>
年龄:<br>
<input type=”text” name=”yourAge”><!– text表示单行文本框 不支持换行符–>
</form>
<form>
<label for=”femal”>女</label><!– id==for–>
<input type=”radio” name=”sex” id=”femal”/>
<br />
<label for=”male”>男</label>
<input type=”radio” name=”sex” id=”male”/>
<br>
<label for=”email”>邮箱</label>
<input type=”email” id=”email” name=”email” multiple><!– 多个邮箱之间用,–>
<br>
<label for=”pwd”>密码</label>
<input type=”password” id=”pwd” name=”pwd”>
<br>
<label for=”serach”>搜索</label>
<input type=”search” id=”search” name=”search”>
<br>
<label for=”tel”>电话</label>
<input type=”tel” id=”tel” name=”tel”>
<br>
<label for=”tel”>电话</label>
<input type=”url” id=”url” name=”url”>
<label for=”myColor”>What‘s your favorite color?</label>
<input type=”text” name=”myColor” id=”myColor” list=”mySuggestion”> <!– 选择框 list==datlist id–>
<datalist id=”mySuggestion”>
<option>black</option>
<option>blue</option>
<option>green</option>
<option>red</option>
<option>black</option>
<option>yellow</option>
</datalist>
<!– <input type=”checkbox” checked>:复选框–>
<!– <input type=”radio” checked>:单选框–>
<br>
<fieldset>
<legend>What is your favorite color?</legend>
<ul><!– ul定义无序列表 –>
<li><!– li定义列表项目可以与ol ul使用 –>
<label for=”red”>red</label>
<input type=”radio” checked id=”red” name=”color” value=”red”> <!– checked表示默认值， 个颜色的name值一致–>
</li>
<li>
<label for=”yellow”>yellow</label>
<input type=”radio” id=”yellow” name=”color” value=”yellow”>
</li>
<li>
<label for=”blue”>blue</label>
<input type=”radio” id=”blue” name=”color” value=”blue”>
</li>
</ul>
<input type=”reset” value=”This is a reset button”>
<button type=”button”>
This a anonymous button
</button>
</fieldset>
<button type=”submit”>
This a submit button
</button> <!–or–> <input type=”submit” value=”This is a submit button”>
<button type=”reset”>
This a reset button
</button> <!–or–> <input type=”reset” value=”This is a reset button”>
<button type=”button”>
This a anonymous button
</button> <!–or–> <input type=”button” value=”This is a anonymous button”>
</form>
</body>
</html>