凤岗建设网站,淘客app,域名注册官网免费,最新章节 第一百四十七章 做视频网站你好同学#xff0c;我是沐爸#xff0c;欢迎点赞、收藏和关注#xff01;今天一起了解下Web语义化及其应用吧#xff01;
是什么#xff1f;
使用合适的标签、属性#xff0c;让页面能“说话“#xff0c;让人和机器都能快速理解网页内容。
为什么#xff1f;
有…你好同学我是沐爸欢迎点赞、收藏和关注今天一起了解下Web语义化及其应用吧
是什么
使用合适的标签、属性让页面能“说话“让人和机器都能快速理解网页内容。
为什么
有利于被搜索引擎搜索有利于无障碍阅读增强代码的可读性、可维护性
怎么做
避免使用div或span标签来包裹所有内容而是使用语义化的标签及属性。 例如用h1表示主标题用h2表示副标题用a表示链接用img表示图片并添加alt属性用ul表示无序列表用p表示段落用header表示页眉用footer表示页脚用nav表示导航等等。
语义化标签
header表示一个页面或区域的页眉部分通常包含导航链接、标志、搜索框等。nav表示页面中的导航链接部分。section表示文档中的一个独立的区段通常包含一个标题h1-h6。article表示一个独立的、完整的内容区块如博客文章、新闻报道等。aside表示与页面主要内容稍微独立的部分如侧边栏或广告。footer表示一个页面或区域的页脚部分通常包含版权信息、作者信息、相关链接等。h1 到 h6表示不同级别的标题h1 是最高级别h6 是最低级别。main表示文档的主要内容区域每个页面应该只有一个 main 元素。figure 和 figcaptionfigure 表示图像、图表、代码段等独立内容figcaption 表示 figure 的标题或说明。address表示作者或拥有者的联系信息。ul表示无序列表列表项使用 li 标签。ol表示有序列表列表项使用 li 标签。li表示列表项用于 ul 或 ol。table表示表格用于展示行列数据。thead表示表格的头部区域通常包含列标题。tbody表示表格的主体部分包含实际数据。tfoot表示表格的脚部区域通常包含总结行或注释。tr表示表格中的行。th表示表格中的表头单元格。td表示表格中的单元格。caption表示表格的标题或说明。form表示表单用于收集用户输入。fieldset表示表单中的一组相关控件。legend表示 fieldset 的标题。label表示表单控件的标签。input表示输入控件如文本框、复选框、单选按钮等。textarea表示多行文本输入控件。button表示按钮。details 和 summarydetails 表示可以展开或折叠的内容区块summary 表示 details 的标题。menu 和 commandmenu 表示一组命令按钮command 表示菜单中的一个命令项。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleFigure Example/title
/head
bodyarticleheaderh1Example of Figure and Figcaption/h1/headersectionh2图片展示/h2figureimg srcimage.jpg alt海南三亚沙滩figcaption这里对图片进行说明/figcaption/figure/sectionsectionh2代码片段/h2figureprecodefunction example() {console.log(Hello, World!);}/code/prefigcaption一个执行打印的函数/figcaption/figure/section/article
/body
/html语义化属性
alt用于 img 标签为图像提供替代文本这对于视觉障碍用户和搜索引擎都是非常重要的。title为元素提供额外的信息或解释当鼠标悬停在元素上时显示。lang用于 html 标签指定文档的主要语言有助于搜索引擎和翻译工具。dir指定元素的文本方向可以是 ltr从左到右或 rtl从右到左。id为元素提供唯一的标识符通常用于CSS和JavaScript中引用特定的元素。class为元素提供类别名称可以用于CSS中定义样式也可以用于JavaScript中选择元素。role用于ARIAAccessible Rich Internet Applications中提供额外的辅助信息帮助辅助技术理解元素的作用。aria-*是一系列ARIA属性用于增强网页的可访问性。例如 aria-label提供元素的文本标签。aria-labelledby通过ID引用来指定元素的标签。aria-hidden指示元素是否对辅助技术隐藏。aria-live指示元素是否具有动态内容以及内容更新的紧急性。 for与 label 标签一起使用指定与表单控件关联的元素。type用于 input 标签指定输入控件的类型如 text, checkbox, radio 等。name用于表单控件如 input 和 button指定控件的名称这对于表单数据的提交非常重要。value指定表单控件的值如 input 的默认值或 button 的显示文本。placeholder为 input 和 textarea 提供占位符文本提示用户输入内容。pattern用于 input指定输入字段的正则表达式用于验证输入值。required表示表单控件是否必须填写。maxlength 和 minlength分别用于限制 input 和 textarea 的最大和最小字符长度。multiple用于 input 和 select指示是否可以选择多个值。checked用于 input typecheckbox 或 input typeradio表示控件是否被选中。selected用于 option 标签表示是否选中该选项。autofocus用于 input, textarea, 和 select页面加载时自动获得焦点。readonly使表单控件为只读状态。disabled禁用表单控件。tabindex设置元素的Tab键顺序用于控制元素的焦点顺序。data-*自定义属性用于存储页面或应用程序的私有数据。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSemantic Attributes Example/title
/head
body!-- 使用 alt 属性为图像提供替代文本 --img srcimage.jpg altA description of the image content!-- 使用 title 属性为元素提供额外信息 --p titleHover over this text for more infoSome important information./p!-- 使用 lang 属性指定页面语言 --html langzh-CN!-- 使用 dir 属性指定文本方向 --div dirrtl这是一个从右到左的文本示例。/div!-- 使用 id 和 class 属性为元素提供唯一标识符和类别 --div idunique-section classcontent-block!-- 内容 --/div!-- 使用 role 属性增强可访问性 --div rolenavigation.../div!-- 使用 aria-label 属性为元素提供辅助技术可读的标签 --button aria-labelClose dialogX/button!-- 使用 aria-labelledby 属性引用其他元素作为当前元素的标签 --div iddescriptionSome descriptive text/divbutton aria-labelledbydescriptionClick me/button!-- 使用 for 属性与 label 标签一起使用 --label foruser-inputEnter your name:/labelinput typetext iduser-input nameusername!-- 使用 type 属性指定 input 控件的类型 --input typeemail nameuseremail placeholderEnter your email!-- 使用 name 属性为表单控件指定名称 --button typesubmit namesubmitSubmit/button!-- 使用 value 属性指定表单控件的值 --input typesubmit valueClick to send!-- 使用 placeholder 属性为 input 提供占位符 --input typetext placeholderEnter your search term!-- 使用 pattern 属性为 input 指定正则表达式验证 --input typetext pattern[A-Za-z]{3} titleThree letter abbreviation!-- 使用 required 属性表示表单控件必须填写 --input typetext required!-- 使用 maxlength 和 minlength 属性限制输入长度 --textarea maxlength200 minlength10/textarea!-- 使用 multiple 属性允许选择多个值 --input typefile multiple!-- 使用 checked 属性表示复选框或单选按钮被选中 --input typecheckbox checked!-- 使用 selected 属性表示选项被选中 --selectoption valueoption1 selectedOption 1/optionoption valueoption2Option 2/option/select!-- 使用 autofocus 属性使元素在页面加载时自动获得焦点 --input typetext autofocus!-- 使用 readonly 属性使表单控件为只读状态 --input typetext readonly valueReadonly value!-- 使用 disabled 属性禁用表单控件 --button typesubmit disabledSubmit/button!-- 使用 tabindex 属性设置元素的Tab键顺序 --a hrefhttps://example.com tabindex1Visit Example.com/a!-- 使用 data-* 属性存储私有数据 --div data-user-id123Some content related to user 123/div/body
/html希望对你有所帮助顺便点个赞吧
