zoukankan      html  css  js  c++  java
  • HTML学习笔记(一) 基本介绍

    1、HTML 简介

    HTML 不同于一般的程序设计语言,它是一种 标记语言,主要用于 定义文档规则和描述文档结构

    标准通用标记语言(Standard Generalized Markup Language,SGML)是最基础的标记语言

    其它标记语言都是从 SGML 的基础上发展而来的,并在不同的领域对 SGML 进行拓展

    其中,超文本标记语言(Hyper Text Markup Language,HTML)就是专门用于编写 Web 文档的语言

    2、HTML 文档结构

    <!DOCTYPE html>
    <html>
        <head>
            <title>Hello World</title>
        </head>
        <body>
            <p>Hello</p>
            <br />
            <p style="color: red">Stranger</p>
        </body>
    </html>
    

    上面的代码是一个十分简单的例子(创建一个 .html 文件,输入以上代码,在浏览器打开即可看到效果)

    但它描述了最基本的 Web 文档结构,我们只需知道该文档由两部分组成:文档描述文档内容

    (1)文档类型定义

    <!DOCTYPE html>
    

    上面的语句称为 DTD 声明(Document Type Definition),位于 HTML 文档的第一行,主要用于 定义文档规范

    对于一般的 XML 文件而言,因为可以使用自定义的标签,所以没有什么标准的规范可言,因此可以不定义 DTD

    但是,对于已经具备标准语法规范的 HTML 和 XHTML 来说,就必须要声明 DTD,声明的格式 如下:

    <!DOCTYPE element-name DTD-type DTD-name DTD-url>
    
    • element-name:DTD 根元素名称
    • DTD-type:若为 PUBLIC,表示 DTD 是标准公用的,若为 SYSTEM,表示 DTD 是私人定制的
    • DTD-name:DTD 文件名称
    • DTD-url:DTD 文件地址

    以下是几个 常见的 DTD 声明

    • HTML5
    <!DOCTYPE html>
    
    • HTML 4.01 Strict

    该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素,不允许框架集

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    • HTML 4.01 Transitional

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素,但不允许框架集

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    
    • HTML 4.01 Frameset

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素,并且允许框架集

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">
    
    • XHTML 1.0 Strict

    该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素,不允许框架集

    且必须以格式正确的 XML 来编写标记

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    • XHTML 1.0 Transitional

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素,但不允许框架集

    且必须以格式正确的 XML 来编写标记

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    • XHTML 1.0 Frameset

    该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素,并且允许框架集

    且必须以格式正确的 XML 来编写标记

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    

    (2)文档内容

    <html>
        <head>
            <title>Hello World</title>
        </head>
        <body>
            <p>Hello</p>
            <br />
            <p style="color: red">Stranger</p>
        </body>
    </html>
    

    上面的代码描述的是 HTML 文档的主体内容

    可以看到,代码中有许多由尖括号包围起来的关键词,这些关键词我们称之为 HTML 标签

    每个 HTML 标签都有自己独特的语义,例如 <p> 表示段落,<br> 表示换行,并根据语义的不同渲染不同的效果

    HTML 标签一般成对出现,其中第一个标签是开始标签,第二个标签是结束标签,但也有一个标签单独出现的情况

    从开始标签到结束标签的所有代码称为 HTML 元素

    HTML 元素从开始标签起始,以结束标签终止,两个标签之间的内容称为 元素内容,例如:

    <p>Hello</p>
    

    对于只有一个标签的情况,要在开始标签中进行关闭,例如:

    <br />
    

    我们还可以通过 元素属性 为 HTML 元素提供附加信息,属性在开始标签中指定,并以键值对的形式出现

    根据标准,建议属性与属性值使用小写字母规定,并且属性值始终使用引号包围,例如:

    <p style="color: red">Stranger</p>
    

    【 阅读更多 HTML 系列文章,请看 HTML学习笔记

    版权声明:本博客属于个人维护博客,未经博主允许不得转载其中文章。
  • 相关阅读:
    Atitit.数据库存储引擎的原理与attilax 总结
    Atitit.数据库存储引擎的原理与attilax 总结
    atitit.guice3 绑定方式打总结生成非单例对象toInstance toProvider区别 v2 pb29
    atitit.guice3 绑定方式打总结生成非单例对象toInstance toProvider区别 v2 pb29
    atitit.项目设计模式---ioc attilax总结v4 q11
    atitit.项目设计模式---ioc attilax总结v4 q11
    Atitit.attilax的 case list 项目经验 案例列表
    Atitit.attilax的 case list 项目经验 案例列表
    Atitit.python web环境的配置 attilax 总结
    Atitit.python web环境的配置 attilax 总结
  • 原文地址:https://www.cnblogs.com/wsmrzx/p/10367569.html
Copyright © 2011-2022 走看看