1、介绍
HTML、CSS、JavaScript可以说是学习web的三门最基础的语言。是我们进入web世界的初始技能。
下面先分别介绍他们再说说他们之间的关系
1)、什么是HTML
HTML是Hypertext Markup Language超文本标记语言的英文缩写。
HTML 不是一种编程语言,而是一种标记语言 (markup language)。
web开发者使用HTML的一系列标签来描述网页。
2)、什么是CSS
CSS是Cascading Style Sheets指层叠样式表的英文缩写。
web开发者用CSS定义如何显示 HTML 元素。
3)、什么是JavaScript
JavaScript 是世界上最流行的脚本语言。
JavaScript 被设计为向 HTML 页面增加交互性。
4)、联系
总的来说最基本的是HTML,它首先定义了一个网页最基本的东西——网页的结构和内容,相当于一个人的骨架和组成部分;而CSS定义样式,即实现HTML元素的不同的外观,大小等,相当于决定一个人的外貌;JS则是保证了网页的交互性,相当于一个人与外界交际一样。
一般的文件组织形式是,html文件仅仅写最简单的结构和内容元素,元素的所有样式都写在CSS文件文件中。这样做的目的是为了让内容与表现分离,极大提高工作效率。
很明显,CSS和JS是基于HTML的,因此说最基本的是HTML。
本文先讲一讲部分基本的HTML元素,内容可能有点散,请见谅!
2、basic HTML
html语言是一系列标签组成的,他们的基本语法是
<element> content </element>
其中<element>
标签标示一个元素的开始,</element>
标签标示一个元素的结束。
目前,一般的html文件在首行必须加上<!DOCTYPE html>
,代表它兼容HTML5及之前更早的版本
正式的HTML文件的开始是包含在标签<html></html>
之中的。
在标签<html></html>
之下又有几种标签,一个是<head></head>
标签,它表示原信息,即用来说明信息的信息,比如网页的标题。
另一个是<body></ body>
标签,网页中可见的部分都是放在<body>
标签里面的。
大概如下:
<!DOCTYPE html>
<html>
<head>
information about the page
</head>
<body>
page contents
</body>
</html>
1)、关于标签的一些点
(1)、block元素和inline元素
一些标签如<p>、<div>、<ul>
等是块级(block)元素,在HTML中,块级元素会占用满至少一行,就算它的内容一行不到。并且两个块级元素之间通常会间隔一空行。
而另一些标签如<br />、<img />、<a>
则是inline元素,它可以跟其他元素一起分享同一行,如
<p>this is<br /> some text</p>
当然,inline元素的这个特点也意味着他不能单独出现,他总是伴随着块级元素出现的。
(2)、attributes属性
一些标签可以包括一个或者多个属性attributes:
<element attribute1="value1" attribut2="vaule2">content</element>
(3)、注意
对于inline标签,一个标签的开始必须在前一个标签结束后,不能在一个inline标签结束前开始另一个新的inline标签!
2)、<title>
标签
<title>
顾名思义,定义当前网页的名字。<title>
标签放在<head>
标签之中。
3)、<meta>
标签
<meta>
元素可提供有关某个 HTML 元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。下面是一个例子
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta>
标签有name、http-equiv、content等属性;
name的值可以是author、description、keywords、generator和revised等内容
http-equiv可以是content-type、有效期expires、刷新频率refresh等
用什么编码的可以写在content中。
4)、<p>
标签
<p>
既是Paragraph的首字母,很明显,是一个文字标签。网页中最基本的段落就是在这里面。
5)、<h1>, <h2>, …<h5>,<h6>
标签
他们是Headings的缩写,定义6中等级不同的标题(注意是逻辑上的等级大小,而不是外观上的形状大小,虽然1到6的文字大小的确不一样)
6)、<br />
标签
用于另起一行。
7)、<hr />
标签
定义一条水平线。
8)、<a>
标签
<a>
标签定义一个连接,如:
<a href=“http://www.baidu.com/”>
a标签是一个inline元素。
href是a标签的一个属性,后面是它的值,使用URL作为它的值,可以使用相对路径或者绝对路径。
9)、<img>
标签
<img>
定义一个图像,如:
<img src="imges.jpg" alt="a imges" />
<img>
的两个基本的必要的属性是src和alt,src表明图片的出处;alt是当图片因某些问题加载不出来的时候,会显示alt的值代替img的显示。
<img>
是一个inline元素。
10)、<em>和<strong>
标签
这两个标签出现在<p>
标签中,分别用于实现文字的斜体和加粗。
11)、<ul>, <li>
标签
<ul>, <li>
是无序表标签,均为块级元素。
首先,<ul>
定义一个无序表,表中的每一项都由<li>
定义,如:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
12)、<ol>,<li>
标签
<ol>
标签定义有序表,用法与ul标签相同,也是块级元素。
13)、<!-- -->
标签
写注释的标签,写在--
之间
P.S.列表之中又可以包含列表。
14)、表格标签:
<table>
定义整个表格
<tr>
定义表格每行的元素
<caption>
定义表格的标题
<th>
表格属性的说明
<td>
表格每行中的每个具体元素
<table>
<caption>new student</caption>
<tr><th>name</th><th>gender</th></tr>
<tr><td>barry</td><td>male</td></tr>
<tr><td>Iris</td><td>female</td></tr>
</table>
15)、<dl>, <dt>, <dd>
<dl>, <dt>, <dd>
用于定义定义列表。
<dl>
表示定义列表的开始。<dt>
表示要定义的名称;<dd>
表示对其的定义;
如:
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
16)、引用标签
<blockquote>
用于定义长引用。
<q>
inline标签,显示效果是双引号。
17)、如何显示代码
<code>
标签和<pre>
标签
一般地,<code>
标签用于短的代码的显示,<pre>
标签用于长的代码的显示。
他们不会忽略多余的空格,而是原原本本地呈现出来,并且每个字母的宽度相同,使得代码可以对齐起来。