html学习笔记，常用标签

Future_yzx

已于 2024-01-19 10:51:39 修改

阅读量410

点赞数 8

文章标签： html 学习笔记前端

于 2024-01-19 10:40:38 首次发布

本文链接：https://blog.csdn.net/Future_yzx/article/details/135691681

版权

一、图片标签 img

标签属性：

1.src：识别图片资源路径（一般用相对路径）（路径分为相对路径和绝对路径，相对路径就是从其他地方找到图片并引用；绝对路径就是图片真是存在的位置）

2.alt:设置图片描述信息

3.width:设置宽度大小；height：设置高度大小（一般设置尺寸只单方向设置，保证图片不变形）

二、表格标签 table-tr-td

标签属性：

1.border：设置标签表框

2.cellpadding：设置每个单元格的大小

3.cellspacing：设置每个单元格之间的距离

4.aling：设置表格整体对齐方式，其值有：left，right，center

5.width：设置表格整体宽度；hieght:高度

子标签：

行标签 tr

属性：

1.width：设置行的宽度(很少用)

2.aling：设置每行中单元格的对齐方式，其值有：left，right，center

虚拟列标签 col（不改变任何单元格大小，只是操作上方便了，可以一次改变一整列的单元格颜色）

col属性：

1.span：虚拟列的合并

例：<col span="2" style="background:yellow">

(一下操作两列单元格改变颜色)

2.style="background:yellow"

单元格标签 td(普通单元格标签)/th（标题单元格标签）

{th单元格中的字体会默认加粗}

td属性：

1.width：设置每个单元格的宽度

2.aling：设置单元格的对齐方式，其值有：left，right，center

3.colspan="3":设置合并列，改变单元格宽度，一个格宽度顶三列的宽度

4.rowspan="3":设置合并行，改变单元格高度，一个格高度顶三行的宽度

三、标题标签 caption

四、列表标签

（一）.有序列表 ol-li（order list）

子标签：li（list item）

标签属性：

1.type 序列标号的类型（1~10、a~z、Ⅰ~Ⅹ）

2.start 序列标号起始是多少

（二）.无序列表 ul（）

子标签：li

标签属性：无

（三）.描述列表 dl（description list）

子标签dt（标题title）、dd（详情detail）

五、窗口标签 iframe

标签属性：

1.src:设置想要嵌套页面的资源路径（绝对路径，相对路径）

2.frameborder：设置嵌套窗口边框大小

3.width设置嵌套窗口宽度、height设置嵌套窗口高度

4.name：设置嵌套窗口的名称

————————————————供收集用户信息的标—————————————————

一、表单标签，输入框标签 form-input

标签属性：

1.type：设置标签类型

2.name：控件名称

3.value：控件值（可显示初始内容、保存用户输入的值）

二、分块标签 fieldset-legend

标签作用：fieldset可以框住一片区域进行视觉上分割、分类

legend可以为该框命名，进行分类

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>供收集用户信息的标签</title>
</head>

<body>
    <div>
        <h1>供收集用户信息的标签</h1>
    </div>

    <fieldset>
        <legend>
            我是一个框
        </legend>
    </fieldset>
    <br><br><br>
    <form action="">
        <fieldset>
            <br>单行文本框：
            <input type="text" name="" id="">
            <br> 密码框：
            <input type="password">
        </fieldset>

        <fieldset>
            <br> 单选框
            <input type="radio" name="1" value="" id="">男
            <input type="radio" name="1" value="" id="">女
            <input type="radio" name="3" value="" id="">dog
            <br> 复选框
            <input type="checkbox" name="2" id="">
            <input type="checkbox" name="2" id="">
            <input type="checkbox" name="4" id="">
        </fieldset>

        <fieldset>
            <br> 文件上传器
            <input type="file" name="" id="">
            <br> 隐藏域
            <input type="hidden" name="">
        </fieldset>

        <fieldset>
            <br> 日期时间控件
            <input type="datetime-local" name="" id="">
            <br> 日期控件
            <input type="date" name="" id="">
            <br> 周控件
            <input type="week" name="" id="">
            <br> 月控件
            <input type="month" name="" id="">
        </fieldset>

        <fieldset>
            <br> 滑块控件
            <input type="range" name="" min="0" max="50" step="5" value="20" id="">
            <br> 数字控件
            <input type="number" name="" min="0" max="50" step="5" value="25" id="">
            <!--滑块和数字控件特有三个属性：min、max、step；value可设置初始值-->
        </fieldset>

        <fieldset>
            <br> 提交按钮
            <input type="submit" value="提交">
            <!--会刷新整个页面-->

            <br> 重置按钮
            <input type="reset" value="重置">
            <!--会重置form区域页面-->

            <br> 普通按钮
            <input type="button" value="功德+1">
            <!--功能要自定义-->
        </fieldset>

        <fieldset>
            <br> 下拉框：
            <select name=""><!--size：设置框中可以显示几项、multiple加上后按ctrl建可以多选（加上后将不再是下拉的样式）-->
            <optgroup label="主科"><!--分组-->
                <option value="">语文</option>
                <option value="">数学</option>
                <option value="">英语</option>
            </optgroup>
            <optgroup label="理科">
                <option value="">物理</option>
                <option value="">化学</option>
                <option value="">生物</option>
            </optgroup>
            <optgroup label="文科">
                <option value="">历史</option>
                <option value="">地理</option>
                <option value="">政治</option>
            </optgroup>
        </select>
        </fieldset>

    </form>

网页结果：

Future_yzx

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
html学习笔记，常用标签

2.aling：设置每行中单元格的对齐方式，其值有：left，right，center。2.aling：设置单元格的对齐方式，其值有：left，right，center。3.colspan="3":设置合并列，改变单元格宽度，一个格宽度顶三列的宽度。4.rowspan="3":设置合并行，改变单元格高度，一个格高度顶三行的宽度。4.aling：设置表格整体对齐方式，其值有：left，right，center。————————————————供收集用户信息的标—————————————————
复制链接

扫一扫