HTML标签笔记
换行符:<br/>
首部:
<!DOCTYPE>: 说明html文档使用的标准, 在HTML5中仅为 <!DOCTYPE html>
1、头标签
- <head></head>:在head里使用的标签为头标签
- <title></title>:在标签上显示的内容
- <meta>:设置页面的一些相关内容
- 实现页面定时跳转:<meta http-equiv="refresh" content="秒数;url=路径" />
- <base />:设置超链接的一些内容
- <link />:引入外部文件
- 属性:
- rel:当前文档与被链接文档之间的关系
- type:被链接文档的 MIME 类型
- href:文件路径
- 引入css文件:<link rel="stylesheet" type="text/css" href="文件路径" />
- 属性:
- <style></style>:定义样式信息,与css文件相同
2、文字标签和注释标签
- 文字标签:修改文字样式
- <font></font>
- 属性:
- size:文字的大小,取值范围1-7,超出7,默认是7
- color:文字颜色
- 两种表示方式:
- 英文单词:red green ......
- 使用十六进制数表示 #ffffff
- 两种表示方式:
- <b></b>:加粗
- <s></s>:删除线
- <u></u>:下划线
- <i></i>:斜体
- <pre></pre>:原样输出
- <sub></sub>:上角标
- <sup></sup>:下角标
- <p></p>:段落标签,比br标签多一行
- 注释标签
- <!-- html的注释 -->
3、标题标签、水平线标签和特殊字符
- 标题标签
- <h1></h1> <h2></h2> ......<h6></h6>
- 从h1到h6,大小依次变小,同时自动换行
- 水平线标签
- <hr/>
- 属性:
- size:水平线的粗细,取值范围1-7
- color:颜色
- 特殊字符
- < <
- > >
- 空格
- & &
4、列表标签
- <dl> </dl>:表示列表的范围
- 在dl里面 <dt> </dt>:上层内容
- 在dl里面 <dd> </dd>:下层内容
- <ol> </ol>:有序列表的范围
- 属性:type 设置排序方式 1 a i
- 在ol里面 <li> 具体内容 </li>
- <ul> </ul>:无序列表的范围
- 属性:type 空心圆 circle 实心圆 disc 实心方块 square 默认 disc
- 在ul里面 <li> </li>
5、图像标签
- <figure>
- 一般用于图片的布局
- <img />
- 属性:
- src:图片路径
- width:图片宽度
- height:图片高度
- title: 当鼠标放上去时显示的文字
- alt:图片读取异常时显示文字(图片上显示文字(兼容性差))
- 属性:
6、超链接标签
- 链接资源
- <a> </a>
- 属性:
- href:链接的资源地址
- target:设置打开方式
- _blank: 在新窗口打开
- _self: 在当前页打开(默认)
- framesetName: 在指定名称的框架中打开
- 属性:
- <a> </a>
- 定位资源
- 定义位置
- <a> </a>
- 属性:
- name: 位置名称,定义一个位置
- href: 定位到指定名称的位置处( this.html#name)
- 属性:
- <a> </a>
- 定义位置
7、表格标签
- <table> </table>: 表示表格的范围
- <thead>和<tbody> 定义表格的标题与主题,标识作用
- 在table里面 <caption> </caption>:设置标题
- 在table里面 <tr> </tr>:表示行
- 在tr里面 <td> </td>:表示列
- 在tr里面 <th> </th>:相当于td的基础上做了居中和加粗的操作
- table属性:
- border:设置表格边框的宽度
- bordercolor:设置表格边框颜色
- cellspacing:设置单元格之间的距离
- width:表格宽
- height:表格高
- tr属性:
- align:设置显示方式 居左(left),居中(center),居右(right)
- td属性:
- align:设置显示方式 居左(left),居中(center),居右(right)
- rowspan:跨行的数量
- colspan:跨列的数量
8、表单标签(注册)
- <form> </form>: 定义一个表单的范围
- 属性:
- action:数据提交地址,默认当前路径
- method:表单提交方式,有get(默认) post
- 属性:
- <input />:输入项
- input属性:
- type:输入项的类型
- text:普通输入项
- number: 数字项
- password:密码输入项
- radio: 单选输入项
- checkbox:复选输入项
- file:文件输入项(为表单添加 enctype="multipart/form-data" 属性, 且method="post")
- accept: 指定上传文件格式
- hidden:隐藏项
- submin:提交按钮
- image:图片形式提交按钮,src指定路径
- reset:重置按钮
- button:普通按钮
- placeholder: 提示信息(HTML5)
- name:元素名称
- value: 元素值
- checked:预先选定复选框或单选按钮
- readonly: 指定输入框为只读,不可编辑(布尔值)
- disabled: 禁用输入(布尔值), 不可与 type 为 hidden 的同时出现
- required: 该项必须填写
- pattern: 指定正则表达式, 与该表达式匹配才可以提交
- autofocus: 自动聚焦
- maxlength: 限制最大输入长度
- type:输入项的类型
- input属性:
- <label></label>: 绑定表单控件
- for: 控件id, 当点击其中文字时, 焦点到该控件上
- <textarea> </textarea>:文本域
- textarea属性:
- cols:列的数量
- rows:行的数量
- textarea属性:
- <select> </select>:下拉的输入项
- <option> </option>:选择列表
- select 属性:
- name
- option 属性:
- value:元素值
- selected: 预选值
9、框架标签
- <frameset></frameset>:定义框架集
- 在frameset里面 <frame></frame>:frameset 中的一个特定的窗口
- frameset属性:
- rows:按照行进行划分,*代表剩下所有(200px, *)
- cols:按照列进行划分,*代表剩下所有(200px, *)
- <noscript></noscript>: 其中的内容只有在浏览器不支持js或禁用了js时执行
10、内容标签
- 无意义标签(用来布局):
- <div></div>:自动换行
- <span></span>:在一行显示
- <nav>: 导航块(HTML5)
- <header>: 头部(HTML5)
- <footer>: 在页面尾部显示(HTML5)
- <section>: 表示页面一个内容区块,如章节,页眉等(HTML5)
- <article>: 表示独立的内容,如文章等(HTML5)
- <aside>: 表示 article 的辅助信息(HTML5)
- <bgroup>: 页面中的标题(HTML5)
11. 影音标签
- <video></video>: 视频标签(HTML5)
- <audio></audio>: 音频标签(HTML5)
HTML标签笔记的更多相关文章
- django 模版标签笔记
一.模板变量笔记:1.在模版中使用变量,需要将变量放到‘{{}}’中.'{{ 变量 }}'2.如果想访问对象的属性,可以通过'对象.属性名'的方式访问3.如果想要访问一个字典的key对应的value, ...
- 看Web视频整理标签笔记
原来观看web视频,初学html的时候发现记忆不太深刻,所以自己整理了一些笔记,加深记忆且方便忘记时查看.html的规范(遵循)1.一个html文件开始标签和结束标签<html></ ...
- OpenERP QWeb模板标签笔记
在OpenERP中,通过QWeb来对模板进行渲染后加载到浏览器中,而模板中有许多的标签来定制各种需求变化,在这里记录学习过程中碰到的标签定义,以方便查询. 模板中的标签统一都是以"t-&qu ...
- 移动端 meta 标签笔记
(转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...
- html》meta标签笔记
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- html 标签笔记
<一.HTML 基础结构> <html>________________________________<head><title>无标题文档</t ...
- 使用select多选标签笔记
之前一直用checkbox做多选,其实 select也可以多选,只要多给一个属性即可.标签属性 http://www.w3school.com.cn/tags/att_select_multiple. ...
- DEDECMS标签笔记
注意点: 1.dede的标签不可以嵌套(除了channelartlist里面可以嵌套指定的标签),那么当需要使用{dede:global.cfg_webname/}dede标签的时候我们需要转换成[f ...
- scope标签笔记
scope的几个属性详解: 1.compile:默认值 他表示被依赖项目需要参与当前项目的编译,还有后续的测试,运行周期也参与其中,是一个比较强的依赖.打包的时候通常需要包含进去. 2.test: ...
随机推荐
- 2017年全国大学生物联网设计竞赛(TI杯)华东分赛区决赛总结
全国大学生物联网设计竞赛(TI杯)是由教育部高等学校计算机类教学指导委员会主办.上海交通大学电子信息与电气工程学院承办.德州仪器半导体技术公司(TI)协办的赛事,自2014年设立以来,一直是物联网领域 ...
- css中的视距perspective和视差效果
概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...
- TX-LCN分布式事务Demo实战
1. TX-LCN分布式事务Demo实战 1.1. 原理介绍 1.1.1. 事务控制原理 TX-LCN由两大模块组成, TxClient.TxManager,TxClient作为模块的依赖框架,提供T ...
- Powermock2.0.0 详细 总结
目录 1 单元测试 2 Junit测试框架 2.1 Junit是什么 2.2 Junit 能做什么? 3 Junit测试的局限性 4 Mock技术 5 相关的Mock工具 5.1 Mockito.Ea ...
- 【MySQL】存储emoji表情报错(Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...')的解决方案
Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符的支持却不是那么好.所以我们经常会遇到这样的异常: Java.sql.SQLException: Inco ...
- 向github提交代码不用输入帐号密码
解决方案:方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/username Mac OS X: /Users/username Linux ...
- Ocelot简易教程(六)之重写配置文件存储方式并优化响应数据
本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝 原 ...
- JDK,JRE,JVM,JMM关系与区别
JVM: Java Virtual Machine, 将java文件编译成class文件并运行class文件的软件 JRE:Java Runtime Enviromental,包含了JVM和Jav ...
- 【Objective-C】内存管理
涉及三大知识点:引用计数器,属性参数,自动释放池 一.引用计数器(程序编译时Xcode可以自动给你的代码添加内存释放代码,如果编写手动释放代码Xcode会报错) 1.关闭ARC(xcode 4.x之后 ...
- 手写spring(简易版)
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! 理解Spring本质: 相信之前在使用spring的时候大家都配置web.x ...