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="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.是开发页面的常见做法.

原文地址:https://www.cnblogs.com/youwei716/p/10949637.html