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. THUWC2019酱油记

    Day -1 坐了一上午动车来到帝都,晚上去了趟THU还有奥林匹克公园. 反正也是来打酱油的,颓废怎么能少呢.

  2. 用dotnet core搭建web服务器(二)路由表与封装

    https://gitee.com/lightsever/netcore_study/tree/master/server02_path 先上代码,首先我们把httpserver封装一下,以后用起来方 ...

  3. 用了 Lambda 之后,发现可以忘记设计模式了

    设计模式是过去的一些好的经验和套路的总结,但是好的语言特性可以让开发者不去考虑这些设计模式.面向对象常见的设计模式有策略模式.模板方法.观察者模式.责任链模式以及工厂模式,使用Lambda表达式(函数 ...

  4. Java 正则表达式_网络爬虫

    首先 需要了解 一些 关于 网络爬虫的 基本知识: 网络爬虫: 所谓的 爬虫 就是一个 应用 程序, 这个 应用 程序 会 获取 网络中的 指定信息(网页 数据). 例如百度: 启动 这个 爬虫 程序 ...

  5. Shape.Type属性名称及对应值列表

    在Excel工作表中,有多种Shape类型的时候,可以通过shape.Type属性值返回一个代表形状类型的MsoShapeType数值.通过该数值可知该图形的类型! 列表如下: 名称 值 说明 mso ...

  6. 上海街头灵魂摄影师:勤劳de小懒熊

    上海中年大叔,街头摄影师,眼光比较独特,题材不限于: 酒吧晚上醉酒躺尸的.喝多亲嘴的.拉拉les的.流泪告别的.地铁露肉的.短裤露沟的. 尺度不大,但比较真实,艺术来源于生活,比那些摆拍的有意思. 大 ...

  7. 单个div元素实现双边框

    昨天被问到一个很有意思的问题,单个div元素怎么实现双边框,当时脑子懵了一下,然后就回答出来用伪元素,别的实在是想不起来了,所以在此总结一下子防止以后再被问到 总结了一下大约有以下几种方案: 伪元素实 ...

  8. Add a Simple Action using an Attribute 使用特性添加简单按钮

    In the previous Add a Simple Action lesson, you learned how to add an Action by implementing the Vie ...

  9. MAC 软件提示已损坏,需要移到废纸篓的解决方法

    解决方法一: 允许任何来源的应用.在系统偏好设置里,打开“安全性和隐私”,将“允许从以下位置下载的应用程序”设置为“任何来源“.当然,这个设置已经无法在Mac OS Sierra上完成了. 在Mac ...

  10. 【Angular】学习笔记-环境部署、项目建立相关

    Angular官网>搭建环境 首先要安装Node.js.官网>Download 一直next就好了. 安装node.js的目的是使用npm这些命令啦 然后这里推荐下载使用git SCM 也 ...