HTML与CSS
Posted youwei716
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML与CSS相关的知识，希望对你有一定的参考价值。
什么是HTML？
全称HyperText Markup Language，它是一种超文本标记语言，用于定义文档的内容结构（例如：标题 图片 图片说明 正文段落 ） 。
html元素是HTML文档的重要组成部分，一个HTML文档由大量元素组成 ，不同的标记名赋予元素不同的含义 ，元素组成包括：起始标记（起始标签）、元素内容、结束标记（结束标签），
注意：一个元素的内容中可以包含其他元素，形成嵌套的层次结构，但两个
元素之间不能相互嵌套，元素嵌套会产生一个树状的层次结构。
部分元素的简介
<!DOCTYPE html>声明是HTML文档，
<html>文件开始的标记 </html>文件结束的标记，所有的标记都是相对的，有开始，就有结束标记。
head文档头部标记，它是html元素的第一个子元素，文档头中可以 包含一些其他元素，用于描述页面的附加信息 （注意：head元素中的内容不 会显示到页面上！）。
title 标识文档标题，该标题会显示在浏览器的标题栏或者标签页上。
<meta>，作用是标识页面的其他元数据（页面相关的附加信息），是一个空元素（例如：<meta charset="UTF-8">，含义是：指示浏览器，使用字符编码集UTF-8解析页面（注意：为获得更好的地域兼容性、避免乱码，
应将字符编码集设置为UTF-8并且将该代码作为head的第一个子元素）。
<body>文档主体，网页中所有的可见内容都放置在该元素内；其中可以包含 大量的其他元素，定义文档的内容结构。
CSS术语
CSS全称Cascading Style Sheets ，用于定义HTML文档的样式（外观）。它与HTML不同的是，HTML决定了文档的内容结构，CSS决定了文档的样式。
如果HTML页面想引用CSS代码的样式 就需要将CSS代码引用进html中。应用方法一般有三种：行内式、内嵌式和链接式。
其中，行内样式表和内嵌 样式表不需新建专用CSS文件，但链接式样式表需建立一个专用的CSS文件。
1.行内样式：是在HTML标签内部，通过style属性的值来设置CSS样式，格式 如下图：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
特点：a.没有了样式表文件，在某些时候可以提升效率；b.多个元素难以共享样式，不利于代码复用；c.HTML和CSS代码混杂，不利于程序员和搜索引擎阅读。
2.内嵌样式：是在头部区域，利用<style></style>标签书写CSS样式代码，格式如下图：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<style>
.div{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="div"></div></body>
</html>
特点：
a.没有了样式表文件，在某些时候可以提升效率;
b.多个页面难以共享样式，不利于代码复用 ;
c.HTML和CSS代码混杂，不利于程序员和搜索引擎阅读;
d.在某些对效率要求苛刻或测试的场景下使用.
3.链接式：这是最常用的样式表，也叫外部样式表。它是在页面的头部区域， 使用标签链接一个外部的CSS文件来实现，如下图：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet"href="./ccss.css">
</head>
<body>
<div class="test"></div>>
</body>
</html>
特点：
a.实现了内容结构和表现形式代码分离，方便复用和维护;
b.使HTML代码更加纯净，有利于程序员和搜索引擎的阅读;
c.是开发页面的常见做法.
以上是关于HTML与CSS的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段