HTML基础1--概述及简介

2020-09-03 本文已影响0人伊洛的小屋

HTMl简介

HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言

<!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>元素，以及
元素等语法知识要点。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5基本语法</title>
<h1>HTML5的目标</h1>
<p>HTML5的目的是为了能够创建更简单的WEB程序，书写出更简洁的HTML代码</p>
<br/> 例如，为了是web程序的开发变得更容易，提供了更多api，为了使得html变得更简洁，开发出了新属性，新的元素等，总体来说
为下一代的web 平台提供了许许多多的功能

HTML 标签不区分大小写

HTML包含

开始标签
结束标签
内容
元素

内容类型

html5的文件扩展名和内容类型保持不变。例如，扩展名仍然为'.html', '.htm'内容类型（ContentType）仍然为'text/html'

文档类型
DOCTYPE 命令声明文档类型，它是html文档必不可少的组成部分，且必须位于代码第一行。根据化繁为简的设计原则，html5对文档类型和字符说明都进行了简化
在HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML，在HTML5中，文档类型的声明方法如下

<!DOCTYPE html>

当使用工具时，也可以再DOCTYPE声明中加入SYSTEM识别符，声明方法如下

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML5中，DOCTYPE声明方式是不区分大小写的，引号也不区分单引号还是双引号

字符串编码
在HTML5中，继续延用meta元素定义文档的字符编码，但是简化了charset属性的写法

<meta charset="UTF-8">

标记省略
在HTML5中，元素的标记可以省略。具体来说，元素的标记分为3种类型：不允许写结束标记，可以省略结束标记，开始标记和结束标记全部可以省略。
不允许写结束标记的元素指，不允许使用开始标记与结束标记讲元素括起来的形式，只允许使用</元素>的形式进行书写

<br>错误</br>
</br> 正确

嵌套元素

一个元素放到其它元素之中，这被称作嵌套

块级元素和内联元素

块级元素在页面中以块的形式展现
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行

空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>

属性

属性包含：

一个空格，在属性和元素名称之间
属性名称，后面跟着一个等于号
一个属性值，由一对引号“ ”引起来
属性值两边既可以用双引号，也可以用单引号。HTML5在此基础做了一些改进，当属性值不包括字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略

<input type="text">
<input type='text'>
<input type=text>

布尔属性

没有值的属性，被称为布尔属性,只能有跟它的属性名一样的属性值
对于具有boolean值的属性，例如disabled, readonly等，当只写属性而不指定属性时，表示属性值为true，如果想要属性值设为false，可以不使用该属性。另外要想将属性设定为true，也可以将属性名设定为属性值，或将空字符串设定为属性值
实例

<!--只写属性，不写属性值，代表属性为true-->
<input type="checkbox" checked>
<!--不写属性，代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表为true-->
<input type="checkbox" checked="">