前端与HTML | 青训营笔记

段昕怡
145 阅读2分钟

前端与HTML | 青训营笔记

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

1、什么是前端

  • 解决 GUI 人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR 等

  • Web 技术栈

2、前端技术栈

image.png

3、前端应该关注的方面

  1. 功能
  2. 美观
  3. 无障碍
  4. 安全
  5. 性能
  6. 兼容
  7. 体验

4、开发环境

浏览器：IE/Edge、Chrome、Firefox 、Safari

编辑器：vscode、Vim、WebStorm

5、HTML语法

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

框架

<html> 
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

标题

<h1>1级标题</h1>  
<h2>2级标题</h2>  
<h3>3级标题</h3>  
<h4>4级标题</h4>  
<h5>5级标题</h5>  
<h6>6级标题</h6>

语义: 1~6级标题，重要程度依次递减

特点: 文字都有加粗，并且从h1 →h6文字逐渐减小，独占一行

列表

  • 无序列表

    ul：表示无序列表的整体，用于包裹li标签

    li：表示无序列表的每一项，用于包含每一行的内容

  • 有序列表

    ol：表示有序列表的整体，用于包裹li标签

    li：表示有序列表的每一项，用于包含每一行的内容

  • 自定义列表

    dl：表示自定义列表的整体，用于包裹dt/dd标签

    dt：表示自定义列表的主题

    dd：表示自定义列表的针对主题的每一项内容

链接

<a href="目标网页"  target="_blank">超链接</ a>

target属性：

_self：默认值，在当前窗口中跳转（覆盖原网页)

_blank：在新窗口中跳转（保留原网页)

媒体

  • 图片
<img src="" alt="" title="" height="" width="">

属性值：

alt：替换文本。当图片加载失败时，才显示alt的文本；当图片加载成功时，不会显示alt的文本。

title：提示文本。当鼠标悬停时，才显示的文本。

  • 音频
<audio src="" controls></audio>

属性值：

controls：显示播放的控件

autoplay：自动播放

loop：循环播放

  • 视频
<video src="" controls></video>

属性值：

controls：显示播放的控件

autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放)

loop：循环播放

语义化

1.什么是语义化

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

  • 开发者应该遵循语义来编写HTML

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

2.语义化好处

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

注意：要考虑不同的人群（例如特殊人群），以及网页端和移动端。传达内容，而不是样式！

3.如何做到语义化?

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