HTML5一些小结------边学边更

梦里梦外; 2023-07-07 08:15 150阅读 0赞

Div没有明确语义 块标签 可以实现自动换行

H5引入了一些有明确语义的div，用这些div来构建网页，便于搜索引擎找到相关的内容，主要有 header（页眉）,footer（页脚）,section,article,aside,nav（有明确语义的div）

页眉header，页脚footer；

Css颜色：\#000000---\#ffffff

绝对赋值：不建议

相对赋值：比较好

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70][]

Float属性：浮动

盒元素：自动换行，边距：margin（外边距），padding（内边距）

margin\_bottom，margin\_top，margin\_left，margin\_right，padding同理。

Margin：互不包含，相互独立的两部分。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70 1][]2020.02.21  周五

footer\{background:\#cc9900;width:100%;height:100px;clear:both;margin-top: 5px;\}

图1的footer（页脚）与上面没有间隔，怎么解决？

答：加上一个section，包裹上面两部分（即将article和aside两个标签写在一个section标签内，让section作为父元素）。即可使footer中的margin-top: 5px;生效。

**标签选择器**：通过标签名来选择标签的这种选择器

对于有id属性的标签，我们在选择该标签时可以采用以下方法：

id选择器：\#id属性值

class选择器：.class属性值

兄弟选择器，属性选择器，伪类选择器，伪元素选择器，后代选择器，父子选择器

**Id，class属性的共同点**：都可以区分标签名称一样的不同标签；**不同点**在于：class可以区分不同组的，而不能区分同一组的。

两行三列怎么做？

nav标签：导航标签

br：回车换行符

改变nav标签的定位方式

静态定位：默认

固定定位

绝对定位：脱离父元素，自由移动，相对于浏览器本身（页面）定位

相对定位：相对于父元素的位置定位，写入父元素中position：relative；

top：起始时top值是0。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020022120075182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200221200837293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzc0MTIw,size_16,color_FFFFFF,t_70