<head>

    <meta charset="UTF-8"> <!--页面编码-->

    <!--<meta http-equiv="REFRESH" content="20"> &lt;!&ndash;刷新&ndash;&gt;-->

    <!--<meta http-equiv="REFRESH" content="2; Url=http://www.baidu.com"> &lt;!&ndash;跳转&ndash;&gt;-->

    <meta name="keywords" content="百度,帮助,搜索"> <!--关键字-->

    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <!--模式选择-->

    <title>测试页面</title><!--标题-->

    <link rel="icon" href="favicon.ico"><!--标题图片-->

</head>

<a href="http://www.baidu.com" target="_blank">百度</a>

<a href="test2.html" target="_blank">test2</a><!--targer作用是打开一个新的页面-->

<a href="#tt">跳转章节</a>  <!--通过识别id进行跳转-->

<select id="1">                         <!--一般都需要加id-->

    <option value="1">北京</option>   <!--一般都需要加value提交数据s时使用-->

    <option value="2">成都</option>

    <option value="3">上海</option>

</select>

<!--下拉框-->

<select size="2" multiple="multiple">   <!--size显示多个选项,multiple:多选-->

    <option>北京</option>

    <option>成都</option>

    <option>上海</option>

</select>

<select>

    <optgroup label="浙江">   <!--用于分组-->

        <option>杭州</option>

        <option>温州</option>

        <option>台州</option>

    </optgroup>

    <optgroup label="广东">

        <option>广州</option>

        <option>深圳</option>

        <option>珠海</option>

    </optgroup>

</select>

<select>

    <option>北京</option>

    <option>成都</option>

    <option selected="selected">上海</option> <!--selected选择默认值-->

</select>

<input type="checkbox" checked="checked" />  <!--复选框,checked设置默认选中(单选框也可用）-->

<input name="gender" type="radio" />      <!--单选框,name相同才可以互斥-->

<input name="gender" type="radio" />      <!--单选框-->

<input type="text" />       <!--文本框-->

<input type="password" />   <!--密码框-->

<input type="button" value="btn" /> <!--按钮，value为按钮上的文字-->

<input type="submit" value="sub" /> <!--按钮-->

<input type="file" />   <!--选择文件，如果想要提交文件，需要在其所在的form标签中添加一个特殊属性-->

<p><span>some text.</span>some other text.</p>

<form action="http://www.baidu.com"> <!--用于提交数据到后台-->

    主机：<input name="host" type="text">  <!--name用于提交后台后识别数据-->

    端口：<input name="port" type="text">

    用户：<input name="user" type="text">

    密码：<input name="passwd" type="text">

    <input type="button" value="提交">

    <input type="submit" value="提交表单">

</form>

<label for="cb1">婚否</label> <!--通过for与id属性进行关联-->

<input id="cb1" type="checkbox" />

<ul>

    <li>123</li>

    <li>123</li>

    <li>123</li>

    <li>123</li>

</ul>

<ol>

    <li>bbb</li>

    <li>aaa</li>

    <li>ddd</li>

    <li>ccc</li>

</ol>

<dl>

    <dt>标题</dt>

    <dd>内容</dd>

    <dt>标题</dt>

    <dd>内容</dd>

</dl>

<table border="1"> <!--表，border边框属性-->

    <thead>     <!--表头-->

        <tr>     <!--行-->

            <th>第一列</th>    <!--表头列-->

            <th>第二列</th>

            <th>第三列</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td colspan="2">h1,h2</td>     <!--内容列,colspan横向合并单元格-->

            <!--<td>h2</td>-->

            <td>h3</td>

        </tr>

        <tr>

            <td rowspan="2">a1,b1</td>  <!--内容列,rowspan纵向合并单元格-->

            <td>a2</td>

            <td>a3</td>

        </tr>

        <tr>

            <!--<td>b1</td>-->

            <td>b2</td>

            <td>b3</td>

        </tr>

    </tbody>

</table>

<fieldset>

    <legend>登陆</legend>     <!--在默认边框的左上角显示文字-->

    <p>用户名：</p>

    <p>密码：</p>

</fieldset>

.bb{

    color: antiquewhite;

    font-size: 29px;

}

<div class="bb">ggggg</div>

a{

    color: antiquewhite;

}

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

#uu{

}

<div>123</div>

<div id="uu">123</div>

<div class="c3">

    <a id="i8">

        <div>

            <span class="c4"></span>

        </div>

        <span class="c4"></span>

    </a>

</div>

h2, p {color:gray;}

p

  {

  border:5px solid red;

  }

<div style="display: none;background-color: coral">asdf</div>

<!--隐藏标签-->

<span style="background-color: coral">asdf</span>

<span style="display: block;background-color: coral">asdf</span>

<!--内联标签变成块级标签-->

<hr/>

<div style="background-color: coral">asdf</div>

<div style="display: inline;background-color: coral">asdf</div>

<!--块级标签变成内联标签-->

<h5>基础属性</h5>

<span style="cursor: pointer;">pointer</span>||<span style="cursor: help;">help</span>||<span style="cursor: wait;">wait</span>||<span style="cursor: move;">move</span>||<span style="cursor: crosshair;">crosshair</span>

<h5>自定义</h5>

<span style="cursor: url(image/favicon.ico),auto;">pointer</span>

<div style="background-color: cadetblue;widows: 300px;">

    <div style="background-color: coral;float: left;width: 20%; ">123</div>

    <div style="background-color: aqua;float: left;width: 50%">456</div>

    <div style="background-color: burlywood;float: right;width: 10%;">789</div>

    <div style="clear: both"></div>

</div>

<h5>fixed(固定，针对窗口)</h5>

<h5>abslute(绝对)</h5>

<h5>relative(相对)</h5>

<div style="height: 5000px;background-color: aquamarine;"></div>

<div style="position: fixed;;right: 40px;bottom: 60px;">返回顶部</div>

<div style="position: relative;background-color: cadetblue;height: 400px;width: 500px;">

    <div style="position: absolute;bottom: 50px;right: 30px;">定位</div>

</div>

div

{

opacity:0.5;

}

img

  {

  position:absolute;

  left:0px;

  top:0px;

  z-index:-1;

  }

<div style="height: 70px;border: 1px solid red;">

    <div style="height: 50px;background-color: aqua;padding-top: 10px;"></div>

</div>

<!--内边距-->

<!--padding:10px 20px 10px 11px-->

<!--        上    右   下   左-->

<!--padding:10px 20px-->

<!--        上下 左右-->

<!--padding:10px 上下左右都加-->

<div style="height: 70px;border: 1px solid black;">

    <div style="height: 50px;background-color: slateblue;margin-top: 10px;"></div>

</div>

<!--外边距-->

<!--margin:10px 20px 10px 11px-->

<!--        上    右   下   左-->

<!--margin:10px 20px-->

<!--        上下 左右-->

<!--margin:10px 上下左右都加-->