浅谈HTML和css

最新推荐文章于 2024-03-13 20:15:06 发布

南柯一梦x

最新推荐文章于 2024-03-13 20:15:06 发布

阅读量647

点赞数 2

分类专栏： Web 文章标签： html css

本文链接：https://blog.csdn.net/nankeyimengxihe/article/details/50302043

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在做一个的开发，是基于B/S结构的，其他的见识也有所长进，但是涉及到前端页面方面的东西总是让人很烦恼。尽管以前了解过关于前端设计的知识，但那真的仅仅只是局限于了解而已了，所以不得不重新学习，也就是学习下简单的相关知识，让做出的页面能看就行。下面写一下我对HTML和css的认识理解。

HTML（HyperText Markup Language）俗称超文本标记语言，它是一种标记语言而并非编程语言，HTML使用标签标记需要在网页中显示的元素（比如：文字、图像、动画、多媒体文件等），标签使用 '<>' 来扩入到里边（比如：<html></html>），而且标签一般都是成对出现的但也有个别标签是单个的（比如<link>、<input>等）。用HTML编写的文件是以.html结尾的,可以直接在浏览器中被解释执行，以网页的方式呈现给用户。

最简单的网页由以下HTML标签组成：

<span style="color:#ff0000;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My web page</title>
</head>

<body>
hello HTML！
</body>
</html>
</span>

第一行<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

第二行开始是HTML代码，所有的网页上显示的元素全都定义在'<html></html>'这组标签之内。<meta charset="utf-8">指的是编码方式；'<head></head>'标签是HTML文档的头部，位于它里边的信息是不会在浏览器正文中显示的，'<title></title>'标签里的信息是文档标题，显示在浏览器窗口中的标题栏中。'<body></body>'标签里的信息是网页的主体正文，会浏览器窗口中直接显示。在<body>标签中可以写入各种各样复杂的信息，只要使用正确的HTML语法，将会正确的呈现在浏览器窗口中。

下图是示例代码的执行结果：

HTML标签的还包含很多属性，属性提供了有关 HTML 元素的更多的信息，比如：属性可以对需要显示的文本的字体、大小、颜色、背景等等一系列信息进行设置。

css (Cascading Style Sheets)指层叠样式表，css是一种标准化语法，它可以让网页设计者方便的控制web页面的外观表现，从整体上控制网页的布局格式，同时使用其丰富的样式属性去设置页面上所有元素的显示形式，细化到每一个角落，使得网页设计变得简单。css代码可以直接嵌入在HTML代码中，具体是写在<head>标签里的'<style></style>'标签里；或者可以将css代码单独的写到一个.css文件中，再以<link>标签引入。

下面是一个css使用的样例：

<div><div><span style="color:#333333;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My web page</title></span><span style="color:#ff0000;">
<style type="text/css">
.body1 {
 background-color: #C4EBE3;
}
#div1 {
 width: 100%;
 background-color: #61E781;
 font: "Times New Roman";
 font-size: 24px;
}
</style>
</head></span></div><div>
</div><div><span style="color:#ff0000;"><body class="body1"></span>
hello HTML！
<span style="color:#ff0000;"><div id="div1"></span>
  <p>简单查看一下css操作的样式效果</p>
</div>
</body>
</html>
</div></div>

以上css代码里涉及到了css类选择器和id选择器；css类选择器和id选择器的作用基本一样，区别是类选择器被定义一次可以多次使用，而id选择器一般只用一次；

在<body>标签里有个属性class="body1",这就是一个类选择器，类选择器在css代码里以 “.” 点号开头定义，

.body1 {
background-color: #C4EBE3;
}

在类选择器里可以定义各种各样的属性，这里只有一个background-colour，指定了网页的背景颜色；

在<div>标签中定义了一个id选择器，id=“div1”就是一个id选择器，id选择器定义的时候以#开头，

#div1 {
width: 100%;
background-color: #61E781;
font: "Times New Roman";
font-size: 24px;
}

width属性指其宽度，background-color设置背景，font设置字体， font-size: 设置字号；

实例的执行结果如下：

总结：HTML决定网页的内容。css决定网页的样式。

南柯一梦x

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈HTML和css

最近在做一个的开发，是基于B/S结构的，其他的见识也有所长进，但是涉及到前端页面方面的东西总是让人很烦恼。尽管以前了解过关于前端设计的知识，但那真的仅仅只是局限于了解而已了，所以不得不重新学习，也就是学习下简单的相关知识，让做出的页面能看就行。下面写一下我对HTML和css的认识理解。 HTML（HyperText Markup Language）俗称超文本标记语言，它是一...
复制链接

扫一扫

专栏目录