标签(大小写不敏感):
<br/>:定义空标签(元素),标签一开始就结束,如不产生新段落的情况下,可以用作换行(新增一行);
<p 属性> 内容</p>:定义段落;
<h1>-<h6>:定义标题,h1为最大标题,h6为最小标题;
<hr/>:定义水平线;
<!-->:定义注释;
<abbr>:定义缩写;
<a>:定义链接
链接语法:
<a href="url">Link text</a>
// href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示,"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
target属性:
<a href="http://www.3wschool.com/" target="_blank"></a>
//使用 Target 属性,你可以定义被链接的文档在何处显示
//上面实例定义新的链接会在新的页面被打开
name属性:
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tip"> 基本的注意事项-有用的提示</a>
//"基本的注意事项-有用的提示"为此html页面有的内容,即对“基本的注意事项-有用的提示”加了名字为tips的id,创建指向该锚的连接之后,直接跳到该页面的此内容部分;
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tip">有用的提示</a>
// href="#tips" (点击“有用提示”)为定义指向name为tips的内容(基本的注意事项-有用的提示)部分;
您也可以在其他页面中创建指向该锚的链接:
<a href="href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
// 此时别的页面的href为需要跳转的页面url与tip的拼接
注意事项:请始终将正斜杠添加到子文件夹。假如这样书写链接:href=“http://www.w3school.com.cn/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=“ http://www.w3school.com.cn/html/”
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
<img />:定义图片(<img src="url"/>)
<img />空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
Alt属性:
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
* <map>:定义图像地图
** id:为 map 标签定义唯一的名称。
** name:为 image-map 规定的名称。
访问 Map 对象
您可以通过使用 getElementById() 来访问 元素:var x = document.getElementById("myMap");
* <area>:定义图像地图上的可点击区域
备注:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
img 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 添加 id 和 name 属性。
必须的属性:
alt:定义此区域的替换文本。
可选的属性:
** coords:坐标值( 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。)
** href: 定义此区域的目标 URL。
** nohref:从图像映射排除某个区域。
** shape:定义区域的形状。
*** default:默认,shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性,那么会假设使用值 default。依照标准,default 意味着该区域覆盖整个图像。在实际中,浏览器默认使用矩形区域,并期望能找到 4 个 coords 值。如果没有指定形状,而且在标签中也没有包括 4 个坐标,那么浏览器会忽略整个区域。
*** rect:矩形,shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。
*** circ:圆形,shape="circle",coords="x,y,z"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
*** poly:多边形,shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
** target:规定在何处打开 href 属性指定的目标 URL。
*** _blank:在新窗口中打开新的链接;
*** _parent:默认。在相同的框架中打开被链接文档。
*** _self:在父框架集中打开被链接文档。
*** _top:在整个窗口中打开被链接文档
*** framename:在指定的框架中打开被链接文档。
eg: <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets"/>
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus">
</area>
</map>
//map不是img的元素,但是在img标签中必须使用usemap这个属性才能用map
* 定义背景图片:
<body background="/i/eg_background.jpg"></body>
* 浮动图片,并且可以调整图片尺寸:
<p><img src=“/i/eg_cute.gif” align=“left” width=“200” height=“200”>这段文字左边放置一张图片</p>
* 制作图像链接:
<a href="http:www.3cschool.html">
<img src="background.gif"/>
</a>
*表格:表格由 <table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义),字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td >row 1,cell </td>
<td> row 2,cell</td>
<td> </td>
</tr></table>
<border>:为定义边框,如果说不加此属性,则无边框;
<th>:为添加表头;
<td> </td>:表格中的空单元格(空的单元格可能边框表示不出来需要加上 ;即可);