锦旗的制作

注：空盒子不给宽高，给盒子边框100px，加粗，字体会自动放到右下角


<style>
    .box{
        width: 0px;
        height: 0px;
        
        border-top: 100px solid red;
        border-left: 100px solid yellow;
        border-right: 100px solid pink;
        border-bottom: 100px solid transparent;
    }
</style>
<body>
    <div class="box"></div>
</body>

表格

table:定义表格，表格元素最外层元素
th：定义表格的表头
tr：定义表格的行
td：定义表格单元（书写内容）
thead：定义表格的页眉
tbody：定义表格主体
tfooter：定义表格的页脚
col：定义表格列的属性
colgroup：定义表格列的组
cellspacing：增加单元格的距离
cellpadding：创建内容与边框之间的空白

属性

html

colspan：单元格列并合
rowspan：单元格行并合

css

boder-collapse

<table>
    <tr>
        <td colspan="4">1234</td>
    </tr>
    <tr>
        <td>AC</td>
        <td>+/-</td>
        <td>%</td>
        <td>/</td>
    </tr>    
</table>

table,td{
    border: 1px solid black;
    border-collapse: collapse;
}
td{
    width: 50px;
    height: 50px;
    text-align: center;
}

表单

form：定义一个表单区域，可以获取用户输入的数据
input：输入框，不同的类型会让该元素有不同的含义
select：下拉列表

textarea：多行文本框

文本框

账号<input type="text" placeholder="输入内容">

密码框 maxlength可以设置输入位数

密码<input type="password" name="" id="" maxlength="6" required>

按钮，没有提交功能单纯的按钮

<input type="button" value="按钮">

具有跳转功能

 <button>提交按钮</button>

重置按钮

<input type="reset" value="重置">

单选框

通过name属性实现单选效果

通过id绑定label标签的文字，使点击文字时也可以选中

<label for=male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female">

多选框

当属性右属性值相同时可以简写，标志属性（checked属性特殊）默认选中 disable 禁用

        美味蟹黄包
        <input type="checkbox">
        美味蟹黄包
        <input type="checkbox">
        美味蟹黄包
        <input type="checkbox">
        美味蟹黄包
        <input type="checkbox">
        米饭
        <input type="chrckbox" checked>

提交文件

<input type="file" name="" id="">

下拉列表

 <select name="" id="">
            <option value="">成都</option>
            <option value="">重庆</option>
            <option value="">北京</option>
            <option value="">广州</option>
        </select>

多行文本框

style="resize: none;不可拉动

<!-- 多行文本框，cols:列，rows：行 ;默认情况右下角可以拉大-->
<textarea name="" id="" cols="30" rows="30" style="resize: none;"></textarea>

新增——特殊属性

邮箱

 <!-- 邮箱 -->
    <input type="email">

年月日

 <!-- 年月日 -->
    <input type="date">

滑块

<!-- 滑块 -->
    <input type="range">

selected，初始默认

<!-- selected，初始默认 --> 
          <select name="" id="">
                <option value="">中国</option>
                <option value="" selected>其他</option>
            </select>

required，必填

<input type="password" required>

锦旗，表格

锦旗 的制作

表格

表单

锦旗的制作