HTML入门

嚼嚼嚼
291 阅读2分钟

HTML简介

  • HTML：超文本标记语言（Hyper Text Markup Language）
  • 不是一种编程语言，而是一种标记语言
  • 超文本是什么
    • 超越了文本限制，可以加入图片、声音、动画等
    • 超级链接文本，可以从一个文件跳转到另一个文件

web标准的构成

  • 结构Structure（最重要）
    • 用于对网页元素进行整理和分类，html
  • 表现Presentation
    • 用于设置网页元素的版式、颜色、大小等外观样式，css
  • 行为Behaviour
    • 网页模型的定义及交互的编写，javascript
  • 结构，样式，行为分离

HTML语法规范

  • 标签使用<>定义
  • 大部分都是成对出现（双标签），有少量单标签
  • 双标签：开始标签<…>，结束标签</…>
  • 单标签<… />
  • 若是双标签，则内容写在双标签包裹的区域内，如<p>内容</p>

HTML中的注释

  • 格式<! --文字-- >
  • 快捷键ctrl+/

HTML中的常用特殊字符

  • 空格&nbsp;
    • 在HTML文档中编写的空格渲染后不会被显示
  • 小于号< &lt;(lower than)
  • 大于号> &gt;(greater than)
  • 其余使用较少，用到时再查表

开发环境相关

  • vscode+liveserver插件，so easy
  • 注意编写时要保存文档才可以在浏览器中显示出效果，推荐开启vscode的自动保存功能
  • 新建后缀名为.html的文档，输入一个英文感叹号再回车即可生成基本结构
  • vscode生成骨架新增代码
    • <!DOCTYPE>标签
      • 是文档类型声明标签，不是HTML标签
      • 告诉浏览器使用哪种HTML版本来显示网页，例如<!DOCTYPE html>表示采取HTML5来显示网页
      • 此声明处于文档中最前面的位置，处于<html>标签之前
    • lang语言
      • language的缩写
      • 用来定义当前文档显示的语言
      • 定义为en就是英文网页，定义为zh-CN就是中文网页
      • 定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
    • <meta>标签的作用
      • 移动端适配、SEO优化等等
    • charset字符集
      • 不写可能引起乱码
      • 尽量写成标准的"UTF-8"万国码

HTML学习方法

  • HTML很简单，只是需要多记忆与练习
  • 不需要记住所有标签，熟练掌握常用的即可，其他的用到时再去查阅文档（MDN，菜鸟教程等）
avatar
文章
阅读
粉丝