HTML5和CSS3提高

小气吧啦 發表於 2021-4-8 00:24:00

<h1>一.HTML5的新特性</h1>
<div>HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。</div>
<div>这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这</div>
<div>些新特性。</div>
<div> </div>
<div>1.HTML5 新增的语义化标签</div>
<div>
<div>以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">=“header”</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">=“nav”</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">=“content”</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">=“footer”</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div><header>：头部标签</div>
<div><nav>：导航标签</div>
<div><article>：内容标签</div>
<div><section>：定义文档某个区域</div>
<div><aside>：侧边栏标签</div>
<div><footer>：尾部标签</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407230800563-982170311.png" alt="" loading="lazy">
<div>注意：</div>
<div>这种语义化标准主要是针对搜索引擎的</div>
<div>这些新标签页面中可以使用多次</div>
<div>在 IE9 中，需要把这些元素转换为块级元素</div>
<div>其实，我们移动端更喜欢使用这些标签</div>
<div> </div>
<div>2.HTML5 新增的多媒体标签</div>
<div>
<div>新增的多媒体标签主要包含两个：</div>
<div>音频：<audio></div>
<div>视频：<video></div>
<div>使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。</div>
<div> </div>
<div>
<div>HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。</div>
<div> </div>
<div>
<div><strong>视频<video>：</strong></div>
<div>
<div>当前 <video> 元素支持三种视频格式：尽量使用 mp4格式</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407230959471-809238063.png" alt="" loading="lazy">
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">video </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="文件地址"</span><span style="color: rgba(255, 0, 0, 1)"> controls</span><span style="color: rgba(0, 0, 255, 1)">="controls"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">video</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">video </span><span style="color: rgba(255, 0, 0, 1)">controls</span><span style="color: rgba(0, 0, 255, 1)">="controls"</span><span style="color: rgba(255, 0, 0, 1)"> width</span><span style="color: rgba(0, 0, 255, 1)">="300"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="move.ogg"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="video/ogg"</span> <span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="move.mp4"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="video/mp4"</span> <span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
您的浏览器暂不支持 </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">video</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> 标签播放视频
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)"> video </span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div>视频<video>——常见属性：</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407231116243-1041157227.png" alt="" loading="lazy">
<p> </p>
<div><strong>音频<audio>：</strong></div>
<div>
<div>当前 <audio> 元素支持三种音频格式：</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407231159714-404157164.png" alt="" loading="lazy">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">audio </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="文件地址"</span><span style="color: rgba(255, 0, 0, 1)"> controls</span><span style="color: rgba(0, 0, 255, 1)">="controls"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">audio</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)"> audio </span><span style="color: rgba(255, 0, 0, 1)">controls</span><span style="color: rgba(0, 0, 255, 1)">="controls"</span> <span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="happy.mp3"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="audio/mpeg"</span> <span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">source </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="happy.ogg"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="audio/ogg"</span> <span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
您的浏览器暂不支持 </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">audio</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> 标签。
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)"> audio</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div>常见属性：</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407231245146-1084194121.png" alt="" loading="lazy">
<p> </p>
<p> </p>
<p>3.HTML5新增的input类型</p>
<p><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407231354581-651354153.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p>4.HTML5新增的表单属性</p>
<p><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210407231427542-669623835.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<h1>二.CSS3的新特性</h1>
<div>新增选择器：</div>
<p>1.属性选择器</p>
<div>属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210408001713160-529224608.png" alt="" loading="lazy">
<p> </p>
<p>2.结构伪类选择器</p>
<div>结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210408001744535-1236738159.png" alt="" loading="lazy">
<p> </p>
<div>3.结构伪类选择器</div>
<div>
<div>nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）</div>
<div>n 可以是数字，关键字和公式</div>
<div>n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…</div>
<div>n 可以是关键字：even 偶数，odd 奇数</div>
<div>n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210408001815766-2014625958.png" alt="" loading="lazy">
<div>结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素</div>
<div>
<div>区别：</div>
<div>nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配</div>
<div>nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子</div>
<div> </div>
<div>4.伪元素选择器（重点）</div>
<div>
<div>伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。</div>
<div><img src="https://img2020.cnblogs.com/blog/1424223/202104/1424223-20210408002004223-1362678125.png" alt="" loading="lazy">
<div>注意：</div>
<div>before 和 after 创建一个元素，但是属于行内元素</div>
<div>新创建的这个元素在文档树中是找不到的，所以我们称为伪元素</div>
<div>语法： element::before {}</div>
<div>before 和 after 必须有 content 属性</div>
<div>before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素</div>
<div>伪元素选择器和标签选择器一样，权重为 1</div>
<div> </div>
<div>5.CSS3 盒子模型</div>
<div>
<div>CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们</div>
<div>计算盒子大小的方式就发生了改变。</div>
<div>可以分成两种情况：</div>
<div>box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）</div>
<div>box-sizing: border-box 盒子大小为 width</div>
<div>如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding</div>
<div>和border不会超过width宽度）</div>
<div> </div>
<div>6.CSS3 其他特性（了解）</div>
<div>
<div>图片变模糊：</div>
<div>
<div>filter CSS属性将模糊或颜色偏移等图形效果应用于元素。</div>
</div>
<div>
<div class="cnblogs_code">
<pre>filter: 函数(); 例如： filter: blur(5px); blur模糊处理数值越大越模糊</pre>
</div>
</div>
<div> </div>
<div>计算盒子宽度 width: calc 函数：</div>
<div>
<div>calc() 此CSS函数让你在声明CSS属性值时执行一些计算。</div>
<div>
<div class="cnblogs_code">
<pre>width: calc(100% - 80px);</pre>
</div>
<p> </p>
<p>7.CSS3 过渡（重点）</p>
<div>过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或</div>
<div>JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。</div>
<div>过渡动画：是从一个状态渐渐的过渡到另外一个状态</div>
<div>可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响</div>
<div>页面布局。</div>
<div>我们现在经常和 :hover 一起搭配使用。</div>
<div>
<div class="cnblogs_code">
<pre>transition: 要过渡的属性花费时间运动曲线何时开始;</pre>
</div>
<div>属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都</div>
<div>变化过渡，写一个all 就可以。</div>
<div>花费时间：单位是秒（必须写单位）比如 0.5s</div>
<div>运动曲线：默认是 ease （可以省略）</div>
<div>何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）</div>
</div>
</div>
</div>
<div> </div>
<div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/wuwuyong/p/14630329.html

頁: [1]

琼殿技术论坛's Archiver

HTML5和CSS3提高