HTML常用标签--字体
字体标签 <font>
例:<font color="red">HTML字体标签</font>,常见属性size color,还有其它属性,比如:face
标题标签 <H1></H1>...<H6></H6>
特殊字符
如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
< |
< |
" |
" |
|
空格 |
> |
> |
® |
? |
™ |
? |
& |
& |
© |
? |
无序列表
<ul> <!-- 符号标签(○●■)--> <li>游戏</li> <li>部门</li> </ul>
注:ul中 type 属性有三个值 [ circle|disc|square ],用于规定列表的项目符号, 但不赞成使用。
有序列表
<ol> <!-- 数字标签(a A 1 i I)--> <li>游戏</li> <li>部门</li> </ol>
注:ol中 type 属性同样不赞成使用。
如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS
定义列表(definition list)
<dl> <dt>游戏</dt> <dd>穿越火线</dd> <dd>英雄联盟</dd> <dt>部门</dt> <dd>研发部门</dd> <dd>销售部门</dd> </dl>
图像标签 <img>
例
<img src="1.jpg" border="3px" title="鼠标移动上提示文字" alt="图片说明文字" width="500px" height="200px"/>
src:图像URL地址;border用来设置图像的边框;alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。
表格标签 <table>
用于格式化数据。
例:
<table border width cellpadding cellspacing> <caption>标题</caption> <thead> <th>姓名</th> <!--对表格的第一行或者第一列进行 --> <th>年龄</th> <!--格式化,就是粗体居中显示 --> </thead> <tbody> <tr> <!--行标签 --> <td>张三</td><td>20</td> <!--单元格标签 --> </tr> <tr><td>李四</td><td>25</td></tr> </tbody> </table>
<table>常用属性
border:框线粗细 0代表无
width:宽度 接收整数值、百分数
cellpadding:单元格内容与边框的距离
cellspacing:单元格与相邻单元格之间的距离
<td>常用属性
colspan:合并同行单元格
rowspan:合并同列单元格
每个表格可以有一个表头、一个表尾和一个或多个表体 (即正文)
THEAD TBODY TFOOT
TBODY 可以控制表格分行下载,从而提高下载速度(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间)。
超链接标签 <a>
用法一:超链接 <a href="">
<a href="http://www.163.com" target="_blank">网易</a>
href:要打开资源的路径,可以是URL,也可以是本地文件。
target:指定在哪个窗口或者帧中打开。有四个值:
_blank:在一个新开的空白窗口中打开链接
_parent:在父级窗口中打开
_self:在自身页面中打开链接(默认)
_top:在整个浏览器的最顶端(前端)开始打开链接
用法二:定位标记 <a name="">
链接到同一文档中的特定位置叫做定位标记(锚链接)。一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
注:定位标记要和超链接结合使用才有效。
示例:
<a name= "标记" >标记位置</a> <p>…….<!--很多空行以制造网页过长的效果 --> <a href= "#标记">返回标记位置</a>
注释:使用定位标记时一定在href值的开始加入#标记名
HTML常用标签--框架
<html> <frameset rows="20%,*"> <!-- 框架标记,用以划分框窗 -->
<frame src="top.html"> <!-- 框窗标记,设定一个框窗 --> <frameset cols="25%,75%"> <frame src="left.html"> <frame src="right.html"> </frameset> </frameset>
</html>
所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记。
<frameset>常用属性
COLS="20%,*":垂直切割画面(如分左右两个画面),接受整数值、百分数,* 则代表占用余下空间。数值的个数代表分成的视窗数目且以逗号分隔。
ROWS="120,*":就是横向切割,将画面上下分开,数值设定同上。
frameborder="0":设定框架的边框,其值只有 0 和 1 ,0 表示不要边框,1 表示要显示边框。
border="0":设定框架的边框厚度,以 pixels 为单位。
bordercolor="#999":设定框架的边框颜色。
framespacing="5" :表示框架与框架间的保留空白的距离。
<frame>常用属性
src="top.html":设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。
name="top":设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
scrolling="auto":设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示,AUTO是视情况显示。
noresize:设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其大小。
<NOFRAMES> 当使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的提示内容,而不是一片空白。 如下: <frameset rows="80,*"> <noframes> <body> 很抱歉,您使用的浏览器不支持框架功能,请转用新的浏览器。 </body> </noframes> <frame name="top" src="a.html"> <frame name="bottom" src="b.html"> </frameset>
HTML语法--表单
<INPUT>标签:接受用户输入信息 <input type="text" value="" /> type标签指定输入标签的类型,共有10个值:文本框text、密码框 password、单选框radio、复选框checkbox、隐藏字段hidden、提 交按钮submit、重置按钮reset、按钮button、文件上传file、图像 image. <SELECT>标签:定义一个选择列表 <select name="city"> <option value="1">北京</option> <option value="2">郑州</option> </select> 注:<option>:定义下拉列表中的选项,属性 selected 没有属性值 加在其中一个子项上,该子项就变成默认被选中项。
<TEXTAREA>标签:多行文本框 <textarea rows="3" rols="20"> </textarea> cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。 <label>标签: <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。for的属性值指向绑定表单元素的 id 值。
块元素
大多数 HTML 元素被定义为块级元素或内联元素。
-块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
-内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
DIV> <SPAN> DIV HTML DIV 是块级元素,它是可用于组合其他HTML元素的容器。DIV元素没有特定的含义。与CSS一起使用,可用于对大的内容快设置样式属性。 <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 SPAN HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义,当与 CSS 一同使用时,可用于为部分文本设置样式属性。 HTML语法--头标签 title:指定浏览器标题栏显示的内容 base:标签为页面上的所有链接规定默认地址或默认目标 href属性:规定页面中所有相对链接的基准 URL target属性:指定打开超链接的方式 meta:可提供有关页面的元信息 content属性:定义与 http-equiv 或 name 属性相关的元信息 http-equiv属性:把 content 属性关联到 HTTP 头部 name属性:把 content 属性关联到一个名称 link: rel属性:目标文档与当前文档的关系 type属性:文档类型