写在前面:这节课比上节课简单,终于能听懂了,上节课听得发懵,这个在b站之前学过,这个老师讲的做了一些补充。
什么是前端
解决人机交互问题 跨终端:pc/移动浏览器,客户端/小程序,VR/AR等 web技术栈
前端技术栈
前端应该关注哪些方面
美观,功能,无障碍,安全,性能,兼容性
前端的边界
前端在不断的发展
开发环境
什么是HTML
!idoctype html
表示HTML版本,浏览器将根据这个选择渲染模式
<html>
</html>
DOM树
HTML语法
标题
HTML中共有六种标题h1~h6
eg:
列表
有序列表
<ol>
<li>111</li>
<li>111</li>
</ol>
无序列表
<ul>
<li>2222</li>
<li>2222</li>
</ul>
定义列表
<dl>
<dt>标题</dt>
<dd>多个dd可以对应一个dt</dd>
</dl>
链接
blank会开一个新页面
多媒体
alt:替代性文本
img&audio&video
输入
placeholder:没有输入时默认显示的文字
textarea可以输入多行文字
select:下拉选择
input list:可以给出提示
blockquote:长引用
cite:短引用
q:短引用
code标签声明创建一个只读的常量
<code>const</code>
多行code:pre em:斜体 strong:粗体
内容整体划分
logo可以放在header中,nav放导航
语义化
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们写的HTML
无障碍阅读对正常人也是很必要的
HTML是用来传达内容的,不是用来传达样式的