前端与HTML

不会写前端的小鱼

2023-07-27 38 阅读1分钟

前端与HTML

前端

什么是前端

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

前端技术栈

HTML（内容）
CSS（样式）
JavaScript（行为）

三者通过网络协议与服务器端进行通信

前端应该关注哪些方面

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

前端的边界

node.js、electron...

开发环境

浏览器：IE/Edge、Chrome、Firefox、Safari
编辑器：Vscode、Vim、WebStrom

HTML（HyperText Markup Language）

<!doctype html>
<html>
    <head>
    <metacharset="UTF-8">
    <title>页面标题</title>
    </head>
    <body><h1>一级标题</h1>
    <p>段落内容</p>
    </body>
</html>

浏览器解析代码为DOM树

HTML语法

标签属性不分大小写
空标签可以不闭合，比如input
属性值推荐使用双引号
某些属性值可以省略

基本语法：标题h、列表（有序ol、无序ul、定义列表dl）、连接a、图像img、音频audio、视频video、输入input/textarea、文本blockquote（长引用）/cite（短引用）/q（更短的引用）/code（代码）/strong（加粗）/em（斜体）

内容划分：

header>nav
main>article+article
aside
footer

语义化的意义是什么？

HTML中的元素、属性及属性值都是拥有某些含义的
开发者应遵循语义来编写HTML

谁在使用我们写的HTML

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词
屏幕阅读器-给盲人读页面的内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

传达内容，而不是样式

如何做到语义化

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