html基础知识总结案例
烛光2019-02-16 11:17:02258<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html基础标签</title>
<style type="text/css">
h1 {
background: red;
height: 80px;
line-height: 80px;
text-align: center;
}
p {
text-indent: 2em;
/*em是相对单位，2em即现在一个字大小的两倍*/
}
li{
list-style: none;
}
ul li:before{
content:url("images/logo.png");
margin-right: 10px;
}
ul li:after{
content:url("images/logo.png");
}
input{
width: 258px;
height: 48px;
border: 1px solid #ccc;
margin-top: 10px;
padding: 0 20px;
}
button{
background: red;
color: white;
width: 300px;
height: 50px;
margin-top: 10px;
border: none;
}
textarea{
width: 258px;
height: 48px;
border: 1px solid #ccc;
margin-top: 10px;
padding:20px;
}
select{
width: 300px;
height: 48px;
border: 1px solid #ccc;
margin-top: 10px;
padding: 0 20px;
}
table{
width: 300px;
border: 1px solid #ccc;
border-collapse: collapse;
}
td{
text-align: center;
height: 40px;
border: 1px solid #ccc;
}
th{
height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>这里是H1标签，属于块元素占整行</h1>
<h2>这里是H2标签，属于块元素占整行</h2>
<h3>这里是H3标签，属于块元素占整行</h3>
<h4>这里是H4标签，属于块元素占整行</h4>
<h5>这里是H5标签，属于块元素占整行</h5>
<h6>这里是H6标签，属于块元素占整行</h6>
<em> em 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。如果只为显示斜体一般不用em而用 i 标签取代</em><br/>
<i>i标签显示为斜体</i><br/>
<del>￥399</del><span>￥289</span><br/>
<p>这是一个段落标签用 用样式 text-indent:2em 来进行缩进功能 em是相对单位，2em即现在一个字大小的两倍</p>
<pre>
清明
唐代：杜牧
清明时节雨纷纷，路上行人欲断魂。
借问酒家何处有，牧童遥指杏花村。
</pre>
--------------------------------------------------------------------------------------------------
<!-- 有序排序 -->
<ol>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<!-- 无序排序 -->
<ul>
<li>SQL</li>
<li>MySQL</li>
<li>Redis</li>
</ul>
----------------------------------------------------------------------------------------------------
<form method="POST" action="" enctype="multipart/form-data">
<input type="text" placeholder="请输入账号" name="name"><br/>
<input type="password" placeholder="请输入密码" name="name"><br/>
<textarea name="content" placeholder="请输入内容"></textarea><br/>
<select name="type">
<option value="1">文本</option>
<option value="2">图片</option>
</select><br/>
<button>提交</button>
</form>
----------------------------------------------------------------------------------------------------
<table>
<caption><h3>表头</h3></caption>
<tr>
<th>服务器语言</th>
<th>JS框架</th>
<th>Linux系统</th>
<th>综合</th>
</tr>
<tr>
<td>php</td>
<td>jquery</td>
<td>centos</td>
<td rowspan="2">学习</td>
</tr>
<tr>
<td>java</td>
<td>vue</td>
<td>ubuntu</td>
</tr>
</table>
</body>
</html>