目录
图片 <img src="/images/logo.png" width="" height="" />,宽高都是属性,不是样式;
文字格式:
加粗:<b></b> <strong></strong>;
加大字体:<big></big>;
斜体:<em></em> <i></i> ;
缩小:<small></small>;
下标<sub></sub>;
上标:<sup></sup>;
电脑自动输出:<code></code>;
定义项目:<dfn></dfn>;
一段电脑代码:<code></code>;
计算机样本:<samp></samp;
键盘输入:<kbd></kbd>;
变量:<var></var>;
<base> 标签描述了基本的链接地址/链接目标,是HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank">;
<link> 标签定义了文档与外部资源之间的关系,通常用于链接到样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">;
<meta> 标签:
定义搜索引擎关键字:name="keywords"
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">;
定义网页描述内容:name="description"
<meta name="description" content="免费 Web & 编程 教程">;
定义网页作者:name="author"
<meta name="author" content="Runoob">;
定义网页自动刷新时间(s):http-equiv="refresh"
<meta http-equiv="refresh" content="30">;
HTML 图片:
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
效果图:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
效果图:
说明:shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)
1、矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
HTML 表格:
<colgroup> 和 <col> 标签为表格中的三个列设置了背景色:
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
HTML 列表
无序列表:<ul style="list-style-type:disc,circle,square">圆点,圆圈,正方形
代码:图示:
有序列表:<ol type=" ,A,a,I,i">大小写字母,罗马数
代码:图示:
自定义列表:
代码:图示:
嵌套列表:
HTML表单:
单选按钮:
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
预选下拉框:
效果图
文本框:
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
表单:
带边框的表单:
直接向某一用户发送邮件:
<output> 标签作为计算结果输出显示(比如执行脚本的输出)
HTML 框架
Iframe
frame框架:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="220px,600px,70px" style="border-color: black;">
<frame src="top.html" name="topframe" scrolling="no" onload="this.contentWindow.document.body.style.backgroundImage='url(img/banner.jpg)' "/>
<frameset cols="25%,*">
<frame src="left.html" name="leftframe" scrolling="no"/>
<frame src="introduce.html" name="rightframe" />
</frameset>
<frame src="bottom.html" name="bottomframe" scrolling="no" />
</frameset>
</html><!--没有<body></body>标签-->
www.runoob.com/html/html-colors.html
www.runoob.com/html/html-colornames.html
www.runoob.com/html/html-colorvalues.html
HTML实体参考手册
www.runoob.com/tags/ref-entities.html
实体字符对大小写敏感