HTML5+CSS3要点

标题

标题标签从<h1></h1>到<h6></h6>

列表

列表分为无序，有序和自定义列表

无序

<ul>
	<li>1</li>
	<li>2</li>
</ul>

有序

<ol>
    <li>3</li>
    <li>4</li>
</ol>

自定义

<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
</dl>

表格

表格的基本形式

<table border="1px">
			<thead>
				<tr>序号</tr>
				<th>first</th>
				<th>second</th>
				<th>third</th>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tfoot>
					<tr align="center">
						<td colspan="3">6</td>
					</tr>
				</tfoot>
			</tbody>
			
</table>

效果如图

 表单

<form action="" method="">
				姓名<input type="text" name="username"/><br>
				密码<input type="password" name="password"/><br>
				年龄<input type="number" name="age"/><br>
				生日<input type="date" name="birth" /><br>
				性别<input type="radio" name="sex" value="男" checked/>男
				<input type="radio" name="sex" value="男"/>女<br>
				
				简介:<textarea></textarea><br />
				<input type="submit">
				<input type="reset">
				
</form>

超链接

<a>标签

通过herf属性实现跳转

 

<p id="a">跳转</p>
<a herf="#a">跳转到指定点</a>

CSS选择器

基础选择器：id选择器，class选择器，元素选择器

其他常用的有：后代，子代，交集，并集  

        属性选择器和伪类选择器     

 id选择器

<style type="text/css">
			#id01{
				text-align: center;
			}
</style>


<p id="id01">ID选择器</p>

要注意的是id选择器具有唯一性，不能出现两个相同的id

class选择器

<style type="text/css">
			.cls{
				text-align: center;
			}
</style>

<p class="cls">class选择器</p>

元素选择器

<style type="text/css">
			p{
				text-align: center;
			}
</style>

<p>元素选择器</p>

属性选择器

<style type="text/css">
			p[#cls]{
				text-align: center;
			}
</style>

<p class="cls">属性选择器</p>

伪类选择器

<style type="text/css">
			p:hover{
				color: red;
			}
</style>

<p>伪类选择器</p>