HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。

思考一个问题：英文写法都分大小，HTML 标签和属性的大写和小写是否不一样？

标签大小写

先看代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <ol>

    <li>1</li>

    <Li>2</Li>

    <LI>3</LI>

  </ol>

</body>

</html>

以上 li 标签用了三种不同写法，全小写、大小混着写、全大写，实际渲染结果都被浏览器修正为了小写 li ，如下：

所以 HTML 标签还是建议使用小写。

属性大小写

上代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .abc {

      color: blue;

    }

    .ABC {

      color: red;

    }

  </style>

</head>

<body>

  不支持的 type 类型：<input type="files">

  <div class="abc">

    <input type="file">

  </div>

  <div class="Abc">

    <input type="File">

  </div>

  <div class="ABC">

    <input type="FILE">

  </div>

  <div Class="abc">

    <input Type="file">

  </div>

  <div Class="Abc">

    <input Type="File">

  </div>

  <div Class="ABC">

    <input Type="FILE">

  </div>

  <div CLASS="abc">

    <input TYPE="file">

  </div>

  <div CLASS="Abc">

    <input TYPE="File">

  </div>

  <div CLASS="ABC">

    <input TYPE="FILE">

  </div>

</body>

</html>

以上属性名和属性值都用了三种不同写法，全小写、大小混着写、全大写，实际渲染效果：

如果浏览器区分了大小写，那么不识别的 type 属性会渲染为 text 文本域（如：第一个 input 元素），然而 input 标签的 type 属性和属性值大小写都没影响浏览器渲染为 file 文件选择域。

class 属性也区分了三种不同的写法，其中属性名大小写没影响样式渲染，但是属性值大小写却分别渲染为了不同的颜色。

总结

  1. HTML 标签不区分大小写。
  2. HTML 属性不区分大小写。
  3. HTML 属性值为预定义的有限选项时，浏览器能穷举的情况下，不区分大小写，比如 type 属性值的大小写没影响浏览器渲染。
  4. HTML 自定义的属性值区分大小写，比如：class 的属性值，大写和小写是不同的结果。

编码的最佳实践建议使用小写字母来编写 HTML 标签、属性、属性值。

Web前端入门第 13 问：HTML 标签和属性是否区分大小写？的更多相关文章

  1. web前端入坑第五篇：秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  2. Android零基础入门第13节：Android Studio配置优化，打造开发利器

    原文:Android零基础入门第13节:Android Studio配置优化,打造开发利器 是不是很多同学已经有烦恼出现了?电脑配置已经很高了,但是每次运行Android程序的时候就很卡,而且每次安装 ...

  3. Android零基础入门第22节：ImageView的属性和方法大全

    原文:Android零基础入门第22节:ImageView的属性和方法大全 通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开 ...

  4. Android零基础入门第18节：EditText的属性和使用方法

    原文:Android零基础入门第18节:EditText的属性和使用方法 EditText与TextView非常相似,它甚至与TextView 共用了绝大部分XML属性和方法.EditText与Tex ...

  5. web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  6. WEB前端html基础中的各类标签介绍

    2:html中有很多标签,这里列举十几种标签,有它们的用法及在使用过程中的注意事项!

  7. [Web 前端] 001 html 常用块级标签

    目录 1. html "总体框架" 2. 常用的 HTML 块级标签(块元素) 2.1 知识点 2.2 以下 code 均写在 body 体中 2.2.1 标题标签,只有 h1-h ...

  8. 毕业生想学习web前端，应该怎么学才能最快找到工作？

    首先无论你要学习任何技能,必须有一个清晰的版图,什么是清晰的版图呢?首先了解你学的技术将来要从事什么工作,这个工作的条件是哪些? 然后你要有一个非常清晰的学习大纲,切记学习任何东西都要系统,不可胡乱的 ...

  9. web前端之 HTML标签详细介绍

    html标签的分类 点我查看完整的html标签介绍 在html中,标签一般分为块级标签和行内标签 块级标签:块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签"p& ...

  10. Web前端3.0时代,“程序猿”如何“渡劫升仙”

    Web前端入行门槛低,很多人在成为前端工程师后很容易进入工作的舒适区,认为该熟悉的业务已熟悉了,然后就是重复用轮子,这样很容易让自己的成长处于原地打转以及低水平重复的状态. 想要不被行业抛弃,就要努力 ...

随机推荐

  1. Python中定位元素包含文本信息的详细解析与代码示例

    在Python编程中,特别是在进行网页自动化测试或数据抓取时,定位包含特定文本信息的元素是一个常见的需求.通过合适的工具和库,可以高效地查找和操作这些元素.本文将详细介绍如何在Python中定位包含文 ...

  2. Qt音视频开发20-海康sdk本地播放

    一.前言 海康sdk中包含了MP4解码播放库,对应的API函数都是PlayM4开头的,顾名思义播放MP4,海康的视频默认可以保存成MP4文件,可以用通用的播放器来播放,这就是为啥前面好多篇文章讲到的各 ...

  3. Qt开源作品36-程序守护进程

    一.前言 没有任何人敢保证自己写的程序没有任何BUG,尤其是在商业项目中,程序量越大,复杂度越高,出错的概率越大,尤其是现场环境千差万别,和当初本地电脑测试环境很可能不一样,有很多特殊情况没有考虑到, ...

  4. IM通讯协议专题学习(八)：金蝶随手记团队的Protobuf应用实践(原理篇)

    本文由金蝶随手记技术团队丁同舟分享. 1.引言 跟移动端IM中追求数据传输效率.网络流量消耗等需求一样,随手记客户端与服务端交互的过程中,对部分数据的传输大小和效率也有较高的要求,普通的数据格式如 J ...

  5. 【BUG排查记】HttpUtil和SpringSecurity结合的坑

    一.背景 最近为了做微服务高可用和优化上线流程,我参与了一个微服务的改造开发. 主要包括redis切换哨兵模式.接入高可用xxljob集群.配置和升级脚本优化. 二.问题描述   项目改造提测后,测试 ...

  6. UWP Shadow 阴影

    参考文字: https://mtaulty.com/2016/08/10/windows-10-uwp-and-composition-light-and-shade/ <Grid Backgr ...

  7. ClickHouse-4SQL参考

    SQL参考 ClickHouse支持以下形式的查询: SELECT INSERT INTO CREATE ALTER 其他类型的查询 ClickHouse SQL 语句 语句表示可以使用 SQL 查询 ...

  8. WordPress产品导入后内容出现乱码，以及附属一些别的功能

    效果图如下 该插件附带了一个可以把产品描述里面的超链接给去掉,以及有的产品图片点击会在地址栏上面显示图片的路径,在该插件可以进行关闭,并且替换成一个模态窗,还有对产品邮费展示进行了处理,到金额到达包邮 ...

  9. 4. 使用sql查询excel内容

    1. 简介 我们在前面的文章中提到了calcite支持csv和json文件的数据源适配, 其实就是将文件解析成表然后以文件夹为schema, 然后将生成的schema注册到RootSehema(Roo ...

  10. ORACLE存储过程中使用游标+BULK COLLECT的应用

    经过半天的折腾,编译通过调试结果正确,掌握此过程中的知识点,oracle存储过程编写就应用到了90%. CREATE OR REPLACE PROCEDURE JUNAN.P_IPT_QUOTN_IN ...