HTML--入门到精通实用最全

最新推荐文章于 2024-04-27 23:54:59 发布

weixin_34414196

最新推荐文章于 2024-04-27 23:54:59 发布

阅读量138

点赞数

文章标签： xhtml 数据库 ruby

原文链接：http://blog.51cto.com/sorewzx/1880426

版权

一：认识HTML：

网页一般又称HTML（Hyper Text Mark-up Language ）文件，即超文本标记语言（

用于描述网页文档的一种标记语言。）。是一种在www上传输、能被浏览器认识和翻译成页面并显示出来的文件。文字与图片是构成一个网页的两个最基本的元素，除此之外还包括动画、音乐、程序等。网页是构成网站的基本元素，是承载各种网站应用的平台，网页文件一般以：HTM、HTML、CGI、ASP、PHP、和JSP后缀结尾。目前网页根据生成方式，大致可以分为静态网页与动态网页两种。

1.什么是静态网页?

网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容，其特点如下：

（1）网页内容不会发生变化，除非网页设计者修改了网页的内容。

（2）不能实现和浏览网页的用户之间的交互。信息流向是单向的。

2.什么是动态网页?

动态网页是建立在B/S架构上的服务器端脚本程序。其特点如下：

（1）以数据库技术为基础，大大降低网站维护的工作量。

（2）采用动态网页技术的网站可以实现更多的功能，如：用户登录注册、搜索查询等。

（3）动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。

（4）搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

3.静态网页和动态网页的区别？

**--web服务器对它们的处理方式不同。

（1）当web服务器接收到对静态网页的请求时，服务器直接直接将该页发送给客户浏览器，不进行任何处理。无交互，信息单向流动。

（2）当web服务器接收到对动态网页的请求时，从web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。实现交互，信息双向流动。

二：HTML特性：

HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。（概括）主要特点如下：

（1）HTML 指的是超文本标记语言: HyperText Markup Language

（2）HTML 不是一种编程语言，而是一种标记语言

（3）标记语言是一套标记标签 (markup tag)，通常被称为 HTML 标签 (HTML tag)

（4）HTML 使用标记标签来描述网页

（5）HTML 文档包含了HTML 标签及文本内容

（6）HTML文档也叫做 web 页面

（7）HTML 标签是由尖括号包围的关键词，比如 <html>

（8）HTML 标签通常是成对出现的，比如 <b> 和 </b>

（9）标签对中的第一个标签是开始标签，第二个标签是结束标签

（10）开始和结束标签也被称为开放标签和闭合标签

（11）HTML标签又称HTML元素，其又分为父元素（网页固定元素）和子元素（其他元素）

三：HTML文件结构如下：

<html>

<head>

<title>这里是页面标题</title>

</head>

<body>这里插入文字等其他子元素标签，为可视化网页内容</body>

</html>

四：开发平台

（1）Adobe Edge

（2）Adobe Dreamweaver CS6（主流）

（3）JetBrains WebStorm 4.0

五：可支持浏览器

（1）IE

（2）Firefox

（3）Opera

（4）Chrome （开发者多用，主流，推荐）

（5）Safari

六：标签

定义注释。

<!DOCTYPE> 定义文档类型。

<a> 定义超链接。

<abbr> 定义缩写。

<acronym> HTML 5 中不支持。定义首字母缩写。

<address> 定义地址元素。

<applet> HTML 5 中不支持。定义 applet。

<area> 定义图像映射中的区域。

<article> 定义 article。

<aside> 定义页面内容之外的内容。

<audio> 定义声音内容。

<b> 定义粗体文本。

<base> 定义页面中所有链接的基准 URL。

<basefont> HTML 5 中不支持。请使用 CSS 代替。

<bdo> 定义文本显示的方向。

<big> HTML 5 中不支持。定义大号文本。

<blockquote> 定义长的引用。

<body> 定义 body 元素。

<br> 插入换行符。

<button> 定义按钮。

<canvas> 定义图形。

<caption> 定义表格标题。

<center> HTML 5 中不支持。定义居中的文本。

<cite> 定义引用。

<code> 定义计算机代码文本。

<col> 定义表格列的属性。

<colgroup> 定义表格列的分组。

<command> 定义命令按钮。

<datalist> 定义下拉列表。

<dd> 定义定义的描述。

<del> 定义删除文本。

<details> 定义元素的细节。

<dfn> 定义定义项目。

<dir> HTML 5 中不支持。定义目录列表。

<div> 定义文档中的一个部分。

<dl> 定义定义列表。

<dt> 定义定义的项目。

<em> 定义强调文本。

<fieldset> 定义 fieldset。

<figcaption> 定义 figure 元素的标题。

<figure> 定义媒介内容的分组，以及它们的标题。

<font> HTML 5 中不支持。

<footer> 定义 section 或 page 的页脚。

<form> 定义表单。

<frame> HTML 5 中不支持。定义子窗口（框架）。

<frameset> HTML 5 中不支持。定义框架的集。

<h1> to <h6> 定义标题 1 到标题 6。

<head> 定义关于文档的信息。

<header> 定义 section 或 page 的页眉。

<hgroup> 定义有关文档中的 section 的信息。

<hr> 定义水平线。

<html> 定义 html 文档。

<i> 定义斜体文本。

<img> 定义图像。

<input> 定义输入域。

<ins> 定义插入文本。

<keygen> 定义生成密钥。

<isindex> HTML 5 中不支持。定义单行的输入域。

<kbd> 定义键盘文本。

<label> 定义表单控件的标注。

<legend> 定义 fieldset 中的标题。

<li> 定义列表的项目。

<map> 定义图像映射。

<mark> 定义有记号的文本。

<menu> 定义菜单列表。

<meter> 定义预定义范围内的度量。

<nav> 定义导航链接。

<noframes> HTML 5 中不支持。定义 noframe 部分。

<ol> 定义有序列表。

<optgroup> 定义选项组。

<option> 定义下拉列表中的选项。

<output> 定义输出的一些类型。

<p> 定义段落。

<param> 为对象定义参数。

<pre> 定义预格式化文本。

<progress> 定义任何类型的任务的进度。

<q> 定义短的引用。

<rp> 定义若浏览器不支持 ruby 元素显示的内容。

<rt> 定义 ruby 注释的解释。

<ruby> 定义 ruby 注释。

<s> HTML 5 中不支持。定义加删除线的文本。

<samp> 定义样本计算机代码。

<section> 定义 section。

<select> 定义可选列表。

<small> 定义小号文本。

<source> 定义媒介源。

<span> 定义文档中的 section。

<strike> HTML 5 中不支持。定义加删除线的文本。

<strong> 定义强调文本。

<sub> 定义下标文本。

<summary> 定义 details 元素的标题。

<sup> 定义上标文本。

<table> 定义表格。

<tbody> 定义表格的主体。

<td> 定义表格列。

<tr> 定义表格行。

<textarea> 定义 textarea。

<tfoot> 定义表格的脚注。

<th> 定义表头。

<thead> 定义表头。

<time> 定义日期/时间。

<title> 定义文档的标题。

<tt> HTML 5 中不支持。定义打字机文本。

<u> HTML 5 中不支持。定义下划线文本。

<ul> 定义无序列表。

<var> 定义变量。

<video> 定义视频。

<xmp> HTML 5 中不支持。定义预格式文本。

***----部分常用属性----***：

（1）表格（table）中：

colspan:跨列，例：colspan="2"

rowspan：跨行,例：rowspan="2"

cellspacing：单元格与单元格之间的间距,例：cellspacing="0";

cellpadding：单元格内部文字与单元格之间的空隙,例:cellpadding="0";

align：表格对其方式，用在table标签里面,属性值有:center、left、right

（2）音频（audio）--视频（video）中：

autoplay ：是否自动播放autoplay="autoplay"，<"true"为音乐文件读取完后立即播放，"false"则不立即播放，默认值为"false" >

loop：循环次数loop="2";<设置为"true"为永远循环，"false"为仅播放一次，若设为任意一正整数，则循环所输入的次数。>

controls ：设置音乐播放控制面板的外观；control属性供添加播放、暂停和音量控件。

console：为通常面板,smallconsole为小型面板。Console="console";

（3）表单--form中

表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、单选按钮、复选框等等）输入信息的元素。

placeholder ：提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。例：

required ：规定必须在提交之前填写输入域（不能为空）。例：

Name: <input type="text" name="usr_name" required="required" />

七：一般的应用示例

（1）音频（audio）--视频（video）

	<html>
	<head>
	<title></title>
	</head>
	<body background="7.jpg">
	<audio controls="controls" console="console" loop="2" autoplay="autoplay">
	<source src="熊出没.mp3" type="audio/mp3">
	</audio>

	<video controls="controls" console="console" height="600" width="800">
	<source src="至少要知道这个舞蹈版中韩字幕--音悦Tai.mp4" type="video/mp4">

	</video>

	</body>

	</html>

（2）文字修饰--表格（table）

	<html>
	<head>
	<title>你们都是套路</title>
	</head>
	<body background="7.jpg">
	城市套路深，我要回农村。<br/>
	农村路也滑，人心更复杂。<br/>
	静夜思<br/>
	<p><font color="black" size="50" face="DFkai-SB"><center>静夜思</center></font></p>
	<p><strong>   床前  明月  光床  前明  月光，</strong></p>
	<p><b>疑是地上霜。</b></p>
	<p>举头望明月，</p>
	<p>低头思故乡。</p>
	<h1>静夜思</h1>
	<h2>静夜思</h2>
	<h3>静夜思</h3>
	<h4>静夜思</h4>
	<h5>静夜思</h5>
	<h6>静夜思</h6>
	<ol type="Z">
	<li>静夜思</li>
	<li>静夜思</li>
	</ol>
	<ul>
	<li>静夜思</li>
	<li>静夜思</li>
	</ul>
	<a href="http://www.baidu.com">度娘都知道</a>
	<img src="6.jpg" height="500" width="500" />
	<table background="6.jpg" border="1" height="500" width="1000" cellspacing="0">
	<caption>这是示例</caption>
	<tr>
	<td>1这是列 </td>
	<td>1这是列</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	</tr>
	</table>
	</body>
	</html>

（3）表单（form）--跳转

-----------index.html

	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	</head>
	<body>
	<form>
	<p><h1 align="center">This is example</h1></p>
	user:<input type="text" name="user"><br/><br/>
	pw.d:<input type="text" name="pwd"><br/><br/>
	<a href="success.html"><input type="button" value="login"></a>
	<a href="regist.html"><input type="button" value="regist"></a>
	</form>
	</body>
	</html>

----------success.html

	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	</head>
	<body>
	<p align="center">登录成功<p>
	</body>
	</html>

------------------regist.html

	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	</head>
	<body>
	<form>
	<p><h1 align="center">welcome regist</h1></p>
	<p>name:<input type="text" required="required"><font color="red">*not null</font></p><br/>
	<p>sex:  <input type="radio" name="sex">boy  <input type="radio" name="sex">girl  <font color="red">*singel choice</font></p>
	<p>My hobby : <font color="red">*multi choice</font>
	<p><input type="checkbox">I like Swimming</p>
	<p><input type="checkbox">I like sing</p>
	<p><input type="checkbox">I like read</p>
	</p>
	<p>I`m from :
	<select>
	<option value="chengdu">chengdu</option>
	<option value="china">china</option>
	<option value="english">english</option>
	<option value="nanchong">nanchong</option>
	</select>
	<font color="red">*singel choice</font>
	</p>
	<p>Email:<input type="email" name="user_email" placeholder="110@qq.com"><font color="red">*please input true number</font></p>
	<p>my-burn:<input type="date" name="user_date"><font color="red">*must choice</font></p>
	<p>Pwd:<input type="pwd" name="points" min="6" max="12"/><font color="red">*please input 6-12 between number</font></p>
	<p><a href="1.html"><input type="button" value="submit"></a>
	<a href="1.html"><input type="button" value="back"></a>
	</p>
	</form>
	</body>
	</html>

八：关于XHTM

1.XHTML的特点：

（1）XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。

（2）XHTML 的目标是取代 HTML。

（3）XHTML 与 HTML 4.01 几乎是相同的。

（4）XHTML 是更严格更纯净的 HTML 版本。

（5）XHTML 是作为一种 XML 应用被重新定义的 HTML。

（6）XHTML 是一个 W3C 标准。

注：XHTML 是更严格更纯净的 HTML 代码。XHTML 是一个 W3C 标准。

2.XHTML的演变：

（1）XML 是一种标记化语言

（2）XML 用来描述数据，而 HTML 则用来显示数据

（3）HTML没有能力和手段来解释糟糕的标记语言

（4）XHTML拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。

3.XHTML 与 HTML 之间的差异：

最主要的不同：

（1）XHTML 元素必须被正确地嵌套。

（2）XHTML 元素必须被关闭。

（3）标签名必须用小写字母。

（4）XHTML 文档必须拥有根元素。

（5）XHTML 元素必须被关闭

非空标签必须使用结束标签。

空标签也必须被关闭

空标签也必须使用结束标签，或者其开始标签必须使用/>结尾。

更多的 XHTML 语法规则：

（1）属性名称必须小写

（2）属性值必须加引号

（3）属性不能简写

（4）用Id 属性代替 name 属性

（5）XHTML DTD 定义了强制使用的 HTML 元素

（6）属性名称必须小写

（7）强制使用的XHTML元素：文件类型声明（DOCTYPE declaration），它并不是 XHTML元素，也没有关闭标签

4.三种XHTML文档类型：

（1）XHTML 1.0 Strict（严格类型）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。

（2）XHTML 1.0 Transitional（过渡类型）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

（3）XHTML 1.0 Frameset（框架类型）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

在此的情况下使用：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

注：（1）使用最普遍的是 XHTML Transitional。

（2）文件类型声明添加至每页的首行，

（3）如果你希望将页面验证为正确的XHTML，那么页面中必须含有文件类型声

明。

5.XHTML文档验证：

（1）根据文档类型声明进行验证的

（2）通过 DTD 验证 XHTML：

XHTML 文档是根据文档类型声明（DTD）进行验证的。只有将正确的 DTD 添加到文件的首行，XHTML 文件才会被正确地验证

6.XHTM—空标签：

（1）在 XHTML 中是不允许使用空标签（Empty tags）的。<hr> 和 <br> 标签应该被替换为 <hr /> 和 <br />。

使用方式：

（2）不要使用闭合标签来关闭 <img>，而是要在标签的末端添加 / >。

转载于:https://blog.51cto.com/sorewzx/1880426

weixin_34414196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--入门到精通实用最全

一：认识HTML：网页一般又称HTML（Hyper Text Mark-up Language）文件，即超文本标记语言（用于描述网页文档的一种标记语言。）。是一种在www上传输、能被浏览器认识和翻译成页面并显示出来的文件。文字与图片是构成一个网页的两个最基本的元素，除此之外还包括动画、音乐、程序等。网页是构成网站的基本元素，是承载各种网站应用的平台，网页文件一般...
复制链接

扫一扫