HTML+CSS基础（一）：初识html和css

时间：2022-11-11 11:07:00

近来太闲，索性学点小知识，以慰藉忐忑的内心～

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。

  • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  • CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  • JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

认识HTML

网页中每一个内容在浏览器中的显示，都要存放到html各种标签中，一个HTML文件是有自己固定的结构的。

<html>
    <head>...</head>
    <body>...</body>
</html>

  • <html></html>称为根标签，所有的网页标签都在<html></html>中。

  • <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

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

下面了解一下<head>标签，文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。

认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

HTML+CSS基础（一）：初识html和css

在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下列代码：

p{
font-size:12px;
color:red;
font-weight:bold;
}

一个html文件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html和CSS样式</title>
<style type="text/css">
p{
font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>Hello World！</p>
</body>
</html>
标签：

相关文章