HTML5有语义的布局标签

CSS3高级选择器

first-of-type，如ul li:first-of-type，找到li同类型的第一个元素
last-of-type，如ul li:last-of-type，找到li同类型的最后一个元素
only-of-type，如ul li:only-of-type，找到li类型的唯一一个元素
first-child，如ul li:first-child，找到ul后代中既是li又是第一个后代的元素
last-child，如ul li:last-child，找到ul后代中既是li又是最后一个后代的元素
nth-child（n），如ul li:nth-child（n），找到ul后代中既是li又是第n个后代的元素
:bofore,如p::bofore，在每个p元素的内容之前插入内容
:after,如p::after，在每个p元素的内容之后插入内容

HTML5 form表单新标签

<form action="">
        <!-- 会自动验证Email地址格式是否正确 -->
        电子邮箱：<input type="email" name="emailname" 
        placeholder="请输入邮箱"
        required>

        <!-- 会自动验证URL地址格式是否正确-->
        <!-- 网址：<input type="url" name="urlname"> -->
        <!-- 这个类型是color 点击提交会提交16位的颜色值给后台服务器 -->
       <!--  选取颜色：<input type="color" name="colorname" > -->

       <!-- type="search"表示一个搜索框  -->
        <!-- 搜索：<input type="search" name="searchname" placeholder="请输入你想搜索的关键字">  -->
        
        <!-- type="number"只是一个默认值，设置步长为4的时候，点击加只会在最小值的基础上去加或者减 -->
        <!-- 数字：<input type="number" name="numbername" value="5" step="4" min="2" max="20"> -->

        <!-- 进度条：<input type="range" name="rangename" max="80" min="20" step="10" value="30"> -->
        <input type="submit" value="提交">
       <!--  <p style="color:#824f4f;">123</p> -->

       <!-- placeholder 是输入框的提示信息 -->
       <!-- required表示这个是必须输入的文本框 -->
    </form>