Web 入门开发【四】
欢迎来到霍大侠的小院，我们来学习 Web 入门开发的系列课程。
视频教程：https://developer.aliyun.com/live/250312?spm=a2c6h.26396819.creator-center.24.12a23e18zkIoIO
首先我们来了解下这个课程能学到什么？
1、你将可以掌握 Web 网站的开发全过程。
2、了解基础的 HTML，CSS，JavaScript 语言。
3、开发自己的第一个网站。
4、认识很多对编程感兴趣的朋友，一起学习交流。
有什么展现成果吗？
完成属于你的网站，展示给你的家人朋友们，比如做一个家人相册网站，是不是有满满的成就感。
自己看视频不会操作怎么办？
学习过程有问题可以加入我们的社群需求帮助。
HTML 基础知识
超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。
网页内容包含文字，图片，视频，超链接等元素。可以是一组段落、也可以含有图片和数据表。左侧是我的个人主页，由文字段落图片等组成。
这个元素的主要部分有：
开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。元素也可以有属性（Attribute）：
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值 。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
— 文档类型。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
— 元素。该元素包含整个页面的内容，也称作根元素。
— 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
— 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。
— 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。</span></div><div id="u70e84742" data-lake-id="85135cffb687bf1ccd95e0d9a2f8acfc"><span><body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、超链接或其他内容。<img>这个是图像元素，用于展示图片，其中 src 就是图像的存放路径，alt 属于为描述文本。<a>元素，代表超链接。它非常重要，赋予 Web 网络属性。通常我们可以通过这边超链接来导航到对应的网站。</span></div><div id="u4eb0b896" data-lake-id="99a1acb7bb728caac7b8399202022096"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794421748-6d416b48-2d15-4eda-bad2-2e9ec7ba8019.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><h1 id="UyRVo" data-lake-id="21769c42b7a7f0a313b50d934001e4c4"><span>CSS 基础知识</span></h1><div id="u815611f2" data-lake-id="13d116c57f4c52a65674da99b1ca78cc"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794421702-11f6c801-6456-4d13-9463-c2e0a86cc9f6.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u78650e63" data-lake-id="cfaf7767a0c4162f7f0663c15eaecb50"><span>层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。</span></div><div id="u08eab54d" data-lake-id="106df0d7d95d8ce6f8c115a640a8cace"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794518472-57617bdc-66c3-465f-8c4d-2e617f792f9f.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="ud9b270e4" data-lake-id="70e1849a9269f5507372b468ae821023"><span>CSS 是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。</span></div><div id="u7fd2d4b9" data-lake-id="9268f56144d68f638b758bbdd001023b"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794532501-04928a24-cf8a-4bd8-b112-ece4e5a9d3dd.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="uddf452d0" data-lake-id="993b134bd98e97d0c471783a36120ddb"><span>整个结构称为 规则集（通常简称“规则”），各部分释义如下：</span></div><div id="u898ddcef" data-lake-id="204ba71ad3ffe0017b1a5174dc1f2a5c"><span>选择器（Selector）</span></div><div id="ua95baae0" data-lake-id="8ce200f3f8e5a14662a0ebb28c7b65de"><span>HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。</span></div><div id="u942aa8b0" data-lake-id="e52ce40da9115eb1a2ee203aa3d451e2"><span>声明（Declaration）</span></div><div id="u26cd6317" data-lake-id="9d15ebe2ab18144885a6d4a252e4fd7f"><span>一个单独的规则，如 color: red; 用来指定添加样式元素的属性。</span></div><div id="u8b830c13" data-lake-id="14f747264c17a3f063260def20cd6381"><span>属性（Properties）</span></div><div id="u2988574e" data-lake-id="c5e8cc266bb806c25a1ce6854506a056"><span>改变 HTML 元素样式的途径。（本例中 color 就是 <div> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。</span></div><div id="u66ec145f" data-lake-id="240e1d5f9c1fb3159efcb4575a2156ca"><span>属性的值（Property value）</span></div><div id="u6763820d" data-lake-id="55649fc4cfcc40986a5fd007f184c634"><span>在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。</span></div><div id="u3b0e3cc3" data-lake-id="b687488e1900be6cb0fee90bce14512f"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794545638-cd6cf6cf-cfb3-4ae1-aaaf-98c843606988.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u922b5378" data-lake-id="10103543757ce5164bb3a2a9bd4fa539"><span>第一个红框中是对全局 HTML，P 段落标记进行控制，控制颜色为红色，字体为 20px 的像素大小。第二个红框中对图片增加一个 2 像素的蓝色的实体边框。</span></div><div id="u4b171192" data-lake-id="cbc9f53e774a0cf6195b40d869e265b9"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794597060-38f4ef01-3f91-4024-978e-981feffca966.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u95c91a73" data-lake-id="f9cae5f0870c75eb7514d657b0c0c95c"><span>最终我们预览页面的结果，就是这样了。是不是非常简单易懂。</span></div><h1 id="ZV6sp" data-lake-id="e620b997346fd2c997a03a8909cda8c6"><span>JavaScript 基础知识</span></h1><div id="u5d6b008b" data-lake-id="0e22f265ccff76417403d07c005b43bd"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794605939-47056b0c-09dd-44a0-abd4-5cce0ef305b7.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="uad7e9107" data-lake-id="6cbbf634c690854dac00bdf27983663e"><span>JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。</span></div><div id="ub3a18a29" data-lake-id="68d61609e3139aae8987f5f5c7aeacb3"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794646615-b6e36810-03a4-46cd-8285-2d8833baf824.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u8b7861aa" data-lake-id="bc07c768e63d892ab901c4924e94e660"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794670080-a9474a66-8a18-4312-853a-d4cf9770d3db.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u770177f7" data-lake-id="b99098209203798442ff4966f489f49d"><span>JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。我们看到图片上的动画效果就是 js 实现的。</span></div><div id="ub5932fa4" data-lake-id="2489035fb2687b6a662dd17de26ff5fc"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794421941-147efdbd-5c14-4a35-93aa-95cbc9009137.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="ubfdf36d3" data-lake-id="f9a9bd2679121bac18f10e223251ed37"><span>我们还是说用上面的案例代码说明，第一个红框是定义一个 JS 的函数，函数里面 alert 语法是在浏览器出一个提示。第二个红框是调用这个功能函数。所以当我们点击网页的按钮，就会出现 JS 的交互动作了，到这里大家明白了 JS 的用处了吧。</span></div><div id="uf28c4d24" data-lake-id="031838ced2dbc1f0257233b7fee53f9d"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794422225-7a86623e-02b4-4109-823e-aebead83549f.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u554e2481" data-lake-id="6dcf1f47b74cfed553e0ad6677ab2245"><span>我们看下这里展示，点击按钮</span></div><div id="u43c59804" data-lake-id="6877d7168a73cd50a309b136a7ae4b01"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794422217-3e279ba2-eada-4bf7-8ebb-6964f7c5b0d7.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="u46733b3d" data-lake-id="1981fc979d5b05e71093de160f6b8055"><span>点击后，浏览器弹窗提示。这下大家明白了 HTML，CSS，Javascript 的组合关系了吗，是不是很有趣。</span></div><div id="u4d3d23ef" data-lake-id="c3771ef6c5113c216a20369dca49f6cb"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794422318-13b7af79-ca2c-47bc-ae3d-b1c7afb2c82b.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="ub3af39a3" data-lake-id="570d0a7635a47e51bf15aed5050dc0e4"><span>我给大家简单总结概况下，HTML 是定义页面元素。CSS 是规划元素样式。JS 是让页面元素可以和人交互，可以更生动展现。这个课程我们只是从基础简单的了解 Web 编程重要的 3 个语言。后面会有专门讲解这三门课的视频。</span></div><div id="ub75f3d69" data-lake-id="8673c4e2c4a8bc0e4b6e63dbc349bafb"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2022%2Fpng%2F209450%2F1664794422265-7ccedb10-610a-4f62-815f-fb85481fe2eb.png%22%2C%22originWidth%22%3A1080%2C%22originHeight%22%3A608%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1080%2C%22height%22%3A608%7D"></span></div><div id="ue56de59a" data-lake-id="cb62ab1f6450357c6bcbc9b79ae0214d"><span>记得关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单......</span></div>
版权声明: 本文为 InfoQ 作者【小院里的霍大侠】的原创文章。
原文链接:【http://xie.infoq.cn/article/2d0e89bea28868523ced1aad1】。文章转载请联系作者。
还未添加个人签名 2020-09-02 加入
还未添加个人简介
评论