前端基础-优快云博客

本文介绍了HTML、CSS和JavaScript的基础知识，涵盖了HTML的标准结构、文本标签及其实现的特效效果等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML、CSS和JavaScript简介

1.HTML（Hyper Text Markup Language)：超文本标记语言，是一种用于创建网页的语言。HTML是网页内容的载体。内容就是网页制作者放在页面上想让用户浏览的信息，可以包含文字、图片、视频等。它赋予网页更好的意义和结构，使网页结构更加明晰干净，便于管理。在移动设备上，HTML5将更具优势，对于提升用户体验起了重要的作用。XHTML是可扩展超文本标记语言，是与HTML表现形式相似但语法更加严谨的置标语言。这种语言不仅使标签和字符更加规范化，还具有更好的跨平台能力。

2.CSS（Cascading Style Sheets）：叠层样式表，用来表现HTML等文件形式并增强控制网页样式的一种标记性语言。样式是表现，比如标题字体、颜色变化、或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。CSS样式的作用有：将内容和样式分离；提高页面的重用度；增加控制页面布局的能力；便于维护和更新网页；提高网页的下载速度；优化代码兼容性。

3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单、鼠标滑过表格的背景颜色改变等。有动画的、有交互的，一般都是用JavaScript实现。JavaScript语言的前身是Netscape公司推出的Livescrip，是一种基于对象和事件驱动并具有相对安全性的客服端脚本语言，它基本符合传统计算机高级语言的特点，已经被广泛运用于互联网开发。JavaScript可以直接嵌入HTML页面中，无须经过web服务器就能直接对用户的输入作出响应，使页面可以与用户更好地交互；同时，它不依赖操作系统，只需要浏览器的支持，具有跨平台的特性，可以在多种平台下运行。

二、HTML标准结构

HTML是一种标记语言，它具有标记标签的集合。它由成对出现的标签组成。

1.HTML的文件结构

<html>----html页面的根标签
    <head>----头标签
    <title>----窗口标题标签
    </title>
    </head>
<body>----内容标签
内容
</body>
</html>

说明：1）<html></html>是根标签，所有的网页标签都在<html></html>中。

2）<head>用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。

3）在<body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签。这些标签的内容都会在浏览器中显示出来。

2.HTML元素

<p>段落标签</p>

上面是HTML元素的简单示例。其中<p>称为开始标签或者起始标签，</p>称为结束标签或者闭合标签。标签是元素的内容，即web。标签和内容一起形成代码元素。

注意：元素名称不区分大小写，HTML标签也不区分大小写，但建议小写。

3.注释

在HTML中的注释

<!--注释的内容-->

在CSS中的注释

/注释内容/

4.HTML文档类型

<!DOCTYPE>声明帮助浏览器正确显示网页

说明：1)<!DOCTYPE>不是HTML的标签，是声明。

2)该声明必须放在HTML文档的第一行。

常用的声明：

HTML5:
<!DOCTYPE html>


HTML4.01:

<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


XHTML 1.0

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

5.HTML乱码解决

当网页出现乱码时，在<head></head>标签之间添加：

<meta charset="UTF-8">

三、HTML文本标签

1.标题标签

<h1></h1>~<h6></h6>  标题标签

说明：

1)<h1>定义最大的标签，<h6>定义最小的标签。

2)浏览器会自动给标题的前后添加空行。默认情况下，浏览器会自动在块级元素前后添加一个额外的空行，比如标题、空行后面。

3）建议仅仅把标题标签用于标题文本，不能为了产生粗体而使用它们。

2.段落标签

<p></p>

说明：浏览器会自动在段落的前后添加空行，<p>是块级元素。

3.强调标签

<em></em>
<strong></strong>

说明：二者在语气上的区别：<em>表示强调，<strong>表示更强烈的强调。

效果上的区别：浏览器中<em>默认用斜体表示，而<strong>用粗体表示。

<em>、<strong>和<span>的区别？

<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

<span>标签是没有语义的，它的作用是为了设置单独的样式使用的，把一段话圈起来，然后用css设置样式。

4.引用标签

<q>引用文本</q>  短引用
<blockquote>引用文本</blockquote>  长引用

说明：

1）浏览器会自动对<q>标签引用的文本加上双引号，它的意思是引用别人的话。

2）<blockquote>的作用是引用别人的文本，是对内容较长的文本的引用。浏览器对<blockquote>标签的解析是缩进格式。

5.换行标签与分隔线标签

<br/>  换行标签,作用相当于Windows下的回车。
<hr/>  分隔线标签，在浏览器中默认样式线条比较粗，颜色为灰色，可以使用css进行修改。

说明：这两个标签都是一个空标签，只有一个开始标签，没有结束标签。

6.特殊字符

&nbsp;   空格
&reg;    注册
&copy;   版权
&trade;  商标

注意这几个特殊字符标签的分号不能省！！！

7.代码标签

<code>一行代码</code>
<pre>多行代码</pre>

说明：

1）在文章中一般如果要插入多行代码时，不能使用<code>标签，而要使用<pre>标签。

2）<pre>标签的作用：预格式化的文本。被<pre>元素包围的文本通常会保留空格和换行符。它的常见应用就是用来显示计算机的源代码。

8.地址标签

<address>地址</address>

说明：<address>标签，为网页加入地址信息，在浏览器上显示的样式为斜体。

9.滚动标签

<marquee 属性=属性值></marquee>
属性：behavior指定当前滚动方式  
	属性值： alternate 来回滚动  scroll 交替滚动 slide 滚动某一边停止  
属性：scrollamount指定滚动速度，指定整数值
属性：direction 滚动方式 left right up down
属性：bgcolor:背景色  -html标签的属性
     background-color--css的样式属性

10.上下标标签

<sup></sup>  上标标签  
<sub></sub>  下标标签

如：在网页中要显示 $x^{2}$ ，代码为x<sub>2</sub>

在网页中要显示 $a_{1}$ ，代码为a<sub>1</sub>

11.行内标签和块标签

<span></span>行内标签
<div></div>块标签

说明：

<span></span>
<span></span>在浏览器中只占一行

<div></div>
<div></div>在浏览器中占两行

12.居中标签

<center></center>

四、代码练习

<!DOCTYPE>
<html>
<head>
<title>静夜思</title>
<meta charset="UTF-8">
</head>
<body>
<address>陕西省西安市</address>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr/>
<em>em标签</em>
<strong>strong标签</strong>
<hr/>
<p>以下文本为短引用<q>引用文本</q></p>
<p>以下文本为长引用<blockquote>HTML,超文本标记语言，标准通用标记语言下的一个应用。是 网页制作必备的编程语言<br/>
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
</blockquote></p>
<hr/>
<h1><marquee behavior=alternate>观察特殊字符</marquee></h1>
<p>
注册：&reg;</br>
商标：&trade;</br>
版权：&copy;</br>
</p>
<hr/>
<code>代码语言:var i=1000;插入一行代码使用code标签</code>
<pre>多行代码：</br>var a=1;</br>var b=2;</br>var c=a+b;</br></pre>
<h2>上标标签:x<sup>2</sup>&nbsp;&nbsp;&nbsp;下标标签a<sub>1</sub></h2>
<h3>行内标签<span>span1</span><span>span2</span><br/>块标签<div>div1</div><div>div2</div>
<center><h4>居中标签</h4></center>
</body>
</html>

效果展示：