html1

最新推荐文章于 2024-06-29 16:10:20 发布

pinkowonote

最新推荐文章于 2024-06-29 16:10:20 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/pinkowonote/article/details/105385234

版权

文章目录

一、html（HyperText Markup Language）超文本标记语言定义、格式
- 1. title标签
- - 实例①：
- 2. br标签
- - 实例①：
- 3. p标签【不赞成使用】
- - 实例①：
二、文字标签
- 1. font标签【不赞成使用】
- - 实例①：
三、注释标签
- 1. !-- --标签
- - 实例①：
四、标题标签
- 1. h1 ~ h6 标签
- - 实例①：
五、水平线标签
- 1. hr标签【不赞成使用】
- - 实例①：
六、特殊字符
- - 实例①
七、列表标签
- （一）定义列表标签
- （二）有序列表标签
- （三）无序列表标签
八、图像标签
- 1. img标签
九、图片绝对路径、相对路径
十、案例一：列表标签（商品列表）
- 实例①：
十一、超链接标签（链接资源 *****）
- 1. a标签
- 2. pre标签
- - 实例①：
  - 实例②：如何使用pre标签对空行和空格进行控制
- 3. address标签
- - 实例①：Example.com 的联系信息
- 4. footer标签
- - 实例①：文档中的页脚部分
十二、表格标签
- 1. table标签

一、html（HyperText Markup Language）超文本标记语言定义、格式

不是一种编程语言，是一种描述性的标记语言，用于描述超文本（超出文本的范畴）中内容的显示方式。：字体什么颜色，大小等。
Html是最基础的网页语言。
Html是通过标签（标记）来定义的语言，代码都是由标签所组成。：<标签名称>：<body>
基本格式：

<html>
		<head><title></title></head>
		<body></body>
</html>

Html代码由<html>开始</html>结束。
html：放在html文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的html标记时也一样会进行解析。
浏览器内置了html语言的解析器.
可以设置默认打开浏览器:工具—文件夹选项-文件类型
里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
head：头标记，放置关于此html文件的信息，如提供索引，定义css等。
title：标题标记，包含在head标记内，它的作用是设定网页的标题。（标签栏或标题栏）

1. title标签

实例①：

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
 hello world！
 </body>
</html>

体部分是真正存放页面数据的地方。
body：主体标记，网页所需要显示的内容都放在这个标记内。
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

2. br标签

<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）
在 HTML 中，<br> 标签没有结束标签。
在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br />
请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。
请使用 <br> 来输入空行，而不是分割段落。

实例①：

<html lang>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
	To break<br />lines<br />in a<br />paragraph
	<p>这是段落。</p>
	<p>段落元素由 p 标签定义。</p> 
 </body>
</html>

<br>标签的clear属性？？？
通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。
但是有时候，您也许希望当前的文本流在当前左边或右边的内联表格或图像的下面一行继续输出。
HTML 4 和 XHTML 通过 <br> 标签提供了这样的功能。它可以具有三个值：left、right 或者 all，每个值都代表一个边界或两边的边界。当指定的边界没有图像时，浏览器才会继续输出文本。
一般情况下，文本流中的其他行会在内联图像的底部显示，除非图形的 <img> 标签被设置为左对齐或右对齐（对于 <table> 标签也一样）。因此，<br> 标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。
实例
？

3. p标签【不赞成使用】

<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
可以只在块（block）内指定段落，也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。
总的来讲，这意味着段落可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，等等。
从技术角度将，段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上，多数浏览器都忽略了这个限制，它们会把段落作为所含元素的内容一起格式化。
<p>标签的align属性
属性：align
值：left、right、center、justify
描述：规定段落中文本的对齐方式。

实例①：

？

想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接
属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
html里不区分大小写，java里区分
html操作思想：网页中有很多数据，不同的数据需要不同的显示效果，这个时候需要使用标签将要操作的数据封装起来，通过修改标签的属性值，实现标签内数据样式的变化。一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化

二、文字标签

1. font标签【不赞成使用】

规定文本字体、大小和颜色
<font>标签的属性
● color：rgb(x,x,x)、#xxxxxx（使用十六进制数表示）、colorname：规定文本的颜色。
RGB三原色：红，绿，蓝。
用2位16进制的数据表示每种颜色的取值范围。取值0~255共256种颜色。255 = 1516+151 = ff。每种颜色范围00~ff
#rrggbb
#000000:黑色
#ffffff:白色
#ff0000:红色
#00ff00:绿色
#0000ff:蓝色
● face：font_family：规定文本的字体。
如果不清楚有什么字体，可以通过打开记事本：菜单栏—格式—字体就可以看到系统提供的各种字体：宋体，楷书，隶书，黑体等。
● size：number：规定文本的大小。（取值范围：1~7，超出7默认还是7号）

实例①：

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
 </body>
</html>

三、注释标签

1. !-- --标签

注释标签用于在源代码中插入注释。
注释不会显示在浏览器中。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）

实例①：

<html>
<head>
  <title>这是一个标题</title>
 </head>
 <body>
	<!--这是一段注释。注释不会在浏览器中显示。-->
	<p>这是一段普通的段落。</p>
 </body>
</html>

注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。？？？

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

四、标题标签

1. h1 ~ h6 标签

<h1> ~ <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。同时它会自动换行。
规定标题中文本的排列。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h1> ~ <h6>标签的align属性【不推荐使用】
● align：left、center、right、justify：规定标题中文本的排列。

实例①：

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
	<h1  align="center">This is heading 1</h1>
	<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
 </body>
</html>

五、水平线标签

1. hr标签【不赞成使用】

<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
在 HTML 中，<hr> 标签没有结束标签。
在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />
<hr>标签的属性
● align：center、left、right：规定 hr 元素的对齐方式。
● noshade：noshade ：规定 hr 元素的颜色呈现为纯色。？？？
● color：rgb(x,x,x)、#xxxxxx（使用十六进制数表示）、colorname：规定文本的颜色。
RGB三原色：红，绿，蓝。
用2位16进制的数据表示每种颜色的取值范围。取值0~255共256种颜色。255 = 1516+151 = ff。每种颜色范围00~ff
#rrggbb
#000000:黑色
#ffffff:白色
#ff0000:红色
#00ff00:绿色
#0000ff:蓝色
● size：pixels ：规定 hr 元素的高度（厚度）。（取值范围：1~7，超出7默认还是7号）
width：pixels、%：规定 hr 元素的宽度。

实例①：

<html>
 <head>
  <title>这是一个标题</title>
<body>
	<p>hr 标签定义水平线：</p>
	<hr size = "7" noshade = "noshade" />
	<p>这是段落。</p>
	<hr size = "7" color = "pink" />
	<p>这是段落。</p>
	<hr size = "7" />
</body>

六、特殊字符

如果要在网页上显示一些特殊符号,比如 <，>，&等。因为这些符号在代码中会被浏览器识别并解释，所以用特殊方式表示
【<】 : <
【>】 : >
【&】 : &
【空格】：
【双引号】："
【注册符®】：®
【版权符©】： ©

实例①

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  &lt;html&gt;:是一个标签
 </body>
</html>

七、列表标签

（一）定义列表标签

1. dl标签

<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

2. dt标签

<dt> 标签定义了定义列表中的项目（即术语部分）。

3. dd标签

<dd> 在定义列表中定义条目的定义部分。

实例①：

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
  <dl>
   <dt>计算机</dt>
	<dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
	<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
 </body>
</html>

（二）有序列表标签

1. ol标签

<ol> 标签定义有序列表。
<ol> 标签的属性（compact属性【不赞成使用】）
● compact：compact：规定列表呈现的效果比正常情况更小巧。
● reversed：reversed：规定列表顺序为降序。(9,8,7…)
● start：number：规定有序列表的起始值。
● type： 1、A、a、I、i：规定在列表中使用的标记类型。

2. li标签（没有看到有代码例子使用li标签里的属性？？？）

<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
<li> 标签的属性【不赞成使用】
● type：A、a、I、i、1（缺省值）
● disc：square、circle

实例①：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
   <h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  
 </body>
</html>

实例②

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 </body>
</html>

（三）无序列表标签

1. ul标签

<ul> 标签定义无序列表。
请使用样式来定义列表的类型。
<ul> 标签的属性【不赞成使用】
● compact：compact：规定列表呈现的效果比正常情况更小巧。
● type：disc（缺省值）、square、circle：规定列表的项目符号的类型。

2. li标签

……

实例①：

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
<h4>Disc 项目符号列表：</h4>
<ul>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  
 </body>
</html>

八、图像标签

1. img标签

img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性和 alt 属性。
<img> 标签的属性值
● 必需的属性
alt：text：规定图像的替代文本。(在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。)
src：URL：规定显示图像的 URL。
● 可选的属性
【不推荐使用】align：top、bottom、middle、 left、right：规定如何根据周围的文本来排列图像。
【不推荐使用】border：pixels：定义图像周围的边框。
height： pixels、%：定义图像的高度。
【不推荐使用】hspace：pixels：定义图像左侧和右侧的空白。
ismap：URL：将图像定义为服务器端图像映射。
longdesc：URL：指向包含长的图像描述文档的 URL。
usemap：URL：将图像定义为客户器端图像映射。
【不推荐使用】vspace：pixels：定义图像顶部和底部的空白。
width：pixels、%：设置图像的宽度。

实例①：插入图片（文件夹、服务器的图片）

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
<p>
一幅图像：
<img src="C:\Users\XXXXXXX\Desktop\girl.jpg" width="300" height="300" alt = "图片加载不出"/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2318642482,724523696&fm=11&gp=0.jpg" width="300" height="300" alt = "图片加载不出"/>
</p>

<p>
一幅动画图像：
<img src="C:\Users\XXXXXXX\Desktop\run.gif" width="300" height="300" alt = "图片加载不出"/>
</p>

<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
 </body>
</html>

实例②：背景图片

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body background="C:\Users\XXXXXXX\Desktop\run.gif">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>
 </body>
</html>

实例③：如何在文字中排列图像

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
<h2>bottom(缺省值)</h2>
<p>ZZZZZZZ <img src="C:\Users\从前有朵向日葵\Desktop\run.gif" width="150" height="150" alt = "图片加载不出" align="bottom">ZZZZZZZ</p>

<hr/>

<h2>middle</h2>
<p>ZZZZZZZ <img src ="C:\Users\从前有朵向日葵\Desktop\run.gif" width="150" height="150" alt = "图片加载不出" align="middle"> ZZZZZZZ</p>

<hr/>

<h2>top</h2>
<p>ZZZZZZZ <img src ="C:\Users\从前有朵向日葵\Desktop\run.gif" width="150" height="150" alt = "图片加载不出" align="top"> ZZZZZZZ</p>
 </body>
</html>

实例④：如何使图片浮动至段落的左边或右边。

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>这是一个标题</title>
 </head>
 <body>
<p>
<img src="C:\Users\XXXXXXX\Desktop\run.gif" width="30" height="30" alt = "图片加载不出" align = "left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<hr/>

<p>
<img src="C:\Users\XXXXXXX\Desktop\run.gif" width="150" height="150 alt = "图片加载不出" align = "right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
 </body>
</html>

实例⑤：如何将图像作为一个链接使用

点击run.gif图片
→

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
	<p>
	您也可以把图像作为链接来使用：
		<!--<a> 标签定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性，它指示链接的目标。-->
		<a href="https://cn.bing.com/?FORM=Z9FD1">
			<!--img的border属性：定义图像周围的边框-->
			<img border="1" src="C:\Users\XXXXXXX\Desktop\run.gif" width="300" height="300" alt = "图片加载不出"/>
		</a>
	</p>
 </body>
</html>

实例⑥：如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

点击粉色圆圈→

绿色圆圈→

棕色圆圈→

<html>
 <head>
  <title>这是一个标题</title>
 </head>
 <body>
	<p>请点击图像上的星球，把它们放大。</p>

		<!--<img>标签usemap属性：将图像定义为客户器端图像映射。-->
		<img
		src="C:\Users\XXXXXXX\Desktop\colorpop.jpg"
		border="0" usemap="#colorpopmap"
		alt="Colorpop" />

		<!--
		 ● <map>标签：定义一个客户端图像映射。
		 ● 图像映射（image-map）指带有可点击区域的一幅图像。
		 ● id：unique_name：为 map 标签定义唯一的名称。
		 ● name：mapname：为 image-map 规定的名称。
		 ● area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
		 ● <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。-->
		<map name="colorpopmap" id="colorpopmap">
			
			<!--
			 ● <area> 标签：定义图像映射中的区域
			 ● 图像映射指得是带有可点击区域的图像。
			 ● area 元素总是嵌套在 <map> 标签中。
			 ● <area> 标签target属性：规定在何处打开 href 属性指定的目标 URL。
			 ● <img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。-->
			<area
			shape="circle"
			coords="55,55,50"
			href ="C:\Users\XXXXXXX\Desktop\Pink.jpg"
			target ="_blank"
			alt="Pink" />

			<area
			shape="circle"
			coords="200,50,50"
			href ="C:\Users\XXXXXXX\Desktop\Green.jpg"
			target ="_blank"
			alt="Green" />

			<area
			shape="circle"
			coords="155,125,50"
			href ="C:\Users\XXXXXXX\Desktop\Brown.jpg"
			target ="_blank"
			alt="Brown" />
		
		</map>

		<!--<b> 标签规定粗体文本。-->
	<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
 
 </body>
</html>

九、图片绝对路径、相对路径

层级相同
页面文件.html 和图片.jpg 在同一目录页面下：
C:\hello\页面文件.html
C:\hello\图片.jpg
图片：
绝对路径：C:\hello\图片.jpg
相对路径：图片.jpg
图片在页面层级之下
C:\hello\页面文件.html
C:\hello\HTML\图片.jpg
图片：
绝对路径：C:\hello\HTML\图片.jpg
相对路径：HTML\图片.jpg
图片在页面层级之上
【…/】：页面文件.html所在目录的上层目录
C:\hello\HTML\页面文件.html
C:\hello\图片.jpg
图片：
绝对路径：C:\hello\图片.jpg
相对路径：…/图片.jpg
（【…/】：表示【页面文件.html】所在目录【HTML】的上层目录【hello】，即C:\hello\，所以相对路径可以在后面直接加【图片.jpg】）

十、案例一：列表标签（商品列表）

实例①：

<html>
 <head>
  <title>易趣网 商品列表</title>
 </head>
 <body>
	<img src = "C:\Users\XXXXXXX\Desktop\images\header.jpg"/>
	
	<p>首页 > 中国馆 > 女装/女士精品 > 所有商品</p>
	
	<img src = "C:\Users\XXXXXXX\Desktop\images\list_header.jpg"/>
	
	<h1>热点推荐</h1>
	
	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_01.jpg"/></dt>
		<dd>一口价：49.00</dd>
		<dd>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
	</dl>

	<img src = "C:\Users\XXXXXXX\Desktop\images\line.gif"/>

	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_02.jpg"/></dt>
		<dd>一口价：35.00</dd>
		<dd>2011新款T恤短袖 t恤女短袖 影子熊猫</dd>
	</dl>

	<img src = "C:\Users\XXXXXXX\Desktop\images\line.gif"/>

	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_03.jpg"/></dt>
		<dd>一口价：48.00</dd>
		<dd>钉珠蝴蝶结秋冬背心呢料裙911 -4366</dd>
	</dl>

	<img src = "C:\Users\XXXXXXX\Desktop\images\line.gif"/>

	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_05.jpg"/></dt>
		<dd>一口价：88.00</dd>
		<dd>2011 春装 新款 女装 假两件拼接修身包臀裙 洋装 长袖连衣裙</dd>
	</dl>

	<img src = "C:\Users\XXXXXXX\Desktop\images\line.gif"/>

	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_04.jpg"/></dt>
		<dd>一口价：169.00</dd>
		<dd>卖家推荐 2011春装新款 时尚韩版 假两件式 百褶 连衣裙 0210806 热销款</dd>
	</dl>

	<img src = "C:\Users\XXXXXXX\Desktop\images\line.gif"/>

	<dl>
		<dt><img src = "C:\Users\XXXXXXX\Desktop\images\photo_06.jpg"/></dt>
		<dd>一口价：98.00</dd>
		<dd>波西米亚 民族风格 扎染珠片 多穿裙 沙滩</dd>
	</dl>
	Copyright &copy; 2010 易趣版权所有
 </body>
</html>

十一、超链接标签（链接资源 *****）

超链接（hyper text），或者按照标准叫法称为锚（anchor），是使用 <a> 标签标记的，可以用两种方式表示。锚的一种类型是在文档中创建一个热点，当用户激活或选中（通常是使用鼠标）这个热点时，会导致浏览器进行链接。浏览器会自动加载并显示同一文档或其他文档中的某个部分，或触发某些与因特网服务相关的操作，例如发送电子邮件或下载特殊文件等。锚的另一种类型会在文档中创建一个标记，该标记可以被超链接引用。还有一些与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。
锚的这两种类型都使用同样的标签；也许这就是它们拥有同样的名称的原因。
但是我们发现，如果将它们区分开，把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”，那么您将更容易理解这两种类型的锚。

1. a标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：

您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。
如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
<a>标签的属性
【HTML5 中不支持】charset：char_encoding：规定被链接文档的字符集。
【HTML5 中不支持】coords：coordinates：规定链接的坐标。
download：filename：规定被下载的超链接目标。
href：URL：规定链接指向的页面的 URL。
<a herf = "#">：“#”是默认当前页面，可以把#换成想跳转的页面。其实是无意义的，页面也不会刷新。
hreflang：language_code：规定被链接文档的语言。
media：media_query：规定被链接文档是为何种媒介/设备优化的。
【HTML5 中不支持】name：section_name：规定锚的名称。
rel：text：规定当前文档与被链接文档之间的关系。
rev：text：HTML5 中不支持。规定被链接文档与当前文档之间的关系。
【HTML5 中不支持】shape：default、rect、circle、poly：规定链接的形状。
target：_blank（在一个新窗口打开）、_parent、_self（缺省值，在当前页打开）、_top、#（不会产生任何效果）、framename：规定在何处打开链接文档。
type：MIME type：规定被链接文档的的 MIME 类型。

实例①：

点击相对路径→

点击绝对路径→

<html>
 <head>
  <title>Document</title>
 </head>
<body>
<p><a href="my商品列表.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
 </body>
</html>

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
英文名：anchor
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。
对于锚点的访问有两种方法：
● 一种是利用超链接标签<a></a>制作锚点链接，主要用于页面内的锚点访问（您可以使用 id 属性来替代 name 属性，命名锚同样有效。其实锚点只需name就可以，加id是为了让它兼容性更好。href的值要跟name \ i d 一致，前面必须加"#"）
○ <a name="top">这里是TOP部分</a>
<a href="#top">点击我链接到TOP</a>
○ <a name="content">这里是CONTENT部分</a>
<a href="#content">点击我链接到CONTENT</a>
○ <a name="foot">这里是FOOT部分</a>
<a href="#foot">点击我链接到FOOT</a>
● 另一种方式是直接在页面地址后面加锚点标记，主要用于不同页面之间的锚点访问
○ 假如本页面的地址是http://文件路径/index.html，要访问foot锚点只要访问如下链接即可
http://文件路径/index.html#foot

实例②：如何使用链接跳转至文档的另一个部分

点击链接

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<!--name规定锚的名称-->
<h2><a name="C4" id = "C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
 </body>
</html>

实例③：如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

在这里插入图片描述
点击链接

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
 </body>
</html>

实例④：如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

点击链接

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <!--target规定在何处打开链接文档。-->
  <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
 </body>
</html>

原文地址：https://www.rapidtables.com/web/html/mailto.html

什么是mailto链接？
mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。假如您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息
参数如下：

参数	描述
mailto:name@email.com	e-mail recipient address
cc=name@email.com	carbon copy e-mail address
bcc=name@email.com	blind carbon copy e-mail address
subject=subject text	e-mail的题目
body=body text	e-mail的内容
?	和浏览器地址操作一样，第一个参数符合是？
&	其他参数符号是&

仅仅填写发送邮件的地址！
<a href="mailto:hahahah@126.com">给hahahah发送邮件</a>

给hahahah发送邮件

有邮件地址和邮件主题的链接
<a href="mailto:hahahah@126.com?subject=The%20subject%20of%20the%20mail">给hahahah发送邮件</a>
%20 是浏览器对于空格的编码

给hahahah发送含有主题的邮件

各个参数都有的邮件，代码如下：
<a href="mailto:hahahah@126.com?cc=name2@rapidtables.com&bcc=name3@rapidtables.com &subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> 发送Email 用cc, bcc, 主题和内容</a>

发送Email 用cc, bcc, 主题和内容

实例⑤：跳出框架

很多网页都是框架结构的，在很多的情况下会通过按钮点击事件或链接，跳出框架转到其它界面。例如说点击“注销登录”返回到登录界面。
一、通过运行脚本跳出框架有以下几种写法：
1.<script language = javascript>window.open('Login.aspx','_top')</script>
2.<script language = javascript>window.open('Login.aspx','_parent')</script>
3.<script language = javascript>window.parent.location.href='login.aspx'</script>
4.Response.Write("<script>window.parent.opener=null;window.top.close();</script>")
Response.Write("<script>window.open('index.aspx','');</script>")
这种方法会先关闭原框架窗口，再重新打开一个新的窗口。这在很多功能界面对浏览器进行了改变设置，而回到登陆界面又用缺省设置的情况下适用。
二、链接跳出框架
这种情况就很简单了，加上 target="_top" 属性就可以了。

<html>
<body>
<p>被锁在框架中了吗？</p> 
<a href="网址" target="_top">请点击这里！</a> 
</body>
</html>

2. pre标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

实例①：

点击必应浏览器链接

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <pre>
&lt;html&gt;

&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=<a href="https://cn.bing.com/?FORM=Z9FD1">必应浏览器</a>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>
 </body>
</html>

制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 “<” 代表 “<”，">" 代表 “>”，"&" 代表 “&”。
我们甚至把 <pre> 标签与 <code> 标签结合起来使用，以获得更加精确的语义。
pre标签的属性：
【不建议使用】width：number：定义每行的最大字符数（通常是 40、80 或 132）。

实例②：如何使用pre标签对空行和空格进行控制

<html>
<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

3. address标签

<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
<address> 元素通常连同其他信息被包含在 <footer> 元素中。

实例①：Example.com 的联系信息

点击链接

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

4. footer标签

<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
<footer> 元素内的联系信息应该位于 <address> 标签中。

实例①：文档中的页脚部分

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

</body>
</html>

十二、表格标签

1. table标签

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<table> 标签的属性：
【不赞成使用】align：left、center、right：规定表格相对周围元素的对齐方式。
【不赞成使用】bgcolor：rgb(x,x,x)、#xxxxxx、colorname：规定表格的背景颜色。
border：pixels：规定表格边框的宽度。
cellpadding：pixels、%：规定单元边沿与其内容之间的空白。
cellspacing：pixels、%：规定单元格之间的空白。
frame：void、above、below、hsides、lhs、rhs、vsides、box、border：规定外侧边框的哪个部分是可见的。
rules：none、groups、rows、cols、all：规定内侧边框的哪个部分是可见的。
summary：text：规定表格的摘要。
width：%、pixels：规定表格的宽度。

实例①：一个简单的 HTML 表格

<html>
<body>

<h4>两行两列：（具有表头）</h4>
<table border="1">
  <!--tr 元素定义表格行-->
  <tr>
    <!--th 元素定义表头-->
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <!--td 元素定义表格单元-->
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<h4>两行三列：（无表头）</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

实例②：垂直的表头

<html>
 <head>
  <title>Document</title>
 </head>
 <body>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

 </body>
</html>

实例③：单元格间距(Cell spacing)

cellspacing：规定单元格之间的空白。
border：规定表格边框的宽度。

<!DOCTYPE html>
<html>
 <head>
  <title>Document</title>
 </head>
 <body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
 </body>
</html>

实例④：框架(frame)属性

frame：规定外侧边框的哪个部分是可见的

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
  <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<hr/>

<p>Table with frame="box":</p>

<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<hr/>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<hr/>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<hr/>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<hr/>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
 </body>
</html>

实例⑤：用 “align” 属性排列单元格内容

align：规定表格相对周围元素的对齐方式。
width：规定表格的宽度。

<html>

<body>

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

</body>
</html>

实例⑥：如何向表格添加背景

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
 <h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景图像：</h4>
<table border="1" 
background="E:\XXX\images\run.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
  
  <h4>单元背景：</h4>  
<table border="1" width = "400">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="E:\XXX\images\run.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>
 </body>
</html>

实例⑦：单元格填充(Cell padding)

<html>
<body>
<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
</body>
</html>

实例⑧：表格内的标签

<html>
<body>
<table border="1">

<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>

<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

实例⑨：跨行或跨列的表格单元格

<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

实例⑩：带有标题的表格

<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

实例⑾：表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
浏览器可能会这样显示：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。
我们的技巧是在单元中插入一个 no-breaking 空格。
no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。
no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。

pinkowonote

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html1

一、html（HyperText Markup Language）超文本标记语言定义、格式不是一种编程语言，是一种描述性的标记语言，用于描述超文本（超出文本的范畴）中内容的显示方式。：字体什么颜色，大小等。Html是最基础的网页语言。Html是通过标签（标记）来定义的语言，代码都是由标签所组成。：<标签名称>：<body>基本格式：<html>...
复制链接

扫一扫