Web前端——Html常用标签及属性

Posted kexing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端——Html常用标签及属性相关的知识,希望对你有一定的参考价值。

html

常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性

表格 table

  • td 单元格
  • tr 表的行
  • th 表头

td或th可以下面的两个属性达到跨行或跨列

  • 表格跨行 rowspan
  • 表格跨列 colspan

例子:

<!--cellspacing 单元格间距 cellpadding单元格边距  -->
<table border="1" cellspacing="0" cellpadding="0">
    <tr><th colspan="2">Header</th></tr>
    <tr><td>Data</td><td>Data</td></tr>
</table>

效果:




Header
DataData

跑马灯 marquee标签

marquee标签 跑马灯效果

  • scrolldelay 移动速度
  • direction 移动方向 有上下左右 up down left right
  • behavior 滚动方式 scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动
  • scrollamount 移动速度 每次移动的距离像素
  • scrolldelay 滚动延迟 设置滚动的时间间隔,单位是毫秒

代码:

<marquee>
    <p>hello world!this is marquee!</p>
</marquee>

效果:

hello world!this is marquee!


marquee参考链接

表单 form

代码:

<!-- 文字和输入框居中对齐 -->
<label fro="username">用户名<input id="username" type="text">

效果:

表单元素:

  • input 单行输入框,根据不同的 type 属性,可以变化为多种形态
    不同type的样式参考链接
  • select 下拉选择
  • textarea 多行输入框
  • button 按钮

常用属性:

  • required 该标签内容必须填写
  • minlength 输入最短长度
  • maxlength 输入最长长度
  • readonly 只读,无法点击,可以复制
  • disable 禁用,背景色变灰色,无法点击,无法复制

使用了minlengthmaxlength鼠标悬浮在输入框上面会出现提示

这个最小长度为4,最大长度为6
这个是邮箱输入框

  • get: 明文显示,书签收藏,提交数据量有限制
  • post: 密文显示,文件上传需求
如果要做文件上传表单数据的编码方式必须是:multipart/form-data
    <form method="post" enctype="multipart/form-data">;
    //例如:
    <form action="servlet/upload" method="post" enctype="multipart/form-data">
        <br><br>
        文件(file): <input type="file" name="upload">
        <br>
        <br>
        <button type="submit">上传</button>
    
        <br><br>
        ajax:异步请求
    </form>

html表单参考链接

框架 frameset

frameset属性:

  • rows 分为几行
  • rows="20%,80%" rows="20%,*"
  • cols 分为几列

frame属性:

  • scrolling 滚动条是否显示 no,1(yes)
  • src 对应的html页面定义

frame设置name.a标签指定target为该frame的name,就会在该处frame打开新页面

以上是关于Web前端——Html常用标签及属性的主要内容,如果未能解决你的问题,请参考以下文章

HTML a 标签的基本用法和常用属性

HTML a 标签的基本用法和常用属性

html常用的标签和属性都有哪些?各有啥用途?怎样书写?

body标签的常用的属性都有哪些

Web前端开发——HTML5常用标签简介

WEB前端开发技术网页制作基础教程--HTML常用标签详解