前端与HTML|青训营笔记

KIKI37
343 阅读2分钟

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

一、本堂课重点内容：

41e8298f5915514a64f6a7ce9701a6e.png

二、详细知识点介绍：

  • 前端工作

    前端是使用者第一接触到的部分，是重要的第一印象，其工作中的关键是图形界面下的人机交互问题

    前端不止关注功能、性能、兼容与安全问题，更需要在美观与无障碍体验部分中下功夫，所以前端技术在不断更新

  • 前端技术栈

    前端技术栈分为三部分，分别是以内容为主的HTML，以样式为主的CSS以及以行为为主的JavaScript

  • HTML

    HTML是一种标记语言，可以通过浏览器将其翻译并展现给大众，描述了一个网页的信息

    DOM树是HTML结构组成的一棵树，通过这棵树，可以轻松定位到相应的标签位置与文本位置等

    HTML的语法有：1）标签和属性不区分大小写；2）空标签可以不闭合；3）属性值用双引号包裹；4）某些属性值可以省略

  • HTML语义化

    语义化是什么

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

  语义是开发者编写HTML时遵循的标准之一

    HTML的使用者

      开发者 ———— 修改、维护页面
  浏览器 ———— 展示页面
  搜索引擎 ———— 提取关键词、排序
  屏幕阅读器 ———— 阅读页面内容

    语义化的好处

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

    如何做到语义化

      了解标签和属性含义
  选择最适合的标签

三、HTML个别标签演示：

  • 标题 HTML中有6个标签

cf23e729a52a4592377601174a1fb02.jpg

  • 列表

    HTML中有三类列表，分别为：

    ol —— 有序列表

892587028eb747fa40379dd2502cb88.jpg

ul —— 无序列表

85da5615770dcfd509c2fbdd1260ffc.jpg

dl —— 定义列表

94a2d48f325e75ab8b8ea37813c0267.jpg

  • 图片

    alt=""

    ""中是图片加载失败时所呈现的文字

  • 选项

      input type="checkbox" —— 表示多选
  input type="radio" —— 表示单选
  <select> —— 表示下拉选项

    实现打字时的文字联想

2e1cabea12a23f59274c0d37b629730.jpg

  • 表单

    input标签

      placeholder：表示占位符，即当该空用户为输入时占位的文本

    textarea —— 文本框

  • 文字

    表示引用

      blockquote —— 表示快捷引用，直接引用一段话，其中cite属性表示话句的来源
  cite —— 表示短引用，指标题或章节
  q —— 表示短引用，指先前已讲过的具体内容
avatar
文章
阅读
粉丝