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

2024-04-09 22:01:41

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
Data	Data

跑马灯 marquee标签

marquee标签跑马灯效果

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

代码：

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

效果：
<marquee>

hello world!this is marquee!

</marquee>

marquee参考链接

表单 form

代码:

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

效果：
用户名:

表单元素：

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

常用属性：

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

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

这个最小长度为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打开新页面

码农公寓