当前位置：开心源码网 > HTML 基础篇（很全）

HTML 基础篇（很全）

作者 : 开心源码 本文共2810个字，预计阅读时间需要8分钟 发布时间： 2022-05-12 共203人阅读

本章内容：

  • 简介
  1. HTML定义
  2. 标签定义和属性
  3. HTML5基本结构
  4. HTML5字符集
  • 标签
  1. </li><li class="ql-indent-1"></li><li class="ql-indent-1">（rel、href、type）</li><li class="ql-indent-1">（http-equiv、name、content）</li></ol><ul><li>标签</li></ul><ol><li class="ql-indent-1">块级标签 &amp; 内联标签</li><li class="ql-indent-1">基本标签（<br /><h1>~</p><h6>、</p><p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br />、</p><hr><p>、</p><div>、<span>）</li><li class="ql-indent-1">特殊符号（>、<、 、"、?…）</li><li class="ql-indent-1"> 超链接标签(锚标签)（href、target、name）</li><li class="ql-indent-1"><img> 图形标签（src、title、alt、width、height、align）</li><li class="ql-indent-1">列表标签（<ul>、</p><ol>、</p><li>、<dl>、</p><dt>、</p><dd>）</li><li class="ql-indent-1"><table> 表格标签（</p><table> 、</p><caption> 、</p><tr>、</p><th>、</p><td>、</p><thead>、</p><tbody>、rowspan、colspan）</li><li class="ql-indent-1"> 表单标签（action、method、enctype、、<textarea>、、<label>、<br /><fieldset>）</li></ol><ul><li>框架</li></ul><ol><li class="ql-indent-1"></li><li class="ql-indent-1"></li></ol><p><strong>简介</strong></p><p><strong>HTML 是什么？</strong></p><p>htyper text markup language 即超文本标记语言。</p><p>超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p><p>标记语言: 标记（标签）构成的语言。</p><p><strong>什么是标签:</strong></p><ul><li>是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.</li><li>标签不区分大小写. 和 . 推荐使用小写.</li><li>标签分为两部分: 开始标签 和 结束标签. 两个标签之间的部分 我们叫做标签体.</li><li>有些标签功能比较简单.使用一个标签就可.这种标签叫做自闭和标签.例如: <br /><hr /><p><img /></li><li>标签可以嵌套.但是不能交叉嵌套. <b></b></li></ul><p><strong>标签的属性:</strong></p><ul><li>通常是以键值对形式出现的. 例如 name=”nick”</li><li>属性只能出现在开始标签 或者 自闭和标签中.</li><li>属性名字一律小写. *属性值必需使用双引号或者单引号包裹 例如 name=”nick”</li><li>假如属性值和属性名完全一样.直接写属性名就可. 例如 readonly</li></ul><p><strong>HTML5基本结构:</strong></p><p> 将HTML4中的DTD定义为如下结构就可，其余不变。</p></p><p><strong>HTML5支持的两种指定页面使用的字符集的方式:</strong></p><ul><li>使用Content-Type指定字符集</li></ul><ul><li>直接使用charset指定字符集</li></ul><p><strong> 标签</strong></p><p><strong><title></strong></p><p><title>Title

    标签为页面上的所有链接规定默认地址或者默认目标。

    Title

    图片加载失败。。。

    nick blogs

    # 上面这段代码中，标签的src属性是一个相对路径，由于中通过base标签设置了链接的默认地址，

    所以img的src实际的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/http://toutiao.com/group/6606420582219121166/o_s.png”。

    同样的，中只是指定了href，并未指定target属性，所以也会使用base中设置的target属性的值。

    引用外部文档，常见于引用外部样式。重要属性有三个：rel、href、type。

    rel 规定文档与被链接文档之间的关系。

    • rel=”dns-prefetch” 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其余域名资源时。
    • rel=”shortcut icon”或者rel=”icon” 在收藏和标题栏上用于显示的图标。示例：。注意：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式。
    • rel=”stylesheet” 引用外部样式表。
    • rel=”nofollow” 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于标签，使用场景：网页不被信任或者是不希望呗搜索引擎录入的网站。

    href 资源的路径（相对路径/绝对路径）。

    type 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。

    定义关于HTML文档的元数据。 重要的属性有三个：http-equiv、name、content

    http-equiv 把content属性值关联到http头部。

    • Content-Type（浏览器接受的文档类型，一般是text/html）
    • refresh（网页刷新，以秒为单位）
    • expires（设定网页到期时间，一旦过期，必需到服务器上重传）

    name 把content属性关联到一个名称。

    • keywords（搜索关键字，用于搜索引擎抓取信息的显示）
    • description（搜索到网站后显示的网页内容简形容）
    • author（站点制作者信息）
    • generator（用以说明生成工具）
    • name也可以根据特定的功能自己设置，在新浪网中有使用360认证和搜狐认证（、）。

    content 定义与http-equiv或者name属性相关的元信息，是必要的属性。

    标签

    1、块级标签和内联标签

    块级标签：

        内联标签：