CSS与HTML知识梳理

最新推荐文章于 2024-07-21 20:52:32 发布

Vicky_ding

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量1.1k

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/qq_33457248/article/details/80873168

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTML基础知识梳理

1.web标准

结构标准：用于对网页元素进行整理和分类（html是骨架）

表现标准：用于设置网页元素的版式、颜色、大小等外观样式（css是外观）

行为标准：是指网页模型的定义及交互的编写（js是动作）

2.浏览器内核

常用浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。

浏览器内核：

IE: Trident

Firefox:Gecko

Chrome: Chromium/Blink

Safari:webkit

浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

3.HTML结构

声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。

head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。

头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>

<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：提供有关页面的基本信息
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。

body标签：文档的主体。

4.HTML标签

（1）标签特性

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

任何标签的属性都有默认值，省略该属性则取默认值。

（2）标签

双标签：<head></head>、<body></body>、<html></html>、<a></a>、<ul></ul>、<li></li>、<h1></h1>等

单标签：<input>、<img>、<br>等

5.相对路径和绝对路径

相对路径：从自身出发，找到需要的文件

绝对路径：http:// 开头的路径

二、CSS知识梳理

1.样式

（1）书写方式

内嵌式：将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

行内式（内联样式）：内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

外部样式表（外链式）：链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

（2）样式规则

        选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
        属性和属性值以“键值对”的形式出现。
        属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
        属性和属性值之间用英文“:”连接。
        多个“键值对”之间用英文“;”进行区分。

2. CSS三大特性