前端与HTML |青训营笔记

用户4960058191129
57 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

1，什么是前端

①解决GUI人机交互问题

②跨终端

③Web技术栈

前端技术栈

 JavaScript(行为)
 CSS（样式）
 HTML(内容)
 网络协议和服务器端

前端应该关注那些方面？

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

2，HTML是什么？

HyperText Markup Language(超文本标记语言)

<!doctype html>
 <html>
     <head>
         <meta charset = "UTF-8">
         <title>页面标题</title>
     </head>
     <body>
         <h1>一级标题</h1>
         <p>段落内容</p>
         <img src = "photo.jpg"/>
     </body>
 </html>



<!doctype html>：标记什么样的版本，最终浏览器会决定使用哪一种渲染模式
<html></html>：文档根标签
<head></head>：页面原数据，标题、什么编码等。
<body></body>：页面内容
src：img标签的一个属性名
photo.jpg:src属性的属性值

DOM树

浏览器拿到html会将其解析为DOM树

HTML语法

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

语义化是什么

  • HTML中的元素{\color{Cyan}元素}、属性{\color{Cyan}属性}及属性值{\color{Cyan}属性值}都拥有某些含义
  • 开发者应遵循语义{\color{Cyan}语义}来编写HTML
  • 有序列表用ol{\color{Cyan}ol};无序列表用ul{\color{Cyan}ul}
  • lang{\color{Cyan}lang}属性表示内容所用的语言

谁在使用我们写的HTML

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

语义化的好处

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

如何做到语义化？

  • 了解每一个标签的属性的含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化生成代码
  • 将写好的代码让别人读，找出不符合语义化的地方并修改
avatar
文章
阅读
粉丝