TMLh标签定义为要在网页上显示的标题或副标题。
当您将文本放在标题标签<h1>…..</h1>中时,文本在浏览器中以粗体显示,并且文本的大小取决于标题的数量。
从<h1>到<h6>标签定义了六种不同的HTML标题,从最高级别h1(主标题)到最低级别h6(最重要的标题)。
h1是最大的标题标签,h6是最小的标题标签。因此,h1用于最重要的标题,h6用于最不重要的标题。
请确保将HTML标题标签只用于标题,不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推。
<h1>标题编号 1</h1>
<h2>标题编号 2</h2>
<h3>标题编号 3</h3>
<h4>标题编号 4</h4>
<h5>标题编号 5</h5>
<h6>标题编号 6</h6> 123456复制代码类型:[html]
效果展示:
<hr>标签在HTML页面中创建水平线,hr元素可用于分隔内容。
示例代码
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>12345复制代码类型:[html]
效果展示:
这是一个段落。
这是一个段落。
这是一个段落。
开课吧广场-人才学习交流平台
果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?
html5文档类型声明:<!doctype html>
html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。
head头部有以下几种常用标签:
meta:主要提供有关页面的元信息。
link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。
title:页面标题的标签。
script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图:
常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:
常用的内联标签有:span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:
常用的内联块级标签有:img、input、textarea。
4、区域标签。
所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。
常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。
5、表单标签。
这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:
表单常用的标签有:form、input、select、option、textarea 。
以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。
用说, Flash的效果大家都清楚。实际上,HTML5和JavaScript拥有很多新属性,可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和JavaScript特效,看了这些特效,未来的Web发展前途无量。
1.特效:FlowerPower
创作者使用花朵作为画刷,以贝兹曲线方式绘图。
2.特效:Breathing Galaxies
动态变换直径及颜色,可通过鼠标或键盘产生新形状,这个效果不错!
3.特效:Noise Field
移动鼠标可改变粒子运动,点击可随机生成不同粒子效果。
4.特效:HTML5 Canvas粒子效果文字动画特效
W3Cschool利用HTML5,制造出了粒子效果文字动画特效。只要你输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果。
5.特效:Swirling Tentacles
三维脉冲效果,沿着脉冲线有运动的颜色渐变模块。
6.特效:Keylight
双击生成两个以后的键即可发出声音,移动键的位置可产生不同的声音效果。W3Cschool上面有很多这样的教程,有兴趣可以去看一下!
7.特效:Rotating Spiral
旋转的螺旋效果,单击可以控制开始和停止旋转,是不是觉得高大上?
8.Blob
拖动水滴有重力效果,双击可以分离,小水滴碰到大水滴会合并。
9.Trail
彩色颗粒跟随鼠标运动效果,带尾巴淡出效果。
10.Graph Layout
一种交互的力向图布局效果,刷新三观。
11.Typographic Effects
使用HTML5 Canvas实现的文本特性,效果超过Flash。
12.Crazy Tentacles
移动鼠标可以进行涂鸦,点击鼠标可以清除画布,看着确实疯狂。
13.Nebula
吸引眼球的粒子系统,目的是测试WebGL性能,如果滑动鼠标,可以产生绚丽效果。
14.WebGL Globe
WebGL Globe 是一个开放的地理数据可视化平台,我们鼓励你复制代码,添加自己的数据,创建自己的应用。
15.Particle Playground
用鼠标和粒子进行交互,能发现不一样的精彩。
16.Surface
使用WebGL实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。
上面的HTML5和JavaScript特效,简直赶超Flash。W3Cschool上面有很多用户留言称HTML5和JavaScriptit将替代Flash,不过对于这种说法,也不知道怎么去评判。毕竟这些用户说的也是很有道理,你认为JavaScriptit会替代Flash吗?很想知道你的答案!
公众号:w3c技术教程
提供专业的web技术教程、手册、工具。
*请认真填写需求信息,我们会在24小时内与您取得联系。