开发者社区> 小院里的霍大侠> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Web入门开发【四】- 基础语言

简介: 欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程。首先我们来了解下这个课程能学到什么? 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML,CSS,JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编程感兴趣的朋友,一起学习交流。
+关注继续查看

image

欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程。

视频教程:https://developer.aliyun.com/live/250312?spm=a2c6h.26396819.creator-center.24.12a23e18zkIoIO


image

image

首先我们来了解下这个课程能学到什么?

1、你将可以掌握Web网站的开发全过程。

2、了解基础的HTML,CSS,JavaScript语言。

3、开发自己的第一个网站。

4、认识很多对编程感兴趣的朋友,一起学习交流。

有什么展现成果吗?

完成属于你的网站,展示给你的家人朋友们,比如做一个家人相册网站,是不是有满满的成就感。

自己看视频不会操作怎么办?

学习过程有问题可以加入我们的社群需求帮助。

HTML基础知识

image

image

超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。

image

网页内容包含文字,图片,视频,超链接等元素。可以是一组段落、也可以含有图片和数据表。左侧是我的个人主页,由文字段落图片等组成。

image

这个元素的主要部分有:

开始标签(Opening tag):包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。

内容(Content):元素的内容,本例中就是所输入的文本本身。

元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。元素也可以有属性(Attribute):

属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class 是属性名称,editor-note 是属性的值 。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。

image

— 文档类型。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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
移动 Web 开发的10个优秀 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。最重要的是,它让开人员在开发过程中得心应手。
94 0
【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
  选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。
1857 0
web开发从入门到精通一(详细)
每次学点东西都喜欢总结一下,顺便可以分享给大家。因此,在博客写知识点总结无疑成为我们目前最喜欢的总结方式。 我们来介绍一下web开发 web的起源: 1989年CERN(欧洲粒子物理研究所)中由Tim Berners-Lee领导的小组提交了一个针对Internet的新协议和一个使用该协议的文档系统,该小组将这个新系统命名为World Wide Web,它的目的在于使全球的科学家能够利用Internet交流自己的工作文档。
59 0
低代码开发,推荐一款Web 端自动化神器:Automa!
低代码开发,推荐一款Web 端自动化神器:Automa!
227 0
SpringBoot学习---Web开发(静态资源处理,首页和图标)
SpringBoot学习---Web开发(静态资源处理,首页和图标)
215 0
VScode插件推荐(web开发)
VScode插件推荐(web开发)
140 0
【HTML入门】从网页搭建开始学习Java Web开发
今天开始总结学习Java Web,而学习Java Web我们应该先学习一些网页搭建基础的东西,今天我们就先从HTML开始。
106 0
【SpringBoot 2】(六)配置文件 web开发相关(二)
【SpringBoot 2】(六)配置文件 web开发相关(二)
65 0
【SpringBoot 2】(六)配置文件 web开发相关(一)
【SpringBoot 2】(六)配置文件 web开发相关(一)
29 0
【学习笔记】【Idea】开发WEB程序
【学习笔记】【Idea】开发WEB程序
43 0
+关注
小院里的霍大侠
致力于兴趣编程,跟着我每天学习一点点;终身学习,一直追求,享受过程,期待未来.....
文章
问答
文章排行榜
最热
最新
相关电子书
更多
React Native 全量化实践—web 技术打造移动研发新模式
立即下载
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载
Web应用系统性能优化
立即下载