HTML、CSS和JavaScript学习一(HTML定义方式、HTML和XHTML的区别、以及常见标签)

来源：互联网发布：下载马赛克软件编辑：程序博客网时间：2024/05/21 06:57

HTML学习：

先看html的一个简单示例，(下面的是dreamweaver自动生成的部分文档，下面的部分代码以后不在重复):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>初学者</title></head><body>这里是整个网页要显示的文字</body></html>

先一一讲解这些代码的具体作用：

1.DOCTYPE (文档类型)：

XHTML是HTML的”严谨版”，在HTML和XHTML中各自有不同的子类型，如包括严格类型和过渡类型。过渡类型兼容以前版本定义的，而在新版本中已经废弃的标记和属性；严格类型则不兼容已经废弃的标记和属性。

建议初学者使用XHTML 1.0 transitional(XHTML1.0过渡类型)，这样初学者可以按照XHTML的标准书写符合Web标准的网页代码，同时在一些特殊情况下还可以使用传统的作法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 是在<!>注释的，很明显只是一个说明作用，是关于”DOCTYPE ”(文档类型)的说明，用来提示浏览器使用XHTML1.0的过渡规范来解释这个文档。在使用Dreamweaver时，可以在创建的初期进行选择，看截图

在<html>标记带有一个xmlns的属性，它被称为”xml命名空间”，具体含义不用深究，使用即可。

2.<html>标记

<html>标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记，但还是希望初学者养成一个良好的编成习惯，在HTML文件的开头使用<html>标记来做个形式上的开始。

3.<head>

<head>也称为头标记，一般放在<html>标记里，其作用是放置关于此HTML文件的信息，如提供索引、定义Css样式和javascript函数的定义实现。

4.<title>标记

它称为标题标记，包含在<head>标记内，它的作用是设定网页标题，可以看见在浏览器的上方有显示这个标题，如图：

5.<body>标记

它有称为主体标记，网页要显示的内容都放在这个标记内，它是HTML文件的重点所在。在它里面可以放置HTML的其它标签，如<p>、<div>、<table>等。

HTML和XHTML的区别

尽管现在的浏览器大多数都支持HTML，但是为了使网页能够符合标准，初学者应该尽量使用XTHML规范来编写代码，使用XHTML规范需要注意：

1.在XHTML中标签名必须小写

在HTML中，标签名可以大写或小写，例如，下面的代码在HTML中是正确的：

<BODY>

</BODY>

但是在XHTML中，则必须这样写：

<body>

</body>

2.在XHTML中属性名必须小写

HTML属性名也必须小写，如在XHTML中下面代码是错误的：

正确的应该这样写：

3.在XHTML中标签必须严格嵌套

HTML中对标签的嵌套没有严格的规定，如下在HTML中是正确的：

<b><i>这是文本内容</b></i>

但是在XHTML必须为：

<i><b>这是文本内容</b></i>

4.在XHTML中标签必须是封闭的：

在HTML规范中，下面是正确的：

<p> aaaaaa

<p> bbbbb

上述代码第2个标签就意味着一个<p>标签的结束。但是在XHTML中，这是不允许的，必须要这样写：

<p> aaaaaa </p>

<p> bbbbb </p>

5.在XHTML中急事是空元素的标签也必须封闭

空元素的标签就是指那些成对的标签，如<img>、<br>.。

下面的写法在XHTML中是错误的：

换行<br>

水平线<hr>

图像<img src=”imge.png”>

正确的写法是：

换行<br />

水平线<hr />

图像<img src=”imge.png” />

6.在XHTML中属性值用双引号括起来

在HTML中，属性可以不必使用双引号，如：

而在XHTML中必须是：

7.在XHTML中属性值必须使用完整的形式

在HTML中，一些属性经常使用简写方式设定属性值，如：

在XHTML中，必须是：

HTML常见标签：

1.字体：<font>

如果要在页面中显示一些特殊符号，需要进行转义，

如下面符号：

2.标题：<h1><h2><h3>.....<h6>等六级标题

3.列表标签:<dl><ul><ol>

(1)<dl></dl>是定义列表，默认有层级关系

<dl>

<dd>aaaaaa</dd>

<dd>bbbbbb</dd>

</dl>

效果如下：

(2)<ul></ul>无序列表，所谓的无序是指没有序列的列表，其中每个列表项使用<li></li>只能有下面三个属性circle、disc、square：

//type可以改变为上面三个属性

<li>aaaaa</li>

<li>bbbbb</li>

<li>ddddd</li>

<li>ccccc</li>

</ul>

(3).<ol></ol>有序列表，所谓的有序是指有数字标示的列表，其中每个表项使用<li></li>:

//type的值可以为：1或a或i

<li>aaaaa</li>

<li>bbbbb</li>

<li>ddddd</li>

<li>ccccc</li>

</ol>

4.图像标签：<img>

5.超链接：<a>，当被点击后，会启动引擎所对应的解析程序，去查找指定主机

(1)先找本地主机的hosts文件，如果没有找到该主机对应的ip地址。

(2)去公网NDS服务器上找对应的ip地址

<body>

</body

超链接的另一个作用是定位标记，当<h3>标题下的内容太多时，用户需要拉动滚动条才能往下观看，可是有了定位标记后，只要点击“第一本书”、“第二本书”.....时就可以跳转到指定的内容处。

<body>

<h3><a name="aaa">第一本书开始</a></h3>

<p>了开始大家发的时间了房价来看实打实的解放了凯撒点击飞的快</p>

<h3><a name="bbb">第二本书开始</a></h3>

<p>理客服开始的解放了开看实打实的解放了凯撒点击飞金利科技</p>

<h3><a name="ccc">第三本书开始</a></h3>

<p>德菲杰受到激发了开始的经理客服开始的解放了开始大家发的</p>

</body>

6.表格标签：<table>，表格由行所组成，行由单元格组成，表格中默认都有一个<tbody>标签。<caption>是标题标签，如下面的代码：

<body>

<tr>

<td>aaaaaa</td>

<td>bbbbbb</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>bbbbbb</td>

</tr>

</table>

</body>

7.表单标签：<form>，该标签是可以和服务器进行交互的。

表单标签中的元素：

<input>：该标签因为type属性值的不同，所对应的组件也不一样。

type属性：

1.text：文本框，输入的文本可见

2.password：密码框，输入的文本不可见

3.radio：单选框，注意，要被选中，必须要给单选框定义一个属性name，当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同。

4.checkbox：复选框，对多个数据进行同时选中

5.file：可以进行文件选则的组件，通常不用附件，或者文件上传

6.hidden：隐藏组件，该组件不会在页面上显示，但是其定义的name和value可以提交到服务器

7.button：按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册事件并加入自定义效果

8.reset：重置按钮，将组件中被操作的效果还原到初始状态

9.submit：提交按钮，将组件中添加的数据提交到指定的目的地

10.image：图像组件，为了避免提交按钮的难看，可以通过image的src属性链接一个好看的按钮图片

下拉菜单：<select>，每一个下拉菜单项都由<option>进行封装。

</select>

注：表单组件通常都要定义name和value属性，因为要将数据发送给服务器端，服务端只要知道了name的值才可以对提交的数据进行分别获取。

form标签中常见的属性：action，指定数据提交的目的地；method，提交方式，两种常用值get和post，get为默认。

get和post的区别：

get：会将提交的数据显示在地址栏上

post:不会将数据显示在地址栏上

get：提交的数据的体积受地址栏的限制

post：可以提交大体积的数据

get：对于敏感信息不安全，如密码

post：对于敏感信息安全

get：会将提交的数据封装在请求行，也就是http消息头之前

post：会将提交的数据封装在数据体中，也就是http消息头之后的空行后

对于服务端而言

表单提交尽量使用post方式，因为涉及到编码的问题，因为tomact服务端默认的解码时iso8859-1。

对于post提交的中文，在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。

对于get提交的中文，在服务端只能通过iso8859-1激昂数据编码一次，再通过制定的码表gbk解码。

使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交的时候才会用到form标签。

当HTML、CSS和JavaScript它们三相遇时

网页主要由3个部分组成：结构(html)、表现(css)和行为(javascrpt)。

在一个网页中，可以将其分成如干部分，包括各级标题、正文段落等这就构成了一个网页的“结构”。每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。网页是一个可以随时变化的，而且可以和用户进行互动，因此如何变化以及如何交互，就称为它的“行为”。因此网页概括的来说，“结构”决定了网页是“什么”，“表现”决定了网页看起来“是什么样子”，而“行为”决定了网页“做什么”。

即“结构”、“表现”、“行为”分别对应html、css、javascript三种技术。也就是说，(x)html用来决定网页的结合和内容，css用来设定网页的表现样式，javascript用来控制网页的行为。

Html中使用Css

传统HTML的缺点

先看下面的代码：

<body><h1><font color="#00FF00" face="宋体">标题一</font></h1><h1><font color="#00FF00" face="宋体">标题二</font></h1><h1><font color="#00FF00" face="宋体">标题三</font></h1><h1><font color="#00FF00" face="宋体">标题四</font></h1><h1><font color="#00FF00" face="宋体">标题五</font></h1><h1><font color="#00FF00" face="宋体">标题六</font></h1></body>

我们发现有多个<h1>标签，<font>的样式都是一样的，可是每次都要重复的写，

下面看利用css样式之后：

<head><title>无标题文档</title><style type="text/css">h1{color:#00FF00;font:"宋体";}</style></head><body><h1>标题一</h1><h1>标题二</h1><h1>标题三</h1><h1>标题四</h1><h1>标题五</h1><h1>标题六</h1></body>

两者的显示效果是一样的，可是很明显，第二种利用css样式的方式很简便。使用Css样式很简单，只需要在<head>标签中使用<style>标签即可，不过类型要选择为<style type="text/css">，通常我们都将<style>标签定义在<head>标签中，后面会讲到。

基本CSS选择器

选择器是CSS中很重要的概念，所有的HTML中的标签样式都是通过不同的CSS选择器进行控制的，开发者只需要通过选择器对不同的HTML标签进行选择即可，并赋予各种样式声明，即可实现各种效果。

这里引用他人的一个例子说明选择器的概念，可以用“地图”作为类比。在地图上可以看到一些“图例”，如河流用蓝色的线表示，公路用红色的线表示，省会城市用黑色圆点表示等。本质上，这就是一种“内容”与“表现形式”的对应关系。在网页上，也同样存在着这样的对应关系，如<h1>标签用蓝色文字表示，<h2>用红色文字表示。因此为了能够使CSS规则与HTML元素对应起来，就必须定义一套完整的规则，实现CSS对HTML的“选择”，这就是其叫做“选择器”的原因。

1. 标签选择器

每一种HTML标签的名称都可以作为相应的标签选择器的名称。如，p选择器，就是用于声明页面中所有<p>标签的样式风格，同样可以通过h1选择器来声明页面中所有的<h1>标签的CSS风格，定义格式
<style type="text/css">
h1{
color:#00FF00;
font:"宋体";
}

</style>

2. 类别选择器

当页面中有很多<h1>标签时，如果采用标签选择器，就不合适了，因为我们可能希望其它的<h1>标签式其它颜色呢，这时标签选择器就不够用了，还需要引入类别选择器，如下图解释，class选择器的名称开发者可以自己定义，属性和值跟标签选择器一样，必须符合Css规范，规范可以查看javascript API

定义格式如下，类名是“.class”

<style type="text/css">h1{color:#00FF00;font:"宋体";}.red{color:#FF0000;}.green{color:#00FF00;}</style></head><body><h1 class="red">标题一</h1><h1 class="green">标题二</h1></body>

3. ID选择器

ID选择器的使用方法和class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性很强，在HTML的标签中只需要利用其id属性，就可以直接调用CSS中的ID选择器，看图

定义格式如下，用#作标记

<style type="text/css">#red{color:#FF0000;}#green{color:#00FF00;}</style></head><body><h1 id="red">标题一</h1><h1 id="green">标题二</h1></body>

4 多层选择器

先看代码，代表意思是<div>标签下的<h1>标签，它看起来和标签选择器很像

 <style type="text/css"> div h1{   color:#FFFF00; } </style> </head> <body>   <div><h1>标题一</h1></div> </body>

5 复合选择器

先看代码，复合选择器是用“，”隔开的，也是标签选择器的高级运用，代表的意思是<div>标签下的<h1>和<p>标签都使用相同的样式。

<style type="text/css">div  h1，div  p{  color:#FFFF00;}</style></head><body><div><h1>标题一</h1><p>文本段落</p></div></body>