head标签
title标签
指定文档标题。
base标签
指定当前页面基本链接。通常情况下,浏览器会从当面页面的Url中提取相应元素来填充相对url中的空白,但使用<base>后,浏览器会使用<base>标签中指定的href值与相对url拼接后组成绝对url,再进行访问。如
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>
此时<img>链接的图片地址就是http://www.w3school.com.cn/i/eg_smile.gif。
base中还可以指定target属性(属性值与<a>标签中的target属性值一样),此时所有的超链接处都会按该target指定的值进行操作,即使<a>标签自己也指定了target属性。上面点击W3School时,便会在一个新的界面中打开链接。
meta标签
提供有关页面的元信息(总是以键值对的形式出现),它必须永远处于<head>标签内部。
content属性是必须具备的,它用于指定元信息中的值。它始终和name,http-equiv一起使用。
http-equiv:用于指定键值对中的键,浏览器会把对应的值关联到http头部。因此,如果想要使它对应的content有意义,浏览器必须支持http-equiv定义的头部名称。
name,类似于http-equiv,但不会将值关联到http头部,并且它的值可以任意指定。
script标签
用于定义客户端脚本。既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必须通过type指定脚本的MIME类型。如
<script type="text/javascript">
document.write("Hello World!")
</script>
link标签
用于链接外部样式表(即css文件)。只存在于head标签中。
type:规定被链接文档的 MIME 类型。由于是用于链接外部样式表,因此一般为text/css。
href:外部链接的路径。
rel:当前文档与被链接文档之间的关系。其中属性值stylesheet指的是文档的外部样式表。
样式
外部样式表:将样式抽取成一个单独的css文件,通过link标签引入到当前的文档中:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表:当某个文档需要单独的样式时,可以在head标签中通过style标签定义内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式:当某个标签需要特殊的样式时,就可以为该标签使用内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
a标签
超链接标签,除了可以链接到指定的网址外,还可以在当前页面实现跳转效果。首先通过name属性指定一个锚点,然后在别的a标签中通过href属性引用这个锚点名,如下,注意一定要加#。
<html>
<body>
<p>
<!-指定链接到的位置->
<a href="#C4">查看 Chapter ddd4。</a>
</p>
<!-定义到链接位置->
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
a标签中间也可以添加<img>标签,这样点击图片时就可以跳转到相应的界面。
如果要在一个新的窗口打开超链接的界面,只需要配置target属性的值为"_blank"即可。
pre标签
html源码中的空格和换行都会被替换成一个空格,而pre标签包裹的内容却不会出现这种情况。被包围在pre标签中的文本通常会保留空格和换行符。它的一个很常见的应用就是在页面中显示源码(如html源码,java源码等)。如
<pre>
for i = 1 to 10
print i
next i
</pre>
img标签
通过src属性指定图片的路径,./当前文档所在的目录,../表示上一级目录,可以多次使用。如文档在d:/html/demo文件夹下,那么./就指d:/html/demo文件夹,而../指d:/html文件夹,../../表示d:/
可以使用align属性定义图片在文本中的位置:bottom图片文本底部对齐;top:图片文本顶部对齐;middle:图片文本居中对齐。
通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。
alt属性表示图片加载错误时显示的文字,title表示鼠标放上去时的提示文字。
map标签
定义一个区域,在该区域内图像可点击。id,name两者的值经常相同,都是为map定义一个独一无二的名,通常为了兼容浏览器,需要定义id和name两个属性。在img标签中使用usemap属性将map标签与img标签关联。
在map标签内部,通过area标签定义一个区域,它只能出现在map标签内部。shape属性规定了区域的形状,coords规定了区域的坐标(shape为rect是,坐标依次为左上,右下的x,y轴值,shape为circle时,坐标为依次为圆心的x,y轴值和半径值),href要链接到的url,alt鼠标悬停时的提示文字。如
<img src="./bg.png" usemap="#map"/>
<map id="map" name="map">
<area shape="circle" coords="100,100,50" href="http://www.baidu.com/" alt="百度一下" />
</map>
在img标签中通过usemap引用定义的区域,在引用的id前一定要加#。table标签
定义表格。表格的每一行通过<tr>标签定义,每一行中的每一个单元格通过<td>或<th>标签定义,其中th用于定义表头单元格,而td用于定义普通单元格。
常用属性
border:表格的外边框的宽度
cellpadding:每一个单元格中文字与边框的距离
cellspacing:两个单元格之间的距离。
frame:规定外侧边框哪个位置可见。void:都不可见;lhs:左边框可见;rhs:右边框可见;above:上边框可见;below:下边框可见;hsides:上下边框可见;vsides:左右边框可见;box:都可见。
form标签
为用户输入创建html表单(表单为了使用户输入某些内容,并将内容传送到服务器进行处理),里面可以包含<input>,<textarea>等标签。注意:它只是创建表单,并不代表它本身能接收文件的输出,内部包含的input标签才能接收文件的输入。
<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>
input标签
type属性
通过属性type指定它的类型,
text:纯文本;
password:密码;
file:文件,可用于上传。
radio:单选按钮,此时name属性值相同的认为是一组,同一组中只能选一个。
checkbox:多选。
checked:值只有一个“checked”,指定在界面加载时预先选中。
submit:提交按钮。value属性的值便是展示到界面上的内容。
button:简单的按钮。value属性的值便是展示到界面上的内容。
reset:重置按钮,value属性的值便是展示到界面上的内容。它会重置该表单(一个form内的)中的所有数据。
name与value属性
除type="submit","button"等值外,name与value都是提交到服务器的key,value值。如<input type="radio" name="Sex1" value="2">,假设用户选择该选项,并且提交到服务器,那么服务器接收到的键值对的key值便是Sex1,value值便是2。
在type为text时,可以通过value值设置默认值。
label标签
在单选或者多选input时,用户必须点中相应的图标才选中,点击文字是没有效果的。而label标签就是为了解决该问题的。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
它的for属性的值必须与相关联的标签的id值相同。如
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
当用户点击Female文字时,就相当于点击了第二个input标签。
注意:label标签是可以跨表单的。也就是说,在一个form中的label的for属性值可以是另一个form中定义的id。
select标签
下拉列表。每一个下拉选项都是通过<option>标签定义的。在提交到服务器的键值对中,key值由select标签的name属性决定,value由option标签的value属性决定。
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
此时提交到服务器中,服务器收到的key-value分别为cars和fiat。
可通过multiple="multiple"设置成多选 ,也可通过设置size的值指定一屏显示几个选项。
option与optgroup
option标签定义下拉列表中的一个选项(一个条目),它位于select标签内部。属性selected="selected"规定了在首次显示时该选项处于选中状态,value值定义送往服务器的选项值。
optgroup用于定义组合选项,它的label属性规定了该组的名称。如
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
iframe标签
<iframe src="http://www.baidu.com/"></iframe>
frame与frameset
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
通过frameset可以实现左边列表,右边详情的界面。只需要将列表定义在一个frame中,详情定义在一个frame中。如下:
<frameset cols="30%,*">
<frame src="bottom_left.html"/>
<frame src="bottom_right.html" name="bottom_right_container"/>
</frameset>
在点击bottom_left.html中的每一个item时,都会切换到对应的html页面中,但新出现的html界面,并不会直接展示在详情的frame中。为此,需要在bottom_left的列表项中加上
target属性,其值为详情frame的name属性值。如下:
<a href="bottom_right.html" target="bottom_right_container">右边第一页</a>
<a href="bottom_right2.html" target="bottom_right_container">右边第二页</a>
bdo标签
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
del与ins标签
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>