• 1，基本标签

<html>：html文档的根元素，可以指定一个xmlns属性，值只能是http://www/w3.org/1999/xhtml。

<body>：页面主体部分

<head>：页面开始部分

<style>：CSS定义

<h1>到<h6>：定义标题一到标题六。数字越大，显示的标题越小

<p>：段落

<br />：换行

<hr />：水平线

<!--  -->：注释

<div>：文档中的节

<span>：也是文档中的节





ok，html的常用标签就是上面这些，有3个标签<p><span><div>经常用到，他们都可以作为其他内容的容器。这里要注意他们之间的区别：

1，<span>不会换行，<div>和<p>都会换行，而且<p>段落与段落之间的默认间距更大。

2，<p>可以包含<span>，但是<span>不能包含<p>，但是<div>可以包含所有的东西，实际中<div>也使用最多。



以下是一份包含上面标签的html：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Html基本标签</title>

</head>

<body>

	<!-- 标题一到标题6输出文本 -->

	<h1>林肯公园</h1>

	<h2>林肯公园</h2>

	<h3>林肯公园</h3>

	<h4>林肯公园</h4>

	<h5>林肯公园</h5>

	<h6>林肯公园</h6>

	<!-- 输出换行 -->

	<br />

	<!-- 输出一条水平线 -->

	<hr />

	<!-- 使用span定义3个节 -->

	<span>不换行</span><span>不换行</span><span>不换行</span>

	<!-- 使用div定义3个节 -->

	<div>换行</div><div>换行</div><div>换行</div>

	<!-- 使用p定义3个段落 -->

	<p>换行</p><p>换行</p><p>换行</p>

</body>

</html>

  • 2，文本格式化标签

<b>：粗体文本

<i>：斜体文本

<em>：强调文本

<big>：大号字体文本

<strong>：粗体文本

<small>：小号字体文本

<sup>：上标文本

<sub>：下标文本

<bdo>：定义文本的显示方向。这个标签可以指定dir属性，该属性值只能是ltr和rtl。

以下是一份包含上面标签的html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>文本格式化标签</title>

</head>

<body>

	<span><b>加粗的文本</b></span><br />

	<span><i>斜体的文本</i></span><br />

	<span><b><i>加粗的斜体文本</i></b></span><br />

	<span><em>被强调的文本</em></span><br />

	<span><big>大号字体文本</big></span><br />

	<span><small>小号字体文本</small></span><br />

	<span><strong>加粗的文本</strong></span><br />

	<span>普通的文本<sup>上标文本</sup></span><br />

	<span>普通的文本<sub>下标文本</sub></span><br />

	<bdo dir="ltr">指定文本内容从左到右，left to right么</bdo><br />

	<bdo dir="rtl">指定文本内容从右到左，right to left</bdo>

</body>

</html>

  • 3，超链接

<a>：超级链接。页面使用超链接，与网络中的另外一个资源保持关联，当用户点击页面上的超级链接时，浏览器会定义到该浏览器链接所指的资源。关于这个标签有2个属性很重要：

href：指定超链接所关联的另一个资源。这里的属性值可以是相对路径，也可以是绝对路径。指定了这个属性，超级链接位置上鼠标移过去就变成了手势图标了，而且字体也变色了。

target：指定使用框架集中的哪一个框架来加载资源。一般有_self（自身），_blank（新窗口），_top（顶级框架），_parent（父框架）

注意：当href的属性值指定的是绝对路径时，属性值就是一个URL。关于url不多说了，他的语法规范是：

scheme://host.domain:port/path/filename





<a>标签还可以生成一个命名锚点。命名锚点用于在html中生成一个定位点，这样子允许超级链接链接到指定页面的该定位点。通俗点就是说要是没有锚点的话每次页面链接过去呢，都是在最上面开始显示，假如一个页面很长的话，那么我们就要自己去拖拉和滚动。定位了一个锚点呢，就是页面一下子就跳到了指定的这个地方了，不用再拖拉页面了。

比如<a name="linkin">  这里的name属性就是说该命名锚点的名称

<a href="Linkin.html#linkin"> 这里就是说在url资源后指定了锚点名，锚点名和url资源之间用#隔开。



以下是一份包含上面标签的html：



 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>超链接</title>

</head>

<body>

	<a href="http://www.baidu.com">使用绝对路径打开百度(自己的窗口)</a><br />

	<a href="http://www.baidu.com" target="_blank">使用绝对路径打开百度(新的窗口)</a><br />

	<a href="Park.html">使用相对路径打开自己的文件</a><br />

	<a href="Park.html#linkin">直接定位到linkin锚点</a>

</body>

</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Park.html</title>

</head>

<body>

	<h1>这里是另外的一个页面</h1>

	<hr />

	<h1>这里是另外的一个页面</h1>

	<hr />

	<a name="linkin">这里定义了一个锚点</a>

</body>

</html>

三、Html常用标签的更多相关文章

  1. jsp学习--JSP运行原理,九大隐式对象和JSP常用标签

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  2. Python 44 前端概述 、三剑客 、常用标签与分类

    1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML:   .htm .html   内容 CSS:   .css   效果 JS:   .js   行为 2.简述三剑客的主要 ...

  3. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  4. 一、HTML概述 二、web相关的概念 三、HTML的常用标签

    一.HTML概述###<1>概念 HTML:Hypertext Markup Language,超文本 标记语言,用来描述网页的一种语言. 非编程语言,由浏览器直接解释运行. ###< ...

  5. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  6. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  7. Struts2常用标签

    Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...

  8. dedecms 常用标签调用

    /*------------------单个ip调用-------------------*/ {dede:type typeid="12"} <a title=" ...

  9. HTML之一天学会html(常用标签+网页架构)

    1.  网页文件的创建 新建一个文本文件,将其命名为xxx.html或者xxx.htm(注意后缀名) 2.  简单的html页面的编写 在网页中都是通过标签来指定相应的显示内容,所有的页面内容都必须在 ...

随机推荐

  1. ajax写登录页面

    静态配置 STATICFILES_DIRS = ( os.path.join(BASE_DIR,'my_blog','static'), ) AUTH_USER_MODEL = "app01 ...

  2. Windows内核函数

    字符串处理 在驱动中一般使用的是ANSI字符串和宽字节字符串,在驱动中我们仍然可以使用C中提供的字符串操作函数,但是在DDK中不提倡这样做,由于C函数容易导致缓冲区溢出漏洞,针对字符串的操作它提供了一 ...

  3. ETL实践--Spark做数据清洗

    ETL实践--Spark做数据清洗 上篇博客,说的是用hive代替kettle的表关联.是为了提高效率. 本文要说的spark就不光是为了效率的问题. 1.用spark的原因 (如果是一个sql能搞定 ...

  4. web安全与防御

    xss攻击(跨站脚本) 是网站应用程序的安全泄露攻击,是代码注入的一种.它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响. 攻击原理 其特点是不对服务器端造成任何伤害,而是通过一些正 ...

  5. python网站目录扫描器2.0版

    改进了上次乱的要死的. #网站目录扫描器2.0的脚本 import sys import requests import time print('[+]扫描中') def gfc(): f=open( ...

  6. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  7. Prime Ring Problem(dfs水)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1016 Prime Ring Problem Time Limit: 4000/2000 MS (Jav ...

  8. c++(查找)

    无论是数据库,还是普通的ERP系统,查找功能数据处理的一个基本功能.数据查找并不复杂,但是如何实现数据又快又好地查找呢?前人在实践中积累的一些方法,值得我们好好学些一下.我们假定查找的数据唯一存在,数 ...

  9. 《TensorFlow深度学习应用实践》

    http://product.dangdang.com/25207334.html 内容 简 介 本书总的指导思想是在掌握深度学习的基本知识和特性的基础上,培养使用TensorFlow进行实际编程以解 ...

  10. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...