本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!
HTMl简介
- HTML(HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言
1
2
3
4
5
6
7
8
9
10
11<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<p>伊洛yiluo 微信搜索:伊洛的小屋</p>
</head>
<body>
</body>
</html>
HTML5文档省略了<html>
, <head>
,<body>
等元素,使用HTML5
的DOCTYPE
声明文档类型,简化<meta>
元素的charset
属性值,省略<p>
元素的结束标记,使用<元素/>
的方式结束<meta>
元素,以及
元素等语法知识要点。
1 | <!DOCTYPE html> |
内容类型
html5
的文件扩展名和内容类型保持不变。例如,扩展名仍然为'.html'
, '.htm'
内容类型(ContentType)仍然为'text/html'
- 文档类型
DOCTYPE 命令声明文档类型,它是html文档必不可少的组成部分,且必须位于代码第一行。根据化繁为简的设计原则,html5对文档类型和字符说明都进行了简化
在HTML5中,刻意不使用版本声明,一份文档将会适用于所有版本的HTML,在HTML5中,文档类型的声明方法如下当使用工具时,也可以再DOCTYPE声明中加入SYSTEM识别符,声明方法如下1
<!DOCTYPE html>
在HTML5中,DOCTYPE声明方式是不区分大小写的,引号也不区分单引号还是双引号1
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
- 字符串编码
在HTML5中,继续延用meta元素定义文档的字符编码,但是简化了charset属性的写法1
<meta charset="UTF-8">
- 标记省略
在HTML5中,元素的标记可以省略。具体来说,元素的标记分为3种类型:不允许写结束标记,可以省略结束标记,开始标记和结束标记全部可以省略。
不允许写结束标记的元素指,不允许使用开始标记与结束标记讲元素括起来的形式,只允许使用</元素>的形式进行书写1
2<br>错误</br>
</br> 正确嵌套元素
- 一个元素放到其它元素之中,这被称作嵌套
块级元素和内联元素
- 块级元素在页面中以块的形式展现
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行
空元素
- 不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素
<img>
属性
属性包含: - 一个空格,在属性和元素名称之间
- 属性名称,后面跟着一个等于号
- 一个属性值,由一对引号“ ”引起来
属性值两边既可以用双引号,也可以用单引号。HTML5在此基础做了一些改进,当属性值不包括字符串、<、>、=、单引号、双引号等字符时,属性值两边的引号可以省略1
2
3<input type="text">
<input type='text'>
<input type=text>布尔属性
没有值的属性,被称为布尔属性,只能有跟它的属性名一样的属性值
对于具有boolean值的属性,例如disabled, readonly等,当只写属性而不指定属性时,表示属性值为true, 如果想要属性值设为false,可以不使用该属性。另外要想将属性设定为true,也可以将属性名设定为属性值,或将空字符串设定为属性值
实例1
2
3
4
5
6
7
8<!--只写属性,不写属性值,代表属性为true-->
<input type="checkbox" checked>
<!--不写属性,代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表为true-->
<input type="checkbox" checked="">