文本元素、语义化元素

元素

文本元素

h1-h6 ：一级标题~6级标题
p：段落
blockquote：整段的引用
cite：对参考文献的引用
当做标签来用的时候：用于资料文献引用当做属性来用的时候：表示引用内容的出处（来源），浏览器会忽略，但是屏幕阅读器是可以识别的
q：小段文本的引用
对引用的文本自动加上双引号
abbr对缩写词的引用
显式缩写的内容（关键词），title属性是鼠标移上去（悬停）的时候显式的内容
strong：重要的文本
文本加粗，语音阅读浏览器会着重阅读strong标签
em：强调的文本
b：应突出的文本
i：应区别对待的文本

em和i 标签都是斜体显式元素内容

语义

div 它是一个非常常见的元素、他没有任何的语义、它仅仅表示一个容器，用于包含其他元素、在网站布局时，它通常用于表示页面的区域（区块）

语义化结构元素

header：用于表示整个页面或者某个区域的头部，在页面中可以出现多次，它有两种写法，第一种：网页的头部（布局）第二种：内容的标题
nav：用于表示导航栏
article：用于表示文章或者其他可独立页面存在的内容，表示一个完整的，或者自成一体的内容块，比如文章、博客或者新闻报道
section：用于表示一个整体的一部分主题，适合以任何标题开头的内容块
footer：用于表示页面或某个区域的脚部
aside：用于表示跟周围主题相关的附加信息，表示与它周围文本没有密切关系的内容（AD表示广告，相关链接）
stction和div的区别：如果“标题开头的内容块”，其他的语义化都不适用，用section比div更合适

原文地址：https://www.cnblogs.com/xiaowang192/p/8850090.html

时间： 2024-11-08 20:26:31

文本元素、语义化元素的相关文章

回顾HTML5的语义化元素

什么是语义化的元素语义即是意义的意思.意思就是通过这个标签的名字就可以知道这个标签的含义. 比如div,p,span就不是语义化的元素,因为你不能通过这个标签来获悉它的含义. 而header,img等就是语义化的元素,我们知道这个标签代表是什么. 为什么要推行语义化的元素对浏览器: 更好的搜索引擎收录. 增强网页的结构性. 对用户,工程师和维护团队: 使用语义化无义增强了代码的可读性和维护性. HTML5新增的语义化元素 1.section(节) section常用来定义网页中的章节,页眉,

HTML5的全新语义化元素

1.<section> <section>元素用来定义文档或应用程序中的区域(或节).例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于新闻动态.需要重点理解的是用它的目的不是为了美化样式.如果你只想将某个元素包裹起来以便设置样式,那应该和以前一样继续使用<div>. 2.<nav> <nav>元素用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.因为<nav>用于主导航区域

HTML5 语义化元素

语义= 意义. 语义元素 = 元素的意义. 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素. 注意: Internet Exp

说一说你对HTML5语义化的理解

本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div. 语义化的优点有: 代码结构清晰,易于阅读,利于开发和维护提高用于体验,在样式加载失败时,页面结构清晰方便其他设备解析(如屏幕阅读器)根据语义渲染网页. 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同

语义化HTML：ul、ol和dl

一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in which changing the order of the items would not change the meaning of list.W3C specification 语义化<ul>元素:表示包含一组无序列表项内容. 2. ol标签 W3C草案: The ol elemen

HTML5学习笔记（三）：语义化和新增结构元素

在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义化的概念,同时提供了新的标签来指定对应的内容类型. 语义化的好处语义化的html只用来搭建网页的结构,去掉css后,网页结构不会变: 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页: 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重: 你的页面是否对爬虫容易理解非常重要,因

HTML行内元素块级元素及语义化

---------------------------------------可以换行的元素不能换行的元素-------------------------------- 块级元素行内元素 div - dl - form ---交互表单 a - 链接 br - 换行 em - 强调 h1 - h6 标题 hr - 水平分隔

HTML 5的革新之一：语义化标签一节元素标签。

摘至于:<HTML 5的革新——语义化标签(一)> 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计

表单，音视频，语义化标签与属性选择器，结构伪类选择器，伪元素选择器（按钮禁止点击）

HTML5简介万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为:广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势: 新增语义化标签 <header></header>  <nav></nav>  <article>&l