美文网首页
html-图片/表格/表单

html-图片/表格/表单

作者: 夜景阑姗 | 来源:发表于2020-06-09 09:45 被阅读0次

    a标签的认识

    ’#‘号跳转页面内锚点
    跳转外部网页
    跳转内部网页
    <a href=" "></a>
    a标签的伪协议

    <a href="javascript:;"></a>
    这样做点击a标签不会刷新页面也不会跳转到开头,页面中存在input且里面有内容时会点击<a href=""></a>会刷新页面,href内为#瞄点点击会自动跳转页面开头,只有伪协议能达到点击后无效果状态(需求:点击按钮查看元素不刷新页面不跳转)
    
    <a href="mailto:邮箱地址">发邮件</a>手机端适用
    <a href="tel:173XXXXXXXX">联系我们</a> 点击调用电话功能
    

    img的认识

    img是一个单标签 我们一般在网页使用它来显示图片,请求图片的同时会发生get请求
    先使用img标签占位 再利用img的属性src(srouces)
    配置图片的相对路径来显示相关的图片内容
    <img src="相对路径">
    图片后缀名常用 png jpg gif bmp
    基本属性:
    src-----引入图片的路径达到显示图片的内容
    alt-----图片错误描述(图片加载失败以后的文字描述)
    title---当鼠标指针进入图片范围内的时候出现的图片描述文字
    width---可以改变图片的尺寸大小
    height---可以改变图片的尺寸大小
    【注意】当我们只是修改其中一个属性的时候,图片是等比例缩放的高度不可以用百分比
    同时修改两个属性必须按照原图片的比例设置,否则图片会失真


    table表格标签的组合使用认识

    table标签--------确定表格的范围
    tr标签-----------代表一行
    td标签-----------一个单元格
    语法结构:

       <table>
                <tr>
                    <td>文本内容</td>
                <tr>
            </table>
    

    常用属性:
    border------设置表格的边框
    bgcolor-----改变表格背景颜色
    width-------改变宽度
    【注意】设置在table改变的是总的宽度
    设置在tr没作用
    设置在td当前这一列都会改变,不设置平分总宽度
    align----设置表格的水平对齐方式
    cellpadding----设置单元格边框和文字之间的距离
    cellspacing----设置单元格相互之间的距离
    例子:

    <table border="1" >
           <tr>
               <td width='50'>1-1</td>
               <td>1-2</td>
               <td>1-3</td>
           </tr>
           <tr>
               <td>2-1</td>
               <td>2-2</td>
               <td>2-3</td>
           </tr>
           <tr>
               <td>3-1</td>
               <td>3-2</td>
               <td>3-3</td>
           </tr>
       </table>
    
    HTML-表格.png

    合并单元格:
    跨列合并(横向合并)colspan
    跨行合并(纵向合并)rowspan
    【注意】合并属性必须使用在td单元格上
    合并的原理就是将第一个开始合并的单元格自身变为合并后的大小,把其他多余的单元格删除掉

     <table border="1">
            <tr>
                <td width='50' colspan="5">1-1</td>
                <!-- <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
                <td>1-5</td>    列合并后面的td都要删除-->
            </tr>
            <tr>
                <td rowspan="2">2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            <tr>
                <td>3-1</td>
                <!-- <td>3-2</td> 行合并删除对应行的 -->
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
        </table>
    

    HTML表格图片1.png

    表单的相关标签使用

    收集用户数据所使用!!!!
    表单生效必须使用form标签包裹,否则就不是一个
    可以执行表单数据自动提交的情形
    语法结构:

            <form>
                <input>
                <button>提交</button>
            </form>
    

    如果要点击自动提交表单生效,那么语法结构中的基本标签缺一不可!!

    form标签基本属性:
    action------数据提交路径(url)
    method------默认是get传值方式|post
    get----提交不是太重要的数据--例如页数,第几条内容。。。---安全性不高,传递内容太小
    post----安全性更高,传递的数据量很大
    1、method提供两种提交方式:

    get、post方式向后台发送请求,提交数据

    2、区别

    (1)安全,二者表象不同,get把提交的数据url可以看到,会展现在浏览器历史记录中,安全性不好;但是post看不到,安全性好。

    (2)提交数据量,get最多提交1k数据,浏览器上的url地址框有字符长度限制,通常是1024字符;post理论上无限制,受服务器限制。

    (3)原理,get 是拼接 url, post 是放入http 请求体中。

    3、应用场景(怎么合理两种方式传递数据?)

    注:在实际应用上,get 重在 "得到", post 重在"传递"

    即假如向后台查询一篇论文,请求数据,请求为“得到”,用get方式请求数据;向后台“传递”数据,写了文章之后传递至后台,通常是“传递完成”的状态进行提示,用post方式请求数据。

    input的属性:
    name------给后台传递的值进行区分所设置的名字
    value----提前预设输入内容---可以删除重新输入
    placeholder------提示输入内容---输入了内容就消失,清空内容就出现

    type的类型:
    text 普通文本框
    password 密码框
    submit 提交按钮
    button 普通按钮
    reset 重置按钮
    radio 单选
    checkbox 多选
    file 文件上传框
    hidden 隐藏域

     <form action="1.php" method="POST">
            <input type="text" name="user" id="" value="" placeholder="请输入用户名">
            <!-- value值输入框内的默认值,用placeholder更好些,输入内容后里面的默认值会消失 -->
            <input type="password" name="pwd" id="">
            <input type="submit" value="提交">
            <button>提交</button>
            <input type="button" value="">
            <input type="reset" value="">
            <!-- 重置按钮是写在跳转到提交页面,点击提交后出现重置按钮可以返回上一级内容 -->
            <input type="radio" name="1" id="">女士
            <label>
                <input type="radio" name="1" id="" checked>男士</label>
            <!-- 单选框 name用来分组 同一名字为1组选项 checked选项为默认选择 lable标签为方便选中,添加标签后点击文字可以勾选单选框 -->
            <input type="checkbox" name="" id="">打球
            <input type="checkbox" name="" id="">看电视
            <input type="checkbox" name="" id="">看书
            <!-- 兴趣爱好多选框 -->
            <input type="file" name="" id="">
            <input type="hidden" name="">
        </form>
    

    下拉框选择菜单
    以两个标签的配合来实现的下拉。外部使用select标签来确定当前下拉框的位置
    内部使用option标签来确定选择的具体内容,
    默认写在最头部的option标签的内容显示在选择框中
    语法结构:

            <select>
                <option>文本内容1</option>
                <option>文本内容2</option>
                <option>文本内容3</option>
                <option>文本内容4</option>
                ...
            </select>
    

    属性:
    select,input,button通用:
    disabled------禁用属性

    相关文章

      网友评论

          本文标题:html-图片/表格/表单

          本文链接:https://www.haomeiwen.com/subject/uiwjtktx.html