前端学习(10):HTML语义化

我理解的HTML语义化

经过查看别人博文中的一些描述,我将HTML的语义化总结为: 用最恰当的标签来标记内容。

该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗。能够实现这种效果的方法有很多,比如用CSS样式进行渲染。这样的效果看起来像是一个标题,但是他对浏览器来说,只是一个被渲染过的文本,无法知道他是一个标题。若要让浏览器知道他是一个标题,应该用hx标签来进行标记。从这个例子可以总结出: 语义化的HTML文档,不关心内容的显示效果。 说的通俗一点: 标题脱了CSS这层外衣,它还是一个标题。
HTML语义化的原因

    即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构;
    语义化HTML会使HTML结构变的清晰,有利于维护代码和添加样式;
    方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
    提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
    便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
    通常语义化HTML会使代码变的更少,使页面加载更快。

在写HTML代码时应该注意

    尽可能少的使用无语义的标签div和span;
    在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
    不要使用纯样式标签,如:b、font、u等,改用css设置。
    需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
    使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
    表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
    每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/423458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大尾端 小尾端

提到体系结构时,经常遇到大小尾端的概念,这里做个总结。 big endian:大尾端,也称大端(高位)优先存储。little endian:小尾端,也称小端(低位)优先存储。如下00…

Storm的BaseBasicBolt源码解析ack机制

我们在学习ack机制的时候,我们知道Storm的Bolt有BaseBasicBolt和BaseRichBolt。 在BaseBasicBolt中,BasicOutputCollector在emit数据的时候,会自动和输入的tuple相关联,而在execute方法结束的时候那个输入tuple会被自动ack。 在使…

博客中gitalk最新评论的获取 github api使用

博客中,对于网友的评论以及每篇文章的评论数还是很重要的。但是基于静态的页面想要存储动态的评论数据是比较难的,一般博客主题中都内置了评论插件,但是博客主题中对于最新评论的支持显示还是很少的,至少目前我是没怎么发现。博客…

前端学习(11):标题和段落

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>标题和段落</title> </head> <body><h1>我是歌谣</h1><h2>我是歌谣</h2><h3>我是歌谣</h3>&l…

Kafka文件存储机制

Kafka是什么 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、分区的、多副本的、多订阅者&#xff0c;基于zookeeper协调的分布式日志系统(也可以当做MQ系统)&#xff0c;常见可以用于web/nginx日志、访问日志&#xff0c;消息服务等等&#xff0c;Linkedin于2010年贡…

用Zend Encoder加密PHP文件和PHP 优化配置

在发布一个你写好的PHP程序时&#xff0c;你是不是担心自已辛苦写出来的成果会被别人占为已有呢&#xff1f;其实我们可以用Zend Encoder为我们的PHP文件加上一层保护壳。 软件版本&#xff1a;2.0.1软件大小&#xff1a;10.2M适用平台&#xff1a;Win9X/2000/XP官方网址&#…

【vue开发】vue插件的install方法

MyPlugin.install function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod function () {// 逻辑...}// 2. 添加全局资源Vue.directive(my-directive, {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})// 3. 注入组件Vue.mixin({created: function ()…

笑话

有一次坐公交拿了IC卡排队上车&#xff0c;前面一个人是扔硬币的&#xff0c;我大脑短路跟着把IC卡扔进去了…… ●早上要戴隐形眼镜&#xff0c;结果把盖打开直接把眼镜倒马桶里,然后镇定地倒入新的护理液,准备摘眼镜&#xff0c;半天摘不下来。 ●邻居忘了带钥匙&#xff0c;…

kafkaspot在ack机制下如何保证内存不溢

storm框架中的kafkaspout类实现的是BaseRichSpout&#xff0c;它里面已经重写了fail和ack方法&#xff0c;所以我们的bolt必须实现ack机制&#xff0c;就可以保证消息的重新发送&#xff1b;如果不实现ack机制&#xff0c;那么kafkaspout就无法得到消息的处理响应&#xff0c;就…

云开发0基础训练营第二期热力来袭!

第二期云开发0基础训练营热力来袭&#xff01;课程升级、更佳体验、依旧免费&#xff01;每年的 “金九银十” 都是传说中的学习黄金期&#xff01;这期间在校的小伙伴面临开学季/求职季/考研季挑战&#xff0c;已经步入社会的也即将步入年终前的冲刺阶段。所以&#xff0c;这段…

前端学习(14):相对路径和绝对路径

目录结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" conte…

discuz数据从godaddy主机中导出的mysql数据乱码变问号???的解决方法

从godaddy主机导出的mysql数据安装在本地电脑上发现原来的中文都变成了问号&#xff1f;godaddy主机中的数据库版本是5.0.67&#xff0c;charsetutf8 collationutf8_general_ci 而我的supesite的版本是gbk的&#xff0c;导出的数据也是 CREATE TABLE cdb_access (……) ENGINE…

jvm的新生代和老年代简介

新生代分为三个区域&#xff0c;一个Eden区和两个Survivor区&#xff0c;它们之间的比例为&#xff08;8&#xff1a;1&#xff1a;1&#xff09;&#xff0c;这个比例也是可以修改的。通常情况下&#xff0c;对象主要分配在新生代的Eden区上&#xff0c;少数情况下也可能会直接…

Python 连接redis密码中特殊字符问题

连接方法&#xff1a; self.pool redis.ConnectionPool.from_url(self.redis_url)opredis redis.Redis(connection_poolself.pool)redis_url redis://:cot$#D4^&1234172.31.26.174:6379/0 直接连redis会报错&#xff0c;报错主要内容&#xff1a; ValueError: invalid l…

浅谈yield

c#1.0使用foreach 语句可以轻松地迭代集合。在c#1.0中&#xff0c;创建枚举器仍需要做大量的工作。c#2.0添加了yield语句&#xff0c;以便于创建枚举器。下面我们浅谈下yield的使用&#xff1a; 1、包含yield语句的方法或属性称为迭代块。迭代块必须声明为返回IEnumerator或IEn…

NIO核心框架介绍

NIO共引入了4个概念&#xff1a; - 缓存区&#xff1a;表示数据存放的容器&#xff0c;提供可读写的数据缓存区&#xff1b; - 字符集&#xff1a;用来对缓存数据进行解码和编码&#xff0c;在字节和Unicode字符之间转换&#xff1b; - 通道&#xff1a;用来接收或发送数据&…

前端学习(16):跳转链接小练习

点击图片实现跳转 目录结构 header.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…

云开发的数据库权限机制解读丨云开发101

在使用云开发进行开发时&#xff0c;数据库权限是一个让不少人困扰的部分&#xff0c;四种数据库权限&#xff0c;到底是什么意思&#xff1f;其各自的权限、应用场景都是什么&#xff1f;大多数人对于这个机制&#xff0c;还是模糊的。为了帮助大家进行更好的开发&#xff0c;…

jremind V0.1.3.0添加透明

这次就把弹出消息的窗口改成了透明&#xff0c;本来说是做鼠标穿透的&#xff0c;给做成了透明&#xff0c;先用着&#xff01;有时间了再改了。 转载于:https://www.cnblogs.com/joypen/archive/2009/05/11/1693125.html

Java中的NIO非阻塞编程

在JDK1.4以前&#xff0c;Java的IO操作集中在java.io这个包中&#xff0c;是基于流的阻塞API。对于大多数应用来说&#xff0c;这样的API使用很方便&#xff0c;然而&#xff0c;一些对性能要求较高的应用&#xff0c;尤其是服务端应用&#xff0c;往往需要一个更为有效的方式来…