前端与HTML

前端

1.什么是前端？

解决图形界面下（GUI）人机交互问题；

不管终端如何（PC/移动浏览器、客户端、小程序、VR/AR等），都是使用Web技术栈（HTTP,HTML,CSS,JavaScript等)解决多端图形界面交互问题。

2.前端技术栈

使用HTML设计页面的内容；使用CSS设计页面的样式；使用JavaScript定义网页的行为，三者均运行在浏览器中。使用HTTP网络协议与服务器进行通信，通过网络协议从服务器上拿到相应的代码，经过渲染，变成我们所看到的页面。浏览器也可以通过网络协议将用户的操作提交到服务器端。

3.前端应该关注哪些方面？

功能 美观 无障碍 安全 性能 兼容 用户体验

4.开发环境 浏览器+编辑器

HTML

全称：HyperText Markup Language

​

页面标题

一级标题

段落内容

​

解析为DOM树，每个节点为一个DOM节点

1.HTML语言

标签和属性不区分大小写，推荐小写

空标签可以不闭合或者用/

属性值推荐用双引号包裹

某些属性值可以省略：true、false

(1)标题 h1~h6

(2)列表

有序列表

1. a
2. b

每个项用Li包括，输出后默认加1,2,3

无序列表

• A
• B

每项用li包括，输出后前面会有小黑点

定义列表dl，标题：dt,具体值dd，每个dt可以对应多个dd，每个dd输出后会另起一行；每个dd也可以对应多个dt

（3）链接

字节跳动官网

alt:替代性文本，图片无法展示时说明性文字

​​

​

file:///C:/Users/lenovo/Desktop/...?lastModify=1673790018

​

(4)输入

用户输入后就会隐去这些字

可以滑动的条

设置范围的数据

选项：name相同的radio只能选择一个

下拉选择：select(option)

快捷输入方式 datalist

（5）文本

引用：

blockquote快捷引用 长内容，cite=“..."引用源

cite 短引用 小王子

q短引用，cite一般是引用的章节或书名，q是具体的内容

code代码标签，可长可短，在展示时会有特定的格式

强调：

strong 非常重要（含义）

em 重读（语气）

（6）内容划分

HTML的语义化：不停迭代，是为了清晰的表达内容和结构。遵循语义来编写HTML。

谁在使用我们写的HTML：

（1）开发者：修改、维护页面（彼此协作，要求代码规范）

（2）浏览器，展示页面（遵循一定的规则）

（3）搜索引擎 提取关键词、排序（不同位置的权重不同）

（4）屏幕阅读器

语义化的好处：

代码可读性

可维护性

搜索引擎优化

提升无障碍性

如何做到语义化？

（1）了解每个标签和属性的含义；推荐去看W3C上HTML5的规范或者MDN

（2）思考什么标签最适合描述这个内容

（3）不推荐使用可视化工具生成代码（不好控制使用的标签）