前端与html

108 阅读2分钟

本堂重点前端与html

什么是前端?

  • 解决GUI人机交互问题;
  • 跨终端:
    • pc/移动端
    • 客户端/小程序
    • VR/AR等
  • Web技术栈;

前端应该关注的问题

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

前端边界node.js:

开发服务器端electron:webrtc:3D游戏webGL

html语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略,比如required、readonly

无序列表

无序列表始于<ul>标签。每个列表项始于 <li>

有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以<dd>开始。

a标签

我们通过使用 <a> 标签在 HTML 中创建链接。 有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签 使用 Target 属性,你可以定义被链接的文档在何处显示。 name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

语义化

HTML中的元素、属性及属性值都拥有某些含义 开发者应该遵循语义来编写HTML

  • 有序列表用ol;亮列表用ul
  • lang 属性表示内容所使用的语言

谁使用我们的html

  • 开发者-修改、维护页面
  • 浏览器–展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容

总结

html是传达内容的而不是样式的

如何做到语义化

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