首页 前端知识 HTML总结①

HTML总结①

2024-08-21 10:08:48 前端知识 前端哥 724 64 我要收藏

Day 1 文本类标签

    <strong>我不吃牛肉<br></strong>
    <b>我不吃牛肉<br></b>
    <em>我不吃牛肉</em><br></em>
    <i>我不吃牛肉<br></i>
    <u>我不吃牛肉<br></u>
    <del>我不吃牛肉</del>

在上面所显示的代码中,strong \ b 标签为粗体,em \ i 标签为斜体,u标签为下划线字体,del标签为删除线字体,运行后呈现为下图: 

 接下来是标题及不同文字表示方法的各种标签:

    <p>
        是是是
    </p>
    <p align = "left">
        是是是
    </p>
    <p align = "right">
        是是是
    </p>
    <p align = "center">
        是是是
    </p>

其中 p标签属于段落标签的一种,两个相邻的 p标签之间会空一行;而 p标签中所包含的 align属性标签,用来改变文字所在的位置,如上述代码中的“left”则是向左对齐(默认值)、“rignt”向右对齐、“center”居中。运行后如下图:

   <font color = "blue">
        是是是
    </font><br>
    <font color = "#9400D3">
        是是是
    </font><br>

 上述代码运用的是 font标签,用于设置字体;其中 color为属性标签,用于设置颜色;(PS:font标签末尾的 br标签是换行标签,与其相同用法还有 hr标签,用于设置水平分割线)。运行如下图:

 下面介绍的是 sub下标标签 、sup上标标签 、pre原样输出内容标签 、 span修饰文本的标签(标准的行内标签) :

    <!-- sup 上标(指数) -->
    2<sup>3</sup><br>
    <!-- sub 下标 -->
    a<sub>1</sub>+a<sub>2</sub>+......+a<sub>n</sub><br>
    <!-- pre 原样输出 -->
    <pre>
        是是是
            [查理chli]
    </pre>
    <!-- span 行内标签 在一行输出(不能自动换行) -->
    <span style="color: aquamarine;font-size: 31px;">
        是是是
    </span>

具体表现如下图:

还有用于设置文本标题的标签: hn标题标签(有h1,h2,h3,h4,h5,h6六种大小,从左往右依次变小) div标准的块级标签;

    <!-- hn 标题 n = 1-6 字从大到小-->
    <h1>哈哈哈</h1>
    <h2>哈哈哈</h2>
    <h3>哈哈哈</h3>
    <!-- div 盒子布局 -->
    <div>
        123456
    </div>
    <div>
        123456
    </div>
    <div>
        123456
    </div>

行内标签与块级标签的区别如下:

行内标签:不能自动换行,除非这一行的内容铺满整个页面;如 span

块级标签:自动换行,独占一行。如 div 、hn 、p 、hr

下面介绍各类文本框:语法格式为 input标签;

        <p>
            用户名:<input type="text" name="username">
        </p>
        <p>
            密码:<input type="password" name="password">
        </p>
        <p>
            性别:<input type="radio" name="gender">男
            <input type="radio" name="gender">女
        </p>    
        <p>
            爱好:<input type="checkbox" name="aihao">睡觉
            <input type="checkbox" name="aihao">吃饭
        </p>
        <input type="submit" value="登录">
        <input type="reset">
        <input type="button" value="注册"><br>
        <input type="file"><br>
        <input type="image" src="C:\Users\Lenovo\Desktop\前端\IMG_20231210_222801.jpg" width="50px"><br>
        邮箱:<input type="email"><br>
        <input type="hidden">
        <input type="color"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="datetime-local"><br>
        <input type="range"><br>
        <!-- text 文本框 password 密码框 radio 单选
        checkbox 多选 submit 提交 reset 重置 
        button 普通按钮 file 选择文件 image 图片按钮  
        email 邮箱 hidden 隐藏域 color 选颜色 
        date 选日期 time 选时间 datetime-local 选日期和时间
        range 进度条 -->

在 input标签中存在 type的取值(在上面代码的注释中解释了各类取值的类型),以下是各种类型的表现:

上面代码中的 form标签一般会和 input标签连用(其中 action属性标签为跳转的路径; method属性标签用来明确表单提交的方式:有 get(默认值) / post 两种; name属性标签为表单的名称)

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16285.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!