html5新标签

来源：沈阳兄弟连IT培训学校时间：2019/12/17 9:09:53

新增标签

            html5特点：标签语义化；尽量使用有相对应结构含义的html标签，如span div无意义，<adress>表示地址<em>表示强调内容。

                1.结构更好更利于搜索引擎的抓取（SEO）和开发人员的维护

                2.更有利于手机客户端的阅读

            header:内容区块或者标题

            footer:一般包含创作者信息

            article:一块与上下文无关的内容，譬如一篇文章

            aside:辅助信息，div:left

            section:章节，页眉，页脚，内容等，可以结合h1-h6,强化文章结构

            nav:导航

            figure:一段独立的流内容，一般表示文章主体内容中的一个独立内容，figcaption来给figure添加标题，类似dl dt dd

            mark:突出显示或高亮文字，一般用在搜索结果中高亮搜索关键字

        CSS3选择器和新增属性

            1.属性选择器

                语法：

                    E[att]{};image[title]{};//css2

                    E[att=""]{};input[type="text"]{};//css2

                    E[att~=""]{};选取属性值中有指定词汇的元素。比较少用，比如class里面有两个词组时class="div1 layout"，div[class~="layout"];//css2

                    E[att|=""]{};用于选择指定值开头的元素，必须是整个单词，比如class="a-img";image[|="a"]{};//css2

                    E[att^=""]{};匹配指定值开头的所有的元素;//css3;

                    E[att$=""]{};匹配指定值结尾的每个元素;//css3;

                    e[att*=""]{};匹配包含指定值的每个元素;//css3;

            2.伪类选择器

                结构性伪类选择器，

                    语法：:first-child与:last-child:单独指定个和后一个元素，.nav1 li:first-child{}

                    语法：:nth-child（数字）与:nth-last-child（数字）(倒数):指定序号的子元素，.nav1 li:nth-child(2){}

                对奇数个或偶数个子元素使用样式，如果子元素不是同类型，会出问题，先定义排位，再定义元素

                    :nth-child(odd){}:奇数个元素li:nth-child(odd){}

                    :nth-child(even){}:偶数个元素

                    :nth-last-child(odd){}:倒数奇数个元素

                    :nth-last-child(even){}:倒数偶数个元素

                    :nth-of-type与:nth-last-of-type:先定义元素，再定义排位

                    :nth-child(αn+β)与:nth-last-child(αn+β):循环使用样式，α表示每次循环中共包括几种样式，β表示在循环中的位置

                        nth-child(3n){};nth-child(2n+1){};n从0开始

                    :only-child:只有一个子元素会被匹配，li:only-child{}

                目标伪类选择器

                    语法：:target,突出显示HTML活动的锚，URL后面带有很多#的名称，指向文档内的特定元素，这个被链接的元素就是目标元素（target element）

                    :target选择器可用于选取当前活动的目标元素。只有用户点击了超链接有target目标才起作用。

                    :target{};

            3.层级选择器

                E>F{}:子元素选择器，只能选择某元素的子元素F元素，子子元素F不能匹配。        ul .li1>span

                E+F{}:相邻元素选择器，他们具有相同的父元素，只选择一个F在后面。ul .li1+li

                E~F{}:通用选择器，同一个父元素中，F在E后面，选择全部F。ul .li1~H1

            浏览器前缀简介与应用

                某些CSS还只是预览版，但大部分浏览器已经提供了支持，但这些属性是小部分浏览器专有的，为了让浏览器识别，CSS允许这些属性前添加各自的浏览器前缀

                -webkit-:webkit,如chrome,safari

                -moz-:mozila,gecko引擎，如firefox

                -ms-:microsoft

                -o-:opera,例如，-o-text-overflow

            服务器端字体和iconfont

                1.服务器端字体

                    @font-face{font-family:WebFont;src:url("")format("opentype")}

                    div{font-family:WebFont}

                    opentype字体后缀otf,truetype字体后缀ttf

                2.iconfont

                    用字体来代替图片来展示特殊字体、图标，体积小，拉伸不变形，支持CSS3一些文字，去阿里巴巴iconfont下载。

            CSS3新增属性

                1.背景属性

                    background-clip:

                        border-box：背景被裁剪到边框盒，包含边框，默认属性

                        padding-box：背景被裁剪到内边距框，不包含边框

                        content-box：背景被裁剪到内容框，不包含边框和内边距

                        css2中背景不包括边框，css2.1-3中包括了边框

                    background-origin:设定背景图从边框，内边距或者内容的左上角开始。

                        border-box:从边框开始

                        padding-box:默认

                        content-box:

                    background-size:定义背景图片大小。

                        length:设置高宽，如果只设置一个，另一个默认AUTO

                        percentage:以父元素的百分比来设置高宽

                        cover:等比放大覆盖整个区域

                        contain:等比缩放，不覆盖整个区域

                    在一个元素里面可以添加多张背景图片

                        div{background:url(""),url("");background-repeat:no-repeat;repeat-x;background-position:20px 20px,center center}

                        background-clip:background-clip:background-size:background-iamge这些都可以多次使用

                2.边框属性

                    border-raidus:左上15px 右上 右下 左下；左上右下 右上左下；

                    border-image:url("")A B C D(表示上，右，下，左边距，可以缩写成一个，不需要单位)

                    -webkit-border-image:url("../img/borderbg.png")30 30 30 30/10px repeat;repeat/round铺满/stretch拉伸;

                3.盒阴影

                    box-shadow:5px 5px 5px 5px #333 inset/outset

                        h-shadow :必须，水平阴影位置，可以为负值

                        v-shadow :必须，垂直阴影位置，可以为负值

                        blur :模糊

                        spread: 尺寸

                        color :颜色

                        inset:将外部阴影改成内部阴影

边框背景图片练习

盒子阴影练习

伪类选择器的练习，边框箭头

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/1791/news/128567/违者必究！ 以上就是沈阳兄弟连IT培训学校 小编为您整理 html5新标签的全部内容。