前端与HTML|青训营笔记

PureNight
50 阅读2分钟

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

本堂课重要内容

  • 了解什么是前端，前端的技术栈、边界和关注点
  • 了解HTML的含义、常用标签和语义化

什么是前端

  • 解决GUI人机交互问题
  • 跨终端（PC/移动浏览器或客户端/小程序或VR/AR的等）
  • Web技术栈

HTML

HTML语法
  • 不区分大小写，推荐小写，属性值推荐用双引号包裹
  • 空标签可不闭合（input、meta、img）
  • 某些属性可省略（required、readonly）
标签
标题h1~h6
列表有序列表ol-li 无序列表ul-li 定义列表dl-dt-dd
链接a href=“” target=“”
多媒体img，audio，video
输入输入框input，textarea 选择select-option
文本p标签引用blockquote、cite、q、code，pre，强调strong，em

【注意】

  1. 在一个HTML文档里面只能有一个h1标签
  2. ol和ul标签的子元素只能li标签，但li可以包括任何标签
  3. strong强调事态紧急，而em则是语调强调，就像英语语法中 it is 强调部分 that这种句型需要强调的部分。
    4.不同类型的input标签对输入内容有不同要求，比如number类型只能输入数字，不支持字母或特殊符号，且超出设定范围为不合理但可以通过调节重新回到范围，抵达下限或上限后就无法调节。

常见内容划分格式如下： fef7623be3bda01affd4df8b12903f4.png

最后是需要明白HTML是写给谁看的->语义化的好处

  • 开发者：修改和维护页面->可维护性
  • 浏览器：渲染页面->代码可读性
  • 搜索引擎：提取关键词、排序->搜素引擎优化
  • 屏幕阅读器：给盲人读页面内容->提升无障碍性
如何做到语义化
avatar
文章
阅读
粉丝