本堂重点前端与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> 标签的方式:
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签 使用 Target 属性,你可以定义被链接的文档在何处显示。 name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
语义化
HTML中的元素、属性及属性值都拥有某些含义 开发者应该遵循语义来编写HTML
- 有序列表用ol;亮列表用ul
- lang 属性表示内容所使用的语言
谁使用我们的html
- 开发者-修改、维护页面
- 浏览器–展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
总结
html是传达内容的而不是样式的
如何做到语义化
了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化→具生成代码