HTML行级元素、常用标签、表单标签

最新推荐文章于 2023-07-05 22:10:05 发布

Chains-X ♔

最新推荐文章于 2023-07-05 22:10:05 发布

阅读量549

点赞数

分类专栏： WEB前端文章标签： web前端 html 常用标签表单标签

本文链接：https://blog.csdn.net/mk1843109092/article/details/100053904

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

不独占一行

有语义的行内元素

HTML链接 a标签

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

target属性，定义被链接的文档在何处显示 _blank 新窗口打开

HTML图像

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

文本标签

b标签加粗
i标签斜体
strong标签加粗（强调）
em标签斜体（强调）

无语义的行内元素

span标签配合css使用

常用的实体字符

&gt; <!--大于号-->
&lt;	<!--小于号-->
&copy;	<!--版权符号-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML常用的行级元素</title>
    </head>
    <body>
        <!--链接标签
            a标签 href属性,跟的是要跳转的网址
                   target :_blank  在新窗口打开跳转的页面
            -->
            <a href="http://www.baidu.com">百度一下，你就知道</a>

            <a href="./复习.html" target="_blank">跳转到本地的文件(复习.html)</a>

            <!--路径问题 在实际开发当中建议使用相对路径 ./当前目录 ../上目录-->
            <!--绝对路径 在windows当中绝对路径的根是我们文件所在的盘符
                D:\APP\PyCharm\PyCharmText
            -->
            <!--通过a标签锚点的制作-->

        <!--图像标签 img(但标签 不需要闭合)
            src: 图片的地址(网络资源或者本地资源)
            alt:用于图片加载失败的替代文字 (必须存在)
            title:鼠标选题在图片上的提示信息(可写可不写)
            width:设置图片的宽度
            height:设置图片的高度
            注意:一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小
          -->
            <img src="http://pic1.win4000.com/wallpaper/9/56fcd25dbb4a8.jpg" width="200px" height="200px" alt="这是图片标签" title="这是一张美女高清大图">
            <!--<img src="./images/56fcd25dbb4a8.jpg" alt="这是一张美女大图">-->
        <br>
        <!--文本标签-->
            <!--加粗b strong:具有强调意义  斜体i em:斜体,具有强调意义-->
            <b>src:</b> 图片的地址(网络资源或者本地资源)<br>
            <i>alt:</i>用于图片加载失败的替代文字 (必须存在) <br>
            <strong>title</strong>:鼠标选题在图片上的提示信息(可写可不写) <br>
            <em>width:</em>设置图片的宽度 <br>
            height:设置图片的高度 <br>
            注意:一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小 <br>
        <!--span 无语义的行级元素 一般span标签也是配合css使用 来设置文本当中一部分内容-->
            <span style="color:red">注意:</span>一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小 <br>

        <!--html当中的实体字符 &gt;:大于号 , &lt;:小于号 ,&copy; &nbsp;空格-->
            1&gt;2 <br>
            1&gt;2 <br>
            1&lt;2 <br>
            &copy; <br>
            注意:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小
    </body>
</html>

表单标签

表单是一个包含表单元素的区域。通过form来定义表单区域
通过type属性定义不同类型的表单控件
- text 普通文本输入框
- password 密码输入框
- radio 单选按钮
- checked 多选按钮
- select 下拉框
- file 文件上传选框
- textarea 文本域
- submit 提交按钮
- reset 重置按钮
- hidden 隐藏域，要和表单单一其提交的信息

常用属性：

- name 属性：表单项名，用于存储内容值
- value属性：输入的值
- disabled属性：禁用属性
- readonly属性：禁用属性
- checked属性：选择框指定默认选项
- placeholder：提示

注意：

form 有两个必须存在的属性 action提交地址 metchod提交方式
post:通过request body传参，参数不可见，参数没有大小限制
get:通url进行传参，参数可见，不安全，大小有限制，

如果表单中含有文件上传 
    method提交方式必须为post 
    form中必须有enctype属性
    enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--form标签来划定一个表单区域
        action:数据的提交地址
        method:提交方式 get post
                表单提交默认是以get方式进行数据的传输
                get:通过url地址传输数据,数据会显示在url地址栏当中
                    传输数据有大小限制,根据浏览器的不同数据大小不同
                    相对来说不安全
                 post:数据不通过url地址传参,相对来说较安全
                       数据传输没有具体的大小限制
                       一般表单指定使用post方式提交数据
        enctype:如果表单当中有文件上传必须添加这个属性
                 指定属性值为 "multipart/form-data" 用于文件转码
    -->
    <form action="" method="post" enctype="multipart/form-data">
        <!--
            表单控件
                type:指定我们的表单类型(普通文本  密码框   单选框  多选框)
                必须要填写 name属性
                value :设置默认值
         {username:1234,sex:0,love:[l,z,p],xl:0}-->
       用户名: <input type="text" name="username" value=""  placeholder="请输入用户名"> <br>
        密 码: <input type="password" name="password"> <br>
        <!--单选框 type="radio" 必须有name属性和value属性,并且一组单选框name属性的值必须相同-->
        性别: <input type="radio" name="sex" value="1" checked> 男
              <input type="radio" name="sex" value="0"> 女
        <br>
        <!--
            多选框 type="checkbox" 必须指定name属性和value属性,并且一组多选框name属性的值要相同
        -->
        爱好: <br>
              <input type="checkbox" name="love[]" value="l" checked> 篮球 <br>
              <input type="checkbox" name="love[]" value="z"> 足球 <br>
              <input type="checkbox" name="love[]" value="p"> 品乓球 <br>

        <!--select 下拉选项框必须配合option来使用-->
        学历:
              <select name="xl" >
                  <option value="0">小学</option>
                  <option value="1">初中</option>
                  <option value="2">高中</option>
                  <option value="3">大学</option>
              </select>
        <br>
        <!--文件上传 type="file" 一般用于文件上传-->
        请选择上传文件: <input type="file" name="file">

        <br>
        请输入个人说明: <br>
        <textarea name="text" id="">请输入个人信息</textarea>
        <br>
        <!--按钮 type="submit"-->
        <input type="submit" value="确定" > <br>
        <button>提交</button>
        <br>
        <!--重置按钮-->
        <input type="reset" disabled>

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

Chains-X ♔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML行级元素、常用标签、表单标签

二、HTML常用的行级标签（行内元素）不独占一行有语义的行内元素HTML链接 a标签<a href="链接地址">链接文本</a>target属性，定义被链接的文档在何处显示 _blank 新窗口打开HTML图像<img src="图片地址" alt="">文本标签b标签 i标签 strong标签 em标签无语义的行内元素spa...
复制链接

扫一扫