HTML基本语法，规范版本，元素，属性

2020-10-19 本文已影响0人 amanohina

HTML基本语法

W3C，万维网联盟，发布与维护互联网的规范和标准

万维网发布的版本

从HTML4.0开始变得规范化，HTML4.01修复了HTML4的部分bug，XHTML变得严格了起来，没有新的东西。

HTML tag，遵循的语法：
1.标签名必须书写在一对尖括号<>内

<html></html>

2.标签分为单标签和双标签，双标签不可省略，要成对出现

 <p></p>
  <br />

3.双标签包含开始和结束标签，结束时要写关闭符号/，单标签也要自封闭书写，HTML5中单标签也可以不写关闭符号

指的是从开始标签到结束标签的所有内容，包括开始标签，元素内容，结束标签。
eg：双标签内不包含的纯文本内容，就是元素内容

 <p>文本段落</p>

元素也可以包括其他标签的内容，这种我们称之为嵌套
一个HTML元素div的内容可能是多个其他元素组成的，比如p，h1，img等等，我们称div是p和h1，img的父级元素，相反，div，h1，img就是div的子级元素，p，h1，img就是同级元素，也称之为兄弟级关系，嵌套是可以多层的
eg：

<div><h1>标题1</h1><p>div内部的文本段落</p><img src=" " /></div>

单标签是不能添加元素内容的，可以称之为空元素。

容器级：内部可以存放任意内容，包含容器级标签，比如h1，div等等
文本级：内部只可以存放文字或者类似文字的内容，比如存放图片，表单元素，比如p等等。

1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及相互之间的嵌套关系。
eg：加了缩进后与上面的不加缩进的代码展示效果是一样的。可以美化代码，方便查看代码

 <div>
        <h1>标题1</h1>
        <p>div内部的文本段落</p>
        <img src=" " />
 </div>

2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。
eg：

<p>这是一个段落，元素之间对空           格、换
 行、缩        进形容的空白会出现空格折叠现象。</p>

显示的结果是这样的：

代码块

Chrome运行效果

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
2.属性包括了：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称作键值对写法，HTML标签属性的键值对写法是k=" v"。XHTML要求属性值必须在双引号内部。

3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"

4.部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

eg：

<p class="p1" id="pFrist">段落1</p>
<p class="p1 p2 p3 p4">段落2</p>
<p>段落3</p>
<p>段落4</p>