HTML与CSS基础-优快云博客

本文介绍了HTML和CSS的基础知识，包括二者的关系、HTML的结构、块级元素与内联元素的区别、HTML语义化的重要性以及href与src的区别。

1. HTML（超文本标记语言）和CSS（层叠样式表）的关系

（1）CSS用来修饰HTML样式，改变HTML标签本身的默认样式。

（2）HTML+CSS构成了我们网页的基本页面结构和样式。

2.HTML的结构：

<!DOCTYPE html>

(文档类型声明。它告诉游览器应该以html5的文档类型定义来解析文档，因为不同的渲染模式会影响游览器对CSS代码甚至JavaScript脚本的解析。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前)

<html> (标识HTML文档)

<head> (这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。描述了文档的各种属性和信息，包括文档的标题等)

常用的有：

（1） title标签，定义网站的标题，它是 head 部分中唯一必需的元素。

（2） meta 标签，由 name 和 content 属性定义，提供了 HTML 文档的元数据

（<meta charset="UTF-8"> 设置当前文件字符编码类型）

（<meta name="keywords" content="关键词" /> 设置网页关键词，为搜索引擎提供服务）

（<meta name="description" content="页面描述内容" /> 设置页面描述内容）

(<meta http-equiv="refresh" content="3;url=”重定向网站”/> 页面重定向和刷新)

（content里面写了两个参数,3表示三秒后,第二个参数是要重定向到的资源位置(可以是其他域名,也可以是本地资源。）

(<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 适配移动端，可以控制视口的大小和比例)

（3）link标签，用来指向某一资源

常用的格式<link rel="" href="" type=""></link>

rel：该资源与本网页的关系，href：该资源的地址，type：该资源的MIME类型。

常用rel分类如下：rel = "stylesheet" (外部样式表)

rel = "shortcut icon" (网站图标)

rel = "dns-prefetch" (dns预解析)( 将域名转化为 IP 地址，节省时间)

（4）script标签：<script> 标签用于定义客户端脚本，比如 JavaScript。

（5）style标签：<style> 标签用于为 HTML 文档定义样式信息。

</head>

<body> (网页主体)

</html></body>

3.块级元素和内联元素（行内元素）区别

块级元素	内联元素
独占一行,默认情况下，其宽度自动填满其父元素宽度	相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	内联元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block	对应于display:inline；
元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p	元素有：a b span img input select strong

4.HTML的语义化

在我们身边的任何地方都要依赖语义学，我们依靠以前的经验就知道日常事物都代表什么，当我们看到什么，我们就会知道它代表什么。语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

通过使用恰当语义的HTML标签，让页面具有良好的结构与含义，可以有效提高：

可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
国际化：通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
互用性：增强了可读性，减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护；

为了实现语义化标记，HTML 提供了明确一些区段的专用标签，例如：

<header>：页眉。 <nav>：导航栏。 <main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。 <aside>：侧边栏，经常嵌套在 <main> 中。 <footer>：页脚。

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用CSS或JavaScript。为了应对这种情况，HTML提供了<div>和<span>元素。<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

5. 宽松的代码

宽松是什么意思呢？通常写错代码会带来以下两种主要类型的错误：

语法错误：由于拼写等语法错误导致程序无法运行。通常熟悉语法并理解错误信息后很容易修复。

逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。

HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。

6.href和src的区别：

href标识超文本引用，用在link和a等元素上，href是在当前元素和引用资源之间建立联系。

src表示引用资源，表示替换当前元素，用在img，script，iframe上，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。