HTML标签学习

2018-10-31

记录一下学习的网站

http://www.w3school.com.cn

http://www.runoob.com/

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html" ;charset="gb2312" />

     <meta http-equiv="Content-Language" content="zh-cn" />

 </head>

 <body bgcolor="yellow">

     <h2>请看: 改变了颜色的背景。</h2>

     <p>普通的段落。</p>

     <b>This text is bold</b>

     <br />

     <strong>This text is strong</strong>

     <br />

     <big>This text is big</big>

     <br />

     <em>This text is emphasized</em>

     <br />

     <i>This text is italic</i>

     <br />

     <small>This text is small</small>

     <br />

     <pre>

         这是

         预格式文本。

         它保留了      空格

         和换行。

     </pre>

     <pre>

         for i range(1,10):

             print i

     </pre>

     <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>

     <address>

         Visit <a href="https://www.baidu.com/">百度</a>

     </address>

     <p>

         创建超级链接

     </p>

     <abbr title="etcetera">etc.</abbr>

     <br />

     <acronym title="World Wide Web">WWW</acronym>

     <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

     <p>仅对于 IE 5 中的 acronym 元素有效。</p>

     <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

     <p>

         如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

     </p>

     <bdo dir="rtl">

         Here is some Hebrew text

     </bdo>

     <br/>

     <bdo dir="ltr">

             Here is some Hebrew text

     </bdo>

     <br/>

     <blockquote>

             这是长的引用。....................................................................................................................................

             这是长的引用。....................................................................................................................................

             这是长的引用。....................................................................................................................................

     </blockquote>

     <q>

         这是短的引用。

     </q>

     <p>

         使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

     </p>

     <p>

         <a href="#C4">查看 Chapter 4。</a>

     </p>

     <h2>Chapter 1</h2>

     <p>This chapter 1</p>

     <h2>Chapter 2</h2>

     <p>This chapter 2</p>

     <h2>Chapter 3</h2>

     <p>This chapter 3</p>

     <h2><a name="C4">Chapter 4</a></h2>

     <p>This chapter 4</p>

     <p>本例演示如何使用链接跳转至文档的另一个部分</p>

     <p>

         您也可以使用图像来作链接：

         <a href="https://www.baidu.com/">

             <img border="0" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1013001331,1929596129&fm=26&gp=0.jpg" />

         </a>

     </p>

     <a href="http://www.baidu.com/" target="_blank">Visit 百度</a>

     <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

     <p>被锁在框架中了吗？</p>

     <a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%BE%8E%E5%A5%B3&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3522970723,1359610582&os=4178563129,976385697&simid=0,0&pn=4&rn=1&di=17209534320&ln=3700&fr=&fmq=1540972667401_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2Ff1%2Fec%2Fdbf1ec353b17dce848676e2fdb7f9bb4.jpg&rpstart=0&rpnum=0&adpicid=0"  target="_top">请点击这里！</a>

     <p>本例演示如何跳出框架，假如你的页面被固定在框架之内</p>

     <br/>

     <p>

         这是邮件链接：

         <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

     </p>

     <p>

         <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

     </p>

     <p>

         这是另一个 mailto 链接：

         <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

     </p>

     <p>

         <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

     </p>

     <br/>

 </body>

 </html>

部分代码例子引用于：http://www.w3school.com.cn

前端学习之HTML（1）的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  3. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  4. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  5. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  6. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  7. 前端学习 第六弹： javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  8. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  9. 前端学习 第四弹： HTML（一）

    前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...

  10. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

随机推荐

  1. Java并发工具类之CountDownLatch

    CountDownLatch允许一个或则多个线程等待其他线程完成操作. 假如我们有这样的需求:我们需要解析一个excel文件中的多个sheet,我们可以考虑使用多线程,每一个线程解析excel中的一个 ...

  2. Flask从入门到精通之Flask-Bootstrap的使用

    Bootstrap(http://getbootstrap.com/)是Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代Web 浏 ...

  3. java获取当前文件路径的方法

    第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...

  4. Sublime Text shift+ctrl妙用（转载）

    1 :按住shift+ctrl然后按←或→可快速选中一行中的某一部分,相当于双击鼠标选中. 当你想在代码末尾加注释的话,这个方法很好用 输入文字->光标移到文字末尾->按住shift+ct ...

  5. git小白使用教程（一）

    本文所涉及命令基本可以涵盖日常开发场景, 对于开发者平时很少使用的命令不再列举,这样不至于让刚刚使用git的小伙伴们看的脑袋大...如有特殊使用可以联系我单独回复. 首先通过一张图了解git的工作流程 ...

  6. centos7搭建kafka集群-第一篇

    Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户 ...

  7. 对称（DES/AES）与非对称（RSA/SSL/数字证书）加密介绍及实际应用

    本文不对具体的算法做深入研究,只是讲解各种安全算法的原理和使用场景. 一.数据校验算法 数据校验,是为保护数据的完整性,用一种指定的算法对原始数据计算出的一个校验值.当接收方用同样的算法再算一次校验值 ...

  8. ubuntu安装maven

    1.安装maven前需要安装JDK 2.下载mavenapache-maven-3.3.9-bin.tar.gz 3.解压maven到当前目录tar -zxvf apache-maven-3.3.9- ...

  9. Notepad++软件的下载与安装步骤（图文详解）

    不多说,直接上干货! 这款软件非常好用!!!   1.下载Notepad++软件 Notepad++非常好用,想要安装首先我们要下载(废话)~ 百度搜索“Notepad++”直接就可以找到主页: 主页 ...

  10. java学习-zxing生成二维码矩阵的简单例子

    这个例子需要使用google的开源项目zxing的核心jar包 core-3.2.0.jar 可以百度搜索下载jar文件,也可使用maven添加依赖 <dependency> <gr ...