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. python Snakes 库安装

    SNAKES : A A Flexible High-Level Petri Nets Library SNAKES是python一个可以用于Petri网的库 python2安装SNAKES库:  在 ...

  2. 【bzoj4503】 两个串 FFT

    $FFT$套路题(然而我看错题了) 我们考虑化一下式子. 设当前比较的两个部分为$S[i....i+|T|-1]$和$T[0....|T|-1]$. 我们对串$T$中出现问号的位置全部赋值为$0$. ...

  3. sql日期格式处理

    sql server中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 ...

  4. jenkins 踩坑路 之 jenkins ssh 脚本

    背景: 由于公司业务调整,整个业务要从阿里云迁移到aws,自然 jenkins 也是要进行迁移的.jenkins 迁移过程中遇到的问题在此记录下,希望能给遇到类似问题的朋友些许帮助.也便于我后期遇到此 ...

  5. springboot-25-springboot 集成 ActiveMq

    消息的发布有2种形式, 队列式(点对点) 和主题式(pub/sub) 模式, 队列式发布后, 接收者从队列中获取消息后, 消息就会消失, 但任意消费者都可以从队列中接受消息, 消息只能被接受一次 主题 ...

  6. php使用date()函数时，提示的警告

    转载:http://www.shangxueba.com/jingyan/121682.html 在用PHP5.3以上的PHP版本时,只要是涉及时间的会报一个: "PHP Warning: ...

  7. word黑底白字

    我们在使用word文档编辑文件时,有时候希望某段文字采用黑底白字,以区分其他段落的白底黑字从而达到强调的效果. 方法是: 1. 选中待处理的段落. 2. 点击“设计”选项卡. 3. 找到“设计”选下卡 ...

  8. Linux 文件内容查看工具介绍-cat,less,more,tail,head

    Linux 文件内容查看工具介绍 作者:北南南北来自:LinuxSir.Org摘要: 本文讲述几种常用文件内容的查看工具,比如cat.more.less.head.tail等,把这些工具最常用的参数. ...

  9. elasticsearch的join查询

    1.概述 官方文档 https://www.elastic.co/guide/en/elasticsearch/reference/current/joining-queries.html 两种类型的 ...

  10. [九省联考 2018]秘密袭击coat

    Description 题库链接 给出一棵 \(n\) 个点的树,每个点有点权.求所有联通块的权值 \(k\) 大和,对 \(64123\) 取模. \(1\leq n,k\leq 1666\) So ...