[ 前端与 HTML | 青训营笔记 ]

44 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

什么是HTML

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

前端是什么

  • 解决GUI人机交互问题
  • 跨终端(PC/浏览器,小程序/移动端)
  • WEB技术栈(最基本的HTMLCSSJavaScript通过网络协议发送给服务器)

前端的关注点

  • 功能
  • 美观
  • 安全
  • 性能
  • 无障碍

前端的技术

  • node.js
  • vue
  • react
  • react native
  • electron

语义化标签

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容empty content
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

标签属性

  • HTML元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现

课堂练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello, world</h1>
  <p><span>输入用户名:</span><input type="text"></p>
  <p><span>输入密码:</span><input type="text"></p>
  <button>提交</button>
</body>
</html>

课后总结

了解什么是前端和HTML是基本的,老师在课程中教授给我们的还有一些可以成为工程化理念的一些思想,比如我们在写一个页面前要进行美观安全功能性能等等多方面考量,养成习惯有助于开发与维护。