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. 三：MyBatis学习总结(三)——优化MyBatis配置文件中的配置

    一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下 <?xml version="1. ...

  2. centos 6.8 解决ibus输入法不正常显示的问题

    今天发现 ibus输入法打字时不正常显示,如下图

  3. (转)CentOS7使用ACL精确控制文件和目录的访问权限

    原文:https://www.linuxidc.com/Linux/2018-01/150111.htm https://blog.csdn.net/maxiaoqiang1/article/deta ...

  4. 第7章—SpringMVC高级技术—处理异常

    处理异常 处理异常 不管发生什么事情,不管是好的还是坏的,Servlet请求的输出都是一个Servlet响应.如果在请求处理的时候,出现了异常,那它的输出依然会是Servlet响应.异常必须要以某种方 ...

  5. 忘记mysql密码的解决办法--针对windows系统

    C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.5\bin C:\Program Files\MySQL\MySQ ...

  6. elasticsearch（二） 之 elasticsearch安装

    目录 elasticsearch 安装与配置 安装java 安装elastcsearch 二进制安装(tar包) 在进入生产之前我们必须要考虑到以下设置 增大打开文件句柄数量 禁用虚拟内存 合适配置的 ...

  7. 为镜像添加SSH服务

    操作Docker容器介绍了一些进入容器的办法,比如attach.exec等命令,但是这些命令都无法解决远程管理容器的问题.因此,当需要远程登录到容器内进行一些操作的时候,就需要SSH的支持了. 如何自 ...

  8. 自定义针对Product Key处理的TextBox

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  9. Linux套接字和I/O模型

    目录 1.       socket套接字的属性.地址和创建 2.       如何使用socket编写简单的同步阻塞的服务器/客户端 3.       理解Linux五种I/O模型 1.socket ...

  10. SpringBoot入门 (五) 数据库访问之spring data jpa

    本文记录学习使用spring data jpa访问数据库 一 什么是Spring Data JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java ...