HTML总结

Q：什么是html？

A：Hypertext Markup Language 超文本标记语言。html是一个纯文本文件，用标签来描述文字的语义，这些标签在浏览器看不到，所以是“超文本”，所以是“超文本标记语言”。

  • HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
    • 容器级的标签，里面可以放置任何东西；(h)
    • 文本级的标签里面，只能放置文字、图片、表单元素。(p)
      • 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
      • 不能往网页中插入的图片格式是：psd、ai
      •  插入图片<img src="address"/>  src(source) 自封闭标签（单标签）因为标签对儿表示给内容添加语义，而图片就是图片，不需要添加语义。
      • alt属性：<img src="address" alt="alternate"/>  alternate替代，当图片无法显示时，出现的替代文字。

a标签：

  • 超级链接：一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。
    • <a href="XXX.html">XXX</a>　　
    • a(anchor锚)    href(hypertext reference超文本地址)
  • 悬停文本：<a href="XXX.html" title="鼠标移到链接上显示的文本">XXX</a>
  • 在新窗口打开：<a href="XXX.html" title="悬停文本" target="_blank">XXX</a>
  • 锚点：
    • 页面内锚点  <a href="#abc">点击我直接跳转到锚点指向位置</a>

 　　　　　　　　　　   <h2><a name(或id)="abc">要跳转的位置</a></h2>

    • 页面外锚点  <a href="要跳转页面.html#abc>点击我跳转到指向页面的指向位置</a>

　　　　　　　  　          <h2><a name(或id)="abc">要跳转的位置</a></h2>

 

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

　　　　指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　　　在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD（DocType Declaration文档类型定义），因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。

　　　　  在 HTML 4.01 中有 3 个不同的文档类型（DTD），在 HTML 5 中只有一个：<!DOCTYPE HTML>。

大规范

里面的小规范

HTML4.01

Strict        严格的，体现在一些标签不能使用，比如u

Transitional   普通的

Frameset     带有框架的页面

XHTML1.0

严格体现在小写标签、闭合、引号

Strict          严格的，体现在一些标签不能使用，比如u

Transitional    普通的

Frameset      带有框架的页面

　　　　　　　　　　　　　XHTML 1.1　　该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> （内容：页面的配置：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等）

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

　　　　　　    （charactor set）“字符集”用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

　　　　　　     　中文字符集两个字库：UTF-8 （国际通用）和 gb2312或gbk（国标，只有汉字）UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　        UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）

　　　　　　　     meta除了可以设置字符集，还可以设置关键字和页面描述(有利于Search Engine Optimization，搜索引擎优化)

　　　　　　　　　　　　<meta name="Keywords" content="keyword1,keyword2" />

 　　　　　　　　　　　  <meta name="Description" content="..." />


<title>Document</title> (有助于SEO)
</head>
<body>

</body>
</html>

TIPS:

  1. HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示
  2. 标签要严格封闭
<!DOCTYPE html>　　<!--始终用DOCTYPE声明HTML文档，让浏览器知道这是一个html5页面--> DocType Declaration文档类型定义，网页的声明头，告诉有·浏览器这是一个什么标准的页面
<html lang="en">   <!--lang页面默认语言（可能影响搜索结果）-->

<head>
    <meta charset="utf-8" />　　<!--文档字符编码--> 字符集配置
    <title>页面标题</title>　　<!--除了title，head内其他内容访问者不可见。（影响搜索引擎排名，建议将核心内容放在前60个字符）-->
</head>

<body>

<div class="container">>    <!--无语义通用容器，应用CSS样式或JS效果-->
  
<header role="banner">    <!--页面级页眉：网站标识、主导航、搜索框、其他全站链接-->
    <!--站点标识可以放在这里-->   
    <!--全站导航-->
    <nav role="navigation">    <!--将一组链接指定为重要导航-->
        <ul> ... </ul>
    </nav>
</header>

    <!--开始主要内容-->
    <main role="main">    <!--标记页面的主要区域，一个页面使用一次。role="main"帮助阅读器定位主要区域-->
        <h1> ... </h1>
        <article>    <!--HTML5新元素文章，自包含的容器-->

            <section>    <!--区块：具有相似主题的一组内容，通常包含一个标题。-->
                <h2> ... </h2>
                <p> ... </p>
            </section>

        </article>

        <aside>
            <h2> ... <h2>
            <ul> ... </ul>
        </aside>
    </main>

    <!--开始附注栏。与主体内容相关性不强的内容。-->
    <aside>    <!--aside跟在article后，例子：重要引述、侧栏、指向相关文章的一组链接、广告、博客的友情链接、twitter源、相关产品列表-->
        <!--次级导航-->
        <nav role="navigation">
            <ul>
                <li><a href="relative address">相对地址</a></li>
                ...
            </ul>
        </nav>
    </aside>

    <!--开始页面级页脚,版权信息、不属于页面的全局导航链接-->
    <footer role="contentinfo">    只能对页面级的footer使用contentinfo,一个页面只能使用一次。
        <ul> ... </ul>
    </footer>

</div>
</body>
</html>

ARIA (无障碍的富互联网应用)

屏幕阅读器：

  • JAWS
  • NVDA
  • VoiceOver
  • Windows-Eyes

 

posted @ 2017-07-17 12:03  番茄玛丽  阅读(158)  评论(0)  编辑  收藏  举报