什么是前端
- 解决GUI人机交互问题
- 跨终端
- pc/移动浏览器
- 客户端/小程序
- vr/ar等
- web技术栈
前端技术栈
通过HTML展示内容，CSS渲染内容样式，JavaScript实现用户的行为交互，通过网络协议与服务器端进行内容请求响应。
- HTML内容
- CSS样式
- JavaScript行为
HTML(HyperText Markup Languge)
浏览器拿到前端代码会进行解析，解析成一个DOM树。 DOM树：将html代码转化成一个对应的树形结构，每一个节点称之为DOM节点。
语法
- 标签和属性不区分大小写，但是一般小写，用以区分和其他库的代码。
- 空标签可以不闭合，比如input、meta，在结尾直接 /> 即可。
- 属性值一般使用双引号包裹，这样看上去不会显得杂乱。
- 某些属性值可以省略，比如required、readonly。
语义化是什么？
HTML语义化是指使用合适的HTML标签来表示文档的结构和内容，使得文档具有良好的可读性，可访问性，可检索性和互用性。HTML语义化的目的是让机器和人类都能理解文档的含义，而不仅仅是展示文档的样式。
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
例子
以下是根据课程内容和参考资料以及chatgpt完成的一个简单实例
<html>
<head>
<title>HTML5语义化示例</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>什么是HTML语义化？</h2>
<p>HTML语义化是指使用合适的HTML标签来表示文档的结构和内容...</p>
<footer>
<p>作者：张三</p>
<p>发布时间：2021-10-10</p>
</footer>
</article>
<article>
<h2>为什么要使用HTML语义化？</h2>
<p>HTML语义化的优点有很多，比如提高可访问性，可检索性，国际化，互用性和效率...</p>
<footer>
<p>发布时间：2023-07-27</p>
</footer>
</article>
</main>
<aside>
<h3>热门文章</h3>
<ul>
<li><a href="#">如何学习HTML？</a></li>
<li><a href="#">HTML5的新特性有哪些？</a></li>
<li><a href="#">HTML和XML的区别是什么？</a></li>
</ul>
</aside>
</body>
</html>
