HTML基础知识（2）-CFANZ编程社区

一、列表标签

无序列表

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

//ul标签中只允许包含li标签，li标签中可嵌套任意内容

有序列表

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

//ol标签中只允许包含li标签，li标签中可嵌套任意内容

自定义列表

<dl>
	<dt>表示自定义列表的主题</dt>
	<dd>表示自定义列表的针对主题的每一项内容</dd>
</dl>

//dl标签中只允许包含dd/dt标签，dd/dt标签可嵌套任意内容

二、表格标签

表格的基本标签

<table> 表格整体，用于包裹多个tr
	<tr> 表格每行，用于包裹td
		<td>表格单元格，包裹内容</td>
	</tr>
</table>

表格的相关属性

    <table border="2" width="300" height="300">
        <caption>我是大标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>赵天诚</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <th>Tian</th>
            <th>man</th>
            <th>22</th>
        </tr>
    </table>

属性名	效果
caption	表格大标题（整体顶部居中显示）
th	表格单元格（一列小标题，通常位于第一行，默认内部文字加粗居中显示）
border	边框宽度
width	表格宽度
height	表格高度

合并单元格
将水平或垂直多个单元格合并成一个单元格

 <table border="2" width="300" height="300">
        <caption>我是大标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td rowspan="2">赵天诚</td>
            <td colspan="2" >男</td>
        </tr>
        <tr>
            <td>男</td>
            <td>22</td>
        </tr>
    </table>

在这里插入图片描述

属性名	说明
rowspan	跨行合并，将多行单元格垂直合并
colspan	跨列合并，将多列单元格水平合并

合并按照左上原则，只保留最左、最上的，删除其他

三、表单标签

    <form action="">
        用户名：<input type="text" placeholder="请输入用户名"> 
        <p></p>

        密码：<input type="password" name="password" placeholder="请输入密码"> 
        <p></p>

        单选框：<input type="radio" name="sex" id="1" checked>男
                <input type="radio" name="sex" id="2">女 
        <p></p>

        多选框：<input type="checkbox" name="city" id="4">北京
        <input type="checkbox" name="city" id="1">深圳
        <input type="checkbox" name="city" id="2">上海
        <input type="checkbox" name="city" id="3">广州 
        <p></p>

        文件上传：<input type="file" name="file" id="1" multiple> 
        <p></p>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button>普通按钮</button>
        <p></p>
        年龄：<select>
            <option value="age" name="22" selected>22</option>
            <option value="age" name="23">23</option>
            <option value="age" name="24">24</option>
            <option value="age" name="25">25</option>
            <option value="age" name="26">26</option>

        </select>
        <p></p>

        文本域标签：<textarea cols="30" rows="10">cols:规定文本域内可见宽度    rows:规定文本域内可见行数
        </textarea>
        <p></p>
        
        姓名：<label for="one">
            <input type="checkbox"  id="one"> 赵天诚
            <input type="checkbox"  id="one"> Tian
        </label>
    </form>

在这里插入图片描述