【Web前端HTML5&CSS3】01-前端简介

俏奇發表於 2021-5-15 00:20:00

<blockquote>
<p>笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前端简介<ul><li>1. 软件的分类<ul><li>1.1. 系统软件</li><li>1.2. 应用软件</li><li>1.3. 游戏软件</li></ul></li><li>2. 客户端与服务器<ul><li>2.1. 服务器</li><li>2.2. 客户端</li></ul></li><li>3. 网页的特点</li><li>4. 网页简史</li><li>5. 浏览器和网页<ul><li>5.1. 浏览器的问题</li><li>5.2. W3C 的建立</li><li>5.3. 网页的结构思想<ul><li>结构、表现、行为</li></ul></li></ul></li><li>6. 网页的基本结构<ul><li>6.1. 迭代</li><li>6.2. 文档声明（doctype）</li><li>6.3. 字符编码<ul><li>编码</li><li>解码</li><li>字符集（charset）</li><li>乱码</li></ul></li><li>6.4. 常见的字符集<ul><li>ASCII</li><li>ISO-8859-1</li><li>GB2312</li><li>GBK</li><li>Big5</li><li>UTF-8</li><li>UTF-16</li><li>Unicode</li></ul></li><li>6.5. HTML5 的基本结构</li></ul></li></ul></li></ul></div><p></p>
<h1 id="前端简介">前端简介</h1>
<h2 id="1-软件的分类">1. 软件的分类</h2>
<h3 id="11-系统软件">1.1. 系统软件</h3>
<ul>
<li>Windows</li>
<li>Linux</li>
<li>macOS</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/4483604c1dfa2ccac415037bebe865ac.png" alt="image-20210512233610483" loading="lazy"></p>
<h3 id="12-应用软件">1.2. 应用软件</h3>
<ul>
<li>Office</li>
<li>QQ</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/dc09337d08b3ff7ef46db165b0893dc1.png" alt="image-20210512233641461" loading="lazy"></p>
<h3 id="13-游戏软件">1.3. 游戏软件</h3>
<ul>
<li>绝地求生</li>
<li>王者荣耀</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/171b4e8e4d1a3ed391fe1232ca8b5db6.png" alt="image-20210512233650896" loading="lazy"></p>
<h2 id="2-客户端与服务器">2. 客户端与服务器</h2>
<p>通常情况下，现在的软件一般由两个部分组成：</p>
<ul>
<li>客户端：用户通过客户端来使用软件。</li>
<li>服务器：服务器负责在远程处理业务逻辑。</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c2219b3cbe5bf8a0ae0e1d6ff2e62a02.png" alt="image-20210512233922478" loading="lazy"></p>
<h3 id="21-服务器">2.1. 服务器</h3>
<p>服务器开发的语言：</p>
<ul>
<li><mark>Java</mark></li>
<li>PHP</li>
<li>C#</li>
<li>Python</li>
<li><mark>Node.js</mark></li>
<li>……</li>
</ul>
<h3 id="22-客户端">2.2. 客户端</h3>
<p>客户端的形式</p>
<ul>
<li>文字客户端：占老的方式，通过命令行来使用软件</li>
<li>图形化界面：通过点击拖动等来使用软件。Windows 中、macOS 中、Android、iOS 中的大部分应用。（<mark>C/S 架构</mark>）</li>
<li><mark>网页</mark>：通过访问网页来使用软件。所有的网站都属于这个范畴。（<mark>B/S 架构</mark>）</li>
</ul>
<h2 id="3-网页的特点">3. 网页的特点</h2>
<p>相较于传统的图形化界面，网页具有如下一些优点：</p>
<ul>
<li>不需要安装</li>
<li>无需更新</li>
<li>跨平台</li>
</ul>
<p>网页中使用的语言：</p>
<ul>
<li>HTML、CSS、JavaScript</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/f5642e91a1fb2527e99aede632ab4f1c.png" alt="image-20210512234859315" loading="lazy"></p>
<h2 id="4-网页简史">4. 网页简史</h2>
<p>蒂姆·伯纳斯·李爵士，万维网的发明人。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/ad9a6b9a0a1774ffa3d08fa9b1b2a852.png" alt="image-20210512235216613" loading="lazy"></p>
<p>1991 年 8 月 6 日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。</p>
<p>第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/e6d4e4b02575fa7b0e687c8e2ef76b47.png" alt="image-20210512235231005" loading="lazy"></p>
<h2 id="5-浏览器和网页">5. 浏览器和网页</h2>
<p>有了浏览器我们只需要一个网址便可以访问任何的网站。</p>
<p>而浏览器中所显示的内容正是我们所说的网页。</p>
<p>网页原本的样子：</p>
<pre><code class="language-html">...

<div id="J_accessibility"></div>

<div id="J_promotional-top"></div>
<div id="shortcut">
<div class="w">
<ul class="fl" clstag="h|keycount|head|topbar_01">
   <li class="dropdown" id="ttbar-mycity"></li>
</ul>

<ul class="fr">
   <li
   class="fore1 dropdown"
   id="ttbar-login"
   clstag="h|keycount|head|topbar_02"
   >
   <a
      href="//passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F"
      class="link-login"
      >你好，请登录</a
   >&nbsp;&nbsp;<a
      href="//reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/"
      class="link-regist style-red"
      >免费注册</a
   >
   </li>
   <li class="spacer"></li>
   <li class="fore2" clstag="h|keycount|head|topbar_03">
   <div class="dt">
      <a target="_blank" href="//order.jd.com/center/list.action"
         >我的订单</a
      >
   </div>
   </li>
   <li class="spacer"></li>
   <li
   class="fore3 dropdown"
   id="ttbar-myjd"
   clstag="h|keycount|head|topbar_04"
   >
   <div class="dt cw-icon">
      <a target="_blank" href="//home.jd.com/">我的京东</a
      ><i class="iconfont">&#xe610;</i><i class="ci-right"><s>◇</s></i>
   </div>
   <div class="dd dropdown-layer"></div>
   </li>
   <li class="spacer"></li>
   <li class="fore4" clstag="h|keycount|head|topbar_05">
   <div class="dt">
      <a target="_blank" href="//vip.jd.com/">京东会员</a>
   </div>
   </li>
   <li class="spacer"></li>
   <li class="fore5" clstag="h|keycount|head|topbar_06">
   <div class="dt"><a target="_blank" href="//b.jd.com/">企业采购</a></div>
   </li>
   <li class="spacer"></li>
   <li
   class="fore8 dropdown"
   id="ttbar-serv"
   clstag="h|keycount|head|topbar_07"
   >
   <div class="dt cw-icon">
      客户服务<i class="iconfont">&#xe610;</i
      ><i class="ci-right"><s>◇</s></i>
   </div>
   <div class="dd dropdown-layer"></div>
   </li>
   <li class="spacer"></li>
   <li
   class="fore9 dropdown"
   id="ttbar-navs"
   clstag="h|keycount|head|topbar_08"
   >
   <div class="dt cw-icon">
      网站导航<i class="iconfont">&#xe610;</i
      ><i class="ci-right"><s>◇</s></i>
   </div>
   <div class="dd dropdown-layer"></div>
   </li>
   <li class="spacer"></li>
   <li
   class="fore10 mobile"
   id="J_mobile"
   clstag="h|keycount|head|topbar_09"
   >
   <div class="dt mobile_txt">手机京东</div>
   <div class="mobile_static">
      <div class="mobile_static_qrcode"></div>
   </div>
   <div id="J_mobile_pop" class="mod_loading mobile_pop"></div>
   </li>
</ul>
</div>
</div>
...
</code></pre>
<p>浏览器渲染后的样子：</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/7eeeaf91d866d84b026279275e5dcaca.png" alt="image-20210513000033830" loading="lazy"></p>
<p>前端工程师负责编写网页的源代码。</p>
<p>浏览器负责将网页渲染成我们想要的样子。</p>
<h3 id="51-浏览器的问题">5.1. 浏览器的问题</h3>
<p>市面上存在有很多不同的浏览器。</p>
<p>在万维网的初期，网页编写并没有标准。</p>
<p>于是就出现了这种情况：</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/39c56deb33bbe0ab75d15bd0e588ac4d.png" alt="image-20210513000559333" loading="lazy"></p>
<h3 id="52-w3c-的建立">5.2. W3C 的建立</h3>
<p>伯纳斯李 1994 年建立<mark>万维网联盟（W3C）</mark></p>
<p>W3C 的出现为了<mark>制订网页开发的标准</mark>，以使同一个网页在不同的浏览器中有相同的效果。</p>
<p>所以，我们需要制订我们编写的网页都需要遵循 W3C 的规范！</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/4e418cd3f56383eb8e183ebc9fefbba7.png" alt="image-20210513000825367" loading="lazy"></p>
<h3 id="53-网页的结构思想">5.3. 网页的结构思想</h3>
<p>根据 W3C 标准，一个网页主要由三部分组成：结构、表现还有行为。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/0ed1e4aad138cd330de11b0eedc7c131.png" alt="image-20210513001146250" loading="lazy"></p>
<h4 id="结构表现行为">结构、表现、行为</h4>
<ul>
<li>结构（骨架）：HTML 用于描述页面的结构</li>
<li>表现（皮肤）：CSS 用于控制页面中元素的样式</li>
<li>行为（交互）：JavaScript 用于响应用户操作</li>
</ul>
<p><img src="https://img-blog.csdnimg.cn/img_convert/aca232ec5c0455769771fbf68c06c747.gif" alt="nsyjg-dwl0d" loading="lazy"></p>
<h2 id="6-网页的基本结构">6. 网页的基本结构</h2>
<h3 id="61-迭代">6.1. 迭代</h3>
<p>网页的版本</p>
<ul>
<li>HTML4</li>
<li>XHTML2.0</li>
<li>HTML5</li>
</ul>
<h3 id="62-文档声明doctype">6.2. 文档声明（doctype）</h3>
<p>文档声明用来告诉浏览器当前网页的版本</p>
<pre><code class="language-html">
<!DOCTYPE html>

<!DOCTYPE html>
</code></pre>
<h3 id="63-字符编码">6.3. 字符编码</h3>
<p>所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。</p>
<p>所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读</p>
<h4 id="编码">编码</h4>
<p>将字符转换为二进制码的过程称为编码</p>
<h4 id="解码">解码</h4>
<p>将二进制码转换为字符的过程称为解码</p>
<h4 id="字符集charset">字符集（charset）</h4>
<p>编码和解码所采用的规则称为字符集（相当于密码本）</p>
<h4 id="乱码">乱码</h4>
<p>如果编码和解码所采用的字符集不同就会出现乱码问题。</p>
<p>可以通过 meta 标签来设置网页的字符集，避免乱码问题</p>
<pre><code class="language-html"><meta charset="utf-8" />
</code></pre>
<h3 id="64-常见的字符集">6.4. 常见的字符集</h3>
<h4 id="ascii">ASCII</h4>
<p>ASCII(American Standard Code for Information Interchange)：美国信息交换标准代码</p>
<p>在所有字符集中，最知名的可能要数被称为 ASCII 的<mark>8 位字符</mark>了。美国信息交换标准代码是由美国国家标准学会(American National Standard Institute , ANSI )制定的，是一种标准的<mark>单字节字符编码</mark>方案，用于基于文本的数据。它最初是美国国家标准，供不同计算机在相互通信时用作共同遵守的西文字符编码标准，后来它被国际标准化组织（International Organization for Standardization, ISO）定为国际标准，称为 ISO 646 标准。适用于所有拉丁文字字母</p>
<p>ASCII 码使用指定的 7 位或 8 位二进制数组合来表示 128 或 256 种可能的字符。标准 ASCII 码也叫基础 ASCII 码，使用 7 位二进制数（剩下的 1 位二进制为 0）来表示所有的大写和小写字母，数字 0 到 9、标点符号，以及在美式英语中使用的特殊控制字符</p>
<p>ASCII 码表：Ascii Table - ASCII character codes and html, octal, hex and decimal chart conversion</p>
<h4 id="iso-8859-1">ISO-8859-1</h4>
<p>ISO-8859-1 编码是<mark>单字节编码</mark>，向下兼容 ASCII，其编码范围是 0x00-0xFF，0x00-0x7F 之间完全和 ASCII 一致，0x80-0x9F 之间是控制字符，0xA0-0xFF 之间是文字符号。</p>
<p>ISO 码表：HTML ISO-8859-1 参考手册</p>
<h4 id="gb2312">GB2312</h4>
<p>GB2312（信息交换用汉字编码字符集）是由中国国家标准总局 1980 年发布。基本集共收入汉字 6763 个和非汉字图形字符 682 个。GB 2312 的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆 99.75%的使用频率。</p>
<h4 id="gbk">GBK</h4>
<p>GBK（即“国标”、“扩展”汉语拼音的第一个字母），汉字编码字符集。2000 年已被 GB18030-2000 国家强制标准替代。 2005 年 GB18030-2005 发布，替代了 GB18030-2000。</p>
<p>GBK 使用了<mark>双字节编码</mark>方案，其编码范围从 8140 至 FEFE（剔除 xx7F），共 23940 个码位，共收录了 21003 个汉字，完全兼容 GB2312-80 标准，支持国际标准 ISO/IEC10646-1 和国家标准 GB13000-1 中的全部中日韩汉字，并包含了 BIG5 编码中的所有汉字。</p>
<h4 id="big5">Big5</h4>
<p>Big5，又称为大五码或五大码，是使用繁体中文（正体中文）社区中最常用的电脑汉字字符集标准，共收录 13,060 个汉字。</p>
<p>Big5 虽普及于台湾、香港与澳门等繁体中文通行区，但长期以来并非当地的国家/地区标准或官方标准，而只是业界标准。倚天中文系统、Windows 繁体中文版等主要系统的字符集都是以 Big5 为基准，但厂商又各自增加不同的造字与造字区，派生成多种不同版本。</p>
<h4 id="utf-8">UTF-8</h4>
<p>UTF-8（8 位元，Universal Character Set/Unicode Transformation Format）是针对 Unicode 的一种<mark>可变长度字符编码</mark>，也叫万国码、统一码。它可以用来表示 Unicode 标准中的任何字符，而且其编码中的第一个字节仍<mark>与 ASCII 相容</mark>，使得原来处理 ASCII 字符的软件无须或只进行少部分修改后，便可继续使用。</p>
<h4 id="utf-16">UTF-16</h4>
<p>UTF-16 是 Unicode 的其中一个使用方式。UTF-16 比起 UTF-8，好处在于大部分字符都以<mark>固定长度的字节</mark>（2 字节）储存，但 UTF-16 却<mark>无法兼容于 ASCII 编码</mark>。</p>
<h4 id="unicode">Unicode</h4>
<p>Unicode 只是一组字符设定或者说是从数字和字符之间的逻辑映射的<mark>概念编码</mark>，但是它并没有指定代码点如何在计算机上存储。UCS4、UTF-8、UTF-16（UTF 后的数字代表编码的最小单位，如 UTF-8 表示最小单位 1 字节，所以它可以使用 1、2、3 字节等进行编码，UTF-16 表示最小单位 2 字节，所以它可以使用 2、4 字节进行编码）都是 Unicode 的编码方案。UTF-8 因可以兼容 ASCII 而被广泛使用。</p>
<p>如果把各种文字编码形容为各地的方言，那么 Unicode 就是世界各国合作开发的一种语言。</p>
<h3 id="65-html5-的基本结构">6.5. HTML5 的基本结构</h3>
<pre><code class="language-html">
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>网页的标题</title>
</head>

<body>

<h1>网页的大标题</h1>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/vectorx/p/14770613.html

頁: [1]

琼殿技术论坛's Archiver

【Web前端HTML5&CSS3】01-前端简介