Skip to content

第一个网页

  • 新建一个.txt的文件

  • 在其中添加一些文字,比如Hello World

  • 保存文件

  • 修改文件的扩展名为.html文件

  • 使用浏览器打开页面

认识HTML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

HTML元素是构建网站的基石;

开发工具选择

vscode

优点:轻,免费

缺点:需要安装一些插件来辅助开发

VSCode工具安装

VSCode编辑器下载-安装:https://code.visualstudio.com/

安装插件(增加功能)

  • 中文插件:Chinese
  • 颜色主题:atom one dark
  • 文件夹图标:VSCode Great Icons
  • 在浏览器中打开网页:open in browser、Live Sever
  • 自动重命名标签:auto rename tag

认识元素

什么是元素(Element)呢?

元素是网页的一部分;

一个元素可以包含一个数据项,或是一块文本,或是一张照片,亦或是什么也不包含;

那么HTML有哪些元素呢?

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

常用的,用的多自然就记住了;

不常用的,知道在哪里查找即可;

元素的组成

一个HTML元素的组成:

  1. 开始标签
  2. 结束标签
  3. 内容
  4. 元素

元素的属性

比如:

html
<a href="http://www.baidu.com">百度一下</a>

上面的href就是属性

属性的分类

有些属性是公共的,每一个元素都可以设置,比如class、id、title属性

有些属性是元素特有的,不是每一个元素都可以设置,比如meta元素的charset属性、img元素的alt属性等

单标签元素 – 双标签元素

双标签元素:我们会发现前面大部分看到的元素都是双标签的

html
html、body、head、h2、p、a元素;

单标签元素:也有一些元素是只有一个标签;

html
br、img、hr、meta、input;

注意事项:

HTML元素不区分大小写,但是推荐小写

HTML的注释

html
<!-- 注释内容 -->

注释是只给开发者看的,浏览器并不会把注释显示给用户看

注释快捷键:ctrl + /