首页 > 代码库 > PHP.8-HTML+CSS（二）-HTML详解
PHP.8-HTML+CSS（二）-HTML详解
HTML+CSS
HTML参考手册【http://www.w3school.com.cn/tags/index.asp】
0、HTML主体标记
代码分为三部分编写
<html> 是网页文件的最外层标记 <head> 之间的文本是头信息 不会显示在浏览器中，包括基本的描述，整个网页的公共属性 </head> <body> 是网页文件的主体部分 正文 ：文字、图片、链接、表单等 </body> </html>
1、HTML文档头部标记
<head>头部标记</head>
<title>标签 </title> 只能有一个
###定义网页标题，显示在浏览器的标题栏中，如：公司名称+公司产品。有利于搜索引擎
<base 为页面上的所有链接规定默认地址或默认目标 /> 只能有一个
###基底网址标记，用于设定浏览器中文件的绝对路径，网页中的文件只需要写下文件的相对路径即可，这个路径就是base中指定下的路径。【一般很少使用】
<link 链接样式表 /> 可以有多个
###用于确定本页面和其它文档之间的关系
<meta> 可以有多个
###有两种用法。可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
1.<meta name=“” content=“”>
###Name用于在网页中加入一些关于网页的描述信息，网页的关键字，网页描述信息。"keywords"是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。（Keywords : 网页的关键字；Description：网页的描述）
Robots：是否允许被搜索引擎搜索
例如：
<span style="font-size:18px;"><meta name="keywords" content="HTML,ASP,PHP,SQL"></span>
2.<meta http-equiv=“” content=“”>
http-equiv:属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是滞缓存页面，使用什么样的字符集显示网页内容。【refresh：刷新，转向其他页面，expires：缓存页面】
例如：
<span style="font-size:18px;"><meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008"></span>
<meta http-equiv="Windows-Target" content="_top"> ##禁止本网页被加载成其他网页小窗体
进入/退出页面特效【23种】
<meta http-equiv="Page-Enter" content="revealTrans(Transition=2,Duration=1.000)"> #进入 <meta http-equiv="Page-Exit" content="revealTrans(Transition=22,Duration=1.000)"> #退出
3、主体标记<body>
###包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。在它中放置网页中所有内容。
注：只要是可以用样式控制的就不用HTML本身属性
属性 值 描述 alink
- rgb(x,x,x)
- #xxxxxx
- colorname
不赞成使用。请使用样式取代它。
规定文档中活动链接（active link）的的颜色。
background URL 不赞成使用。请使用样式取代它。
规定文档的背景图像。
bgcolor
- rgb(x,x,x)
- #xxxxxx
- colorname
不赞成使用。请使用样式取代它。
规定文档的背景颜色。
link
- rgb(x,x,x)
- #xxxxxx
- colorname
不赞成使用。请使用样式取代它。
规定文档中未访问链接的默认颜色。
text
- rgb(x,x,x)
- #xxxxxx
- colorname
不赞成使用。请使用样式取代它。
规定文档中所有文本的颜色。
vlink
- rgb(x,x,x)
- #xxxxxx
- colorname
不赞成使用。请使用样式取代它。
规定文档中已被访问链接的颜色。
"Id" "name" "class" "style" 等通用属性，所有的元素都可以使用
4、<!DOCTYPE>
声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。##########################################################################
注释：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。
提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！##########################################################################
例如：
HTML 5
<span style="font-size:18px;"><!DOCTYPE html></span>
HTML 4.01 Transitional
<span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></span>
5、常用标签
#格式标签
格式标签用于定义网页中文本的布局、缩进、位置、换行、列表等。
<br> 换行
<p> 段落
<center> 对其所包括的文本进行水平居中
<pre> 保留文字在源代码中的格式【http://www.w3school.com.cn/tags/tag_pre.asp】
<ul><li> 无序列表例如：
<span style="font-size:18px;"><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul></span>
<ol><li> 有序的列表
例如：
<span style="font-size:18px;"><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol></span>
<hr> 水平分隔线
<span style="font-size:18px;"><h1>This is header 1</h1> <hr /> <p>This is some text</p></span>
6、文本标签
在网页中，为了着意强调某一部分文字，或者为了让文字有所变化0、<hn> #以标题样式显示文本，n为数字
<span style="font-size:18px;"><h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6></span>
1、<b> </b> #粗体文本
2、<i> </i> #显示斜体文本效果。标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
注：<i> 标签一定要和结束标签 </i> 结合起来使用。
3、<u> </u> #为文本添加下划线注：请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接！
4、<sub> </sub> #定义下标文本。包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。注：无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用
5、<sup> </sup> #定义上标文本，与<sub>类似注：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。
6、<font> </font> #定文本的字体、字体尺寸、字体颜色
例如：
<span style="font-size:18px;"><font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font></span>
7、<tt> </tt> #呈现类似打字机或者等宽的文本效果。
对于以下元素，建议使用样式表，可以到达更丰富的效果##<em> 把文本定义为强调的内容。
##<strong> 把文本定义为语气更强的强调的内容。
##<dfn> 定义一个定义项目。
##<code> 定义计算机代码文本。
##<samp> 定义样本文本。
##<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
##<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
##<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。8、<big></big> #显现大号字体效果。如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。可以嵌套 <big> 标签来放大文本。
6、超链接标签
锚点的应用
<a href=http://www.mamicode.com/“URL”>某某页面 : 超连接
<a name=“name”>内容</a> :锚点
使用时<a href=http://www.mamicode.com/“#name”>定位位置
7、图像标签
<img /> #向网页中嵌入一幅图像。两个必需的属性：src 属性 和 alt 属性
alt text规定图像的替代文本。
src URL规定显示图像的 URL。
常用属性：
border：边框的宽度
width：图像宽度
height：图像高度
8、图像地图
因为一个图像只能加一个a标签，做一个链接
如果把一幅图像分成多个区域，每个区域指向不同的URL地址（为一个图片加多个链接）【例如中国地图】
在图像<img>中使用usemap属性去使用地图
<map>定义热点区域
<area>指定每个热点区域
Shape指定形状 rect, poly, circle
Coords确定形状
href指定链接的位置
例如：
<span style="font-size:18px;"><img src="http://www.mamicode.com/planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="http://www.mamicode.com/venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="http://www.mamicode.com/mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="http://www.mamicode.com/sun.html" alt="Sun" /> </map></span>
9、表格标签
表格标签<table>
行标签<tr>
列标签<td><th>
表头单元格 - 包含表头信息（由 th 元素创建） #文字是以粗体居中显示，字段标签
标准列单元格 - 包含数据（由 td 元素创建） #td元素内的文本通常是左对齐的普通文本
例：一个简单的 HTML 表格，包含两行两列
<span style="font-size:18px;"><table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table></span>注：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性。【指定几行几列】
可选的属性
属性 值 描述 abbr text 规定单元格中内容的缩写版本。 align
- left
- right
- center
- justify
- char
规定单元格内容的水平对齐方式。 axis category_name 对单元格进行分类。 bgcolor
- rgb(x,x,x)
- #xxxxxx
- colorname
不推荐使用。请使用样式替代它。
规定表格单元格的背景颜色。
char character 规定根据哪个字符来进行内容的对齐。 charoff number 规定对齐字符的偏移量。 colspan number 设置单元格可横跨的列数。 headers idrefs 由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。 height
- pixels
- %
不推荐使用。请使用样式替代它。
规定表格单元格的高度。
nowrap nowrap 不推荐使用。请使用样式取而代之。
规定单元格中的内容是否折行。
rowspan number 规定单元格可横跨的行数。 scope
- col
- colgroup
- row
- rowgroup
定义将表头数据与单元数据相关联的方法。 valign
- top
- middle
- bottom
- baseline
规定单元格内容的垂直排列方式。 width
- pixels
- %
不推荐使用。请使用样式取而代之。
规定表格单元格的宽度。
a、Html窗口分帧【分帧不利用搜索引擎】
把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件。每个帧(即页面)都有自己的url。【通常用于后台首页】
1、帧标签
<frameset>标签
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。
属性：rows、cols、 可以使用固定值，百分比和 * 三种
border：边框的宽度
frameborder：是否显示边框
<span style="font-size:18px;"><html> <frameset cols="25%,50%,25%"> <frame src="http://www.mamicode.com/frame_a.htm" /> <frame src="http://www.mamicode.com/frame_b.htm" /> <frame src="http://www.mamicode.com/frame_c.htm" /> </frameset> </html></span>
<frame>标签
<frame> 标签定义 frameset 中的一个特定的窗口（框架）。
属性：src、name
scrolling：是否出现滚动条（yes/no）
noresize：不可以调边框尺寸，默认可调
<a href=http://www.mamicode.com/“”>的target属性【指定显示位置】
四个内置的取值：_blank、_parent、_self、_top
<span style="font-size:18px;"><html> <frameset cols="25%,50%,25%"> <frame src="http://www.mamicode.com/frame_a.htm" /> <frame src="http://www.mamicode.com/frame_b.htm" /> <frame src="http://www.mamicode.com/frame_c.htm" /> </frameset> </html></span>
<noframes>标签
noframes 元素可为那些不支持框架的浏览器显示文本（“请使用可以分帧的浏览器”）。noframes 元素位于 frameset 元素内部。
使用Microsoft Visual Studio.NET创建框架集
<iframe>标签【常用于前台特效显示】
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）【画中画效果】
注：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
注： 分桢不能和body标签及内容体共存
b、表单的作用
<form>标签及其属性
<from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。
1、action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。相对和绝对
2、Method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.
3、Target属性用来指定服务器返回结果显示的目标窗口或目标帧。
4、Title属性用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。
5、Enctype属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：
application/x-www-form-urlencoded（默认的设置）
multipart/form-data
PHP.8-HTML+CSS（二）-HTML详解