前端就业班

最新推荐文章于 2024-08-30 11:12:09 发布

weixin_54096205

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量93

点赞数

分类专栏：前端文章标签：前端搜索引擎 html

本文链接：https://blog.csdn.net/weixin_54096205/article/details/129254139

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

第一天

1.HTML5的新特性

针对以前的不足，增加了一些新的标签，新的表单控件和新的表单属性等。

1.1 HTML5新增的语义化标签

div对于搜索引擎来说，是没有语义的。
在这里插入图片描述

    <!-- 头部标签 -->
    <header>我是头部</header>
    <!-- 导航栏标签 -->
    <nav>我是导航栏</nav>
    <!-- 某个区域 -->
    <article>内容</article>
    <!-- 选中某个区域 -->
    <section>选中某个区域</section>
    <!-- 侧边栏 -->
    <aside>我是侧边栏</aside>
    <!-- 尾部标签 -->
    <footer>我是尾部</footer>

注意：
1.主要针对于搜索引擎
2.可以使用多次
3.在IE9中，需要转换成块级元素
4.移动端更喜欢这些标签
5.还增加了很多其他标签

总结

1.什么是语义化标签
标签具有明确的含义和作用
2.标签语义化的优点

页面有清晰的结构
浏览器能更好的解析
利于浏览器的搜索引擎搜索
方便其它设备解析，盲人阅读器根据语义渲染网页

1.2 新增的多媒体标签

在这里插入图片描述

1.2.1.视频

在这里插入图片描述
语法：

<video src="./media/mi.mp4" autoplay controls loop muted></video>

在这里插入图片描述
谷歌浏览器添加静音播放才会自动播放

总结： 在这里插入图片描述

1.2.2.音频

语法：

<audio src="./media/music.mp3" controls></audio>

在这里插入图片描述
总结：

1.3 新增的input类型

在这里插入图片描述

邮箱: <input type="email"/>
网址: <input type="url"/>
日期: <input type="date"/>
时间: <input type="time"/>
**数量: <input type="number"/>**
手机号码: <input type="tel"/>
搜索: <input type="search"/>
文本:<input type="text">
颜色: <input type="color"/>
**<input type="submit" value="提交" />**

总结：
在这里插入图片描述

1.4 新增的表单属性

在这里插入图片描述

      <!-- 搜索 -->
      <input name="sear" id="" required placeholder="请输入" autofocus autocomplete="off"/>
      <!-- 上传 -->
      <input name="" type="file" id="" multiple/>
      <!-- 提交 -->
      <input value="提交" type="submit"/>

总结：
在这里插入图片描述

2.`CSS3`的新特性

2.1 现状

新增的css3特性有兼容性问题
移动端支持优于PC端
不断改进中
应用相对广泛

`CSS3` 新增选择器

1.属性选择器

根据元素特定属性的来选择元素
在这里插入图片描述

<style>
      /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
      input[value]{
        color: yellowgreen;
      }
      /* 只选择 type =text 文本框的input 选取出来 */
      input[type=text] {
        color: cadetblue;
      }
      /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
      /* 属性选择器是用[属性] [属性=属性值] */
      /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
      div[class^=icon] {
        color: aquamarine;
      }
      section[class$=data]{
        color: bisque;
      }
      section[class*="-"]{
        color: rgb(155, 155, 234);
      }
    </style>
  </head>
  <body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名" />
    <input type="text" />
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点 -->
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>
  </body>

效果图
在这里插入图片描述
总结：

**注意：**类选择器，属性选择器，伪类选择器，权重都是10。

2.结构伪类选择器

主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。（出现第一个或第几个一定用的是结构伪类选择器）

/* 选中第一个改变背景色 */
      ul li:first-child {
        background-color: rgb(218, 224, 122);
      }
      /* odd是单数 */
      ul li:nth-child(odd) {
        background-color: #e38a92;
      }
      ol li:nth-child(2n+1) {
        background-color: pink;
      }
      /* even是双数 */
      ul li:nth-child(even) {
        background-color: rgb(138, 200, 142);
      }
      ol li:nth-child(2n) {
        background-color: #e29090;
      }
      /* 选中最后一个改变背景色 */
      ul li:last-child {
        background-color: antiquewhite;
      }
      /* 选中第5个改变背景色 */
      ul li:nth-child(5) {
        background-color: aqua;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
 </body>

效果图：
在这里插入图片描述
nth-child（n）选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字： even 偶数，odd 奇数，公式（公式中的变量只能是n，从0开始）

总结：
1.结构伪类选择器一般用于选择父级里面的第几个孩子
2.nth-child 对父元素里面的所有孩子排序（序号是固定的）先找到第n个孩子，然后再看看是否和e匹配
3.nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找到第n个孩子
4.关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
5.如果是无序列表，我们肯定用nth-child更多
6.类选择器，属性选择器，伪类选择器，权重为10.

3.伪元素选择器

可以帮助我们利于CSS创建新标签元素，而不是HTML标签

注意：
1.before和after创建一个元素，但属于行内元素
2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3.语法：element::before{}
4.before和after必须有content属性
5.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
6.伪元素选择器和标签选择器一样，权重为1
在这里插入图片描述
伪元素清除浮动
本质 1.额外标签法（隔墙法）clear:both;

4. `CSS3` 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值:即可指定为 content-box、 border-box，这样我们计算盒子大小的方式就发生了改变
1.box-sizing:content-box 盒子大小为width+padding+border
2.box-sizing:border-box 盒子大小为width

5. `CSS3`其它特性

1.图片变模糊
滤镜：filter：函数（);
例：blur模糊处理数值越大越模糊注意数值要加px单位。
2.计算盒子宽度width：calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算。

子盒子宽度永远比父盒子小300像素
width: calc(100% - 300px);
"-"前后加空格

6.`CSS3`过渡

过度动画：是从一个状态渐渐地过渡到另外一个状态

transition：要过渡的属性 花费时间 运动曲线 何时开始；

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。如果想要写多个属性，利用逗号进行分割。单位不可省。
俩个时间时，第一个是过渡时间，第二个是延迟时间。
过渡的口诀：谁做过渡给谁加。
2.花费时间：单位是秒（s）
3.运动曲线：默认是ease
4.何时开始：单位是秒（s），可以设置延迟触发时间，默认是0s
在这里插入图片描述