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. 面向 B 端的产品经理

    简评:越来越多人涌入产品经理这个岗位,但是面对不同的产品和客户群体,产品经理所需要的技能.知识和经验可能大相庭径. 近几年随着移动互联网的爆发性增长,几乎遍地都是产品经理了.华尔街日报 也曾报道称「产 ...

  2. C#中ExecuteReader、ExecuteNonQuery、ExecuteScalar、SqlDataReader、SqlDataAdapter的区别

    ExecuteNonQuery()执行命令对象的SQL语句,返回一个int 类型的变量,返回数据库操作之后影响的行数.适合用来验证对数据库进行增删改的情况. 2.ExecuteScalar()也可以执 ...

  3. 【BZOJ4184】shallot 线性基

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4184 此题如果我们不考虑删除元素这一个操作,那么就是一道裸的线性基题. 但是此题会删除 ...

  4. NOIP2017滚粗记【下】

    (续上篇) Day1: 下午,全竞赛队的人都在竞赛室颓~,再次吐槽下我校网管科的,下午普及考试又把竞赛室的网络切掉了,还好我们机制地准别了一堆单机游戏.普及组考完后,网络又恢复正常了,但晚上9点左右又 ...

  5. (转)python 之路，200行Python代码写了个打飞机游戏！

    原文:https://www.cnblogs.com/alex3714/p/7966656.html

  6. Pl/SQl 安装和配置Oracle 数据库连接

    在进行企业开发时,数据库(oracle)一般在我们本地安装的:另外,oracle数据库比较大,在本地安装,会拖慢电脑的速度.我们可以通过oracle客户端,远程连接数据库.下面介绍自己的安装方式 1. ...

  7. html的css选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 请编写一个C函数，将一个字符串逆序

    目前有两种思路,一个是申请一片辅助空间,然后将原字符串逆向拷贝到辅助空间,然后输出:另一种是原地逆序,不需要额外的辅助空间,方法就是字符串首尾交换. #include <stdio.h> ...

  9. Linux命令-用户、用户组、权限

    参考资料: http://www.linuxidc.com/Linux/2014-07/104445.htm    Linux入门教程:如何手动创建一个Linux用户 http://www.linux ...

  10. Linux下安装了Xampp,但命令行使用不了MySQL

    引用:http://www.2cto.com/database/201406/309521.html   刚安装好Xampp,使用localhost也能正常运行, phpMyAdimin也能正常登录 ...