#HTML教程(标签)

特别是帖子列表页,现在改成一行标题用一个表格,一页30行标题就30行表格,加载一行就显示一样,不用像以前那样全部加载完一起显示。还是广告显示方式,把javascript输出改成了html代码直接输出。


总体应该速度快了很多,IE假死的几率也减少很多

1 .基本结构

 <!DOCTYPE html>
 <html>
 <head>标题文本...
 </head>
 <body>内容文本...
 </body>
 </html>
基本解释
  • <!DOCTYPE html>为标识符,它指出了网页遵循的HTML标准,有时还指出了定义规范的文档类型定义(DTD)
  • <html>包含了组成网页的所有标签
  • <head>包含了所有提供网页信息的标签,且不包含现在在页面中的信息
  • <body>包含了所有的文本和其他内容(链接、图片等)
  • <html>``<head>``</head>``<body>``</body>``</html>都称为标签

<html> </html>称为根标签

<html>``<head>``<body>称为开始标签

</head>``</body>``</html>称为结束标签

  • 一般来说,标签都是成对出现的
  • 标签和标签之间可以相互嵌套,但顺序必须一致
  • 标签不区分大小写,但建议使用小写

2.基本标签及其用法

澳门新葡亰游戏网址,head部分

<title> 标签

<title>标题内容<title>

将标题内容显示在浏览器的标题栏中,一般简短,易懂

<meta>标签

元数据(metadata)

<meta name="**" content="**"/>

name 和content的作用为描述页面的内容

<style>标签

<style type="**">

规定HTMLL元素在浏览器中呈现的样式

body部分
  • 段落类

<p>标签

<p>段落文本</p>

将文本分段后输出

<br />标签

用于分行,相当于回车换行

用在句子的末端

“标签

文本“文本

将文本分割输出,相当于空格

<hr>标签

用于创建一条水平的线(分割线)

用在段落的首端

  • 字体类

<hx>标签(x=1~6)

<hx>标题</hx>

将文本以标题形式输出
其中<h1>字体最大,<h6>相对最小

<strong>标签

<strong>强调部分</strong>

将文本以粗体输出

<em>标签

<em>强调部分</em>

将文本以斜体输出

“标签

强调部分

将文本以特殊形式输出

<font>标签

<font>要输出的文本</font>

将文本自定义大小输出

<font size= "1">要输出的文本</font>

size可取1~7,其中7最大,1最小

将文本自定义颜色输出

<font color ="#000000"></font>

其中color后可以接RGB值,也可以用颜色的单词来表示

  • 引用

<q>标签

<q>引言</q>

自动给引言加上“”

<blockquote>标签

<blockquote>引文</blockquote>

自动在页面左右两侧进行缩进处理

<code>标签

<code>代码</code>

将代码完整输出,不改变任何符号

只能对一行代码进行输出

<pre>标签

<pre>代码段</pre>

将代码段完整输出,保留空格和换行符

不受分行的影响

  • 表格类

<ul>标签

<li>一条内容</li>

<li>一条内容</li>

</ul>

将信息分条排序

通常由”·“起行

<ol>标签

<li>第一条内容<li>

<li>第二条内容<li>

</ol>

将信息分条排序

每一行都有固定的编号

  • 特殊类

<address>标签

<address>地址信息</address>

在网页中提供联系信息,通常自动显示为斜体

<div>标签

<div></div>

将标签放入div中,可以更清晰的看懂标签的逻辑

注释部分只会在源代码页面显示,从而方便管理员理解代码,而不会在页面中输出

<input type>"..."<placeho.der>

3.表格

表格的组成部分
  • 表题:指出表格包含什么内容.(表题是可选的)
  • 表头:标识行、列或两者,通常使用突出的字体.(可选)
  • 单元格:表格中的各个方框,包含的可能是表格数据,也可能使表头.
  • 表格数据:表格中的值
<table>元素

<table>表格</table>

表格摘要
  • 提供解释性的信息,从而对表格作简要的介绍

在表格前面的段落中进行描述

在表题中进行描述

在表题的<details>元素中进行描述

在表格后面的示意图或者图题中进行描述

单元格
  • 表格是逐行定义的,每一行定义都应该包含该行的所有单元格

<tr>表格行..</tr>

可包括表头单元格或数据单元格

<th>表头单元格..</th>

通常为粗体,且在水平和垂直方向上都居中

<td>数据单元格..</td>

使用常规字体显示,在水平方向上左对齐,在竖直方向上居中

空单元格

在单元格中包含一行换行符

如: <td><br><td>

表题

元素<caption>位于<table>之内,但位于第一行<tr >之前

<table>
<caption>表题名称...</caption>
<tr >

若信息过多,也可以将详细信息隐藏起来

<caption>中嵌入<derails>元素,可完成对内容的单击隐藏

<caption>
<details>详细内容...</details>
</caption>

设置表格
  • 设置宽度

<table border="1" style="width: 100%">

设置为与浏览器窗口等宽

  • 设置边框

<table border="10" style="width: 100%">

边框设置为10像素

  • 单元格内边距(单元边缘与内容的距离)

<table cellpadding= "10" border= "1">
内边距设置为10像素

  • 单元格间距(单元格与单元格的距离)

<table cellspacing= "8">
单元格间距为8像素

4.图像

图像
网站地图xml地图