HTML ｜ 青训营笔记

dnxb123
100 阅读2分钟

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

课堂内容

一、什么是前端

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

二、最基础的前端技术栈

image.png

三、前端应该关注？

  • 安全
  • 功能
  • 美观
  • 兼容
  • 性能
  • 体验
  • 无障碍
  • ……

四、前端的无限可能

image.png

五、开发环境

  • 浏览器：IE（拒绝IE从我做起）/Edge、Chrome、Firefox、Safari……
  • 编辑器：Vscode、Vim、Webstorm……

六、HTML标签

  • 标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
  • 列表标签
<ul>
    无序列表
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
    有序列表
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<dl>
    key-value列表
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
  • 链接标签
<a href="http://www.baidu.com/">百度</a>
  • 多媒体标签
<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

<audio src="someaudio.wav">您的浏览器不支持 audio 标签</audio>

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签</video>
  • 输入标签
<input type="text">
<input type="submit">
<input type="range">
<input type="date">
<textarea rows="3" cols="20">青训营</textarea>

还有更多标签可以去课程学习哦！

七、语义化是什么

  • HTML中的元素、属性以及属性值都拥有某种含义
  • 开发者应当遵循语义来编写HTML
    • 有序列表用ol，无序列表用ul
    • lang属性表示内容所使用的语言

八、谁在使用HTML?

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

九、语义化的好处

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

十、如何做到语义化

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

以上就是我总结的第一节课的内容了，内容有疏漏还请见谅，有错误还请指正，希望我们一起进步，顺利结营！

avatar
文章
阅读
粉丝