运用html的基础知识
①
<html>
<head>
<title>第一个HTML页面</title>
<link rel="stylesheet" type="text/css" href="firstHtml.css"/>
</head>
<body>
<form action="#" method="GET">
<span>账号:</span>
<input type="text" id="username" name="username"
placeholder="请输入账号" autocomplete="off"/>
<br/>
<span>密码:</span>
<input type="password" id="password" name="password"
placeholder="请输入密码" />
<br/>
<span>生日:</span>
<input type="date" id="birth" name="birth"/>
<br/>
<span>性别:</span>
<input type="radio" id="male" name="gender" value="0" checked/>
<label for="male">男</label>
<input type="radio" id="famale" name="gender" value="1"/>
<label for="famale">女</label>
<br/>
<span>来源:</span>
<input type="checkbox" id="baidu" name="from" value="1"/>
<label for="baidu">百度</label>
<input type="checkbox" id="2345" name="from" value="2"/>
<label for="2345">2345</label>
<input type="checkbox" id="360" name="from" value="3"/>
<label for="360">360</label>
<input type="checkbox" id="sina" name="from" value="4"/>
<label for="sina">新浪</label>
<br/>
<span>邮箱:</span>
<input type="email" id="email" name="email"
placeholder="请输入邮箱"/>
<br/>
<span>电话:</span>
<input type="tel" id="tel" name="tel"
placeholder="请输入联系方式"/>
<br/>
<span>年龄:</span>
<input type="number" id="age" name="age" min=18 max=40 value="18"
placeholder="请输入年龄"/>
<br/>
<span>省份:</span>
<select id="provice" name="provice">
<option value="0">-请选择-</option>
<option value="1">-北京-</option>
<option value="2">-上海-</option>
<option value="3">-深圳-</option>
<option value="4" selected>-江苏-</option>
</select>
<br/>
<span>协议:</span>
<input type="checkbox" id="agree"/>
<label for="agree">同意</label>
<br/>
<textarea rows="5" cols="50">
lalallalalla
</textarea>
<br/>
<button type="submit" disabled>注册</button>
<button type="reset">重置</button>
<button type="button">取消</button>
</form>
</body>
</html>
显示如下图:
② HTML 标题(Heading)是通过< h1>-< h6>标签来定义的.
<h1>KB10</h1>
<h2>KB10</h2>
<h3>KB10</h3>
<h4>KB10</h4>
<h5>KB10</h5>
<h6>KB10</h6>
显示为:
KB10
KB10
KB10
KB10
KB10
KB10
③ HTML 段落是通过标签 < p> 来定义的.
<p id="thisp">减肥的<br/>我家的闪闪发亮</p>
<p class="thatp">减肥的我家的闪闪发亮</p>
显示为:
减肥的
我家的闪闪发亮
减肥的我家的闪闪发亮
④ html的列表标签
<ul type="square" class="thisul">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<ol type="1">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ol>
<dl>
<dt>刘德华</dt>
<dd>影视歌三星</dd>
</dl>
显示为:
- aa
- bb
- cc
- aa
- bb
- cc
-
刘德华
- 影视歌三星