001Html课程概述

JimmyTsaiCN

已于 2022-06-13 11:51:13 修改

阅读量1.4k

点赞数

分类专栏： Html全端编程 Zero To Hero 文章标签： html 前端 vscode

于 2022-06-13 11:25:40 首次发布

本文链接：https://blog.csdn.net/zzcaism/article/details/125256790

版权

Html全端编程 Zero To Hero 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、课程框架

网站(Website)是指在因特网上根据一定的规则，使用HTML等语言设计制作的用于展示特定内容相关网页的集合。可以简单的理解网站就是网页（Webpage)的集合。我们这个课程的目标就是要设计一个能够实际使用的物联网共享空间预定管理系统，我们需要设计一系列的网页。为了实现这个目标，我们需要学习的知识包括：

HTML
CSS
Javascript
Vue

二、开发工具

可以用于开发设计网站的工具有很多，我们推荐使用两种开发工具

Visual [ˈvɪʒuəl] Studio[ˈstjuːdiəʊ] Code[kəʊd]简称VsCode：是微软公司开发的一款跨平台源代码编辑器，下载地址：https://code.visualstudio.com/Download
HBuilder[ˈbɪldə®] ：是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，下载地址：https://www.dcloud.io/hbuilderx.html

基于我们后面的课程需要让我们的网页可以编译成微信小程序的考虑，我们使用HBuilder作为开发工具。

三、HTML简介

HTML全称是“Hyper Text Markup Language（超文本标记语言）”，它是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
Html是由一系列标签（元素）组成，学习Html要先学习标签

3.1、标签语法

语法：<标签符>内容</标签符>
说明：标签成对出现，有一个“开始符号”和一个“结束符号”，例如：<em>一个电商系统的设计</em>

3.2、一个Html基本标签

文档声明：
html标签对：
head标签对：
body标签对：

在这里插入图片描述

随堂练习：

1、用基本标签设计一个网页，网页上面显示“Hello world"

<!DOCTYPE html>
<html>
  <head>    
  </head>
  <body>
    Hello world
  </body>
</html>

2、用浏览器打开保存好的html文件，并使用F12查看源代码

3.3、head标签

一般来说，只有以下6个标签能放在head标签内

title [ˈtaɪtl] 标签：在HTML中，title标签唯一的作用就是定义网页的标题
meta [ˈmɛtə] 标签：meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎看的
meta标签有2个重要的属性：
name：常用的name属性取值只有2个：keywords[ˈkiːˌwɜːdz]、description [dɪˈskrɪpʃn]，这两个都是给机器（主要是一些搜索引擎的爬虫）看的，分别代表关键词和网页描述的意思，是告诉搜索引擎，我们设计的这个网页主要是做什么的，涉及到的关键词和我们要表达内容的简单描述
- http-equiv：常用的http-equiv有两个
  - 是定义网页所用的字体编码（字符集），比如<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  - 定义网页自动刷新跳转 <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
link [lɪŋk] 标签:定义文档与外部资源的关系，后面会详细解说
style [staɪl] 标签：style标签用于定义元素的CSS样式，在HTML中不需要深入研究，在CSS中我们再详细介绍
script [skrɪpt] 标签：script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。在JavaScript部分中我们会详细介绍，这里不需要深究。

3.4、Html注释标签

html注释标签用于在源代码中插入注释。注释不会显示在浏览器中。是指对一些关键代码进行注释，好处有非常多，比如方便理解、方便查找以及方便同一个项目组的小伙伴快速理解你的代码，以便快速修改。
使用示例：

随堂练习：

1、修改上一个随堂练习，网页上面显示“世界你好！",并且在标题栏上面显示“商城首页”（使用ie内核的浏览器可能会出现乱码，用http-equiv来解决）

<!DOCTYPE html>
<html>
  <head> 
     <title>商城首页</title>  
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <!--也可以写成：<meta charset="utf-8">-->
  </head>
  <body>
    世界你好!
  </body>
</html>

使用IE内核的浏览器，查看没有指定页面编码的字符集(charset)的效果

2、不借助开发工具代码提示，默写HTML基本结构

3.4、使用vscode或hbuilder设计代码片段

虽然我们可以默写一个HTML的基本结构，但是在日常工作中，这仍然是一个很低效率的事情，像这种经常使用的代码，我们可以把它做成代码片段（snippet [ˈsnɪpɪt]）来进行管理。不论是使用vscode还是hbuilder都有专门的代码片段快捷录入和管理的功能。

3.4.1 snippet 格式

配置项	说明
key	代码块显示名称，显示在代码助手列表中的名字。key是不能重复的。
prefix	代码块的触发字符，就是敲什么字母可以激活这个代码块。
body	代码块的内容
description	代码片段描述，用于给自己或其他使用的人一个说明，也可以不写，或是采用和key一样的内容

使用示例

在HBuilder里面设置以下代码块，然后尝试新建一个html文件，并打入“!html"看看效果

"我的html代码": {
  "prefix": "!html",
  "body": [
    "<!DOCTYPE html>",
    "<html>",
    "  <head> ",
    "     <title>商城首页</title>  ",
    "     <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\">    ",
    "  </head>",
    "  <body>",
    "    世界你好!",
    "  </body>",
    "</html>"
  ],
  "description": "我的html代码"
}

HBuilder里面代码片段管理的菜单路径：“工具”->“代码块设置”->“HTML代码块”

尝试把示例中的“商城首页”改成“$1”,"世界你好!“改成“$2” 然后再次打入“!html”，体验这两个符号的意义

表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置$1；如该位置有预置数据且需要选中，则写法是${1:selectedtext}；这里还支持下拉候选菜单，多选项即下拉候选列表使用${1:foo1/foo2/foo3}
$2 表示代码块输入后再次按tab后光标的切换位置tabstops（代码块展开后按tab可以跳到下一个tabstop，在HBuilderX中看到类似绿色光标的不闪的竖线，就可以按tab或回车跳转光标过去）
$0代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。

增加代码块里面注释，养成写注释的好习惯

"我的html代码": {
    "prefix": "!html",
    "body": [
      "<!--",    
      "* @FileDescription:$1",
      "* @Author:Lionking",
      "* @Date:$DATE_TIME",
      "-->",
      "<!DOCTYPE html>",
      "<html>",
      "  <head> ",
      "     <title>$2</title>  ",
      "     <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\">    ",
      "  </head>",
      "  <body>",
      "    $0",
      "  </body>",
      "</html>"
    ],
    "description": "我的html代码"
  }

代码片段生成工具

因为代码片段要输入还是比较麻烦，实际上有更好的工具可以帮助我们更加方便的实现我们的代码片段管理

https://snippet-generator.app/ 这个网站可以帮助我们把现有代码复制并修改后变成可以使用的代码片段

作业

1、下面哪一个标签不能放在head标签内？（   ）
        A. title标签                      B. style标签
        C. body标签                       D. script标签
2、如果网页中出现乱码，我们一般使用（   ）来解决。
        A. <meta charset="utf-8" />
        B. <style type="text/css"></style>
        C. <script></script>
        D. <link type="text/css" rel="stylesheet" href="css/index.css">
3、下面选项中，属于HTML正确注释方式是（   ）。
        A. //注释内容
        B. /*注释内容*/
        C. <!--注释内容-->
        D.//注释内容//
4、不借助开发工具代码提示，默写HTML基本结构

JimmyTsaiCN

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
001Html课程概述

网站(Website)是指在因特网上根据一定的规则，使用HTML等语言设计制作的用于展示特定内容相关网页的集合。可以简单的理解网站就是网页（Webpage)的集合。我们这个课程的目标就是要设计一个能够实际使用的物联网共享空间预定管理系统，我们需要设计一系列的网页。为了实现这个目标，我们需要学习的知识包括：可以用于开发设计网站的工具有很多，我们推荐使用两种开发工具Visual [ˈvɪʒuəl] Studio[ˈstjuːdiəʊ] Code[kəʊd]简称VsCode：是微软公司开发的一款跨平台源代码编
复制链接

扫一扫