HTML——语法基础

HTML文档由嵌套的HTML元素构成,下面是HTML文档结构的一个示意图:

DOCTYPE

HTML5语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的,并且在XML里是可选项,因为XML媒体格式的文档一直就是在标准模式下处理的。

老版本的HTML因为是基于SGML的,需要引用一个DTD,所以DOCTYPE很长。

而HTML5只需要象下面这样简单指定一下就可以了

<!DOCTYPE html>

上述语法不区分大小写。

字符编码

HTML5允许使用如下简单的语法指定字符编码,语法不区分大小写。

<meta charset="UTF-8">

来替换老版本的写法:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

元素

HTML5元素使用起始标签和结束标签标记,标签名不区分大小写,但一般约定俗成为小写。例如:

<p>This is a paragraph</p>

大多数元素都包含一些内容,比如 <p>…</p> 包含一个段落,内容可能也会嵌入其他HTML元素,但也有些元素不能包含任意内容,它们被称作空白元素,比如,br,hr等等。

属性

HTML5元素包含属性,有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,只能在起始标签中指定。

  • 全局属性一览

和标签名一样,属性名也不区分大小写,但也是一般约定俗成为小写。

另外,HTML5允许在元素里添加自定义属性,自定义数据属性名以 data- 开头。

  <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" aria-labelledby="myTabDrop1">
        <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
        <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
      </ul>
    </li>
  </ul>

注释代码

HTML里可以写注释代码,HTML注释的开始使用<!–,结束使用–>。注释不会显示在页面中,浏览器会忽略它们。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
  
<!--连接跳转至互道科技官网-->
<a href="www.hudaokeji.com" title="南昌互道科技有限公司">互道科技</a>
  
</body>
</html>

本文分享自微信公众号 - Html5知典(gh_5b9c8e323efa)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cwl_Java

经典面试题-BeanFactory和ApplicationContext有什么区别?

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

5820
来自专栏Python爬虫与数据分析

GlidedSky 字体加密1

还是这个网站,字体加密1, 不过这个 1 比较简单。我会写的很详细,大佬轻喷,内容适合新手小白看,也是自己记录一下,方便自己理解查看。

8310
来自专栏奔跑的人生

[springboot 开发单体web shop] 2. Mybatis Generator 生成common mapper

我们可以看到一行配置内容:<properties resource="generator/config.properties"/>,这里是为了将我们的数据库连接...

7920
来自专栏带你回家

mybatis中出现CDATA的作用

术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data)。

6210
来自专栏Python空间

Python 标准库之 XML(上)

带分隔符的文件仅有两维的数据:行 & 列。如果我们想在程序之间交换数据结构,需要一种方法把层次结构,序列,集合和其它的数据结构编码成文本。

7030
来自专栏Python空间

Python 标准库之 JSON

我用了两天的时间来介绍的 XML,如果没看的话建议先去看看。就数据传递而言, XML 是一种选择,当然这里还有另一种选择 -- 「JSON」。它是一种轻量级的数...

7810
来自专栏带你回家

mybatis 自动生成dao、bean、mapper

今天尝试了下自动生成dao、bean、mapper、这些也遇到一些坑我这里分享下。

11040
来自专栏搜狗测试

接口自动化测试--框架设计思路

之前文章跟大家分享了一下自己在接口自动化测试中进行测试准备的一些相关知识点,接下来本篇文章详细分享一下接口自动化框架设计的思路总结,希望能对初次探索接口自动化...

12020
来自专栏Python空间

Python 标准库之 XML(下)

隔了两天了,不知道你们还记得上一篇文章的内容不,如果不记得的话请移步 -- Python 标准库之 XML(上)。

6410
来自专栏带你回家

eclipse创建maven项目2.3转2.5 java1.5转1.7

找到org.eclipse.wst.common.project.fact.core.xml

6310

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励