零基础自学前端第一周知识总结
1.互联网 英特网 万维网 以太网的辨析
互联网：广域网局域网城域网是一个概念逻辑
英特网：属于广域网，互联网的一种
万维网：英特网提供的一种服务
以太网：大部分的局域网
2.什么是域名？
它们为互联网上任何可用的网页服务器提供了方便人类理解的地址。
任何连上互联网的电脑都可以通过一个公共IP地址访问到，对于 IPv4 地址来说，这个地址有 32 位，而对于 IPv6 来说，这个地址有 128 位，通常写成八组由冒号分隔的四个十六进制数
最通用的顶级域名（.com, .org, .net）不需要 web 服务器满足严格的标准，但一些顶级域名则执行更严格的政策。
地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些 TLD 通常表明对应的网页服务从属于何种语言或哪个地区。
包含.gov 的顶级域名只能被政府部门使用，.edu 只能为教育或研究机构使用。
3.DNS 请求如何工作？
当你想在浏览器中展示一个网页的时候，输入域名比输入 IP 简单多了。让我们看一下这个过程：
在你的浏览器地址栏输入cc.org。
您的浏览器询问您的计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存）。如果是的话，这个域名被转换为 IP 地址，然后浏览器与网络服务器交换内容。结束。
如果你的电脑不知道 cc.org 域名背后的 IP, 它会询问一个 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP。
现在电脑知道了要请求的 IP 地址，你的浏览器能够与网络服务器交换内容。
4.
HTML 是一种标记语言，它允许构建文本以使其能够被web浏览器理解
css是一种声明性的语言 允许定义HTML元素的外观
单个HTML文档 用<style> 多个HTML创建css表
5.网页设计：
“头部”
可以在每个页面的顶部看到。包含所有页面的相关信息（包括站点名字或 logo）以及一个便于使用的导航系统。
“主要内容”
最大的区域，展示了当前页面的内容。
“边缘内容”（Stuff）
包括：1、主要内容的补充部分；2、信息分享列表；3、单选导航栏。实际上，任何可以在当前页面展示又没有写入主要内容的部分都是可以划分在这的。
“页脚”
可以在每个页面的底部看到。和头部一样，包含一些对于整个页面而言不是很重要的信息，例如法律声明和联系信息。
这些要素在所有组成元素中是相当普遍的，但是他们可以以多种形式被展示。下面是一些例子（1 表示“头部”、2 “页脚”；A “主要内容”；B1、B2 “边缘内容”）：
“单列”布局。这种布局在手机浏览时显得极为重要，因为这样肯定不会导致混乱。
“双列”布局。一般针对于平板，因为屏幕尺寸适中。
“三列”布局。只适合大屏幕的桌面程序（即使很多时候用户更倾向于用小窗口浏览）。
当你把上述布局灵活运用到一块的时候会非常赏心悦目：
6.网站的结构
在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。
index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。
images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。
styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。
scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。
7.<! Doctype html> 利用现代化的HTML编译 超文本链接：<a>
HTML 是一种标记语言，它允许构建文本以使其能够被web浏览器理解
css是一种声明性的语言 允许定义HTML元素的外观
单个HTML文档 用<style> 多个HTML创建css表
8.
head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
<script> 元素没必要非要放在文档的 <head> 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。
9.文档片段
超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id属性。例如，如果你想链接到一个特定的标题，可以这样做：
<h2 id="Mailing_address">邮寄地址</h2>
Copy to Clipboard
然后链接到那个特定的id，您可以在 URL 的结尾使用一个井号指向它，例如：
<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
Copy to Clipboard
你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：
<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>
10.
<blockquote>块引用 并且在cite属性里用 URL 来指向引用的资源
<abbr>缩略语
< a >建立超链接 一般在body处
< link >引入外部资源 一般在head处
<div> 和 <span> 元素。 白板 配合使用 class 属性提供一些标签，使这些元素能易于查询。
11.
页眉
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
主内容
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。
12.
布局元素细节
<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分。
