前端

什么是前端

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

前端技术栈

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

通过网络协议与服务器交互

前端需要注意事项

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

前端的边界

Node.Js, ELECTRON, React Native, Web RTC, WebGL, WebASSEMBLY

HTML

HyperText Markup Language

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title Here</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<p>段落</p>
	</body>
</html>

DOM树

DOM树.png

HTML语法

不区分大小写，推荐**小写
空标签可以不闭合
属性值推荐双引号包裹

标题

<h1></h1> ~ <h6></h6>

列表

	<ol>
		<li> </li>
	</ol>
	/* 有序列表 */
	<ul>
		<li> </li>
	</ul>
	/* 无序列表 */
	<dl>
		<dt> </dt>
		<dd> </dd>
	</dl>
	/* 定义列表 */

链接

<a href="xxx" target="_blank"> </a>

多媒体

<img> <audio> <video>

输入

<input type="">

文本类

<blockquote cite=""></blockquote> <cite></cite> <code></code> <pre></pre>

内容划分

内容划分.png

语义化

HTml中的元素、属性、及属性值拥有某些含义
应当遵循语义来编写HTML

语义化的好处

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

传达内容，而不是传达样式

总结

7.27号，字节青训营第二课《前端与HTML》，今天的内容总体而言还是十分的基础。讲了前端的相关知识，和HTML的基本语法、介绍了一些标签的使用和强调了语义化的重要性。

Day2 前端与HTML | 青训营

前端