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=“URL”>某某页面</a> : 超连接
<a name=“name”>内容</a>   :锚点
使用时<a href=“#name”>定位位置</a>

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="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

  <area shape="rect" coords="0,0,110,260" href ="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="frame_a.htm" />

  <frame src="frame_b.htm" />

  <frame src="frame_c.htm" />

</frameset>

</html></span>

<frame>标签

<frame> 标签定义 frameset 中的一个特定的窗口（框架）。

属性：src、name

scrolling：是否出现滚动条（yes/no）

noresize：不可以调边框尺寸，默认可调

<a href=“”>的target属性【指定显示位置】

四个内置的取值：_blank、_parent、_self、_top

<span style="font-size:18px;"><html>

<frameset cols="25%,50%,25%">

  <frame src="frame_a.htm" />

  <frame src="frame_b.htm" />

  <frame src="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详解的更多相关文章

  1. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. ViewPager 详解（二）---详解四大函数

    前言:上篇中我们讲解了如何快速实现了一个滑动页面,但问题在于,PageAdapter必须要重写的四个函数,它们都各有什么意义,在上节的函数内部为什么要这么实现,下面我们就结合Android的API说明 ...

  4. [转]CSS vertical-align属性详解 作者：黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  5. iOS 开发之照片框架详解之二 —— PhotoKit 详解（下）

    本文链接:http://kayosite.com/ios-development-and-detail-of-photo-framework-part-three.html 这里接着前文<iOS ...

  6. iOS 开发之照片框架详解之二 —— PhotoKit 详解（上）

    转载自:http://kayosite.com/ios-development-and-detail-of-photo-framework-part-two.html 一. 概况 本文接着 iOS 开 ...

  7. 详解C#泛型（二） 获取C#中方法的执行时间及其代码注入 详解C#泛型（一） 详解C#委托和事件（二） 详解C#特性和反射（四） 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码

    详解C#泛型(二)   一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...

  8. Hexo系列(二) 配置文件详解

    Hexo 是一款优秀的博客框架,在使用 Hexo 搭建一个属于自己的博客网站后,我们还需要对其进行配置,使得 Hexo 更能满足自己的需求 这里所说的配置文件,是位于站点根目录下的 _config.y ...

  9. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  10. 【模型推理】量化实现分享二：详解 KL 对称量化算法实现

      欢迎关注我的公众号 [极智视界],回复001获取Google编程规范   O_o   >_<   o_O   O_o   ~_~   o_O   大家好,我是极智视界,本文剖析一下 K ...

随机推荐

  1. android Loger日志类（获取内置sd卡）

    Android手机自带内部存储路径的获取 原文地址:http://my.oschina.net/liucundong/blog/288183 直接贴代码: public static String g ...

  2. PhoneGap，Cordova[3.5.0-0.2.6]：生成Android项目时出现错误(An error occurred while listing Android targets)

    我在升级到Cordova最新版本(3.5.0-0.2.6)后,在生成Android项目(cordova platform add android)时出现错误: Error: An error occu ...

  3. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇06：计分》

    6.计分 计分概述: 分值计量直接反应玩家在游戏中获得的成就感.因此,计分系统在游戏中显得尤为重要,有的反应在直接获取的分数上,有的反应在杀敌数量上等. 计分原理: 原理图,如图6-1所示. 图6-1 ...

  4. Red5边源服务器集群部署

    http://www.myexception.cn/open-source/446184.html Red5简介: Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3) ...

  5. HDU 5821 Ball （贪心）

    Ball 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5821 Description ZZX has a sequence of boxes nu ...

  6. How to include cascading style sheets (CSS) in JSF

    In JSF 2.0, you can use <h:outputStylesheet /> output a css file. For example, <h:outputSty ...

  7. 你应该知道的16个Linux服务器监控命令

    在不同的Linux发行版中,会有不同的GUI程序可以显示各种系统信息,比如SUSE Linux发行版中,就有非常棒的图形化的配置和管理工具YaST,KDE桌面环境里的KDE System Guard也 ...

  8. redis的使用

    phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github.com/ow ...

  9. LCA算法

    LCA算法: LCA(Least Common Ancestor),顾名思义,是指在一棵树中,距离两个点最近的两者的公共节点.也就是说,在两个点通往根的道路上,肯定会有公共的节点,我们就是要求找到公共 ...

  10. Random的nextInt用法

    因为想当然的认为Random类中nextInt()(注:不带参数),会产生伪随机的正整数,采用如下的方式生成0~99之间的随机数: Random random = new Random(); rand ...