HTML5 标签实例
html 5 学习
1.<p></p> #段落元素定义
2.<h1></h1> #标题 h1代表大号的字体。依此变小
3.<br /> #实例 代表直接换行。
<p>
To break<br />lines<br />in a<br />
</p>
4.居中排列
<h1 align="center">This is heading 1</h1> ##right右 center #居中
5.标签定义水平线
<p>hr 标签定义水平线：</p>
<hr />
6.注释
<!--这是一段注释。注释不会在浏览器中显示。-->
7.背景颜色
<body bgcolor="yellow">
8.HTML 链接
<a href="http://www.w3school.com.cn">This is a link</a> 9.HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
10.文本格式化
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup> 11.预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制
<pre>
这是
与格式文本
和换行
</pre>
<p>pre 标签很适合显示计算机代码</p>
<pre>
for i = 1 to 10
print i
next i
</pre> 12.“计算机输出” 标签
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br /> <p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p> 13.地址
此例演示如何在 HTML 文件中写地址。 <address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address> 14.删字效果
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多数浏览器会改写为删除文本和下划线文本。</p> <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> 15.超链接
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> 16.图片作为链接
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
17.在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p> 18.链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分 <p>
<a href="#C2">查看 Chapter 4。</a>
</p> <h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p> <h2><a name="C2">Chapter 2</a></h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p> 19.跳出框架
<p>被锁在框架中了吗？</p> <a href="/index.html"
target="_top">请点击这里！</a> 20.创建电子邮件链接
本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p> <p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
21.垂直框架
本例演示：如何使用三份不同的文档制作一个垂直框架。
<html lang="en">
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html"> </frameset>
<head> 22.混合型框架
<!DOCTYPE html>
<html lang="en">
<frameset rows="50%,50%">
<frame src="./frame_a.html">
<frameset cols="25%,75%">
<frame src="./frame_b.html">
<frame src="./frame_c.html">
</frameset>
</frameset>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body>
</html> 23.含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。
<frameset rows="50%,50%">
<frame src="./frame_a.html" noresize="noresize" />
<frameset cols="80%,20%">
<frame src="./frame_b.html" />
<frame src="./frame_c.html" />
</frameset>
</frameset> 24.导航框架
新建三个html文件，分别命名为a.html、b.html、c.html里面内容随便写如 a.html <html> <body> <h1>This is a heading1</h1> </body> </html> 2
再新建一个contents.html内容如下 <html> <body> <a href="a.html" target="showframe">a</a><br/> <a href="b.html" target="showframe">b</a><br/> <a href="c.html" target="showframe">c</a> </body> </html> 3
再新建一个1.html内容如下 <html> <frameset cols="120,*"> <frame src="contents.html"> <frame src="a.html"name="showframe"> </frameset> </html> 25.内联框架
本例演示如何创建内联框架（HTML 页中的框架）。
<body>
<iframe src="./1.png"></iframe>
<p>test</p>
</body> 26.使用框架导航跳转至指定的节
https://www.cnblogs.com/919czzl/p/4685211.html
HTML5 标签实例的更多相关文章
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- HTML5标签与HTML4标签的区别示例介绍_html5教程技巧
(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...
- [js开源组件开发]html5标签audio的样式更改
html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...
- HTML5标签改变
1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...
- 是时候全面使用html5标签了
html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...
- 关于HTML5标签不兼容(IE6~8)
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <hea ...
- HTML5标签一览
HTML5标签一览,点击下载 访问密码:1907
- html5标签兼容ie6，7，8
注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...
随机推荐
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- python之demo2----改编自python官方提供的turtle_yinyang.py画阴阳的demo
""" 执行 python -m turtledemo 命令查看系统内置demo的源码 绘制:需要通过import turtle引入绘制图形库turtle库 改编自pyt ...
- java中的String类的不可变性的小例子
在java语言中,String类具有不可变性,即常量字符串不可更改.下面的一个小例子简单演示相关概念. public class test { public static void main(Stri ...
- Python2与python3中字符串的区别
Python2 在python中包含两种字符串类型:str和unicode,str并不是完全意义上的字符串,其实是由unicode经过编码(encode)后的字节组成的字节字符串,而unicode则是 ...
- Linux yum源详解
软件包安装方式 0.默认从官网下载包(国内,雅虎,网易,阿里云) cat /etc/yum.repos.d/rhel-source.repo [yum文件目录--redhat6版] [ ...
- PHP 与 YAML
PHP 与 YAML 这一段时间都没有写blog,并不是因为事情多,而是自己变懒了.看到新技术也不愿意深入思考其背后的原理,学习C++语言了近一个多月,由于学习方法有问题,并没有什么项目可以练手.靠每 ...
- Alpha冲刺报告（2/12）（麻瓜制造者）
今日任务总结 燃尽图如下: 具体完成情况如下: 江郑: 今天:完成了商品需求的数据库的基本构建. 遇到的问题:对于php的ci框架不熟,操作原理不懂 明天:和队友进行数据库的对接 符天愉: 今天:完成 ...
- Django商城项目笔记No.1项目准备工作
Django商城项目笔记No.1项目准备工作 一.本项目商城属于B2C商业模式 二.项目采用前后端分离的应用模式 前端使用Vue.js 后端使用Django REST framework 1.创建gi ...
- 打开Excel时提示“向程序发送命令时出现问题”
Excel界面中点击“文件”,选择“选项”,在弹出的“Excel选项”对话框中依次点击“高级”-“常规”,然后取消勾选”忽略使用动态数据交换(DDE)的其他应用程序”:
- Nginx反向代理理解误区之proxy_cookie_domain
基本内容 Nginx做反向代理的时候,我们一般习惯添加proxy_cookie_domain配置,来做cookie的域名转换,比如 ... location /api { proxy_pass htt ...