HTML标签简明学习一
!-- ... -- html注释
浏览器不对其中的内容解析,可以用来调试及书写释意
<!-- 动不动就被注释 --> |
!DOCTYPE 声明文件类型
一般大写,必须位于文档首行,浏览器根据此声明来解析文档。
HTML5声明:
<!DOCTYPE html> |
HTML4.01 Strict 型声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
a 超链接 Anchor
href="要链接到的地址",这个地址为空("")时无任何效果,为井号("#")时相当于本页。注意要加协议头,如 http://
- target 在什么地方打开链接。
- view_window 在新框架或窗口中打开,以第一次打开的窗口作为目标,以后的view_window值的链接都会打开到第一次开启(该窗口需要能正常访问并在开启状态)的窗口中。
- _blank 在新标签面页中打开。
- _self 默认。在相同框架中打开。
- _parent 在父框架集中打开。
- _top 在顶级窗口打开。
- framename 在指定框架中打开。
|
abbr 缩写
鼠标在缩写上面时会显示 title 中的文本。ie6不支持。
大家好< abbr title = "小可爱的小,文采好的文。" >小文</ abbr >是我的昵称。 |
acronym 首字母缩写
鼠标在缩写上时会显示 title 中的文本。ie5.5不支持,html5 不支持。
对于< acronym title = "Disc Jockey" >DJ</ acronym >,一开始我是拒绝的。 |
address 联系信息
在 body 中时表示文档页面联系信息,在 article(html4.01不支持) 中时表示文章联系信息,显示为斜体。
< address > 邮件: daysme@qq.com< br > 联系地址: 太阳系地球村亚洲大陆< br > </ address > |
applet 嵌入java小程序
html5不支持,html4.01不赞成。推荐使用 object 标签。
< applet code = "java.class" width = "100" height = "100" >这里有个java小程序。</ applet > |
area 图像可点击区域
使用img的usemap属性和map的name、id来把img和map绑定。注意usemap属性的值有#井号。
< map id = "planetmap" name = "planetmap" > < area shape = "circle" coords = "180,139,14" href = "http://www.w3school.com.cn/example/html/venus.html" alt = "金星" > < area shape = "circle" coords = "129,161,10" href = "http://www.w3school.com.cn/example/html/mercur.html" alt = "水星" > < area shape = "rect" coords = "0,0,110,260" href = "http://www.w3school.com.cn/example/html/sun.html" alt = "太阳" > </ map > |
article 文章
ie8不支持。
< article > < h1 >书到用时方恨少,事非经过不知难</ h1 > < p >如果说上联是劝勉人们要“贵学”,那么下联“事因经过不知难”,就是强调“行”的重要性,光“学”不“行”终是无益。</ p > </ article > |
aside 相关内容
ie8不支持。
< p >我们是生活在四维空间里面的三维生物。</ p > < aside > < h4 >什么是三维空间?什么是四维空间?</ h4 > < p >我们都知道4个1维的线可以组成一个2维的正方型,6个2维正方型的面可以组合成1个3维的正方体。是否8个3维的立方体可以组成1个4维的“超立方体”?</ p > </ aside > |
audio 声音
ie8不支持。
|
b 加粗
html5中不推荐使用。
< b >这么容易就粗了!</ b > |
base 默认链接
设置默认链接或目标,比如a/img/link/form中的链接。base标签需要放在head中,href可以用前缀、相对去理解。
< head > < base target = "_blank" > </ head > < body > < a href = "#en/zh/xiaowen" >百度翻译一下xiaowen。</ a > </ body > |
basefont 默认字体
只有ie支持,此标签应避免使用。
< head > < basefont face = "黑体" color = "red" size = "6" > </ head > < body > < p >山丹丹开花红艳艳</ p > </ body > |
bdi 隔离
真心不知道这个标签的功能体现在哪里。但只有 Firefox 和 Chrome 支持,可不必理会。
< ul > < li >用户名 < bdi >春花</ bdi >: 10分漂亮</ li > < li >用户名 < bdi >翠花</ bdi >: 90分黑暗</ li > </ ul > |
bdo 文本方向
使用dir属性的ltr(左到右)和rtl(右到左)值设置文本方向。
< bdo dir = "rtl" >此生只为你轮回</ bdo > |
big 大号文本
不支持big标签的浏览器会把内容显示为粗体。嵌套一次增大1号,最大为7。
< big >1< big >2< big >3< big >4</ big >3</ big >2</ big >1</ big > |
blockquote 块引用
应该包含块元素。cite属性值为引用地址。
< blockquote cite = "www.w3school.com.cn" >块引用常在左右两边增加外边距,有时会使用斜体,有自己的空间。</ blockquote > |
body 文档主体
文档主体,显示在页面上。
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >显示在标签栏上的标题</ title > </ head > < body > 这就是传说中body里的内容咯! </ body > </ html > |
br 折行
普通折行:
< p >心若在梦就在,大不了< br >从头再来</ p > |
br的clear属性与左对齐或右对齐的图像或表格
折行前在下面,折行后在下面。
折行前,跟在图像右下角,与图像底部对齐。 < br > 折行后,在图像下面。 |
折行前后都上面。
< img align = "left" width = "100" height = "100" src = "http://www.w3school.com.cn/i/eg_greanfoliage.jpg" /> 折行前在图像右边的上面,与图像顶部对齐。 < br > 折行后也在图像的上面。 |
折行前在上面,折行后在下面。
< img align = "left" width = "100" height = "100" src = "http://www.w3school.com.cn/i/eg_greanfoliage.jpg" /> 折行前在图像右边的上面,与图像顶部对齐。 < br clear = "left" > 折行后在图像的下面。 |
折行前在中间。折行后在下面。
< img align = "absmiddle" width = "100" height = "100" src = "http://www.w3school.com.cn/i/eg_greanfoliage.jpg" /> 折行前在中间。 < br clear = "left" > 折行后在图像的下面。 |
button 按钮
ie提交的是标签对之前的内容,其他浏览器提交的是value值。请始终指定type值,在表单中请使用input创建按钮。与input不同的是他能放置图像映射之外的其他内容。
< form > < button >在表单内默认type值为submit提交表单</ button > </ form > < button >在form外默认type值为button普通按钮</ button > |
canvas 图形容器
ie8不支持,canvas只是容器,里面的图形需要使用脚本绘制。
< canvas id = "my_canvas" ></ canvas > < script > var canvas=document.getElementById("my_canvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle="#ff0000"; ctx.fillRect(0,0,50,50); </ script > |
caption 表格标题
必须设置在 table 的下一个标签。
< table border = "1" > < caption >这就是表格的标题</ caption > < tr > < td >表格第1行的第1个单元格</ td > < td >表格第1行的第2个单元格</ td > </ tr > < tr > < td >表格第2行的第1个单元格</ td > < td >表格第2行的第2个单元格</ td > </ tr > </ table > |
center 水平居中
推荐使用样式代替。
< center >居中的内容</ center > |
cite 引用、来源
若引用文档有联机版本,还应该给予a链接。
< p > < cite >《富春山居图》</ cite >由黄公望始画于至正七年(1347),于至正十年完成。 </ p > |
code 代码文本
七个短语标签之一,通常显现为粗体或斜体。比较常用的仅 strong 标签。
- 短语标签
- em 强调文本。
- strong 重要文本。
- dfn 定义项目。
- code 代码文本。
- samp 样本文本。
- kbd 键盘文本,常用在与计算机相关的文档或手册中。
- var 变量文本,与 <pre> 及 <code> 标签配合使用。
< em >强调文本</ em >< br > < strong >加粗文本</ strong >< br > < dfn >定义项目</ dfn >< br > < code >一段电脑代码</ code >< br > < samp >计算机样本</ samp >< br > < kbd >键盘输入</ kbd >< br > < var >变量</ var > |
col 表格列
HTML标签简明学习一的更多相关文章
- WebPack 简明学习教程
WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...
- Html5新增标签的学习。
随笔,记录的比较随便. 今天新学习了9个标签. <audio> 简单的说就是一个音频标签,他的主要常用属性有src=""音频的路径 controls="con ...
- 简单标签(SimpleTag) 学习
一.由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编写和调用的SimpleTag接口 ...
- HTML之form表单标签的学习
from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...
- JSTL核心标签库学习笔记
写的很简单,不一定会有用,如果想要详细的话,建议看API啊--- 不过在这里推荐一个地址,http://www.yiibai.com/jstl/ 希望对你们有帮助啊,很好的教材啊 1.<c:i ...
- react-router简明学习
前面的话 路由用来分发请求.后端是提供服务的,所以它的路由是在找controller,前端是显示页面的,所以它的路由是在找component.本文将详细介绍react-router-dom的内容 Ro ...
- React简明学习
前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...
- 资源预加载preload和资源预读取prefetch简明学习
前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...
- 第六课 Html5常用标签 html5学习1
HTML标签的认识一.标签的分类1.双标签 如<html> </html>2.单标签 如<br \> 换行标签 二.标签的关系1.嵌套关系 如<head> ...
随机推荐
- Django concept
1. MVC in Django http://stackoverflow.com/questions/6621653/django-vs-model-view-controller https:// ...
- (六) 一起学 Unix 环境高级编程 (APUE) 之 进程控制
. . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...
- VS2010安装异常中断后无法安装的解决方法(安装时发生严重错误)
最近,因为公司开发的需要,对开发环境进行全面的升级,在这其中也遇到了不少问题,在之后将陆续整理出来,以便以后查看. 之前开发环境:ArcGIS9.3,ArcEngine9.3,Oracle10g,Ar ...
- Nginx环境中如何将HTTP跳转至HTTPS设置
如果我们VPS服务器的WEB环境采用的是NGINX架构,那如果我们将安装SSL证书的网站希望强制跳转至HTTPS网站URL的时候那需要如何设置呢?这里个人建议是这样的,我们必须要强制一个地址,这样网站 ...
- oracle 安装注意
1. 本地安装oracle数据库后,并不代表可以用plsql 连接上了.. 如果安装的是64位的oracle,plsql 是不能直接连接的.. 2. 如果是64位的..需要下载一个oracle 客户端 ...
- spring 源码下载地址
1, github: https://github.com/spring-projects/spring-framework SVN: https://github.com/spring-projec ...
- mysql远程连接:ERROR 1130 (HY000): Host '*.*.*.*' is not allowed to connect to this MySQL server解决办法
安装完MySQL后,远程连接数据库的时候,出现 ERROR 1130 (HY000): Host '192.168.0.1' is not allowed to connect to this MyS ...
- PHP疑惑
<?php $a = array(); $a[0] = 1; $a[1] = 2; $b = (object)$a; var_dump($b); 怎么从对象$b 中取值??? <?php ...
- 【洛谷P1541】乌龟棋
四维dp #include<cstdio> #include<cstring> using namespace std; ; ],a,b,c,d,n,m; int max(in ...
- windows下使用adb工具查看android程序cpu和内存消耗情况
在实际的开发当中,尤其软件运行在一个硬件设备比较差的环境下,对软件占用资源大的问题是开发者们必须要解决的问题,系统比较卡.觉得应该看看程序的cpu和内存消耗 一直以来都在windows下编程,已经习惯 ...