HTML列表标签,表格标签

列表应用场景

在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航

三种,无序列表,有序列表,自定义列表

无序列表

应用场景: 新闻列表 网页的导航 网页的侧边栏

<ul>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    .....
</ul>
无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)

有序列表

<ol>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    .....
</ol>
有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)

自定义列表

应用场景:网页的底部导航(网页尾部)

<dl>
    <dt>列表主题</dt>
    <dd>列表主题的每一项内容</dd> 
    <dd>列表主题的每一项内容</dd>
    ....
</dl>
 dd前面会有默认的缩进效果 后续css处理
        dl标签里面只允许包含dt/dd标签
        dt/dd标签里面可以嵌套任意内容(标签)
        dt/dd是兄弟关系(千万不要写错了哟)

表格标签

表格基本标签

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        ....
    </tr>
    ....
</table>
示例代码:
<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>孙以龙</td>
            <td>人妖</td>
            <td>18</td>
        </tr>
        <tr>
            <td>金金</td>
            <td>女</td>
            <td>19</td>
        </tr>
        <tr>
            <td>德华</td>
            <td>男</td>
            <td>16</td>
        </tr>
    </table>
嵌套关系:
	table>tr>td

表格属性

表格属性(table 属性):
        border:设置边框
        width:设置宽度
        height:设置高度
        align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
        rules:细线表格 属性是all(后续使用css修饰)
tr属性:
         align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
         bgcolor:背景颜色
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
        <tr align="center" bgcolor="red"  height="50">
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr align="center" bgcolor="green">
            <td>孙以龙</td>
            <td>人妖</td>
            <td>18</td>
        </tr>
        <tr align="center" bgcolor="pink">
            <td>金金</td>
            <td>女</td>
            <td>19</td>
        </tr>
        <tr align="center" bgcolor="yellow">
            <td>德华</td>
            <td>男</td>
            <td>16</td>
        </tr>
    </table>

表格标题+表头单元格标签

<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr align=" center">
            <td>孙以龙</td>
            <td>人妖</td>
            <td>18</td>
        </tr>
        <tr align="center">
            <td>金金</td>
            <td>女</td>
            <td>19</td>
        </tr>
        <tr align="center">
            <td>德华</td>
            <td>男</td>
            <td>16</td>
        </tr>
    </table>

表格结构标签

表格头部:
<thead></thead>
表格主体:
<tbody></tbody>
表格尾部:
<tfoot></tfoot>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">

        <caption>
            <h2>学生信息表</h2>
        </caption>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <!-- 表格身体 -->
        <tbody>
            <tr>
                <td>孙以龙</td>
                <td>人妖</td>
                <td>18</td>
            </tr>
            <tr>
                <td>金金</td>
                <td>女</td>
                <td>19</td>
            </tr>
            <tr>
                <td>德华</td>
                <td>男</td>
                <td>16</td>
            </tr>
        </tbody>
        <!-- 表格的底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <td>龙哥真浪</td>
                <td>龙哥真浪</td>
            </tr>
        </tfoot>
    </table>

表格合并

跨行合并(垂直合并)
	rowspan
跨列合并(水平合并)
	colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
   • 上下合并→只保留最上的，删除其他单元格
   • 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
   • `rowspan`：跨行合并→垂直方向合并
   • `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
        <tr>
            <td></td>
            <td></td>
            <!-- 跨行合并 -->
            <td rowspan="3"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <!-- 跨列合并 -->
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

表单标签

input系列

文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中

button系列

<button type="submit">提交按钮</button><br>
<button type="reset">重置按钮</button><br>
<button type="button">普通按钮</button><br>

select下拉系列

select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:
 所在城市:
    <select>
        <option>请选择城市</option>
        <option selected>上海</option>
        <option>北京</option>
        <option>深圳</option>
        <option>广州</option>
        <option>武汉</option>
    </select>

文本域

<textarea placeholder="请您留言"></textarea>

label标签

提高用户体验

使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
	<label for="nan">男</label>
    <input type="radio" name="sex" id="nan">
    <label for="nv">女</label>
    <input type="radio" name="sex" id="nv">
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
 <label>文本框:<input type="text"></label>

语义化标签

无语义化标签

<div>独占一行</div>
<span>一行显示多个</span>

有语义化标签

html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.

	<header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

小结

实际项目用地比较多多的标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ....
</ul>
<!--自定义列表-->
<dl>
    <dt>自定义列表主题</dt>
    <dd>自定义列表每一项</dd>
    <dd>自定义列表每一项</dd>
    <dd>自定义列表每一项</dd>
    ....
</dl>
<!--表格基本语法-->
<table>
    <tr>
        <td></td>
         <td></td>
         <td></td>
        ...
    </tr>
    ...
    <tr>
        <td></td>
         <td></td>
         <td></td>
        ...
    </tr>
    ...
</table>
<!--表单标签-->
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)
<input type="radio">
多选框
<input type="checkbox">
搜索框
<input type="search"  placeholder="">
普通按钮
<button type="button">普通按钮</button>
无语义化标签
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>