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. 25.md5 collision(NUPT_CTF)

    抓住两点提示: 1.md5碰撞 2.please input a 利用0 == 字符串是成立的,从而可以绕过MD5检查. 所以找一个md5是0e开头的值,因为 php 在处理 == 的时候当碰到的字符 ...

  2. 分享Java程序员50多道热门的多线程和并发面试题(答案解析)

    下面是Java程序员相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器 ...

  3. Navicat定时在MySQL与MySQL数据库之间自动传输数据

    Navicat定时在MySQL与MySQL数据库之间自动传输数据 来由:  需要将表数据从一个库同步到另一个库(数据分发),之前有尝试过使用Kettle去抽数,但是数据量稍微大一点的时候太慢了...  ...

  4. 六、SQL优化

    SQL优化 优化策略 一.尽量全值匹配 当建立了索引列后,尽量在where条件中使用所有的索引. CREATE TABLE `staffs`( id int primary key auto_incr ...

  5. PHP目前常见的五大运行模式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xujingzhong0077/artic ...

  6. go语言之指针

    package main import "fmt" //指针 //go语言的指针是非常容易学习的,比c中容易很多,他可以更简单的执行一些任务 //与变量类型,使用前需要定义 fun ...

  7. 浅谈Httpmodules

    HttpModule是ASP.NET过滤器,可以理解为HTTP请求的必经之地我们只要实现IHttpModule接口,就可以取代HttpModule namespace BookShop.Handler ...

  8. Java Virtual Machine (JVM), Difference JDK, JRE & JVM – Core Java

    By Chaitanya Singh | Filed Under: Learn Java Java is a high level programming language. A program wr ...

  9. Android给Viewpager默认指定页

    上结果代码 private void setViewPaperItem(int position) { try { Class c = Class.forName("android.supp ...

  10. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...