这是我参与「第五届青训营 」伴学笔记创作活动的第 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>
- 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,再往下分
内容划分
分为header、main、aside、footer。其中header导航可以用nav标签来表示,main标签可以article标签来表示。