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. javascript——后台传值map类型转换成json对象

    前端需要对后端传过来的值进行解析之后再展示,而后端传过来的值可能是各种类型的,一般情况下要么和后端沟通下让他直接传给我们需要的类型,这个,我一般直接自己转,这次后端传回来一个map类型的对象,我转来转 ...

  2. iOS-构建自己的代码块【提高编码效率-Xcode代码块】

    前言 2018年3月1日 农历正月十四 星期四 不知怎么地,一大早上班就想写博客: Xcode代码块 开发中,都不想写过多代码,然后就会用这种方法,去简化代码,包括MVVM框架,它也体现出来了去简化C ...

  3. 【洛谷P4719】动态dp 动态dp模板

    题目大意:给你一颗$n$个点的树,点有点权,有$m$次操作,每次操作给定$x$,$y$,表示修改点$x$的权值为$y$. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 数据范围:$n,m≤ ...

  4. NOIP上机测试注意事项

    由于近期模拟题原地**次数较多,故写一篇警示文 1,头文件 1.1正式比赛中,反正我不敢用bits/stdc++.h. 1.2正式比赛中,建议打出以下十个库 #include<iostream& ...

  5. POJ 2291

    #include<iostream> #include<stdio.h> using namespace std; int compare(void const *,void ...

  6. CPM（Cluster Percolation method）派系过滤算法

    一.概念 (1)完全子图/全耦合网络/k-派系:所有节点全部两两相连 图1 这些全耦合网络也成为派系,k-派系表示该全耦合网络的节点数目为k 1)k-派系相邻:两个不同的k-派系共享k-1个节点,认为 ...

  7. 腾讯云域名申请+ssl证书申请+springboot配置https

    阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...

  8. Linq基础知识小记二

    书写Linq查询有两种方法,第一种是通过方法语法(也就是扩展方法),第二种是查询表达式语法. 1.方法语法 方法语法就是通过扩展方法和Lambda表达式来创建查询 (1).链式查询 这种查询方式很多语 ...

  9. Aop学习笔记系列一

    一.Aop解决了什么问题? 1.在说解决了什么问题之前,先介绍一些关键的知识点 a.功能需求:功能需求指项目中的增值需求,比如业务逻辑,UI,持久化(数据库). b.非功能需求:项目中次要的,但却不可 ...

  10. ubuntu16.04更改源为阿里源

    一.通过系统更换源 第一步:备份原来的源文件cd /etc/apt/  然后会显示下面的源文件sources.list输入命令sudo cp sources.list sources.list.bak ...