认识HTML

128 阅读3分钟

一、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元素

(一)结构元素

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

(二)文本元素

  1. h1~h6:标题,数字越大,字体越小

  2. p:段落

  3. strong:重要文本

  4. b:应突出显示的文本

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

  1. em:在文本上加强调,斜体

  2. i:一般用来放图标(特别对待的文本)

  3. blockquote:整段文本的引用

  4. q:小段文本的引用

  5. span:跨越多个字符

  6. cite:对参考文献的引用

  7. abbr:对缩写词的引用

  8. 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

(三)实体字符

  1. 书写格式:&实体名称;(都是以&开始;结尾)

  2. 常见字符:

    • 空格 :&nbsp;
    • 小于符号< :&lt;
    • 大于符号> :&gt;
    • 并且符号& :&amp;
    • 版权符号© :&copy;
    • 注册符号® :&reg;