html常用标签表单和表格等及css的简单入门

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html</title>
</head>
<body> <!-- 表格table -->
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>name</th>
<th>address</th>
</tr> <tr>
<td>jack</td>
<td>shenzhen</td>
</tr> <tr>
<td>tom</td>
<td>hangzhou</td>
</tr> <tr>
<td>lily</td>
<td>chengdu</td>
</tr>
</tbody>
</table>
<br>
<!-- form表单 -->
<form action="http://www.baidu.com/" method="get"> 名字:<input type="text" name="username">
密码:<input type="password" name="password">
<br> 爱好:
<input type="checkbox" name="sports" value="zuqiu">足球
<input type="checkbox" name="sports" value="basketball">篮球
<input type="checkbox" name="sports" value="pingpang">乒乓球
<br>
性别:<input type="radio" name="gender" value="male">篮球
<input type="radio" name="gender" value="female">篮球
<br>
你在哪
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="guangzhou">广州</option>
<option value="hangzhou">杭州</option>
<option value="chengdu">成都</option>
</select> <input type="submit" value="提交">
</form> <!-- 标题标签 --> <h1>标题标题标题标题标题标题标题</h1>
<h2>标题标题标题标题标题标题标题</h2>
<h3>标题标题标题标题标题标题标题</h3>
<h4>标题标题标题标题标题标题标题</h4>
<h5>标题标题标题标题标题标题标题</h5>
<h6>标题标题标题标题标题标题标题</h6> 换行br<br>标签 hr横线标签<hr> <div>
div
<span>span</span>
</div> <!-- 标签列表 -->
<ul>
<li>段落1</li>
<li>段落2</li>
<li>段落3</li>
</ul> </body>
</html>

css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css test</title>
<style type="text/css">
/* 标签选择器*/
div{
width: 200px;
height: 150px;
background: gray;
margin-top: 20px;
} .font-white{
/*类选择器小数点开头*/
color: white;
} #box2{
/* id选择器 # 开头
id只能选择一个元素 */
font-size:20px;
} [name="password"]{
/*属性选择器*/
border: 1px solid blue;
} [chinasoft="css_study"]{
/*自定义属性选择器*/
border: 1px solid yellow;
} </style>
</head>
<body>
<input type="text" class="input" name="username" chinasoft="css_study">
<input type="text" name="password" class="input">
<div class="font-white">一个没有样式的盒子</div>
<div class="font-white" id="box2">一个没有样式的盒子</div>
<div>一个没有样式的盒子</div>
</body>
</html>
上一篇:Cubieboard2裸机开发之(二)板载LED交替闪烁


下一篇:app.use