欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

【WEB基础】HTML & CSS 基础入门（1）初识

程序员文章站 2022-04-28 14:19:21
前面 我们每天都在浏览着网络上丰富多彩的页面，那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢？我们想要自己设计一个页面又该如何来做呢？对于刚刚接触网页设计的小伙伴来说，看到网页背后的一堆符号和代码，是不是会感到有些凌乱。“看这里、看这里”，其实HTML并不复杂，严格意义上它并不是编程，它只是 ......

前面

我们每天都在浏览着网络上丰富多彩的页面，那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢？我们想要自己设计一个页面又该如何来做呢？对于刚刚接触网页设计的小伙伴来说，看到网页背后的一堆符号和代码，是不是会感到有些凌乱。“看这里、看这里”，其实html并不复杂，严格意义上它并不是编程，它只是一些标记，也可以说是和浏览器的一些“约定”，就是告诉浏览器，要显示什么内容，这些内容是什么样式。

好了，不废话了，来个例子看下：

一个 html 小例子

第一步：新建“记事本”，把下面这段代码复制到记事本中去，然后保存。

<!doctype html>
<html>
    <head>
        <title>网页的标题</title>    
    </head>
    <body>
        <p>左手程序z右手诗</p>       
    </body>
</html>

第二步：将记事本后缀名“.txt”改为“.html”。

【WEB基础】HTML & CSS 基础入门（1）初识

第三步：点击“新建文本文档.html”这个html文件，就可以在浏览器打开了。

【WEB基础】HTML & CSS 基础入门（1）初识

ok，是不是很简单，我们看一下过程：

【WEB基础】HTML & CSS 基础入门（1）初识

通过上面的几行代码，不难看出，html就是由一些用尖括号围起来并且成对出现的标签组成。不错，html就是由若干标签及其包含的内容组成，这些标签一般都是成对出现的，有开始和结束，但也有部分自闭合标签例外，html的基本结构由以下几个部分组成：

  • 标记符<html>和</html>，表明该文件是用html来描述的，声明了文档的开头和结尾。
  • 标记符<head>和 </head>，表示html文档头部信息的开始和结尾。头部信息主要包括页面的标题、相关说明等内容，它不作为网页的内容在浏览器中显示。
  • 标记符<body>和</body>，网页中要显示的实际内容就在这两个标记符之间，它是网页的主体部分。

我们再对前面记事本里的代码加上注释，就会看的更明白。

<!doctype html>  <!--声明这是一个html文档-->
<html>  <!--告诉浏览器网页是从这里开始的-->
<head>  <!--这是网页的头部开始-->
    <title></title> <!--这是网页的标题，这里为空-->
</head>  <!--这是网页的头部结束-->
<body>  <!--这是网页的主体部分开始-->
    <p>左手程序z右手诗</p>  <!--这是要在浏览器上显示的内容-->
</body>  <!--这是网页的主体部分结束-->
</html>  <!--告诉浏览器网页在这里结束了-->

html 小总结

html（hypertext markup language） 是用来描述网页的一种语言。

html 指的是超文本标记语言，不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)。

html 使用标记标签来描述网页。

简单说来，html 就是我们与浏览器用来沟通交流的语言，我们通过 html 告诉浏览器让它按照我们的意愿展示出我们期望的内容及效果。

认识一下 css

大概了解了一下 thml，我们在来看一下 css，其实 css 就是一个标准的“颜值党”，它基本决定了网页的外观样式。html 和 css 相辅相成，它们一个负责网页上要显示的内容，另一个负责这些内容的布局和样式。

看个小例子，比如我要调整前面记事本里 html 所显示文字的字体、颜色和大小，如下：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网页的标题</title>
    <!--下面是css样式代码，与html在同一个文档中 -->
    <style type="text/css">
        p {
            font-family: 微软雅黑; /*设置标签p里面字体*/
            font-size: 12pt; /*设置标签p里面字体大小*/
            color: white; /*设置标签p里面字体颜色*/
            background-color: green; /*设置标签p背景颜色*/
        }
    </style>
</head>
<body>
    <p>左手程序z右手诗</p>
</body>
</html>

先看一下在浏览器中的显示效果：

【WEB基础】HTML & CSS 基础入门（1）初识

不难看出，在 html 文档的头部，就是<head></head>标记的里面加上了<style></style>，在这里定了<p></p>的样式，字体是“微软雅黑”，大小是“12pt”，颜色是“白色”，背景是“绿色”。

最后

ok！看完的小伙伴应该大概了解 html 和 css 是干什么的了吧，稍微总结一下，html就是一堆标签，这些标签告诉浏览器要显示的内容的是什么，css 就是告诉浏览器要如何显示这些内容。列一下前面例子里出现过的标签：

<html><!--html 页面开始标签-->

<head><!--页面头部标签-->
    <!--在头部标签里一般放置“标题标签”、“css样式”、“js代码”等内容-->
    <title></title><!--页面标题标签-->
   
    <style type="text/css">
        /*页面样式标签*/
        /*type是个属性，是说明样式的内容类型，一般固定就是“text/css”*/
        /*在这里可以设置页面各个元素的样式*/
    </style>

</head><!--页面头部结束标签-->

<body><!--html 页面主体标签，要在网页上显示的内容都要放在这里面-->

    <p></p><!--p标签表示一个段落-->

</body><!--主体标签结束标记-->

</html><!--html 页面结束标签-->

一点说明

代码加注释是非常必要且重要的，它能提高代码的可读性。注释不参与编译，不会被执行，thml注释同样也不会在浏览器里显示，它只是代码的说明。

html注释：“<!--”表示注释的开始，“-->”表示注释的结束。

css注释：“/*”表示注释的开始，“*/”表示注释的结束。

------------------end

上一篇： 一篇入门的php Class 文章

下一篇： 干货，一文带你超详细了解 Filter 的原理及应用

推荐阅读