HTML【重点标签】

一、列表标签

1.无序列表

父级别:

  • 无序列表的标题
----表示无序列表的整体,用于包裹li标签

子级别:

  • 无序列表一行的内容
  • ----表示无序列表的每一项,用于包含一行的内容

    语义:构建没有顺序的列表

    特点:列表的每一项前面默认显示黑色小圆点

    注意事项:

    • ul标签只允许包含li标签
    • li标签可以包含任何内容
        <ul>水果列表
            <li>榴莲</li>
            <li>哈密瓜</li>
        </ul>
    

    在这里插入图片描述

    2.有序列表

    父级别:

    1. 有序列表的标题
    —表示有序列表的整体,用于包裹li标签

    子级别:

  • 有序列表一行的内容
  • ----表示有序列表的每一项,用于包含一行的内容

    语义:构建有顺序的列表
    特点:列表中的每一项前面默认显示排列序号

    注意事项:

    • ol标签只允许包含li标签
    • li标签可以包含任何内容
    <ol>蔬菜列表
        <li>青菜</li>
        <li><a>白菜</a></li>
    </ol>
    

    在这里插入图片描述

    3.自定义列表

    相比于有序和无序,它提供了更简洁和带缩进的选择

    父级别:

    自定义列表的标题
    —表示自定义列表的整体,用于包裹dt和dd标签

    子级别:

    自定义列表一行的内容,默认不缩进 ----示自定义列表的每一项,用于包含一行的内容

    子级别:

    自定义列表一行的内容,默认缩进
    ----表示自定义列表的每一项,用于包含一行的内容

    兄弟级别:

    语义:构建自定义列表

    特点:dd前会默认显示缩进效果

    注意事项:

    • dl标签只允许包含dt和dd标签
    • dt/dd标签可以包含任何内容
    <dl>你需要?
        <dt>帮助中心</dt>
        <dt>客服信息</dt>
        <dd>账户管理</dd>
        <dd>订单操作</dd>
    </dl>
    

    在这里插入图片描述

    二、表格标签

    1.表格标签的组成

    父级别:

    --表格的整体,可用于包裹多个tr子级别: --表格每行,可用于包裹td

    子级别: 表格的标题 --表格 外 的大标题,

    自动表格头居中效果子子级别: 单元格内容 --表格单元格,可用于包裹内容,自带加粗居中效果–常作为表头

    子子级别: 单元格内容 --表格单元格,可用于包裹内容兄弟级别

    语义:构建表格
    特点:表格的形式呈现

    注意事项:标签的嵌套关系:table>tr=caption>th=tr

    <table>
        <caption>家庭</caption>
        <tr> 
            <th>直系</th>
            <td>大哥</td>   
            <td>小弟</td>
        </tr>
        <tr>
            <th>旁系</th>
            <td>朋友</td>  
            <td>兄弟</td> 
        </tr>
    </table>
    

    在这里插入图片描述

    2.表格标签的属性

    border=“” --控制表格 边框 的宽度
    width=“” --控制 表格 宽度
    height=“” --控制 表格 高度

    注意事项:实际开发针对样式效果以CSS为主

    <table border="3">
        <caption>植物</caption>
        <tr>
            <th>水果</th>
            <th>蔬菜</th>
        </tr>
        <tr>
            <td>苹果</td>
            <td>青菜</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>    
    

    2.合并单元格

    垂直合并(跨行合并)

    水平合并(跨列合并)

    合并单元格步骤:

    • 明确合并哪几个单元格

    • 通过左上原则,确定保留谁删除谁

    • 上下合并一只保留最上的,删除其他

    • 左右合并一只保留最左的,删除其他

    属性名:

    • rowspan(跨行合并)
    • colspan(跨列合并)

    属性值:

    • 合并单元格的个数
    • 合并单元格的个数

    说明:

    • 跨行合并,将多行的单元格垂直合并
    • 跨列合并,将多列的单元格水平合并

    注意事项:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并 (不能跨: t-head、t-body、t-foot)

    三、表单标签

    1.表单标签的组成

    input系列标签:

    语义:构建表单

    特点:

    • input标签可以通过type属性值不同,来展示不同的效果
    • 单标签

    注意事项:相邻input标签没有换行

    2.表单的type属性

    属性值 效果
    text 文本框
    password 密码框
    radio 单选框
    checkbox 多选框
    file 文件上传框
    reset 重置按钮
    submit 提交按钮
    button 按钮
    placeholder属性
    提示字属性,提示用户输入内容的文本
    <input type="text" name="" id="" placeholder="请输入">
    
    text值
    输入文本框
    <input type="text" placeholder="输入账户">注册
    
    password值
    输入密码框
    <input type="password" placeholder="输入密码">密码
    
    radio值
    多选一的单选
    常配合一起的属性:
    name:用于单选的分组,从而实现单选功能
    checked:默认提前选中
    温馨提示:
    具有相同name的单选框为一组,一组中只能有一个被选中,不同组之间可以多选
    <input type="radio" name="sex"><input type="radio" name="sex"><br>
    <input type="radio" checked>三1 
    <input type="radio">三2
    
    checkbox值
    实现多选
    常配合一起的属性:
    checked:默认提前选中
    <input type="checkbox" checked >香蕉  <input type="checkbox" >苹果
    
    file值
    实现上传文件
    常配合一起的属性:
    multiple:实现上传多个文件
    默认上传单个
    <input type="file" >上传单个文件
    <input type="file" multiple >上传多个文件
    
    reset值
    清空表单所填的内容
    <input type="reset" values="清空表单">
    
    submit值
    用于提交表单信息给数据库后台
    <input type="submit" values="提交">
    

    四、JS预留标签

    button 按钮标签:< button>按钮内的内容< /button>

    语义:普通按钮,默认无功能,一般配合js使用

    特点:双标签

    温馨提示:

    • 谷歌浏览器button默认是提交按钮
    • button是双标签,便于包裹其他内容:文字\图片等

    五、下拉菜单标签

    1.下拉菜单标签的组成

    < select >
    < option > < /option>

    ​ < option > < /option>

    </ select>

    父级别:select

    子级别:option

    特点:双标签

    2.下拉菜单标签的属性

    默认选中这个option

        <select>地址
            <option>上海</option>
            <!-- 默认选中 -->
            <option selected>广东</option> 
            <option>江西</option>
        </select>
    

    六、文本域标签

    1.文本域标签的组成

    < textarea >< /textarea>

    语义:提供可输入多行文本的表单控件

    特点:

    • 双标签
    • 可调整文本域大小

    注意事项:

    • 右下角拖拽可以改变大小
    • 实际开发以css来针对样式效果

    2.文本域标签的属性

    cols:控制文本域宽度
    rows:控制文本域高度

        <textarea rows="10"  cols="10"></textarea>
    

    七、范围之内选中标签

    < label > < /label>

    语义:提供可输入多行文本的表单控件

    特点:

    • 双标签
    • 可调整文本域大小

    注意:本质上就是转移点击对象,类似于超链接

    使用方法
    1.使用lableb标签把整个点击范围包裹起来,再使用for属性来指向选中谁
    2.直接整个包裹在lable里面
    <label for="da">男:</label>
    <input type="radio" name="" id="da">
     
    <label for="da">女:<input type="radio" name="" id="da"></label>
    
    <label for="da">ddddddddddddddd1</label>
    <button id="da">按钮</button>
    

    八、语义化标签

    1.没有语义化标签

    < div>< /div>

    < span>< /span>>

    作用:用于配合使用css进行网页布局

    使用两者区别:

    • div是独占一行的
    • span只占需要行
    <div>div</div>
    <div>div</div>
    <span>span</span>
    <span>span</span>
    

    2.有语义化标签

    空格字符
    &nbsp
    实现一个空格
    

    九、HTML5布局标签

    在这里插入图片描述

    十、文本显示

    在标签内写文本的时候,里面的换行和空格是会被显示出来的,而标签标签之间的空格和换行是不会显示的

    换行只有超出了盒子范围后,才会显示。否者是空格

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
            
            
                margin: 0;
                padding: 0;
            }
            p{
            
            
                width: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            das  da 
            adasdasd
            <p>
                sssss
                ssssssssssss
                sssssssssssssssssssssssssssss
            </p>
            <span>       
                ggg
                gggggg
                ggggggggggg
            </span>
        </div>
    </body>
    <script>
    </script>
    </html>
    

猜你喜欢

转载自blog.csdn.net/weixin_62421736/article/details/139924535