HTML与CSS | 青训营笔记

50 阅读1分钟

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

我记录的容易忘的概念

  • 当有啥不清楚的地方时,尤其是html和css的内容,因为太多了,很容易记不清,而且确实有一些东西很少用到,当不清楚时直接去W3school查,W3School是因特网上最大的WEB开发者资源,一直在升级和更新,致力于推广W3C标准技术。

  • 自结束标签 <img> <input>

  • 注释:<!-- ... --> 注释不能嵌套

  • &nbsp:空格

  • &gt: 大于号

  • &lt: 小于号

  • 浏览器在解析网页时,会自动对网页中不符合规范的 内容进行修正,源码写成什么样就是什么样,修正的话就是修正代码在内存里的结构(F12 elements)

  • rem是相对于根元素的字体大小来计算的

  • 元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会移动其他元素

  • BFC

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素子元素和父元素外边距不会重叠

开启BFC的元素可以包含浮动的子元素

  • clear

作用:清除浮动元素对当前元素所产生的影响

可选值:left 清除左侧浮动元素对当前元素的影响,right 清除右侧浮动元素对当前元素的影响

设置清除浮动以后,浏览器会自动为元素添加上一个上外边距,以使其位置不受其他元素的影响

  • 网页基本信息
<!--DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html>
<!--head标签代表网页头部-->
<head>
    <!--描述性标签,他用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO,比如关键词,排名优化-->
    <meta charset="UTF-8">
    <meta name="keywords" content="java">
    <meta name="description" content="学习java">
    <!--网页标题-->
    <title>Title</title>
</head>
<!--网页主体-->
<body>
hello
</body>
</html>