前端:什么是前端、技术栈、关注点、边界、开发环境 HTML:DOM 树的概念、基本语法、常用标签、内容划分、语义化
我认为前端的核心就是与用户的直接交互,有屏幕的地方就有前端
前端的要解决的问题主要有:
传统意义上的前端开发就是 HTML、CSS、JavaScript 三件套
当然,除了三件套外,我们还应掌握一定的网络协议基础,因为作为前端页面,也是要与服务器进行交互的,这其中就少不了网络协议的支撑
由于前端项目的日益复杂化,现代意义上的前端开发,除了三件套的基础外,还少不了前端工程化的支撑,这其中就包括 Node.js、比较流行的前端框架(如 React、Vue)、CSS 框架(如 Bootstrap、TailWindCss)、基础语言扩展(如 TypeScript、Sass)等等
由于前端的高速发展和日益完善的生态,前端的边界已经被扩展的很广,使用现代前端技术,我们可以:
前端的开发环境很简单,只需要有浏览器(Chrome、Firefox、Edge 等)+ 编辑器(VSCode、Vim 等)即可
个人使用的主要是 Chrome+VSCode,Chrome 的 DevTools 很好用
全称:HyperText Markup Language
<h1>这是一个标题</h1>
(也可 <img src="xxx" />
简写)先来看一段完整的 html 代码示例:
<!doctype html>
<html>
<head>
<mate charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我是Title</h1>
<p>我是一个段落</p>
</body>
</html>
分析:
<!doctype html>
表明当前文档使用的 html 版本,对于 html5 来说,这样写就可以了<html>
是文档的根标签,所有的其他的标签都在这个根标签下<head>
标签存放页面不希望展示,但需要的数据<body>
标签存放的是要展示给用户的内容由 HTML 标签组成的文档对象模型树,即为 DOM 树
HTML 文档由若干 HTML 元素组成,HTML 元素一般由开始标签、内容、结束标签组成,例如: <p>我是一段文字</p>
HTML 元素内可以包含若干属性,属性一般由形如 key=value
的键值对组成,例如: <p class="note">我是一段文字</p>
,其中 class="note"
就是这个元素的一个属性,不同的属性使用空格隔开
标签:h1~h6
列表:有序列表 ol (order-list)
、无序列表 ul (unorder-list)
、列表项 li (list-item)
<p>
现代浏览器
</p>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Edge</li>
</ul>
<p>
文本编辑器
</p>
<ol>
<li>VSCode</li>
<li>Vim</li>
<li>Notepad++</li>
</ol>
显示效果如下:
现代浏览器
文本编辑器
特殊列表:列表定义 dl、列表中的标题 dt、列表中的数据项 dd(注意:一个 dt 可对应多个 dd)
<dl>
<dt>webkit内核</dt>
<dd>Chrome</dd>
<dd>Edge</dd>
<dt>gecko内核</dt>
<dd>Firefox</dd>
</dl>
显示效果如下:
webkit内核 Chrome Edge gecko内核 Firefox
链接:a (anchor)
多媒体:图片 img、音频 audio、视频 video
输入框:input、textarea,使用 type 属性指定输入框类型 (range、number、date等)
<input type="text">
<input type="number" min="10">
<input type="range" min="0" max="100" step="2">
<input type="date" min="2022-01-01">
显示效果如下:
单选多选:input,设置 type 属性为 radio、checkbox
<input type="radio" name="111">
<input type="radio" name="111">
<input type="checkbox" name="222">
<input type="checkbox" name="222">
显示效果如下:
下拉列表:select+option
<select>
<option>😇</option>
<option>😎</option>
<option>😉</option>
<option>😅</option>
</select>
显示效果如下
输入提示:datalist
文字处理标签:块级引用 blockquote、短引用 cite&q、代码段 code、强调标签 strong (重要性强调)
&em (语气强调)
什么是语义化?
元素
、 属性
及 属性值
都拥有某些含义语义
来编写 HTML ol
; 无序列表用 ul
lang
属性表示内容所使用的语言为什么要使用?
页面
好处:提升代码可读性 & 可维护性、便于搜索引擎优化、提升无障碍性
传达内容,而不是样式
如何做到语义化?