HTML总结①

最新推荐文章于 2024-10-09 11:42:00 发布

RyūHongGie

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量853

点赞数 22

文章标签： html 前端服务器

本文链接：https://blog.csdn.net/Chli1206/article/details/136739581

版权

本文详细介绍了HTML中的各种文本格式化标签（如strong,em,u,del等），段落对齐（left,right,center），以及颜色设置（fontcolor）。同时涵盖了行内标签与块级标签的区别，以及input标签在表单中的使用，包括文本框、密码框、单选/多选、按钮等元素及其功能。

摘要由CSDN通过智能技术生成

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的取值（在上面代码的注释中解释了各类取值的类型），以下是各种类型的表现：