前端与HTML5 | 青训营笔记

Ekko0320
268 阅读2分钟

这是我参与[第五届青训营]伴学笔记创作活动的第一天

1.前端与HTML

1.1 什么是前端

    1. 解决GUI人机交互问题
    1. 跨越端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • 3.WEB技术栈

1.2 前端技术栈

  • JavaScript 行为
  • CSS 样式
  • HTML 内容

1.3 前端应该关注哪些内容

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

2.HTML是什么？

HTML 是 HyperText Markup Language的简写 ， 包含图片，标题，链接，表格等内容

2.1. DOM树

image.png

2.2.1 HTML语法

  1. 标签和属性不区分大小写，一般都是小写

  2. 空标签可以不闭合，有input，meta等

  3. 属性值可以使用双引号包裹

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

2.2.2 标题h1 ~ h6

区别只是文字大小，都是块级元素，一个HTML内容只能有一个h1元素

2.2.3 列表

ul，ol

ul是有序列表，ol是无序列表，列表推荐用li来表示每一项内容

li

li是列表中的子元素，表示列表中的每一项

2.2.4 媒体元素

  1. img

img标签有 src，alt， title等属性，src表示资源的路径，title是当用户的鼠标划到图标上，会显示的文字，而alt属性是img特有的属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。可提高图片的访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析 2. audio 音频链接 3. video 视频链接

语义化

  1. 什么是语义化

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

  • 开发者应该遵循予以来开发html

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

语义化有助于SEO优化，语义化代码让搜索引擎容易理解网页

2.谁在使用我们的HTML语言

   1.  开发者修改、维护页面。
   2.  浏览器展示页面。
   3.  搜索引擎提取关键字、排序。
   4.  屏幕阅读器给盲人阅读内容。

3. 语义化的好处 1. 代码可读性 1. 可维护性 1. 搜索引擎优化 1. 提供无障碍性

  1. 如何实现语义化
    1. 了解每个标签和属性的含义
    2. 思考什么标签最适合什么内容
    3. 不使用可视化工具生成代码
avatar
文章
阅读
粉丝