什么是前端
-
解决GUI人机交互
-
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
-
Web技术栈
前端技术栈
前端技术栈
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
HTML、CSS、JavaScript它们三个看上去是三种不同的技术，但在实际过程中是相互搭配使用的。HTML是用来标记内容的，重在内容组织上，是超文本标记语言的简称。它用各种标签将页面中的元素组织起来，告诉浏览器如何显示其中的内容。CSS是用来修饰内容样式的，重在内容样式美化展示上，是层叠样式表的简称，简单地说就是负责HTML页面中元素的展现及排版。JavaScript是用来做交互的，是一种脚本语言，既可以运行在客户端也能运行在服务器端。主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为。如果把HTML比作身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。
前端应该关注什么
- 功能
- 美观
- 性能（动画流畅，用户体验好）
- 安全
- 无障碍
- 兼容（不同设备）
- 体验
前端的边界
node.js->开发服务器端
ELEXCTRON->开发客户端应用
HTML是什么?
HTML即HyperText Markup Language
HyperText支持图片、标题、链接、表格等
Markup Language是其使用的标记语言，它由一系列成对的标签组成，每个标签用于定义页面的不同部分，例如标题、段落、图像、链接等。
HTML是一种用于创建网页结构的标记语言。HTML提供了一种结构化的方式来表示信息，使得浏览器可以正确地解析和显示网页内容。
DOM树
HTML语言被浏览器解析成的树形结构
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
一些标签
标题：h1~h6 列表：
- 顺序列表： ol>li
- 无序列表： ul>li
- 属性值列表 ：dl>dt>dd
链接
链接：<a href=" "></a>
- 加入
target = "blank"属性后可以在新窗口打开
多媒体
图片：<img src=" " alt="替换文本" width="宽度" />
音频：<audio src=" " controls/*控制条*/>
视频：<video src=" " controls/*控制条*/>
输入
<input placeholder="请输入用户名"/>
<input type = " " />
type属性：
滑动条：range
范围number：number min="" max=""
日期：date
文本框：<textarea>文本框</textarea>
单选：<input type="radio">
多选：<input type="checkbox">
文本类标签
引用 :<blockquote cite="引用地址"> </blockquote>
短引用： <cite>作品</cite> <q>文字内容</q> 代码：<code>代码</code>
强调： <strong>含义强调</strong> <em>语气强调</em>
内容划分
<header> 头部
<nav>导航</nav>
</header>
<main> 主体
<article>内容1</article>
<article>内容2</article>
</main>
<aside>侧边栏</aside>
<footer>页脚</footer>
语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML？
- 开发者-修改，维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键字，排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
请记住：HTML 传达内容而不是样式
如何做到语义化：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
最后分享学习网站
HTML elements reference - HTML: HyperText Markup Language | MDN
