认识HTML - 掘金

认识HTML

一、HTML定义

根据W3C（标准化组织，专门制定web标准）定义：

HTML：Hyper Text Markup Language，超文本标记语言，用来定义文档的内容结构。（标记语言）

二、HTML的发展

1、目前使用的是HTML5，草案在2008年发布，2012年形成稳定版本。

HTML5中的变化：

（1）标签：

新增DOCTYPE、meta
新增语义化标签和属性
去掉了纯展示性的标签
添加了canvas、video、audio、本地存储、拖拽

（2）语法：

标记不区分大小写，推荐小写
空标记可以不闭合
属性值可以不添加引号，推荐双引号
属性值中包含true和false的可以省略（控制属性是否生效）

2、html文档结构

DOCTYPE用来定义文档的类型，没有DOCTYPE的情况下会出现怪异模式（混杂模式），有DOCTYPE的情况下叫标准模式（严格模式）。
head元素又叫文档头，包含所有元数据（页面有关的附加信息）。
title为文档标题，显示在浏览器的标题栏或者标签页。
meta标识页面其他的元数据，指示浏览器使用字符编码集进行解析。

三、HTML术语

1、注释：

2、元素：

①元素组成：

<h3>      编程入门     </h3>
复制代码

起始标记元素内容结束标记

<img src="" alt="">
复制代码

属性：给元素添加额外的信息，写在开始标记里，与标记名用空格隔开，属性名与属性值用等号隔开。

②空标记：没有元素内容和结束标记的元素。

③元素嵌套：一个元素放在另一个元素里，元素不能相互嵌套。

<div>
     <p>元素嵌套</p>
</div>
复制代码

④元素关系：

父子关系：A元素直接包含B元素，A是B的父元素，B是A的子元素。
兄弟关系：两个元素拥有同一个父元素，他们就是兄弟元素。
祖先和后代关系：若A直接或者间接包含B元素，A就是B的祖先元素，B就是A的后代元素。

<body>
    <section>
        <a href="">链接1</a>
        <a href="">链接2</a>
    </section>
    <h4>分隔线</h4>
    <div>
        <p>第一个</p>
        <p>第二个</p>
        <p>第三个</p>
    </div>   
</body>
复制代码

如例：

（1）body是section、h4、div的父元素，section、h4、div是body的子元素。

section是a的父元素，a是section的子元素；div是p的父元素，p是div的子元素。

（2）section、h4、div是兄弟元素，两个a是兄弟元素，三个p是兄弟元素。

（3）section、h4、div、a、p都是body的后代元素。

四、HTML元素

（一）结构元素

div：用来划分区域，没有语义
header：头部标签
nav：导航栏
aside：表示跟周围主题相关的附加信息
article：网页正文
section：整体的部分主题
footer：页面或某个区域的脚注

（二）文本元素

h1~h6：标题，数字越大，字体越小
p：段落
strong：重要文本
b：应突出显示的文本

（注意：两者表现出来是一样的，但是在语义上有差别，strong强调文本的重要性，b强调在文本上突出显示的文本）

em：在文本上加强调，斜体
i：一般用来放图标（特别对待的文本）
blockquote：整段文本的引用
q：小段文本的引用
span：跨越多个字符
cite：对参考文献的引用
abbr：对缩写词的引用

a：超链接

<a href="路径" target="页面打开的位置"></a>
复制代码

页面打开位置

target="_self"表示链接默认在当前页面打开，一般不设

target="_blank"表示链接在新的页面打开
路径（所有href路径都是如下规律）

①相对路径：站内资源

书写格式： ./表示文件当前所在目录（可以省略） ../表示返回上一级目录（跳出当前目录）
②绝对路径：站外资源（一般直接复制粘贴网址）

书写格式：协议://域名/目录

如：baidu.com
块级元素：h、p、blockquote
行内元素：strong、b、em、i、q、span、cite、abbr、a、img

（三）实体字符

书写格式：&实体名称;（都是以&开始;结尾）