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

用户5759945523065
353 阅读2分钟

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

一、前端简介

什么是前端

前端工程师使用Web技术栈解决多端图形界面交互

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

前端技术栈

image.png

前端的关注点

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

开发环境

image.png

二、HTML

简介

HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 （MDN)

  • HyperText: 超文本,包含了图片、标题、链接、表格
  • Markup Language：标记语言,也就是标签

HTML元素

image.png

  1. 元素（Element）：元素 = 开始标签 + 结束标签 + 内容
  2. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始
  3. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束
  4. 内容（Content）：元素的内容

注意

  • 一些元素只有一个标签，如img、input、br等
  • HTML元素标签不区分大小写，推荐小写
  • 元素可以拥有属性，属性包含有元素的额外信息
  • 属性值推荐双引号包裹

HTML结构

<!DOCTYPE html>
< ! - - 页面中最大的标签 根标签 - - >
<html lang="en">
  < ! - - 头部标签 - - >
  <head>
    <meta charset="UTF-8" />
    < ! - - 标题标签 - - >
    <title>Document</title>
  </head>
  < ! - - 文档的主体内容 - - >
  <body></body>
</html>
  • <!DOCTYPE html>—— 一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
  • lang 指定该 html 标 签 内 容 所 用 的 语 言
  • <meta charset="UTF-8" />—— 文档编码方式

HTML语义化

语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语言编写HTML，例如：
    • 有序列表用ol，无序列表用ul
    • lang属性表示内容所使用语言

语义化作用

  • 方便代码的阅读和维护， 样式丢失的时候能让页面呈现清晰的结构
  • 有利于浏览器识别，更好地展示页面
  • 有利于搜索引擎优化，也就是SEO，能够更好提取关键词、排序
  • 方便其他设备解析：屏幕阅读器-给盲人读页面内容

如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最符合描述这个内容
  • 不使用可视化工具生成代码

本文若有不足之处,欢迎纠正

avatar
文章
阅读
粉丝