前端与 HTML | 青训营笔记

氼乚42
100 阅读3分钟

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

课堂笔记

课堂重点内容

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

详细内容

什么是前端

  • 解决GUI人机交互问题
  • 跨终端问题（PC/移动浏览器、客户端/小程序、VR/AR等）
  • Web技术栈
  • 总结：前端工程师是使用web技术栈解决多端图形页面交互问题的工程师

前端技术栈

  • HTML（内容）：负责页面结构和内容
  • CSS（样式）：负责页面样式（大小、颜色、格式等）
  • JavaScript（行为）:定义页面的功能 image.png

HTML定义

  • HTML指的是超文本标记语言 (HyperText Markup Language)是用来描述网页的一种语言。 不是一种编程语言，而是一种标记语言。

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、img、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，如required、readonly；属性值是true时可以省略

HTML标签

<!DOCTYPE html>
<!-- <!DOCTYPE html>标记了当前使用的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>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>
标签名定义说明
htmlHTML标签页面中最大的标签，称为根标签
head文档的头部注意：在head标签中我们必须要设置title标签
title文档的标题让页面有一个属于自己的网页标题
body文档的主体元素包含文档的所有内容，页面内容基本都是放在body里面的
hx标题标签作为标题使用，文字加粗，字号依次减小(X:1~6)
p段落标签把HTML文档分成若干段落
hr水平线标签
br换行标签
divdiv标签盒子，用来布局的，但是一行只能放一个div
spanspan标签盒子，用来布局的，一行上可以放好多个span

浏览器渲染过程

  • 将HTML代码解析成DOM树，即解析成树形结构

image.png

HTML语义化

  • HTML中的元素、属性及属性值都有某些含义
  • 语义化标签：就是标签的含义，用正确的标签做正确的事，无CSS样式时也容易阅读，便于阅读和理解
<header>头部标签---定义文档的页眉，头部信息</header>
<nav>导航标签---定义导航连接的部分</nav>
<article>内容标签---内容区域</article>
<section>块级标签</section>
<aside>侧边栏标签---定义当前所出内容以外的标签</aside>
<footer>尾部标签---定义文档的页脚，尾部信息</footer>

HTML语义化优点

  • 代码结构：使页面没有CSS的情况下，也能够呈现出很好的内容结构
  • 有利于SEO：爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。
  • 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活使用
  • 便于团队开发和维护：语义化使代码更加具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  • 方便其他设备解析：如屏幕阅读器、移动设备等，以有意义的方式来渲染网
avatar
文章
阅读
粉丝