HTML总结
    • 简介
      • 定义
        • 1.HTML指得是超文本标记语言
        • 2.它不是编程语言，而是一种标记语言
        • 3.标记语言是一套标记标签
        • 4.HTML使用标记语言来描述网页
      • 标签
        • 1.HTML标签是由尖括号包围的关键词，比如<html>
        • 2.HTML标签通常成对出现，比如<b>和</b>
        • 3.标签对中的第一个是开始标签，第二个是结束标签
        • 4.开始和结束标签也被称为开放标签和闭合标签
      • HTML文档=网页
        • HTML文档描述网页
        • HTML文档包含HTML标签和纯文本
        • HTML文档也被称为网页
    • HTML编辑器
      • Notepad 或 TextEdit来编写
      • 或者专业的HTML编辑器，比如
        • Adobe Dreamweaver
        • Microsoft Expression Web
        • CoffeeCup HTML Editor
        • sublime_text
    • html元素
      HTML文档是由html元素定义的
      • html元素是指从开始标签到结束标签的所有代码
        • 元素语法
          • HTML 元素以开始标签起始
          • HTML 元素以结束标签终止
          • 元素的内容是开始标签与结束标签之间的内容
          • 某些 HTML 元素具有空内容（empty content）
          • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
          • 大多数 HTML 元素可拥有属性
        • 实例
          • <p>元素
          • <body>元素
          • <html>元素
          • 空的html元素
      • HTML属性
        • 属性为HTML元素提供附加信息
          • 规定位置：总是在开始标签中进行定义
          • 实例
            • 1.链接<a>标签中，链接地址在href属性中指定：<a href="http://www.w3school.com.cn">This is a link</a>
            • 2.标题<h1>设置对齐方式：<h1 align="center">
            • ........
          • 注意
            • 1.属性和属性值对大小写不敏感
            • 2.始终为属性值加引号
    • 基础知识点
      • html计算机代码
      • html注释
        • 注释格式
          •  <!-- 与 -->
        • 实例
          • <!-- 在此处写注释 -->
      • html css
        • 插入样式方式
          • 外部样式表
            • 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。、
            • 使用方式
              • 在html文档中<head> 部分进行样式连接，即：
          • 内部样式表
            • 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表
            • 使用方式
              • 实例：
          • 内联样式、
            • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
            • 使用方式
              • 实例：
      • html标题
        • 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的
        • <h1> 定义最大的标题。<h6> 定义最小的标题
        • 实例
          • 注意：确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题
        • 定义水平线
          • <hr /> 标签在 HTML 页面中创建水平线。
          • hr 元素可用于分隔内容。
      • html段落
        • 段落定义
          • 段落是通过 <p> 标签定义的
        • 换行
          • 换行用<br /> 标签
        • 空格
          • 用&nbsp来设置空格
      • html样式
        • style属性用来改变html元素的样式
        • 使用方式
          • 通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义
          • 实例
          • 注意：避免使用废弃的标签好属性
            • 如下：
      • html格式化
        • HTML 可定义很多供格式化输出的元素，比如粗体和斜体字
        • 文本格式化标签
        • “计算机输出”标签
        • 引用、引用和术语定义
      • html引用
        • 1、HTML <q> 用于短的引用
          • HTML <q> 元素定义短的引用
          • 实例
        • 2、用于长引用的 HTML <blockquote>
          • HTML <blockquote> 元素定义被引用的节
          • 实例
        • 3、用于缩略词的 HTML <abbr>
          • HTML <abbr> 元素定义缩写或首字母缩略语
          • 实例
        • 4、用于定义的 HTML <dfn>
          • HTML <dfn> 元素定义项目或缩写的定义
          • 用法
            • 1）如果设置了 <dfn> 元素的 title 属性
              • 实例
            • 2）如果 <dfn> 元素包含具有标题的 <abbr> 元素
              • 实例
            • 3）<dfn> 文本内容即是项目，并且父元素包含定义
              • 实例
        • 5、用于著作标题的 HTML <cite>
          • HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）
          • 注：此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行
          • 实例
        • 6、用于双向重写的 HTML <bdo>
          • HTML <cite> 元素定义著作的标题
          • 注：浏览器通常会以斜体显示 <cite> 元素
          • 实例
        • 即
      • html链接
        • 使用<a>标签创建链接
        • 使用方式
          • 1）通过使用 href 属性 - 创建指向另一个文档的链接
          • 2）通过使用 name 属性 - 创建文档内的书签
        • 链接格式
          • <a href="url">Link text</a>
          • href属性规定链接的目标
        • HTML链接- target属性
          • 使用 Target 属性，你可以定义被链接的文档在何处显示
            • 实例
              • 在新的浏览器窗口打开链接
                • 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了
              • 链接到同一个页面的不同位置
                • 本例演示如何使用链接跳转至文档的另一个部分
              • 跳出框架
                • 本例演示如何跳出框架，假如你的页面被固定在框架之内
              • 创建电子邮件链接
                • 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
              • 创建电子邮件链接 2
                • 本例演示更加复杂的邮件链接
        • name属性
          • name 属性规定锚（anchor）的名称（<a>就是锚）
          • 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
          • 实例
      • html图像
        • 图像标签<img>
        • 源属性（Src）
          • 源属性的值是图像的 URL 地址
        • 替换文本属性
          • alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的
        • 使用格式
          • 例 <img src="boat.gif" alt="Big Boat">
      • html表格
        • 表格由<table>标签进行定义
        • 行用<tr>定义
        • 列用<td>标签定义
        • 表头用<th>标签定义
      • html列表
        • 无序列表
          • 无序列表始于<ul>标签
          • 每个列表项始于<li>
        • 有序列表
          • 有序列表始于<ol>标签
          • 每个列表项始于<li>标签
        • 定义列表
          • 自定义列表始于<dl>标签
          • 每个列表项始于<dt>标签
          • 每个自定义列表项的定义始于<dd>,终于</ dd>
      • html块
        • 块级元素
          • <div>元素，<h1>,<p>,<table>等等
        • 内联元素
          • <span>,<b>,<a>,<img>等等
      • html类
        • HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
        • 为相同的类设置相同的样式，或者为不同的类设置不同的样式。
        • 设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类
        • 设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式（HTML <span> 元素是内联元素，可用作文本的容器）
      • html布局
      • html响应式布局
        • 方式
          • 1.自己创建
          • 2.Boostrap
            • Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
            • Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机
      • html框架
        • 概念：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
        • 类别
          • 垂直框架
          • 水平框架
        • 框架结构标签<frameset>
          • 框架结构标签定义如何将窗口分割为框架
          • 每个frameset定义了一系列行或列
          • rows/columns的值规定了每行或者每列占据屏幕的面积
            • 实例：
              • 第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中，代码r如图：
        • 缺点：
          • 开发人员必须同时跟踪更多的HTML文档
          • 很难打印整张页面
        • 注意：
          • 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
          • 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
          • 例如：
      • html内联框架
        • iframe 用于在网页内显示网页
        • 添加 iframe 的语法
          • <iframe src="URL"></iframe> （URL 指向隔离页面的位置。）
          • Iframe - 设置高度和宽度
            • height 和 width 属性用于规定 iframe 的高度和宽度。
          • Iframe - 删除边框
            • frameborder 属性规定是否显示 iframe 周围的边框。
            • 设置属性值为 "0" 就可以移除边框
          • 使用 iframe 作为链接的目标
            • iframe 可用作链接的目标（target）。
            • 链接的 target 属性必须引用 iframe 的 name 属性
            • 实例：
      • html背景
        • <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
      • html脚本
        • JavaScript 使 HTML 页面具有更强的动态和交互性
      • html路径
        • 绝对路径
          • 绝对文件路径是指向一个因特网文件的完整 URL
        • 相对路径
          • 相对路径指向了相对于当前页面的文件
      • html头部
        • <head>元素
          • <head> 元素是所有头部元素的容器
        • <title>元素
          • <title> 标签定义文档的标题
          • title 元素在所有 HTML/XHTML 文档中都是必需的
        • <base>元素
          • <base> 标签为页面上的所有链接规定默认地址或默认目标（target）
        • <link>元素
          • <link> 标签定义文档与外部资源之间的关系
        • <style>元素
          • <style> 标签用于为 HTML 文档定义样式信息
        • <meta>元素
          • <meta> 标签提供关于 HTML 文档的元数据
        • <script>元素
          • <script> 标签用于定义客户端脚本，比如 JavaScript
      • html实体
      • html URL
        • HTML 统一资源定位器
        • URL 也被称为网址
      • html URL 编码
      • html Web服务器
      • html 颜色
        • HTML 颜色名
      • html文档类型
    • HTML XHTML
    • HTML表单
      • HTML表单
        • HTML 表单用于搜集不同类型的用户输入。
        • <form> 元素
          • <form> 元素定义 HTML 表单
          • <input> 元素
            • 单选按钮输入
              • <input type="radio"> 定义单选按钮。
            • 提交按钮
              • <input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮
            • Action 属性
              • action 属性定义在提交表单时执行的动作
            • Method 属性
              • method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
            • Name 属性
              • 如果要正确地被提交，每个输入字段必须设置一个 name 属性
            • 用 <fieldset> 组合表单数据
              • <fieldset> 元素组合表单中的相关数据
              • <legend> 元素为 <fieldset> 元素定义标题。
      • HTML表单元素
        • <input> 元素
        • <select> 元素（下拉列表）
        • <option> 元素
        • <textarea> 元素
        • <button> 元素
      • HTML输入类型
        • 输入类型：text
        • 输入类型：password
        • 输入类型：submit
        • Input Type: radio
          • <input type="radio"> 定义单选按钮。
        • Input Type: checkbox
          • <input type="checkbox"> 定义复选框。
          • 复选框允许用户在有限数量的选项中选择零个或多个选项
        • 输入类型：number
        • 输入类型：date
        • 输入类型：color
        • 输入类型：range
        • 输入类型：month
        • 输入类型：week
        • ............
      • HTML输入属性
        • value 属性
        • readonly 属性
        • disabled 属性
        • size 属性
        • maxlength 属性
    • HTML媒体<后补>
    • HTML API<后补>
 posted on 2020-04-22 00:27  烤橘  阅读(197)  评论(0)    收藏  举报