前端与 HTML | 青训营笔记

沈北漂
563 阅读3分钟

前端与 HTML | 青训营笔记

这是我参与 「第五届青训营」\color{#54acf3}{「第五届青训营」} 伴学笔记创作活动的第N天学笔记创作活动的第一天。

前端概要

一、什么是前端？

1.解决GUI(图形用户界面）人机交互问题
2.跨终端
（1）PC/移动浏览器
（2）客户端/小程序
（3）VR(虚拟现实)/AR(增强现实技术 )等
3.Web技术栈
（1）HTML
（2）CSS
（3）JavaScript（安身立命所在）\color{#54acf3}{JavaScript（安身立命所在）}

前端工程师就是利用Web技术栈解决多端图形用户界面交互问题的工程师。

二、前端技术栈

通过HTML展示内容，CSS渲染内容样式，JavaScript实现用户的行为交互，通过网络协议与服务器端进行内容请求响应。

前端1.png

三、前端应该关注的方面

个人认为最为直观的是美观、体验、兼容三方面，其次性能、功能、安全、无障碍是需要一定功力才能实现的

前端2.png

HTML

Hyper Text Markup Language 即超文本标记语言

一、HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，如input、meta等等
  • 属性值推荐双引号包裹
  • 某些属性值可以省略，如required等
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <input type="text">

二、HTML语义化

HTML语义：HTML中的元素、属性和元素值都有一定的含义

  • 开发者要遵循语义来编写HTML 语义化的好处
  • 代码可读性：在页面没有css的情况下也能够呈现很好的内容结构。
  • 可维护性：语义化使得代码更具有可读性，让其他开发人员更好地理解HTML结构，减少差异化。
  • 搜索引擎优化：爬虫依赖于标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。
  • 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，label标签的灵活运用。
  • 提升无障碍性：方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
    HTML常用语义
  • header\color{#54acf3}{header}：用于定义页面的头部区域，通常包括网站 logo、主导航、全站链接以及搜索框。
  • nav\color{#54acf3}{nav}：定义页面的导航链接部分区域。
  • main\color{#54acf3}{main}：定义文档的主要内容，该内容在文档中应当是独一无二的
  • article\color{#54acf3}{article}：定义页面独立的内容，它可以有自己的 header、footer、sections 等，专注于单个主题的博客文章，报纸文章或网页文章。
  • section\color{#54acf3}{section}：表示文档中的一个区域（或节），比如，内容中的一个专题组。
  • aside\color{#54acf3}{aside}：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
  • footer\color{#54acf3}{footer}：定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

5.png

avatar
文章
阅读
粉丝