前端基础：HTML

尘风风尘
214 阅读16分钟

HTML

正是对于自己永远不满足才造就了不平凡的我们！--尘风

HTML简介

  • HTML概念
    • HTML（ Hyper Text Markup Language ）指超文本标记语言，简称为HTML
  • HTML特点
    • HTML文档也称Web页面
    • HTML包含HTML标签及文本内容
    • HTML不是一种编程语言而是一种标记语言
    • HTML使用一套标记标签（ markup tag ）来描述网页
    • HTML是一种使用了结构化Web网页及其内容的标记语言
  • HTML作用
    • HTML用于建立Web站点
  • HTML结构
    • <!DOCTYPE html>+<html>+<head>+<body>构成HTML基本骨架
      • <!DOCTYPE html>声明了HTML文档的类型（HTML5也是此声明）
      • <html>标签是HTML页面的根元素，该标签的结束标志为</html>
      • <head>标签是HTML页面的头部包含元数据，该标签的结束标志为</head>
      • <body>标签是HTML文档的主体即网页可见内容，该标签的结束标志为</body>
    • HTML结构示意代码 
      <!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

HTML标签

  • HTML标签概念
    • HTML标签指HTML标记标签 ( HTML tag )
  • HTML标签特点
    • HTML标签通常成对出现
    • HTML标签是由尖括号包围的关键词
    • HTML标签对的首个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）
  • HTML标签语法
    • HTML标签语法结构为<开始标签名>内容</结束标签名>
  • HTML标签注意
    • HTML标签就是HTML元素，但严格来讲一个HTML元素包含了开始标签与结束标签

HTML解析

  • HTML解析概念
    • HTML解析指通过Web浏览器（ chrome、Internet Explorer、Firefox、Safari ）解析网页
  • HTML解析特点
    • HTML解析的Web浏览器读取HTML文件后将其作为网页显示
  • HTML解析注意
    • HTML解析的Web浏览器不会显示HTML标签而是通过标签来决定向用户展现的内容

HTML版本

  • HTML版本迭代
    • 1989年 Tim Berners-Lee 发明万维网
    • 1991年 Tim Berners-Lee 制定了 HTML 规范
    • 1993年 Dave Raggett 拟定了 HTML+
    • 1995年 HTML工作组定义 HTML 2.0
    • 1997年 W3C推荐的标准为 HTML 3.2
    • 1999年 W3C推荐的标准为 HTML 4.01
    • 2000年 W3C推荐的标准为 XHTML 1.0
    • 2008年 WhatWG首次公开 HTML5
    • 2012年 WhatWG详细制定 HTML5 标准
    • 2014年 W3C推荐的标准为 HTML5
    • 2016年 W3C候选的推荐为 HTML 5.1
    • 2017年 W3C推荐的标准为 HTML5.1 第二版
    • 2017年 W3C推荐的标准为 HTML5.2

HTML声明

  • HTML声明概念
    • HTML声明的<!DOCTYPE>是标准通用标记语言的文档类型声明
  • HTML声明作用
    • HTML声明更有助浏览器正确地显示网页
  • HTML声明注意
    • HTML声明的<!DOCTYPE>声明不区分大小写
    • HTML声明的HTML版本一定要正确，才能保证不一致的文件类型被正确识别并显示内容
  • HTML声明分类
    • HTML声明的通用常见声明分为HTML5、HTML 4.01、XHTML 1.0
      • HTML5
      <!DOCTYPE html>
      • HTML 4.01
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
      • XHTML 1.0
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML编码

  • HTML编码概念
    • HTML编码指对页面格式进行设置
  • HTML编码作用
    • HTML编码用于保证指页面内容显示正常不出现乱码
  • HTML编码代码
    • HTML编码的设置代码如下所示
    <meta charset="UTF-8">

HTML编辑

  • HTML编辑概念
    • HTML编辑指使用HTML编辑器（ 编写HTML的工具 ）编辑HTML文件源代码
  • HTML编辑推荐

HTML编写

  • HTML编写概念
    • HTML编写指用HTML编辑器编写HTML源文件代码（ HTML源文件后缀为.html 或.htm ）
  • HTML编写示例
    • 用Windows自带的Notepad编写HTML源文件

      • 步骤1：启动记事本

        graph LR
打开方式一 --> Win+R运行框 --> notepad

        graph LR
 打开方式二 --> Win+Q搜索框 --> notepad或记事本

        graph LR
打开方式三 --> 文件资源管理器的地址栏 --> notepad

        graph LR
打开方式四 --> 开始 --> 所有程序 --> 附件 --> 记事本

        打开方式五: start notepad 或 start notepad.exe

      • 步骤2：编辑HTML

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个HTML文件</title>
    </head>
    <body>
        <h1> 我的第一个标题 </h1>
        <p>  我的第一个段落 </p>
    </body>
</html>
      • 步骤3：保存HTML
        • 另存为.htm或者.html扩展名的HTML 文件
      • 步骤4：运行HTML
        • 双击HTML文件或选择“文件”菜单的“打开文件”

HTML调试

  • HTML调试概念
    • HTML调试指修正代码错误
  • HTML调试分类
    • HTML调试的错误分为语法错误、逻辑错误
      • 语法错误指因拼写错误使程序无法运行，通常熟悉语法并理解错误信息后很容易修复
      • 逻辑错误指无语法错误但代码不对，其比语法错误更难因为得到不指向错误源头信息
  • HTML调试注意
    • 即使出现语法错误浏览器依然会继续运行
    • 浏览器通常都有内建规则来解析书写错误的标记
    • 即使与预期不符页面仍可显示出来。当然是存在隐患的
    • HTML本身不容易出现语法错误，因为浏览器是以宽松模式运行的
    • 请注意虽然忘记使用结束标签浏览器能正常加载但会产生不可预料的结果或错误
    • 即使忘记使用结束标签大多数浏览器也会正确地显示HTML，因为关闭标签是可选的
    • HTML以宽松方式进行解析是因Web创建的初心是：人人可发布内容，不去纠结代码语法

HTML标题

  • HTML标题概念
    • HTML标题（Heading）通过<h1>~<h6>（ Header ）标签定义
  • HTML标题特点
    • HTML标题的每个元素代表文档中不同级别的内容
    • <h1>表示主标题（ the main heading ），最重要的
    • <h2>表示二级子标题（ subheadings ），次要重要的
    • <h3>表示三级子标题（ sub-subheadings ），最次重要的
    • <h1>、<h2>、<h3>、<h4>、<h5>、<h6>字体的大小依次递减
  • HTML标题作用
    • HTML标题用于创建HTML文档的标题，设置得当的标题有利于用户浏览网页
  • HTML标题注意
    • HTML标题在使用时，首先确保每个页面只使用一次<h1>
    • HTML标题在使用时，其次确保在层次结构中以正确顺序使用标题
    • HTML标题在使用时，最后确保每个页面中标题级别的使用不超过三个
    • HTML标题是块级元素即浏览器会自动在标题前后添加空行
    • HTML标题会被搜索引擎用来进行网页结构和内容索引编制
    • HTML标题仅用于标题，不要仅为了生成粗体或大号的文本而使用

HTML段落

  • HTML段落概念
    • HTML段落（Paragraph）通过<p>标签定义
  • HTML段落作用
    • HTML段落用于创建HTML网页段落，可将文档分割为多个层次
  • HTML段落注意
    • HTML段落是块级元素，浏览器会自动在其前后添加空行
    • HTML段落即使忘用结束标签大多数浏览器也会正确显示，但会产生想不到的结果和错误

HTML空格

  • 概念
    • HTML空格指在代码中添加空格
  • 作用
    • HTML空格用于提高代码可读性
  • 注意
    • HTML空格应坚持使用某种风格而形成一种习惯
    • HTML空格中通常习惯让每一个嵌套的元素以两个空格缩进
    • HTML空格在HTML代码中无论形式如何，却不影响页面显示效果
    • HTML空格无论有多少，当渲染时HTML解释器会将多个空格字符变为一个

HTML链接

  • HTML链接概念
    • HTML链接（ Anchor锚点 ）通过<a>标签定义
  • HTML链接作用
    • HTML链接用于链接到外部地址实现页面跳转，也可链接到当前页面某部分实现内部导航
  • HTML链接特点
    • HTML链接被点击显示为红色并带上下划线
    • HTML链接访问过时显示为紫色并带上下划线
    • HTML链接未访问过时显示为蓝色字体并带有下划线
    • HTML链接在鼠标指针移上去时，箭头会变为一只小手
    • HTML链接的链接地址可以是一个网址、一个HTML文件
    • HTML链接的表现形式可以是一个字、一个词、一组词、一幅图像
    • HTML链接若被设置了CSS样式，展示的效果会根据CSS的设定来显示
  • HTML链接分类
    • HTML链接分为普通链接和空链接
      • HTML空链接指的是指向链接后鼠标变成手形，但单击后仍停留在当前页面
      • HTML空链接基本语法为：<a href="#">显示链接的文字</a>，"#"表示空链接
      • HTML普通链接基本语法为：<a href="url">显示链接的文字</a>，href表示链接目标
  • HTML链接属性
    • target属性
      • HTML链接的target表明被链接文档在何处显示（ 在新窗口还是在原有窗口打开 ）
      • HTML链接的target默认在原窗口中打开，若将其设为_blank属性值则在新窗口打开
    • id属性
      • HTML链接的id属性用于在一个HTML文档中创建书签标记
      • HTML链接的书签不以任何特殊方式显示，在HTML文档中不显示是隐藏起来的
  • HTML链接注意
    • HTML链接的地址需要在href属性中指定
    • HTML链接的链接地址需将正斜杠添加到地址末尾，以免向服务器发送两次HTTP请求

HTML图像

  • HTML图像概念
    • HTML图像（ Image ）通过<img>标签定义
  • HTML图像作用
    • HTML图像用于为网站添加图片
  • HTML图像注意
    • HTML图像的具体地址在src属性中指定
    • <img>元素是自关闭元素不需要结束标记
    • HTML图像的名称和尺寸是以属性的形式提供

HTML强调

  • HTML强调概念
    • HTML强调（ Emphasis、Strong ）指以格式化标签进行文本的强调突出
  • HTML强调特点
    • HTML强调通过em、strong...标签定义
  • HTML强调作用
    • HTML强调中的<em>元素用于使字体变为斜体
    • HTML强调中的<strong>标签用于使字体变为粗体
  • HTML强调注意
    • HTML强调中的风格样式后期基本上通过CSS实现

HTML元素

  • HTML元素概念
    • HTML元素指从开始标签（ start tag ）到结束标签（ end tag ）的所有代码
  • HTML元素作用
    • HTML元素用于定义HTML文档
  • HTML元素语法
    • HTML元素大多数可拥有属性
    • HTML元素中无内容称为HTML空元素
    • HTML元素具有空内容（ empty content）
    • HTML元素以开始标签起始，以结束标签终止
    • HTML元素的内容是开始标签与结束标签之间的内容
    • HTML元素的空元素在开始标签中进行关闭（ 以开始标签的结束而结束 ）
  • HTML元素特点
    • HTML空元素应在开始标签中关闭，如：<br>标签
    • HTML元素相互之间嵌套后构成HTML文档（可以包含其他 HTML 元素）
    • HTML空元素的关闭是在开始标签中添加斜杠如：<br />，HTML、XHTML、XML都接受
  • HTML元素注意
    • HTML元素或HTML空元素在XHTML、XML及未来版本的HTML中，所有元素都必须被关闭

HTML注意

  • HTML注意概念
    • HTML注意指在编写HTML代码时的注意细节，如：使用小写标签
  • HTML注意特点
    • 早年的大部分网站喜欢用大写的HTML标签
    • 后续的大部分网站都遵循HTML4的小写推荐
  • HTML注意注意
    • 由于HTML标签对英文字母大小写不敏感，所以<P>和<p>相同
    • 万维网联盟（W3C）在HTML4中推荐使用小写，而在未来(X)HTML版本中强制使用小写
    • HTML4之前的标准比较混乱所以并不是很规范，导致与XML的代码会更加相似，而XML一大特点就是标签用大写

HTML属性

  • HTML属性概念
    • HTML属性指为HTML元素提供的附加信息
  • HTML属性特点
    • HTML属性可在HTML元素中设置
    • HTML属性的值应该始终被包括在引号内
    • HTML属性一般描述于开始标签，并以名称/值对（ Key-Value ）的形式出现
  • HTML属性注意
    • HTML属性和属性值对大小写不敏感
    • HTML属性可用双引号（ 最常用 ），也可用单引号
    • HTML属性的值假如本身就含有双引号则须用单引号，如：name='h "ell" o'
    • HTML属性在万维网联盟制定的HTML4中推荐小写，而新版本的(X)HTML要求用小写
  • HTML属性分类
    • HTML属性的id属性用于定义元素的唯一id
    • HTML属性的style属性用于规定元素的行内样式（inline style）
    • HTML属性的title属性用于描述元素的额外信息（作为工具条使用）
    • HTML属性的class用于为html元素定义一或多个类名（classname）(类名从样式文件引入)

HTML注释

  • HTML注释概念
    • HTML注释通过<!---->标签定义
  • HTML注释作用
    • HTML注释用于提高代码可读性使代码更易被人理解
  • HTML注释特点
    • HTML注释可在HTML中放置通知和提醒信息
    • HTML注释不会在浏览器中显示但能帮助记录HTML文档
    • HTML注释在开始标签中有一个惊叹号但结束标签中没有
    • HTML注释利于代码纠错，可一次注释一行HTML代码以搜索错误
    • HTML注释的条件注释是只能被Internet Explorer执行的HTML标签
    • HTML注释可插入HTML代码中，浏览器执行代码时既会忽略注释也不会显示

HTML操作

  • HTML操作概念
    • HTML操作指查看源代码
  • HTML操作步骤
    • HTML操作的源代码查看步骤：
    graph LR
鼠标右键 --> IE的查看源文件
鼠标右键 --> Firefox的查看页面源代码

HTML的id

  • 概念
    • HTML的id属性指HTML的唯一标识
  • 作用
    • HTML的id属性用于指定HTML元素的唯一ID
    • HTML的id属性用于指向样式表中的特定样式声明，JS也可用它来访问和操作拥有特定ID的元素
  • 语法
    • HTML的id属性的语法为首先书写#id名称，然后定义花括号 {} 中的CSS属性
  • 注意
    • HTML的id属性的值对大小写敏感
    • HTML的id属性还可用于创建HTML书签
    • HTML的id属性必须包含至少一个字符且不能包含空白字符（ 空格、制表符等 ）
    • HTML的id属性在CSS中用#调用，在JavaScript用getElementById()方法调用
    • HTML的id属性的值在HTML文档中必须唯一，一个HTML文档中不能存在多个相同id的元素
    • HTML的id属性的名称只能由页面中的一个HTML元素使用，同一个类名可由多个HTML元素使用

HTML换行

  • HTML换行概念
    • HTML换行指对文本进行换行
  • HTML换行特点
    • HTML换行通过<br /> 标签定义
    • HTML换行的br元素是一个空的HTML元素，由于关闭标签无任何意义因此它无结束标签
  • HTML换行注意
    • HTML换行的<br />标签被定义为一个换行符，用于输入一个空行而不是对内容拆分
    • HTML无法在代码中添加额外空间或换行来改变输出，页面显示时所有连续空间或空行被算作一个空格

HTML引用

  • HTML引用概念
    • HTML引用指对文本进行引用
  • HTML引用分类
    • <q>短引用
      • <q>元素用于定义引用的内容并对包围的内容加引号
    • <blockquote>长引用
      • <blockquote>元素用于定义被引用的节，并进行缩进处理
    • <abbr>缩写或首字母缩略语
      • <abbr>元素用于定义缩写，能为浏览器、翻译系统、搜索引擎提供有用信息
    • <dfn>项目或缩写的定义 
      • <dfn>元素用于定义项目或缩写的定义
      • <dfn>若设置了title则定义项目，若含具有标题的<abbr>元素则title 定义项目，否则<dfn>文本内容即是项目且父元素包含定义，若希望简化请 用第一条或用<abbr>代替
    • <address>文档或文章的联系信息
      • <address>元素用于定义文档或文章的联系信息（ 作者/拥有者 ）
      • <address>元素通常以斜体显示且大多数浏览器会在此元素前后添加折行
    • <cite>著作标题
      • <cite>元素用于定义著作的标题且通常以斜体显示
    • <bdo>双流向覆盖
      • <bdo>元素用于定义双流向覆盖（ bi-directional override ）

HTML头部

  • HTML头部概念
    • HTML头部元素指包含关于文档的概要信息，也称为元信息（ meta-information ）
  • HTML头部特点
    • HTML头部元素包含了所有的头部标签元素
    • HTML头部元素中可插入脚本（scripts）、样式（CSS）、数据源（meta）
    • HTML头部元素描述了文档的各种属性和信息，包括文档标题、Web中的位置、和其他文档的关系等 
  • HTML头部标签
    • HTML头部标签有<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>
      • <base>元素
      • <base>标签描述了基本的链接地址/链接目标
      • <base>标签没有结束标签，在XHTML中<base>标签必须被正确关闭
      • <base>标签作为HTML文档中所有的链接,规定默认地址或默认目标（ target ）
      • <link>元素
      • <link>标签定义了文档与外部资源之间的关系，通常用于链接到样式表
      • <title>元素
      • <title>标签定义了不同文档的标题，在HTML/XHTML文档中是必须的
      • <title>标签显示为浏览器工具栏的标题、搜索引擎结果页面的标题、收藏夹中的标题
      • <style>元素
      • <style>标签定义了HTML文档的样式文件引用地址，需指定样式文件来渲染HTML文档
      • <meta>元素
      • <meta>标签始终位于head元素中
      • <meta>标签提供了关于HTML文档的元数据
      • <meta>标签为搜索引擎提供了name和content属性索引页面
      • <meta>标签被用于规定页面的描述、关键词、文档作者、最后修改时间、其他元数据
      • <meta>的元数据（metadata）指关于数据的信息，它不会显示在页面上但对机器可读
      • <meta>的元数据用于浏览器（如何显示或重载）、搜索引擎（关键词）、其他Web服务
      • <script>元素
      • <script>标签用于加载脚本文件，如：JavaScript

HTML水平线

  • HTML水平线概念
    • HTML水平线（Horizontal）通过<hr>标签定义
  • HTML水平线作用
    • HTML水平线用于在HTML页面中创建出一条水平线以分隔内容
  • HTML水平线注意
    • HTML水平线可以在视觉上将文档分隔成各个部分，便于观察和分析

HTML格式化

  • HTML格式化概念

    • HTML格式化指对文本进行格式化处理

  • HTML格式化分类

    • HTML格式化的文本格式化标签
    <b>粗体、<strong>粗体突出显示、<i>斜体、<em>斜体突出显示
    • HTML格式化的文本格式化标签
    <sub>下标、<sup>上标、<ins>插入、<del>删除、<small>小号
    • HTML格式化的计算机输出标签
    <code>计算机代码、<kbd>键盘码、<samp>计算机代码样本、<var>变量、<pre>预格式
    • HTML格式化的引文,、引用、标签定义标签
    <abbr>缩写、<address>地址、<bdo>文字方向、<blockquote>长的引用、<q>短的引用、 <cite>引用、<dfn>定义项目

  • 注意

    • 通常用<strong>替换<b>，用<em>替换<i>

  • HTML CSS

avatar
文章
阅读
粉丝