元素(又称标签)
- 段落元素
示例: | < p> xxx:这是一个段落 < / p> |
< p> | 段落元素起始标签 |
< / p> | 段落元素闭合标签 |
xxx | 段落显示内容 |
属性
- 属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
- 属性值应该始终被包括在引号内。(在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name=’ John “ShotGun” Nelson’)
标题(标签1)
- 搜索引擎使用标题为您的网页的结构和内容编制索引。
- 用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
- 标题用 < h1 > xxx </ h1> 表示一号标题
- < hr > 标签在 HTML 页面中创建水平线。
<!-- 这是一个注释 -->
段落(标签2)
- 段落是通过 < p> 标签定义的。
- 如果只是希望进行换行,而不是另起一个段落,可以用换行标签3 < br>
HTML 文本格式化的一些标签
- 标签4 < b> 加粗文本< /b>
- 标签5 < i> 加粗文本< /i>
- 标签6 < sub> 下标< /sub> < sup> 上标< /sup>
- 标签7 < ins>插入的文本 < /ins>
- 标签7 < del>删除的文本 < /del>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
- < abbr> 用于定义缩写;< acronym> 用于展示缩写前后内容;
- 被缩写的内容只有当鼠标放上去之后才会被显示
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
//<pre>运行结果中不会省略换行和空格
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
// 运行结果中省略换行和空格,所有多余的空格都会被算作一个空格,多余的换行也会被显示为一行
< head> 中的一些标签
< head> 标签包含了所有的头部标签标签。在< head> 标签中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
-
标签< title>
1.1. 标签< title>是头部标签的必须存在部分
1.2. 标签< title>在网页中不仅展示在浏览器的顶部和工具栏,同时还会充当搜索引擎的搜索关键字 -
标签< base>
2.1. < base>描述了基本的链接地址,该标签作为HTML文档中所有的链接标签的默认链接
2.2. 基本运用形式如下:(href是描述链接的属性)
<base href="http://www.runoob.com/images/" target="_blank">
- 标签< link>
3.1. 用于表明本文档与外部资源文件的关系
3.2. 通常用于链接到样式表(通过引用地址)
3.3. 基本运用形式如下:
<link rel="stylesheet" type="text/css" href="mystyle.css">
- 标签< style>
4.1. 标签< style>是用来表明文档样式的标签。可以通过在标签内声明样式表CSS的引用地址来渲染文档,同时也可以直接在< style>中添加样式对文档进行渲染
4.2. 基本运用形式如下:
<head>
<style type="text/css"> //通过属性type获得css样式文件的引用地址
body {background-color:yellow}
p {color:blue}
</style>
</head>
- 标签< meta>
5.1. meta标签描述了一些基本的元数据。元数据不会直接显示在网页中,但是被浏览器解析
5.2. META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
5.3. 基本运用形式如下:
//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容:
<meta name="description" content="Web for free">
//每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
- 标签< script>
6.1.用于加载JavaScript 脚本文件(详细见Javascript)
有关CSS样式表
为了更好的渲染HTML元素而引入。
- 内联样式:在HTML元素中使用"style" 属性 (使用方法详见上面,一般用于特殊的样式需要应用到个别元素)
- 内部样式表:在HTML文档头部 < head> 区域使用< style> 元素 来包含CSS(详见上面)
- 外部引用:使用外部 CSS 文件(best way)
图片内部标签
有关URL格式:
WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator,统一资源定位符),它是WWW的统一资源定位标志,就是指网址。
- 标签< img>图片
<img src="url" alt="some_text" rock" width="304" height="228">
-
属性 alt 指用来为图像定义一串预备的可替换的文本。这个属性会在浏览器无法成功加载出图片的时候用于替换图片,可自定义文本内容。
-
注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
-
标签< map>图片地图
创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
<map name="planetmap">
//矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="sun.htm">
//圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" alt="Mercury" href=url>
多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
</map>
表格
<table border="1">
<caption>Monthly savings</caption>//表示表格的标题
<tr>
<td>Head1</td>
<td>Head2</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
<table border="0"> //表示无边框
<table border="1" cellpadding="10"> //可以设置单元格边距
<table border="1" cellspacing="10"> //
<th colspan="2">Telephone</th> //行跨两行
<th rowspan="2">Telephone:</th> //列跨两列