前端学习笔记-2

最新推荐文章于 2024-09-30 15:42:36 发布

H051015

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量49

点赞数

分类专栏：前端笔记文章标签：前端学习笔记

本文链接：https://blog.csdn.net/H051015/article/details/128740780

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

列表标签

无序列表

标签组成

<ul></ul>显示无序列表整体

<li></li>列表每一项的内容

行前默认圆点

ul里面只能放li标签，而li标签可以放任何内容

示例--水果列表

<body>
  <h1>水果列表</h1>
  <!-- ul中只能包含li标签，li标签可以包含任意内容 -->
  <ul>
    <!-- 有多少个选择打多少个li -->
    <li>apple</li>
    <li>banana</li>
  </ul>

有序列表

标签组成

行前默认显示序号1. 2. 3.

示例--水果列表

自定义列表

标签组成

<dl></dl>列表整体

<dt></dt>自定义列表的主题

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

dd前面默认缩进

dl中只能放dt与dd

示例

缩进用CSS调整

<body>
        <dl>
            <dt>ABOUT</dt>
            <dd>applications</dd>
            <dd>Quatos</dd>
        </dl>
</body>

表格标签

基础标签

<table></table>表格绘制

<tr></tr>行

<th></th>表头单元格

<td></td>内容单元格

示例

<body>
        <table border="1">  <!-- table本身不画边框线，需要用border进行设置 -->
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>99</td>
                <td>100</td>
            </tr>
            <tr>
                <td>小和</td>
                <td>95</td>
                <td>100</td>
            </tr>
            <tr>
                <td>小发</td>
                <td>93</td>
                <td>98</td>
            </tr>
        </table>
</body>

表格结构标签（了解即可）

只是为了让浏览器更清晰，对显示没有改变

thead表格头部

tbody表格主体

tfoot表格末尾

合并单元格

找到合并目标
添加属性

竖向合并：保留最上单元格，rowspan

横向合并：保留最左单元格，colspan

3. 删除其他单元格

示例——竖向合并

<table border="1">  <!-- table本身不画边框线，需要用border进行设置 -->
            <thead>
                <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                <td>小明</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <!-- 合并单元格数目为2个 -->
            </tr>
            <tr>
                <td>小和</td>
                <td>95</td>
                <!-- <td>100</td> -->
            </tr>
            <tr>
                <td>小发</td>
                <td>93</td>
                <td>98</td>
            </tr>
             </tbody>
            
        </table>

表单

使用场景：登录页面、搜索功能、注册页面

input标签

type属性值

示例

<body>
        用户：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        我是<input type="radio">男
        <br>
        多选框：<input type="password">
        <br>
        上传文件：<input type="file">
</body>

占位文本（属性）

placeholder="提示信息"

单选框常用属性

name="组名" 控制分组为同一组

checked直接写上去就行

上传文件

multiple直接写上去即可（文件多选功能）

多选框

checked 默认选中

多选框：<input type="checkbox" checked>jita<input type="checkbox">swim

下拉菜单

select 下拉菜单整体

option 下拉菜单每一项

selected 属性

城市：
        <select name="" id="">
            
            <option value="">北京</option>
            <option value="">西安</option>
            <option value="" selected>上海</option>
            
        </select>