学习笔记-前端与HTML | 青训营

雾绕空山丶
63 阅读2分钟

前端与HTML

  • 什么是前端

  1. 解决图形界面下的人机交互的问题。
  2. 跨终端，包括pc/移动浏览器、客户端/小程序、AR/VR等
  3. Web技术栈

前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师

  • 主要技术

  1. 最基础的是HTML。主要负责页面、结构、内容。

  2. 页面中使用CSS来设置页面的样式。例如位置、大小、颜色等信息。

  3. 使用JavaScript来定义网页的行为。例如用户点了一个按钮之后，页面该怎么响应。

HTML，CSS，JavaScript和网络协议构成了前端最基础的一个技术栈。

HTML，CSS和JavaScript都是运行在浏览器里边的。浏览器可以通过HTTP协议和服务器进行通信。

前端应关注功能、美观、安全、无障碍、性能、兼容性、用户体验。 前端的发展性已经超出了页面的范畴，可用于开发服务器端应用、开发客户端、在线传输、游戏等。

HTML

HyperText Markup Language 超文本标记语言

    <img src="photo.jpg" />
<!--<标签 属性名  属性值>-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
    <!--显示给用户的内容-->
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

image.png

标签和属性不区分大小写，一般用小写

空标签可以不闭合，如，input，meta

属性值推荐用双引号包裹

某些属性值可以省略，如required

常用标签

  1. 标题h1~h6
  2. 有序列表ol（ordered list），每个列表项用li表示
  3. 无序列表ul（unordered list）
  4. 定义列表dl（definition list），dt表示列表标题，dd表示具体描述，多对多关系
  5. 链接a，href=""超链接地址，target打开浏览器新页面展示链接内容
  6. 插入图片img，src=""表示图片地址，alt表示图片加载失败是替代性文本，wigth 图片宽度
  7. 插入视频audio，src=""表示视频地址，controls表示默认显示浏览器播放控件
  8. 插入音频video，src=""表示视频地址，controls`表示默认显示浏览器播放控件
  9. image.png
  10. image.png
  11. image.png
  12. <blockquote cite="引用地址"表示快捷引用，cite表示短引用，一般是一个作品的名字或章节，q表示具体的引用，code表示引用代码，等宽字节
  13. strong表示加粗强调，em表示斜体强调
  14. header页头，一般放nav导航
  15. main主体部分，一个页面一般只有一个main，article正文（也可以没有），aside与正文相关但是不直接属于正文的补充部分
  16. footer放页尾，一般放参考链接、版权、备案信息等

标签语义化

使HTML中的元素、属性、属性值都拥有某些含义。

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