前端与 HTML | 青训营笔记

287 阅读1分钟

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

课堂笔记/重点内容

  • 简单介绍了html以及html中常用的一些标签。
  • 前端的概念和前端人员的设计思维。
  • 前端应注重功能、美观、无障碍、安全、性能、兼容。
  • DOM树
  • 页面的内容划分
  • HTML页面对于开发者、用户的需求,语义化的含义以及如何做到语义化

HTML语义化标签:

常用的HTML标签:p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。 <a href=""> </a> <img src="" alt="" width=""/> <audio src=""></audio> <input type=""> <input placeholder=""> <label><input type="checkbox"/> </label> <select> <option> </option> </select>

<img src="image" alt="" width="50%" />.png

  • h1~h6发生了变化的是字体大小,注意在一个HTML文档里面只能有一个h1标签。
  • div标签相当于一个容器,里面可以放各式各样的标签和内容。
  • 列表分为有序列表(ol/li)和无序(ul/li)列表,两者不同的是ol和ul标签的子元素只能是li标签!但li标签里面可以包含任何标签。
  • input标签的作用很广,它可以是一个按钮,可以是一个单选框或者复选框,也可以是一个文本框等,不同类型的input标签对输入的内容有不同的要求。如placeholder、range、number、data、textarea等等。
  • img标签是对图片引入的一种方式,src是获取图片的地址,图片的大小可以调节。

当然,实际开发中还有很多的语义化标签,慢慢去熟悉吧。

DOM树


HTML文件分为head、body,再往下分

image.png

内容划分


分为header、main、aside、footer。其中header导航可以用nav标签来表示,main标签可以article标签来表示。

image.png