HTML与CSS | 青训营笔记

眩晕的洋葱
116 阅读4分钟

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

今天没有上课，那就来针对前两节课韩老师讲的html基础和css基础来好好复盘拓展一下吧~

1、DOCTYPE的作用？

老师在上html的课时有浅浅提到过，本人就上网找了一下，发现doctype也叫文档类型，就是把他写在文档的最前面（第一行），作用是告诉浏览器（解析器）应该以什么样的文档类型定义来解析文档。 image.png 类似于以上这种声明，意思就是以html的文档类型来进行解析，还有其他的文档像：xhtml。

2、html5的新特性？

html5是如今正在学习的，我了解到他的一些新增特性：

  • 语义化标签：这也是上课有带过一笔的，在我的理解中语义化的意思就是根据内容选择合适的标签，像一篇文章中有顶部、底部、主要内容和侧边栏的话，用到语义化标签就显得很重要；新增的语义化标签大致有：

    • header：头部
    • footer：页脚
    • nav：导航
    • article：文章内容
    • aside：侧边

    语义化标签的作用：

    1. 对机器友好：利于搜索引擎的爬虫抓取有效的信息，有利于seo；
    2. 对人友好；代码结构完整，利于代码的开发与维护。

  • 媒体标签：

    (1) audio：音频

<audio src='' controls autoplay loop='true'></audio>

属性：

  • controls 控制面板

  • autoplay 自动播放

  • loop=‘true’ 循环播放

    （2）video：视频

<video src='' poster='IMG/aaa.jpg' controls></video>

属性：

  • poster：视频还未下载完全或者是视频丢失时，所显示的封面，默认为视频的第一帧，也可以自己手动设置；
  • controls：控制面板
  • width
  • height

视频video和音频audio的属性类似，只是音频没有宽高和poster而已；

  • 表单
    • 表单类型：
      • email：能够验证邮箱是否合法；
      • number：要求输入必须是数字，且有个增大减小的箭头，可以限制他的最值；
      • search：输入内容后，输入框后有个小叉，点击可以一键清空，提高用户的体验感；
      • color：颜色拾取器
      • time：时间控件（时分秒）
      • date：日期（年月日）
    • 表单属性：
      • require：要求表单必填
      • placeholder：提示框
      • autofocus：自动获取焦点
      • form：form的“ID”
    • 表单时间：
      • oninput：当表单里的内容发生改变时会触发事件
      • oninvaild：当验证不通过时触发该事件

html5还有很多新增的东西，例如一些api，还有web的存储啊之类的就等之后一一去学。 今天还复习了一点关于css的东西，昨天是理论上的学习了css的布局和flex和浮动，那今天就利用这几个东西来敲敲代码吧~

3、实现垂直水平居中

（1）利用定位实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试测试</title>
    <style>
    		.fat {
    			background-color: yellowgreen;
    			width: 500px;
    			height: 500px;
    			position: relative;
    		}
    		.box {
    			background-color: tomato;
    			width: 100px;
    			height: 100px;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			transform: translate(-50%,-50%);
    		}
    </style>
  </head>
  <body>
    		<div class="fat">
                    <div class="box"></div>
    		</div>
  </body>
</html>

思路：“子绝父相”，对子元素设置绝对定位，对父元素设置相对定位，然后分别设置top和left为宽高的50%，这时候子元素的左上定点在父元素的中心点，但是我们要实现的是子元素的中心点在父元素的中心点，所以呢还要给个*transform：translate(-50%,-50%);*这样就能让子元素根据自己本身再进行移动。

（2）利用flex布局实现：

    <style>
        .fat {
                background-color: yellowgreen;
                width: 500px;
                height: 500px;
                display: flex;
                justify-content: center; //水平居中
                align-items: center;  //垂直居中
        }
        .box {
                background-color: tomato;
                width: 100px;
                height: 100px;
        }
    </style>
    
      <body>
            <div class="fat">
                    <div class="box"></div>
            </div>
      </body>

flex布局对比定位来说还是比较简单的啦，首先给父容器设置一个display：flex开启flex布局，然后利用所学过的属性来写就好了，分别是justify-content: center和align-items: center;

总结：

今天其实还自己动手去敲了一下两栏布局和三栏布局的，但是忘记边敲边写笔记了，等记起来的时候代码都没有保存，唉真是心累。。。但是两栏布局和三栏布局也很有意思~三栏布局的双飞翼和圣杯有点模糊但是也大致是能够自己手动实现出来，今天师兄看我在写css布局，还考了一道题：竖排三栏布局如何实现？搞了好久没有弄出来，时间不够用了，赶紧记录下来先，明天再试试吧。。。。

avatar
文章
阅读
粉丝