|
阅读：5919回复：0
小结
一、语义元素
许多网站包含了指示导航、页眉以及页脚的HTML代码，HTML5提供了定义页面不同部分的新语义元素，语义元素可以很清楚通过标签名来向浏览器和开发者描述其意义。 标签 描述 <article> 定义文章。 <aside> 定义页面内容以外的内容。 <details> 定义用户能够查看或隐藏的额外细节。 <figcaption> 定义 <figure> 元素的标题。 <figure> 规定自包含内容，比如图示、图表、照片、代码清单等。 <footer> 定义文档或节的页脚。 <header> 规定文档或节的页眉。 <main> 规定文档的主内容。 <mark> 定义重要的或强调的文本。 <nav> 定义导航链接。 <section> 定义文档中的节。 <summary> 定义 <details> 元素的可见标题。 <time> 定义日期/时间 二、锚链接 1.不同页面的锚链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#" name="top"></a> <p><a href="锚链接.html#shuiguo">水果</a></p> <p><a href="锚链接.html#shucai">蔬菜</a></p> <p><a href="锚链接.html#yundong">运动</a></p> </body> </html> 2.相同页面的锚链接 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head> <body> <a href="#" name="top"></a> <p><a href="#shuiguo">水果</a></p> <p><a href="#shucai">蔬菜</a></p> <p><a href="#yundong">运动</a></p> <h1><a href="#" name="shuiguo">水果</a></h1> <ul> <li>香蕉</li> <li>苹果</li> <li>葡萄</li> <li>梨</li> <li>西瓜</li> <li>樱桃</li> <li>菠萝</li> <li>橙子</li> <li>柚子</li> <li>芒果</li> </ul> <a href="#top">返回顶部</a><h2><a href="#" name="shucai">蔬菜</a></h2> <ul> <li>西红柿</li> <li>黄瓜</li> <li>土豆</li> <li>芹菜</li> <li>蒜薹</li> <li>西葫芦</li> <li>香菇</li> <li>菠菜</li> <li>豆角</li> <li>油菜</li> </ul> <a href="#top">返回顶部</a><h3><a href="#" name="yundong">运动</a></h3> <ul> <li>游泳</li> <li>短跑</li> <li>长跑</li> <li>拔河</li> <li>篮球</li> <li>足球</li> <li>铅球</li> <li>滑冰</li> <li>滑板</li> <li>跳远</li> </ul> <a href="#top">返回顶部</a></body> </html> 三、伪元素::after和::before 1.使用 ::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。如： <style> p:before{ content: "H"; p:after{ content: "d"; } </style> <p>ello Worl</p> 2.::after和::before的使用经验 1.间隔符用法如文章最开始的例子，使用::after伪元素做间隔符，并使用伪类:not排除掉最后一个元素。 2.做border三角图标 很多开发者都用过border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适了。 3.字符图标最近笔者在开发微信小程序，因为微信小程序不支持svg和背景图，于是笔者大量使用字符图标，感觉字符图标非常方便，就是受设备系统字体库限制。 4.webfont的图标 现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如http://fontello.com/，从这个网站我们可以下载svg的图标库。 5.做单位、标签、表单必填标准笔者一直认为表单输入框的必填标记（往往是红色的“*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用）。 对于单位和前（后）置标签，也可以这样做。但是多数情况下不推荐这种做法，因为单位和标签应该是文档的一部分。 6.做一些效果 可以参考《理解伪元素 :before 和 :after》这篇文章的效果，笔者曾经在实际项目中使用过“迷人的阴影”效果，也曾在微场景开发中实现过一些类似的动画。 7.实现一些标签对placeholder的支持只有几个标签支持placeholder，而且如<input type='date' />虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。 8.实现文字图片居中对齐 优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。 9.清除浮动这个很常用，bootstrap的clearfix类就是使用这个方法。 10.使用pointer-events消除伪元素事件 伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。 总体可以分为四种用法： 1.用css创建装饰性元素 2.用css创建用于布局的元素，实现特殊布局的特殊需要 3.做显示图标的实现手段 4.配合attr显示属性值 参考： https://blog.csdn.net/qq_39228087/article/details/83046756 https://blog.csdn.net/qq_31792281/article/details/80149061 http://www.webhek.com/pseudo-element/http://www.cnblogs.com/ys-ys/p/5092760.html https://developer.mozilla.org/en-US/docs/Web/CSS/::after |
|
公众号
