HTML中的简单使用

学习目标：

提示：一些简单的html的使用

---

学习内容：

例如：
1、 iframe的使用
2、 列表：ol,ul,li
3、表格：table
4、常用选择器的使用
5、表单的使用

---

1、*iframe*:在页面中分割出一部分区域用来展示页面， 使用：常和a标签联合使用，在type中指定调转页面的name

<iframe name="iframeabc" src=".idea/test.html" align="center" width="500" height="500">
</iframe>

<ul>
    <li><a href="iframeTest.html" target="iframeabc">iframeTest</a></li>

</ul>

2、ol:有序，ul:无序

3、表格table：合并表格colspan,rowspan，单元格间距cellspace

4、
（1）id选择器：#id名称{属性：值；}

#id001{
    border: 2px dashed yellow;
    background: azure;
    width: 100px;
    height: 100px;
}

（2）类选择器：.类名称{属性：值；}

.class1{
    border: 3px dashed gold;
    background: burlywood;
    font-family: "Adobe 黑体 Std R";
}

（3）标签选择器：具体标签名称{属性：值}

table{
    width: 30px;
    height: 30px;
    border: 2px  red solid;
    border-collapse: collapse;
}

（4）组合选择器：所有在组合中的选择器都有效
格式：选择器1，选择器2，选择器3{属性：值}

5、表单的使用
（1）通常在表单中插入表格使用

（2）常用type值：
a).text(文本类型),password(密码)，

tr>
            <td>用户名：</td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password"></td>
        </tr>

b)radio(单选框，checked="checked"表示默认选中，需要将只为单选的放在同一个组里面，通过name标识出来)，checkbox（复选框，checked="checked"表示默认选中），select(下拉框，selected="selected"表示默认选中,单独标签不是input的type属性值)

 <td>
                <input type="radio" value="男" checked="checked" name="sex">男</input>
                <input type="radio" value="女" name="sex">女</input>
            </td>
         <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" checked="checked" value="java">java </input>
                <input type="checkbox" checked="checked" value="c++">c++ </input>
                <input type="checkbox" checked="checked" value="go">go </input>
                <input type="checkbox" checked="checked" value="c">c </input>
            </td>
        </tr>
        <tr>
            <td>下拉列表：</td>
            <td>
                <select>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>

c)submit（提交），reset(重置)

    <tr>
            <td><input type="submit" value="提交"></td>
            <td><input type="reset" value="重置"></td>
        </tr>