文章目录
第一阶段（1.13~1.22）
1.13 HTML & CSS概述
HTML：Hyper Text Markup Language
超文本标记语言 ；定义网页中有什么
HTML是W3C定义的语言标准：HTML是用于描述页面结构的语言。
CSS：Cascading Style Sheets
层叠样式表；定义网页中的东西长什么样子
CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言
1.14 准备开发环境（网络原因搁置一天）
1.15 准备开发环境
1.16 HTML(第一个网页)
-
第一个网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 超链接 --> <a href="https://wallhaven.cc/" title="一个壁纸网站">wall haven</a> <h1 title="this is my first page"> 第一个网页 </h1> <img src="https://th.wallhaven.cc/small/96/969w3d.jpg" alt=""> </body> </html> -
注释
-
注释为代码的阅读者提供帮助，注释不参与运行
-
注释可以写多行
-
在HTML中，注释使用如下格式（快捷方式为Ctrl+/）
<!-- 注释内容 --> -
-
element（元素）
<a href="http://www.baidu.com">百度一下</a>-
其他叫法：标签、标记
-
元素 = 起始标记 （begin tag） + 结束标记 （end tag） + 元素内容 + 元素属性（非必须，描述元素额外信息）
-
属性
-
属性 = 属性名 + 属性值
-
属性分类：
局部属性：某些元素特有的属性
全局属性：所有元素通用
-
-
有些元素没有结束标记，这样的元素叫做：空元素
-
空元素的两种写法：
-
<mate charset="UTF-8"> -
<mate charset="UTF-8"/>
-
-
-
元素的嵌套
-
元素不能相互嵌套
-
父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）
-
-
标准的文档结构
-
HTML：页面、HTML文档
-
文档声明（告诉浏览器，当前文档使用的HTML标准是HTML5）（不写文档声明，将导致浏览器进入怪异渲染模式）
<!DOCTYPE html> -
根元素（一个页面最多元素只能一个，并且该元素是所有其他元素的父元素或祖先元素）
<html lang="en"><!-- 英语 --> <html lang="cmn-hans"><!-- 中文 -->lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的
-
文档头（文档头内部的内容，不会显示到页面上）
<head> </head> -
文档的元数据（附加信息）
<meta>charset属性：指定网页内容编码
-
网页标题
<title>Document</title> -
文档体（页面上所有要参与显示的元素，都应该放置到文档体中）
<body> </body>
-
-
1.17&1.18 HTML(语义化、文本元素、html实体)
语义化
-
什么是语义化
-
每一个HTML元素都有具体的含义
-
所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定，浏览器带有默认的CSS样式，所以每个元素都有一些默认样式 -
选择什么元素，取决于内容的含义，而不是显示出的效果
-
-
为什么需要语义化
-
为了搜索引擎优化（SEO）
搜索引擎：百度、搜搜、Bing、Google
每隔一段时间，搜索引擎都会从整个互联网中，抓取页面源代码
-
为了让浏览器理解网页
-
文本元素
-
h
- 标题（head）
- h1~h6：表示1级标题到6级标题
-
p
- 段落（paragraphs）
-
span
-
无语义，仅用于样式的设计
-
以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素），到了HTML5，已经弃用这种说法
-
-
pre
-
预格式化文本元素
-
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
-
例外：在pre元素中的内容不会出现空白折叠
-
在pre元素内部出现的内容，会按照源代码格式显示到页面上
-
该元素通常用于在网页上显示一些代码
显示代码时，通常外面套code元素，code表示代码区域 -
pre元素功能的本质：它有一个默认的CSS属性
-
html实体
-
实体字符（HTML Entity）
-
实体字符通常用于在页面显示一些特殊符号
-
书写方式
-
&单词;
-
&#数字;
-
-
1.19 HTML(a元素)
-
href属性
-
hyper reference：通常用于表示跳转地址
-
普通链接
<a href="https://wallhaven.cc/" title="一个壁纸网站">wall haven</a> -
锚链接
<a href="#chatper1">章节1</a> <a href="#chatper2">章节2</a> <a href="#chatper3">章节3</a> <a href="#chatper4">章节4</a> <a href="#chatper5">章节5</a> <a href="#chatper6">章节6</a> <h2 id="chatper1">章节1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eum quis exercitationem qui unde suscipit similique labore architecto nesciunt officia facilis ea rerum in nisi inventore dolorem maiores, aliquid id, minima tempore eaque quisquam dolorum nulla. Eos, ullam repudiandae omnis quos facilis soluta debitis, possimus deleniti cumque dolorum adipisci pariatur quasi deserunt corrupti consectetur itaque et in dolor quibusdam doloribus facere aspernatur dolore! Nostrum dolores dicta praesentium mollitia ea soluta, officia neque sit numquam excepturi hic, illo sed dolore reprehenderit, optio repudiandae aliquid harum beatae voluptatum inventore tempore nemo enim? Veritatis, atque mollitia pariatur optio reprehenderit minima quos eligendi adipisci. Itaque perspiciatis laboriosam esse molestiae sequi ex? Soluta dolorum doloremque, laudantium quis aliquam nihil delectus atque cupiditate laborum rerum, consectetur dolore magni dignissimos et aperiam animi modi iusto molestias. Odit rerum placeat possimus beatae ratione ipsam eum delectus necessitatibus quos officia deleniti, enim similique quia fuga esse error deserunt iste ducimus eos consequuntur assumenda fugiat explicabo. Repudiandae quisquam culpa commodi dolor temporibus obcaecati consequuntur totam pariatur enim in at doloremque iusto quae minima, rerum ratione deleniti neque distinctio quas veniam odio optio. Fugit mollitia temporibus repudiandae totam, unde harum quae dolorum blanditiis error quod voluptatum aut, distinctio soluta consequatur! Culpa!</p> <h2 id="chatper2">章节2</h2> <p>Soluta quasi, laborum eos voluptate, necessitatibus sit ea voluptas quos modi debitis eius tempora impedit mollitia omnis dolore recusandae numquam nostrum exercitationem, magni eum illo qui. Reprehenderit expedita quis qui debitis repellat dolor veniam. Molestias minima saepe vero provident neque reiciendis quod numquam repellendus libero accusantium, quam doloribus quibusdam culpa corporis sequi itaque quidem autem, voluptatum dolorem praesentium rem illum dolorum. Quod odit veritatis quia? Vero eos ex aliquid doloremque recusandae consectetur, eveniet itaque tempore sint placeat inventore provident nam in quasi, deleniti ab possimus consequuntur. Molestias eum porro nam quaerat praesentium perspiciatis nulla necessitatibus minus itaque nobis doloribus, omnis tenetur aspernatur id perferendis distinctio vero recusandae placeat? Dolorem voluptatibus quae, provident vero, recusandae temporibus ipsum officiis voluptatum, at aperiam error. Architecto laborum dolore eligendi tempore ipsa totam nemo expedita perspiciatis doloremque, fuga est animi voluptas at provident! Provident laborum obcaecati aut nam enim ad possimus optio, similique nulla perferendis. Tenetur, ipsam quae. Omnis fugit, reprehenderit provident eos laborum dolore ipsa, iste dolorem consectetur recusandae labore repudiandae dolorum consequatur adipisci similique voluptatum voluptates placeat repellat blanditiis ipsam iusto beatae eligendi veniam! Voluptatem qui sint tempora quibusdam aperiam, quam officia cumque nam recusandae facilis quaerat ipsum nulla numquam optio labore possimus.</p> <h2 id="chatper3">章节3</h2> <p>Earum ullam veniam beatae et commodi adipisci illum rem accusantium, fugiat ab dicta cupiditate, quis aut ad nihil id pariatur. Asperiores repellat, facere voluptas ducimus, ea totam corporis aliquid ratione optio voluptates cum facilis repellendus autem nam? Facilis rem asperiores porro quos architecto repellendus iste dolorum voluptates, consequuntur reiciendis minima fugit deleniti ut magni laudantium quaerat aliquid eaque vel iusto animi atque itaque quod, cupiditate voluptatum! Numquam corrupti quia consectetur rerum eaque harum eius iste ut, sunt est nesciunt aliquam nisi sit blanditiis animi, officia saepe dolorum quod repudiandae quibusdam magni veritatis voluptate. Consequatur dignissimos assumenda eaque illo, aut nulla. Ullam voluptates dolores sit commodi quaerat et sapiente at, nihil qui illum asperiores tempora similique magnam nobis officiis ea architecto aperiam dolor iste, corrupti amet perferendis dolorum vitae tempore! Enim sed natus tempora recusandae aut id ratione a asperiores. Non accusamus reiciendis, voluptas quia impedit eius suscipit totam fugit magni quibusdam odit quam delectus ipsam quas blanditiis, odio ad beatae! Assumenda iusto ipsum, at libero excepturi aliquid repudiandae hic, porro harum a incidunt dolores amet quod fugit similique nobis molestias optio vitae cum itaque eius repellendus, sequi recusandae. Sequi neque numquam praesentium laudantium perspiciatis! Ipsum laudantium velit incidunt dolorum illum?</p> <h2 id="chatper4">章节4</h2> <p>Placeat quae quaerat ut dicta est ullam reiciendis architecto possimus vitae ad non, tenetur distinctio esse maxime, quis earum veniam libero eos tempora et expedita voluptates culpa neque aut? Aliquid, a velit aperiam perferendis, omnis eveniet dolorum dolorem neque possimus nemo modi impedit consequuntur veritatis! Dignissimos dicta tempore non? Officiis nemo ratione accusamus! Ipsam in vero quaerat, nulla autem architecto. Mollitia, qui natus nam perferendis esse totam minima voluptates unde at quasi soluta quis veniam illum. Quisquam in ipsa facere eligendi illo placeat harum, rem cumque amet aliquid, porro esse consequuntur perferendis aut quibusdam. Eligendi at vero obcaecati consequatur perspiciatis culpa explicabo fuga molestias veritatis debitis dignissimos modi minus quo quasi eius corporis sit esse nisi placeat unde, iusto laborum eaque, qui assumenda? Voluptatum, autem numquam? Quibusdam nam maiores ratione doloribus eaque nulla sequi iusto similique tempora, corrupti qui delectus? Molestias non voluptas rem libero nesciunt mollitia temporibus eligendi commodi, error odit reiciendis aspernatur, sit velit, debitis dicta autem quaerat quisquam maiores nam molestiae excepturi ipsum. Accusamus, perferendis. Cupiditate, reiciendis modi debitis esse iure odit reprehenderit, voluptates veritatis quas doloremque nisi repudiandae earum molestias atque? Esse doloremque aliquid optio consequatur quia fuga, qui laudantium nesciunt ea neque, ut eveniet temporibus.</p> <h2 id="chatper5">章节5</h2> <p>Eaque hic consequatur maiores aliquid saepe laudantium placeat porro ducimus rem, consectetur non vel! Adipisci voluptatibus quibusdam delectus fugiat ullam inventore ex molestiae eum labore voluptate, porro autem dignissimos nisi. Veniam vero voluptas, quas fugiat nesciunt in blanditiis voluptatibus repellendus quaerat laudantium possimus officiis hic? Cupiditate assumenda, reiciendis vel, quia quos doloremque distinctio, asperiores molestiae labore vitae nesciunt ut mollitia quo non. A rem modi maiores similique voluptas? Facilis aut odit tenetur voluptate cumque dolor culpa natus, ullam minus a libero tempora quam quasi ab dolore. Suscipit quae ipsa similique culpa necessitatibus expedita illo, itaque dignissimos cum nesciunt veniam eaque earum dolore corporis officia molestias repudiandae tenetur! Soluta recusandae iste asperiores explicabo nisi quaerat delectus perspiciatis sint animi? Assumenda voluptas molestiae voluptate et mollitia explicabo enim vero inventore, eum dignissimos delectus fugit earum repellat nulla sunt ducimus doloremque fugiat! Sed, animi minima in accusamus corrupti cupiditate quis quos doloribus distinctio ab minus. Eos placeat fuga, labore maiores odit omnis ipsum rem qui esse sequi. Eius ea aliquid voluptates dolor officia libero non ullam hic similique, fugit qui tenetur velit? Nobis quod blanditiis, eos praesentium modi totam consectetur, laboriosam voluptate doloribus optio animi corporis mollitia! Inventore unde autem distinctio odit dolore?</p> <h2 id="chatper6">章节6</h2> <p>Deserunt aliquid quas atque reprehenderit nulla vero, iste fugiat sunt quis fugit. Voluptatum nisi impedit dolor explicabo porro est quaerat ducimus ab, dignissimos facilis eius eaque tenetur illo maxime ex quas sapiente quis dolore quos error eum ipsa labore similique. Deleniti assumenda recusandae qui magni! Debitis consequuntur velit eaque quis quidem optio corrupti error nesciunt eligendi porro natus, at voluptate tempora quas id voluptatem explicabo cum esse distinctio? Facilis maiores labore provident quibusdam eveniet fuga, eaque, nobis id deserunt tempora debitis non atque placeat facere vero quos ullam dolore alias saepe ea veniam totam ipsum. Quaerat quam repellendus quis perspiciatis ducimus, officia blanditiis aut aspernatur quisquam? Exercitationem eaque ut veritatis officiis beatae sint, repellendus qui ipsa modi recusandae cupiditate minima architecto alias autem quo ad id voluptate odit. Non, nesciunt esse commodi, ipsa numquam nisi animi tempora praesentium fuga, quidem architecto voluptatibus! Asperiores eaque harum tempora fuga exercitationem unde, hic provident reprehenderit voluptatibus suscipit iusto nam, vel veritatis reiciendis repudiandae magni impedit quas distinctio. Facere tempore assumenda praesentium unde sequi consequatur consequuntur optio culpa ad eligendi. Nostrum porro mollitia ut, vel esse animi consequatur. Necessitatibus nostrum animi, delectus cum labore at a modi blanditiis quidem. Nesciunt repudiandae sunt impedit! Soluta!</p> <a href="#">回到顶部</a>id属性：全局属性，表示元素在文档中的唯一编号
-
功能链接（点击后触发某个功能）
-
执行JS代码，javascript:
-
发送邮件(（要求用户计算机上安装有邮件发送软件：exchange），mailto:
-
拨号（要求用户计算机上安装有拨号软件，或使用的是移动端访问），tel:
-
-
-
-
target属性
-
表示跳转窗口的位置
-
target的取值
-
_self：在当前页面窗口打开 ，默认值
-
_blank：在新窗口中打开
-
-
1.20 HTML(路径的写法)
-
站内资源和站外资源
-
站内资源：当前网站的资源
-
站外资源：非当前网站的资源
-
-
绝对路径和相对路径
-
站外资源：绝对路径
-
站内资源：相对路径
-
绝对路径：url地址
协议名://主机名:端口号/路径
schema://host:port/path- 当跳转目标和当前页面的协议相同时，可以省略协议
-
相对路径
以./开头 ./表示当前资源所在的目录
可以书写…/表示返回上一级目录
-
1.21 HTML(图片元素)
-
img元素
-
image缩写，空元素
<img src="https://w.wallhaven.cc/full/96/wallhaven-969w3d.jpg" alt=""> -
src属性：source，资源
-
alt属性：当图片资源失效时，将使用该属性的文字替代图片
-
-
和a元素联用
<a taregt="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"> <img usemap="#solarMap" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579603105944&di=6c86bdb5db780893d19f27152321adae&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F61673.jpg" alt=""> </a> -
和map元素联用
<a taregt="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"> <img usemap="#solarMap" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579603105944&di=6c86bdb5db780893d19f27152321adae&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F61673.jpg" width="903" height="835" alt=""> </a> <map name="solarMap"> <area shape="circle" coords="390,405,55" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431" alt=""> </map>-
map的子元素：area
1）当shape属性为rect时，代表相关区域为矩形，则cooreds属性值为(x1,y1,x2,y2),其中x1,y1为左上角的坐标，x2,y2为右下角的坐标；
（2）当shape属性为circle时，代表相关区域为圆形，则cooreds属性值为(x,y,radius),其中x,y为圆形的中心坐标，radius为圆形的半径；
（3）当shape属性为poly时，代表相关区域为多边形，则cooreds属性值为(x1,y1,x2,y2,x3,y3…xn,yn),规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。
-
-
和figure元素联用
- 指代，定义，通常用于把图片、图片标题、描述包裹起来
<figure> <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"> <img usemap="#solarMap" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579603105944&di=6c86bdb5db780893d19f27152321adae&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F61673.jpg" width="903" height="835" alt=""> </a> <figcaption> <h2>太阳系</h2> </figcaption> <p> 太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星，包括四个柯伊伯带天体，和数以亿计的太阳系小天体和彗星。 </p> <map name="solarMap"> <area target="_blank" shape="circle" coords="390,405,55" href="https://baike.baidu.com/item/%E5%9C%B0%E7%90%83/6431" alt=""> </map> </figure>- figure的子元素：figcaption
1.22 休息一天
