HTML控件

最新推荐文章于 2023-10-27 11:31:01 发布

IAN27

最新推荐文章于 2023-10-27 11:31:01 发布

阅读量756

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/IAN27/article/details/100340260

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML中常用的行级元素，包括有语义的如a标签、img标签和文本标签，以及无语义的span标签。同时，讲解了常见的实体字符，如大于号、小于号等。此外，详细阐述了HTML表单的相关标签，如text、password、select等，以及相关属性如name、value和disabled，并提到了表单提交的方式（GET和POST）及其特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、HTML常用的行级标签（行内元素）

不独占一行

有语义的行内元素

HTML链接a标签

<a href="链接地址">链接文本</a>

target属性，定义被链接的文档在何处显示

默认是当前页面显示
_blank新窗口打开

<!--链接标签 a标签 herf属性，跟的是要跳转的网址-->
    <!--<a href="http://www.baidu.com">百度</a> 默认是在当前页面打开
    target :_blank 在新窗口打开链接
    -->

    <a href="./2复习.html" target="_blank">跳转到本地的文化(复习.html)</a>
    <!--路径问题：在实际开发中建议使用相对路径
        相对路径： ./当前目录； ../上一级目录-->
    <!--绝对路径：在windows当中绝对路径的根是我们文件所占的盘符
    A:\HTML LEARNING\2复习.html-->

HTML图像标签

<img src='图片地址' alt="">

<!--图像标签 img(单标签 不需要闭合)-->
    <!--src:图片的地址(网络资源→网络图片地址或本地资源→相对路径)
        alt:用于图片加载失败的替代文字
        title:鼠标悬停在图片上的提示信息(可写可不写)
        width:设置图片宽度
        height:设置图片高度
        注意:一般只给图片设置宽度/高度,高度/宽度会等比例自动拉伸 -->
     
    <img src="http://img4.cache.netease.com/photo/0001/2010-04-17/64EFS71V05RQ0001.jpg" width="500px" height="300px" alt="这是一张图片" title="这是一张大图">

文本标签

b标签加粗
i标签倾斜
strong标签加粗具有强调意义
em标签倾斜具有强调意义

 <!--文本标签-->
        <!--b标签：加粗
            i标签：斜体
            strong标签：加粗 具有强调意义
            em标签：斜体 具有强调意义-->
        <b>src</b>:图片的地址(网络资源→网络图片地址或本地资源→相对路径) <br>
        <i>alt</i>:用于图片加载失败的替代文字 <br>
        <strong>title</strong>:鼠标悬停在图片上的提示信息(可写可不写) <br>
        <em>width</em>:设置图片宽度 <br>
        height:设置图片高度 <br>
        注意:一般只给图片设置宽度/高度,高度/宽度会等比例自动拉伸 <br>

无语义的行内元素

span标签配合css使用

    <!--span标签：无语义的行级元素,一般span标签也是配合css使用，来设置文本当中一部分内容-->
        <span style="color:red">注意:</span>一般只给图片设置宽度/高度,高度/宽度会等比例自动拉伸 <br>

三、常用的实体字符

&gt 大于号
&lt 小于号
&copy 版权号
&nbsp 空格

<!--HTML当中的实体字符
            &gt 大于号
            &lt 小于号
            &copy 版权号
            &nbsp 空格-->
        1>2;<!--早期浏览器版本低无法识别一些大于小于等符号--> <br>
        1&gt;2; <br>
        1&lt;2 <br>
        &copy; <br>
        1&nbsp;2 <br>

四、表单标签

表单是一个包含表单元素的区域
通过form元素来定义表单的区域

有以下几个标签：

text 普通文本输入框
password 密码输入框
select 下拉选项框
file 文件上传选框
textarea 文本域
submit 提交按钮
radio 单选按钮
reset 重置按钮
hidden 隐藏域，要和表单一起提交的信息

常用属性：

name：表单项名，用于存储内容值
value:输入的值
disable:禁用属性，不能看也不能修改
readonly:禁用属性，只能看不能修改
checked：选择框指定默认选项
placeholder:提示

注意：

form 必须有两个存在的属性 action提交地址 method提交方式
post:通过request body传参，参数不可见，参数没有大小限制
get:通过URL进行传参，参数可见，不安全，参数有大小限制
如果表单内有文件上传需要使用enctype="multipart/form-data"用于文件转码

 <!--form标签来划定一个表单区域
        必须存在action和method属性
        action：数据的提交地址
        method：提交方式 get  post
                表单提交默认是以get方式进行数据的传输
                get：通过URL地址栏传输数据，数据会显示在URL地址栏当中
                     传输数据有大小限制，根据浏览器的不同数据大小不同
                     相对来说不安全；
                post:数据不通过URL地址传参，相对来说较安全
                     数据传输没具体的大小限制
                     一般表单指定使用POST方式提交数据
        如果表单当中有文件上传必须添加enctype="multipart/form-data"用于文件转码
        -->
    <form action="" method="post" enctype="multipart/form-data">
        <!--表带控件
            必须填写name属性作为数据的键
            value:设置默认值
            type：指定表单类型
            type=text代表普通文本
            type=password代表密码框
            type=radio代表单选框-->
        用户名：<input type="text" name="username" value="" "> <br>
          密码：<input type="password" name="password"> <br>
        <!--单选框 type="radio" 必须有name属性和value属性，并且一组单选框name的值必须相同（若值不同则变为多选）-->
          性别：<br>
        <input type="radio" name="sex" value="1"> 男 <br>
                <input type="radio" name="sex" value="0"> 女 <br>
        <!--多选框 type="checkbox" 必须指定name属性和value属性，并且同一组name属性值的名字要相同-->
         爱好：<br>
        <input type="checkbox" name="hobby[]" value="basketball"> 篮球 <br>
        <input type="checkbox" name="hobby[]" value="football"> 足球 <br>
        <input type="checkbox" name="hobby[]" value="pingpongball"> 乒乓球 <br>
        <!--下拉选项框 select 必须配合option来使用，必须指定name属性和value值-->
        学历：<br>
        <select name="academic background">
            <option value="primary school">小学</option>
            <option value="middle school">初中</option>
            <option value="high school">高中</option>
            <option value="university">大学</option>
        </select>
        <!--文件上传 type="file" 一般用于文件上传-->
        <br>请选择上传文件：<br>
        <input type="file" name="file">
        <br>
        <!--文本域
            <textarea>文本框内的默认信息</textarea>
            col占多少列
            row占多少行-->
        请输入个人说明：<br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <!--按钮 type="submit"-->
        <input type="submit" value="submit"> <br>
        <button>提交</button>
        <br>

        <!--重置按钮 type="reset"-->
        <input type="reset" value="reset">
        <br>

        <!--隐藏域 type="hidden" 不需要用户查看和填写的信息 -->
        <input type="hidden" name="hidden" value="hidden">