三、Html常用标签

  • 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>

时间: 2024-10-10 21:13:16

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

HTML基础(三)常用标签-by Haley

一.注释文字 语法:<!--注释文字 --> 二.<h1> - <h6> 标签 <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> 三.<hr> 标签 在 HTML 页面中创建水平线 &l

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

一:前端概述 前端指的就是页面的设计和给用户带来极高的用户体验 前端开发技术栈分为三大类:HTML .CSS .JavaScript HTML(Hyper Text Markup Language): 1 超文本标记语言 2 负责完成页面的结构 3 文件后缀:start.html v_hint:标注,一些要注意的点("超文本"就 是指页面内可以包含图片,连接,音乐,程序等非文字元素) CSS(Cascading Style Sheet): 1 级联样式表 2 负责页面的风格设计,样式和

第2天:HTML常用标签

今天学完主要对所学知识点进行了整理. 一.超链接ahref:www.baidu.com(跳转页面):id名(锚点跳到相应div位置):01.rar(压缩包) target:_blank(新窗口打开):_self(当前窗口打开)二.文件路径绝对路径:(1)线上:线上绝对路径(2)线下:完整路径 相对路径:src=../img/bg.jpg(../是上一级目录) 三.HTML常用标签section :版块 用于划分页面上的不同区域,或者划分文章里不同的节 header :页面头部或者版块(secti

Html(1)——常用标签

Html常用标签 一.基本标签 <!DOCTYPE html>:引用官方的DTD文件--对标签的使用进行了一定的约束 <html>:根元素标签,成对出现,代表一个html文档的开始和结束 <head>:头部标签,成对出现 <body>:主体标签,成对出现,大部分内容都放在该标签下表示 元信息是信息的信息,用来描述信息的结构,语义,用途和用法等等.收到数据的浏览器可以根据元信息确定服务器发来 的是什么内容,预料有什么数据,确知是否接收完整的数据,以及过程中是否

Day47:HTML(简介及常用标签)

一.HTML简介 html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则. 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性). 静态网页文件扩展名:.html 或 .htm. HTML 不是一种编程语言,而是一种标记语言 (markup language).HTML 使用标记标签来描述网页. html

struts2常用标签

Struts2常用标签总结 一 介绍 1.Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的代码复用.Struts2允许在页面中使用自定义组件,这完全能满足项目中页面显示复杂,多变的需求. Struts2的标签库有一个巨大的改进之处,struts2标签库的标签不依赖于任何表现层技术,也就是说strtus2提供了大部分标签,可以在各种表现技术中使用.包括最常用的jsp页面,也可以说Veloc

49、html基础认识&amp;常用标签(1)

从今天期我们进入前端的学习,先学习html,没有任何复杂难懂的逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) sock.listen(5) while True: print("server is working.....")

HTML5常用标签总结

一.常用的标签 <h1>~<h6> 表示是一个标题 <p> 段落标签 <hr/> 水平线标签 <br/> 换行标签 <sub> 下标 <sup> 上标 <pre> 原样标签: 原样标签会保留空格和换行符. <ol> <li> 有序的列表标签. <ul> <li> 无序的列表标签. 项目列表标签(dl dt dd) 行内标签(span) 块标签<div>

HTML常用标签及简单网站做法(5.6)

  昨天刚学的东西基本上融化了,今天有学习了很多的HTML通用标签,理解慢一点,有些东西需要静下心来慢慢理解.昨天学的东西觉得自己能理解了,今天一做任务,才发现自己运用到实践中的不多,很多东西还是不太理解,做起来很慢,看到别的同学做的很快,告诉自己不要着急,用心去理解,去一点点弄明白.明天休息,看来自己休息不了了,把自己还不熟练的东西去弄明白.下面是今天学习的一些通用标签,我做了一下总结: HTML常用标签: 一:<a></a> (1)超级链接:<a href="U