h5新增语义化标签main

时间: 2024-11-24 20:22:39 浏览: 11

h5+CSS3总结

### H5 + CSS3 总结 #### H5 基础 HTML5（HyperText Markup Language 5）是超文本标记语言 HTML 的最新版本，它不仅提供了更丰富的语义化标签，还增强了多媒体的支持能力，并引入了一系列新的功能，使得 Web 开发变得更加简单和高效。 ##### 新增语义化标签 - `<header>`: 页面头部 - `<footer>`: 页面底部 - `<nav>`: 导航链接 - `<section>`: 区块 - `<article>`: 文章 - `<aside>`: 侧边栏这些标签不仅提高了页面的可读性，也为搜索引擎优化带来了便利。 ##### 多媒体支持 - `<video>`: 内嵌视频 - `<audio>`: 内嵌音频 - `<canvas>`: 动画与图形绘制这些标签简化了多媒体元素的集成过程，无需额外插件即可实现多媒体内容的播放。 #### CSS3 基础 CSS3（Cascading Style Sheets 3）是层叠样式表 CSS 的第三个版本，它极大地扩展了 CSS 的功能范围，为网页设计提供了更多的灵活性和创造性。 ##### CSS 样式引用方式 - **行内样式**：直接在 HTML 元素中使用 `style` 属性来添加样式。 ```html <p style="color: red;">这是一段红色的文字。</p> ``` - **内部样式**：在文档头部的 `<style>` 标签中定义样式规则。 ```html <head> <style> p { color: blue; } </style> </head> ``` - **外部样式**：将样式保存在一个 `.css` 文件中，并通过 `<link>` 标签引入到 HTML 文件中。 ```html <head> <link rel="stylesheet" href="styles.css"> </head> ``` - **注释**：在 CSS 中，使用 `/* ... */` 来添加注释。 ```css /* 这是一个注释 */ p { color: green; /* 设置文字颜色为绿色 */ } ``` #### CSS3 选择器 ##### 基本选择器 - **标签选择器**：根据元素的标签名称来选取元素。 ```css p { color: red; } /* 选择所有 <p> 标签内的文字 */ ``` - **类选择器**：使用 `.classname` 的形式选取拥有指定 class 的元素。 ```css .highlight { font-weight: bold; } /* 选择 class 为 highlight 的元素 */ ``` - **ID 选择器**：使用 `#idname` 的形式选取拥有指定 ID 的元素。 ```css #main-header { font-size: 24px; } /* 选择 ID 为 main-header 的元素 */ ``` - **通配符选择器**：使用 `*` 选取页面上所有的元素。 ```css * { margin: 0; padding: 0; } /* 为所有元素清除默认的外边距和内边距 */ ``` ##### 组合选择器 - **包含选择器**：用于选择一个元素的后代元素。 ```css div span { color: purple; } /* 选择所有 div 元素内的 span 元素 */ ``` - **子选择器**：使用 `>` 符号来选择父元素的直接子元素。 ```css div > span { color: blue; } /* 仅选择 div 直接子元素中的 span 元素 */ ``` - **相邻选择器**：使用 `+` 符号来选择紧接在另一个元素后的元素，两个元素之间不能有其他元素。 ```css div + p { color: green; } /* 选择紧跟在 div 后面的 p 元素 */ ``` - **兄弟选择器**：使用 `~` 符号来选择同级元素。 ```css ul li ~ li { text-decoration: underline; } /* 选择 ul 中的 li 元素，并为其同级的 li 元素添加下划线 */ ``` - **分组选择器**：使用 `,` 符号来同时选择多个选择器。 ```css h1, h2, h3 { color: red; } /* 选择所有 h1、h2 和 h3 元素 */ ``` ##### 属性选择器 - **基础属性选择器**：使用 `[attr]` 形式来选择具有指定属性的元素。 ```css a[href] { color: blue; } /* 选择所有带有 href 属性的 a 元素 */ ``` - **属性值选择器**：使用 `[attr=value]` 形式来选择具有指定属性和属性值的元素。 ```css img[src="example.jpg"] { border: 1px solid black; } /* 选择 src 属性值为 example.jpg 的 img 元素 */ ``` - **包含属性值选择器**：使用 `[attr~=value]` 形式来选择属性值包含指定词汇的元素。 ```css div[class~="container"] { background-color: yellow; } /* 选择 class 属性值包含 container 的 div 元素 */ ``` - **以某字符串开始的选择器**：使用 `[attr^=value]` 形式来选择属性值以指定字符串开头的元素。 ```css a[href^="http://www."] { color: green; } /* 选择 href 属性值以 http://www. 开头的 a 元素 */ ``` - **以某字符串结束的选择器**：使用 `[attr$=value]` 形式来选择属性值以指定字符串结尾的元素。 ```css a[href$=".jpg"] { width: 100px; } /* 选择 href 属性值以 .jpg 结尾的 a 元素 */ ``` - **以某字符串开头或等于该字符串的选择器**：使用 `[attr|=value]` 形式来选择属性值以指定字符串开头或等于该字符串的元素。 ```css input[type|="text"] { border: 1px solid black; } /* 选择 type 属性值以 text 开头或等于 text 的 input 元素 */ ``` ##### 伪类选择器 - **动态伪类**：用于选择元素的不同状态。 - `:link`: 未访问过的链接。 - `:visited`: 已访问过的链接。 - `:hover`: 鼠标悬停时的状态。 - `:active`: 被激活或按下时的状态。 - `:focus`: 元素获得焦点时的状态。 - **结构伪类**：用于根据元素在文档中的位置进行选择。 - `:first-child`: 选择其父元素的第一个子元素。 - `:last-child`: 选择其父元素的最后一个子元素。 - `:nth-child(n)`: 选择其父元素的第 n 个子元素。 - `:nth-last-child(n)`: 选择其父元素倒数第 n 个子元素。 - `:only-child`: 选择其父元素的唯一子元素。 - **否定伪类**：使用 `:not(selector)` 来选择不符合特定条件的元素。 ```css ul li:not(:first-child) { list-style-type: none; } /* 选择 ul 中除了第一个子元素之外的所有 li 元素 */ ``` #### 网页文本美化 - **标题文本**：使用 `<h1>` 至 `<h6>` 标签来定义不同级别的标题。 - **段落文本**：使用 `<p>` 标签来定义段落。 - **强调文本**：使用 `<strong>` 或 `<b>` 标签来加强语气，使用 `<em>` 或 `<i>` 标签来强调文本。 ```html <p><strong>这是一个强调的段落。</strong></p> <p><em>这是一个被强调的段落。</em></p> ``` - **引用文本**：使用 `<q>` 标签来定义短引用，使用 `<blockquote>` 标签来定义长引用。 ```html <p>他说：<q>你好</q>。</p> <blockquote cite="https://example.com"> 这是一段较长的引用文本。 </blockquote> ``` - **输出文本**：使用 `<code>`、`<pre>`、`<tt>`、`<kbd>`、`<var>` 和 `<samp>` 标签来定义代码、格式确定的源代码、键盘输入、变量和样本输出等。 ```html <pre><code><p>Hello World</p></code></pre> <p>键入 <kbd>Ctrl+C</kbd> 来复制文本。</p> <p>变量 <var>x</var> 的值是 10。</p> ``` - **缩写文本**：使用 `<abbr>` 标签来定义缩写。 ```html <p><abbr title="Asynchronous JavaScript and XML">AJAX</abbr> 是一种技术。</p> ``` - **插入和删除文本**：使用 `<ins>` 标签来表示文本的插入，使用 `<del>` 标签来表示文本的删除。 ```html <p>This is some <del>old</del> <ins>new</ins> text.</p> ``` 通过上述介绍，我们可以看到 H5 + CSS3 在网页设计和开发方面的强大能力。HTML5 提供了更加丰富和语义化的标签，而 CSS3 则为开发者提供了更多样化的样式选择器和属性，使网页的布局和样式更为灵活和美观。在实际应用中，结合这两者可以构建出既美观又具有高度交互性的现代 Web 应用。

HTML5引入了许多新的语义化标签，其中一个重要的就是`<main>`标签。`<main>`标签用于定义文档的主要内容区域，通常包含用户首先看到、交互最频繁的信息。这个标签主要用于提高页面结构的清晰性和SEO优化，帮助搜索引擎更好地理解网页内容的核心部分。使用`<main>`标签示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>网站标题</title> </head> <body> <header>  </header> <main> <section>  </section> </main> <footer>  </footer> </body> </html> ``` 在上述例子中，`<main>`包裹了主要内容，`<header>`表示头部，`<footer>`代表页脚。`<main>`标签使得开发者能够更明确地表达页面结构，提升用户体验。

阅读全文

h5新增语义化标签main

相关推荐

H5 CSS笔记 (2).docx

H5面试题.pdf

H5开发精讲：语义化标签与新特性提升SEO与用户体验

学习www.runoob.com关于html/html5的内容，自己随意设计一或多个页面，要求有以下几种标签： 标题标签 段落标签 图片标签 超链接标签 序列标签 文本标签 表格标签 form表单 H5新增input标签 H5多媒体标签 H5语义标签

h5hrn.github.io

notes-website:纯H5的个人笔记网站模板

H631_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

1125_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

43_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

1385_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

HTML5开发技术详细教程, HTML5代码大全, H5技术总结, 附带超详细html5学习路径图

绿色的手机注册页面wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

HTML隐藏元素与H5新特性解析

HTML5与CSS3新特性详解：标签、属性与事件

HTML基础语法与标签的使用

boost-chrono-1.53.0-28.el7.x86_64.rpm.zip

atlas-devel-3.10.1-12.el7.x86_64.rpm.zip

atkmm-2.24.2-1.el7.i686.rpm.zip

bsf-javadoc-2.4.0-19.el7.noarch.rpm.zip

最新推荐

ios wkwebview离线化加载h5资源解决方案

海康威视H5播放器开发指南，兼容各种主流浏览器

vue写h5页面的方法总结

H5U USB驱动安装操作说明.pdf

uni-app 打包为 H5 并上传服务器

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南

学习www.runoob.com关于html/html5的内容，自己随意设计一或多个页面，要求有以下几种标签：标题标签段落标签图片标签超链接标签序列标签文本标签表格标签 form表单 H5新增input标签 H5多媒体标签 H5语义标签