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>

效果:

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常用标签及属性的更多相关文章

  1. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  2. web前端学习笔记:文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...

  3. web前端开发常用组件

    web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点),      这二者基本能搞定所有对话框的情况 2. ...

  4. web前端之 HTML标签详细介绍

    html标签的分类 点我查看完整的html标签介绍 在html中,标签一般分为块级标签和行内标签 块级标签:块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签"p& ...

  5. html常用标签及属性,常用英语单词

    目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...

  6. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  7. HTML初学者常用标签及属性

    1.HTML5头部结构   [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行.   [meta标签] 1-charset属性:单独 ...

  8. HTML之常用标签及属性

    标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...

  9. HTML常用标签及属性

    标签格式 格式: 双边:<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名> 单边:<标签名 属性1="值1&quo ...

随机推荐

  1. 【Springboot】spring-boot-starter-redis包报错 :unknown

    springboot集成redis时,引入spring-boot-starter-redis包报错,maven找不到这个资源.如下图: 我的项目中,spring boot是 用的2.0.4版本.spr ...

  2. 【Unity游戏开发】Android6.0以上的动态权限申请问题

    一.引子 最近公司的游戏在做安全性测试,期间也暴露出了不少安全上的问题.虽然我们今天要说的权限申请和安全性相关不大,但是也会影响到游戏的使用体验等,所以本篇博客中马三就想和大家谈谈Android6.0 ...

  3. java超市购物管理系统

    一.概述 1.鹏哥前面有写过java项目超市管理系统项目,传送门 2.收到很多朋友私信给我,也很感谢老铁们的反馈和交流,前面这个项目只是对java基础知识和面向对象的思想练习,但是没有涉及到java如 ...

  4. button的onclick事件给函数传递参数

    ul+='<button onclick="pay(\''+regiId+'\')" >按钮</button>' //此为原生JS页面拼接//此方式的关键就 ...

  5. 启动jar包并生成日志的linux脚本

    启动脚本 nohup java -Xms300m -Xmx300m -jar $1 >log/$2 2>&1 & 使用方式 建立一个.sh结尾的脚本,里面放入此代码. 需要 ...

  6. three.js实现世界地图城市迁徙图

    概况如下: 1.THREE.CylinderGeometry,THREE.SphereGeometry绘制地图上的标记: 2.THREE.CanvasTexture用于加载canvas绘制的字体: 3 ...

  7. .net core 2.1 Swagger 配置

    1.先创建 .net core Web 应用程序,选择API 2.安装 Nuget 包:Swashbuckle.AspNetCore Install-Package Swashbuckle.AspNe ...

  8. ASP.NET Core Web 应用程序系列(二)- 在ASP.NET Core中使用Autofac替换自带DI进行批量依赖注入(MVC当中应用)

    在上一章中主要和大家分享在MVC当中如何使用ASP.NET Core内置的DI进行批量依赖注入,本章将继续和大家分享在ASP.NET Core中如何使用Autofac替换自带DI进行批量依赖注入. P ...

  9. Go-数据类型以及变量,常量

    一.数据类型 1.字符串类型 string 2.数字类型 有符号整型: int: int 在32位机器上是int32 在64位机器是int64 int8: int8 表示数字范围是 正负2的7次方减1 ...

  10. 剑指offer笔记面试题10----斐波那契数列

    题目:求斐波那契数列的第n项.写一个函数,输入n,求斐波那契数列的第n项.斐波那契数列的定义如下:f(0) = 0, f(1) = 1,f(n) = f(n - 1) + f(n - 2). 测试用例 ...