前端与HTML笔记 | 青训营

68 阅读1分钟

写在前面:这节课比上节课简单,终于能听懂了,上节课听得发懵,这个在b站之前学过,这个老师讲的做了一些补充。

什么是前端

解决人机交互问题 跨终端:pc/移动浏览器,客户端/小程序,VR/AR等 web技术栈

前端技术栈

image.png

前端应该关注哪些方面

美观,功能,无障碍,安全,性能,兼容性

前端的边界

image.png 前端在不断的发展

开发环境

image.png

什么是HTML

image.png image.png image.png

 !idoctype html
 表示HTML版本,浏览器将根据这个选择渲染模式
 <html>
 </html>

DOM树

image.png

HTML语法

image.png

标题

HTML中共有六种标题h1~h6 eg: image.png

列表

image.png

 有序列表
 <ol>
     <li>111</li>
     <li>111</li>  
 </ol>
 无序列表
 <ul>
     <li>2222</li>
     <li>2222</li>
 </ul>
 定义列表
 <dl>
   <dt>标题</dt>  
    <dd>多个dd可以对应一个dt</dd>
 </dl>

链接

image.png blank会开一个新页面

多媒体

image.png alt:替代性文本 img&audio&video

输入

image.png placeholder:没有输入时默认显示的文字 textarea可以输入多行文字 image.png select:下拉选择 input list:可以给出提示 image.png blockquote:长引用 cite:短引用 q:短引用 code标签声明创建一个只读的常量

 <code>const</code>

多行code:pre em:斜体 strong:粗体

内容整体划分

image.png logo可以放在header中,nav放导航

语义化

image.png

语义化的好处

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

如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

谁在使用我们写的HTML

image.png 无障碍阅读对正常人也是很必要的 HTML是用来传达内容的,不是用来传达样式的 image.png