了解HTML5、CSS3高级选择器

是九二呀

已于 2023-04-25 17:44:48 修改

阅读量127

点赞数

分类专栏：前端 HTML+CSS+JavaScript HTML5+CSS3 文章标签：前端 html5 css3 html css

于 2023-04-24 22:16:13 首次发布

本文链接：https://blog.csdn.net/Y9232/article/details/130325949

版权

本文详细介绍了HTML5的结构元素，包括header、nav、section、article、aside和footer，以及新增的datalist、time、mark和progress元素。此外，还探讨了CSS3的高级选择器，如:first-of-type、:last-of-type、:first-child、:last-child、:nth-child(n)以及:before和:after，帮助开发者提升网页设计和布局能力。

摘要由CSDN通过智能技术生成

1.:first-of-type和:last-of-type

2.:first-child和:last-child

3.:nth-child(n)

4.:before和:after

一、HTML5的优势

HTML5强化了Web网页的表现性能，增加了本地数据库等Web应用功能。

（1）跨平台：HTML5可以在PC端、iOC或Android移动设备端运行。

（2）兼容性

（3）各大浏览器厂商的支持

二、HTML5的结构元素

结构元素可以很好地定位标记，明确某标记在页面中的位置和作用，创建的页面代码更加简洁高效，更容易被搜索引擎搜索到。

<header>
			<h1>网页头部</h1>
</header>

2.nav元素

<nav>
			<ul>
				<li>文件</li>
				<li>编辑</li>
				<li>选择</li>
				<li>查看</li>
			</ul>
</nav>

3.section元素

主要用于表示一段专题性的内容，用于带标题和内容的区域，如文章的章节、对话框中的标签页。

<section>
				<h1>主要内容</h1>
				<p>时光荏苒，五一将至。奋斗的你，就是五一最美的风景，努力耕耘的你，就是五月最灿烂的存在！</p>
</section>

4.article元素

是一个独特的section元素，比section元素具有更明确的语义，代表一个独立、完整的相关内容块。

<article>
		<h1>主要内容</h1>
		<p>时光荏苒，五一将至。奋斗的你，就是五一最美的风景，努力耕耘的你，就是五月最灿烂的存在！</p>
</article>

5.aside元素

$\rightarrow$ 包含在article元素中作为主要内容的附属信息，其中内容可以是与当前文章有关的相关资料、名词解释。

<article>
			<h1>所见</h1>
			<p>牧童骑黄牛，歌声振林樾。意欲捕鸣蝉，忽然闭口立。</p>
			<aside>⑴牧童：指放牛的孩子。 ⑵振：振荡；回荡。说明牧童的歌声嘹亮。 ⑶林樾：指道旁成阴的树。 ⑷欲：想要。 ⑸捕：捉。 ⑹鸣：叫。 (7)立：站立</aside>
</article>

$\rightarrow$ 作为页面或站点全局的附属信息，最典型的应用是侧边栏

<aside>
				<h2>赏析/鉴赏</h2>
				<ul>
					<li>野外林阴道上，一位小牧童骑在黄牛背上缓缓而来。</li>
					<li>也不知有什么开心事儿，他一路行一路唱，唱得好脆好响，整个树木全给他惊动了。</li>
					<li>忽然，歌声停下来，小牧童脊背挺直，嘴巴紧闭，两眼凝望着高高的树梢。</li>
					<li>“知了，知了，知了……”树上，一只蝉儿也在扯开嗓门，自鸣得意地唱呢。</li>
					<li>正是它把小牧童吸引住了，他真想将蝉儿捉一手呢！</li>
					<li>这情景，全被人看在眼里，写进诗中。</li>
					<li>
						诗人先写小牧童的动态，那高坐牛背、大声唱歌的派头，何等散漫、放肆；后写小牧童的静态，那屏住呼吸，眼望鸣蝉的神情，又是多么专注啊！这从动到静的变化，写得既突然又自然，把小牧童天真烂漫、好厅多事的形象，刻画得活灵活现。
					</li>
					<li>至于下一步的动静，小牧童怎样捕