自学前端第 1 天：实现第一个html页面

前端关宇
875 阅读4分钟

看完本篇内容你可以实现：

  • 实现第一个html页面

前端的要掌握的内容包括：

  • html (结构)
  • css （样式，就是类似给结构画个妆，好看一些）
  • javascript（让页面可交互， 包括点击、弹出、或者请求数据等等）

我的学习资源：

  • mdn ： 基础语法的解释，代码例子都有，包括html css js
  • stackoverflow : 全世界程序员问问题和回答问题的地方，质量高
  • google : 善用搜索引擎，你遇到的99%的问题，其他人早已经遇到过，并且有成熟的解决方案
  • github : 全世界开源的代码托管的地方，你可以看到优秀的项目，开源、免费使用

开发环境

  • 操作系统： mac
  • 代码编辑器：vscode
  • 浏览器： chrome
  • vscode插件 Live Server : 本地保存修改以后，自动刷新浏览器，同步最新的结果
  • vscode插件 Open in browser ：vscode里面在对应浏览器里面打开对应的html文件

一、什么是HTML

  1. 超文本标记语言——HyperText Markup Language(HTML)
  2. 什么是html文件？以.html结尾的文件
  3. 去哪里编辑这个文件？和写日记用日记本一样，写代码也需要一个软件，我这里使用的是vscode

二、第一个html页面

  1. 打开vscode新建index.html叫什么名字无所谓。只是后缀名是.html就行
  2. 里面输入hello html!
  3. 保存cmd + s 后，右键open in browser就可以在浏览器里面看到效果了
  4. 打开浏览器以后，打开控制台option + command + i 看到的效果：
  5. 初始化一个基本的html结构：输入! + 按tab键，即可快速生成html的基本结构：body标签里面输入hello html,再次刷新浏览器对应的页面，就可以看到最新的效果。

三、提高工作效率

  1. 上面完成了第一html页面。但是发现每次编辑器里面有修改，浏览器想看到最新的效果，就需要手动刷新浏览器，可以更简化这个操作么？答案是可以的：安装 vscode插件live server 以后:每次修改页面，浏览器不用刷新就可以看到最新的效果。

四、第一个html页面对应元素的解读：

  • <!DOCTYPE html>: 声明文档类型.告诉浏览器如何解析。
  • <html></html>: 元素。这个元素包裹了整个完整的页面，是一个根元素。
  • <head></head>:元素.这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
  • <meta charset="utf-8">:这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
  • <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
  • <body></body>: 元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

五、各种关系的理顺（这里的元素和标签代表一个意思）

  1. 网站和html是什么关系？一个网站可以由一个或者多个html文件组成
  2. 一个html文件由什么组成？由对应的html元素或者叫标签组成：例如<html> </html> 、<body></body>等等
  3. html元素的语法是？<tageName> 例如html元素<html> 其他的只要替换tagName即可
  4. html元素如何书写？包括单标签和双标签
    • 双标签：成对儿出现，由开始标签(<tagName>)和结束标签(</tagName)。例如<html></html>，下图是对应的名词解释：
    • 单标签：<tagName> 例如： <meta><br><hr><img><input><param><link>
  5. 标签的属性是？可以是内置的，也可以是自定义的，语法为,例如img标签<img src="" alt="firefox icon">

6. 标签之间的关系可以是？嵌套或者并列

  • 嵌套： <html> <body></body></html>:由嵌套关系可以知道，html元素是body的父元素，反之body是html的子元素
  • 并列：<html> <head></head><body></body></html>:这里head元素和body元素是兄弟元素，他们都是html的子元素

小结

  • 第一次写文章，有什么写的不对或者理解不对的地方，欢迎给出宝贵的意见！

本文使用 mdnice 排版

avatar
文章
阅读
粉丝