html css js 简单例子_原创文档.pdf

htmlcssjs简单例子--第1页

HTML、CSS和JavaScript是现代Web开发中不可或缺的三大技术。

它们分别负责网页的结构、样式和交互行为，三者结合使得我们能够

创造出丰富多彩的网页和Web应用程序。在本文中，我将通过一些简

单的例子来展示HTML、CSS和JavaScript的基本用法，帮助读者更

好地理解它们的作用和相互关系。

1.HTML的基本结构

在Web开发中，HTML（HyperTextMarkupLanguage）负责网页

的结构。它使用标签（tag）来包裹不同的内容，如段落、标题、图片

等。下面是一个简单的HTML结构示例：

```html

!DOCTYPEhtml

html

head

title我的第一个网页/title

/head

body

h1欢迎来到我的网页/h1

p这是一个段落文字/p

/body

/html

```

htmlcssjs简单例子--第1页

htmlcssjs简单例子--第2页

在这个例子中，我们使用了`!DOCTYPEhtml`声明来指明这是一个

HTML5文档，然后是`html`标签包裹着整个HTML内容，

`head`标签内包含了网页的元信息，如标题等，`body`标签内

包含了网页的具体展示内容。

2.CSS的样式设置

CSS（CascadingStyleSheets）用于为网页添加样式，比如布局、颜

色、字体等。下面是一个简单的CSS样式设置示例：

```html

!DOCTYPEhtml

html

head

style

h1{

color:blue;

}

p{

font-size:18px;

}

/style

/head

htmlcssjs简单例子--第2页

htmlcssjs简单例子--第3页

body

h1欢迎来到我的网页/h1

p这是一个段落文字/p

/body

/html

```

在这个例子中，我们使用了`style`标签来添加CSS样式，将

`h1`标签的文字颜色设置为蓝色，将`p`标签的字体大小设置为

18像素。

3.JavaScript的交互行为

JavaScript用于使网页具有交互行为，比如响应用户的点击、输入等

操作。下面是一个简单的JavaScript交互行为示例：

```html

!DOCTYPEhtml

html

body

h1我的第一个JavaScript例子/h1

htmlcssjs简单例子--第3页

htmlcssjs简单例子--第4页

script

/script

/body

/html

```

在这个例子中，我们使用了`script`标签来添加JavaScript代码，

它会在网页加载时将`p`标签的