html基础思维导图
互联网前端页面代码知识——html超文本标记语言知识带你
树图思维导图提供 html基础 在线思维导图免费制作，点击“编辑”按钮，可对 html基础 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：632f84f0319455c3a8d8a27e30806b74
思维导图大纲
html基础思维导图模板大纲
简介：超文本标记语言
编辑器：Notepad
基础
标题： <h1> - <h6>
段落： <p>
链接： <a>
图像： <img>
元素
定义：从开始标签到结束标签的所有代码
大多数 HTML 元素可以嵌套
<p> 元素、<body> 元素、<html> 元素
不要忘记结束标签
没有内容的 HTML 元素被称为空元素，在开始标签中关闭 eg.<br />
使用小写标签
属性
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在 HTML 元素的开始标签中规定
href、 align、 bgcolor
使用小写属性
始终为属性值加引号（属性值本身就含有双引号，那么您必须使用单引号）
标题
<h1> 定义最大的标题。<h6> 定义最小的标题
<hr /> 标签在 HTML 页面中创建水平线
<!-- 注释 -->
单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox）
段落
段落是通过 <p> 标签定义的
换行 <br />
HTML 代码中的所有连续的空行（换行）也被显示为一个空格
样式
style属性改变HTML样式
style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义
格式化
文本格式化标签 eg.<b>粗体
计算机输出标签
引用
引用
短引用 <q> ，浏览器通常会为 <q> 元素包围引号
长引用 <blockquote>，浏览器通常会对 <blockquote> 元素进行缩进处理
缩略词 <abbr>
联系信息 <address>，此元素通常以斜体显示
著作标题 <cite>，浏览器通常会以斜体显示 <cite> 元素
计算机代码
<kbd> 元素定义键盘输入
<samp> 元素定义计算机输出示例
<code> 元素定义编程代码示例，不保留多余的空格和折行
<var> 元素定义数学变量
<pre> 定义预格式化文本，可保留多余的空格和折行
注释 注释标签 <!-- 与 --> 用于在 HTML 插入注释
CSS
所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表
插入样式表
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表
可以在 head 部分通过 <style> 标签定义内部样式表
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用内联样式的方法是在相关的标签中使用样式属性
标签
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。
链接
通过使用 <a> 标签在 HTML 中创建链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像
有两种使用 <a> 标签的方式
通过使用 href 属性 - 创建指向另一个文档的链接
<a href="url">Link text</a>
通过使用 name 属性 - 创建文档内的书签
命名锚：<a name="label">锚（显示在页面上的文本）</a>
使用锚：<a href="#label">Link text</a>
也可以在其他页面中创建指向该锚的链接,将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到这个命名锚了
使用 Target 属性，可以定义被链接的文档在何处显示 eg.在新窗口打开target="_blank"
注意事项
始终将正斜杠添加到子文件夹
命名锚经常用于在大型文档开始位置上创建目录
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生
图像
图像标签（<img>）和源属性（Src） <img src="url" />
替换文本属性 alt="文本"
加载图片是需要时间的，所以我们的建议是：慎用图片
表格
表格
表格由 <table> 标签来定义
每个表格均有若干行（由 <tr> 标签定义）
每行被分割为若干单元格（由 <td> 标签定义）
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
边框
边框属性 <table border="">
如果不定义边框属性，表格将不显示边框
表头
表头使用 <th> 标签进行定义
显示为粗体居中的文本
空单元格 <td> </td>
列表
无序列表
使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签
每个列表项始于 <li>
有序列表
有序列表始于 <ol> 标签
每个列表项始于 <li> 标签
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表以 <dl> 标签开始
每个自定义列表项以 <dt> 开始
每个自定义列表项的定义以 <dd> 开始
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
块
HTML 元素
块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）
<h1>, <p>, <ul>, <table>
内联元素
内联元素在显示时通常不会以新行开始
<b>, <td>, <a>, <img>
可以通过 <div> 和 <span> 将 HTML 元素组合起来
<div> 块级元素， <span> 内联元素 可以设置文档样式
类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类 <div class="类名"> <style>.类名 {样式} </style>
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式 <span class="类名"> <style>span.类名 {样式} </style>
布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<table> 元素不是作为布局工具而设计的，作用是显示表格化的数据
响应式设计
RDW
RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
创建响应式设计
自己创建
使用现成的 CSS 框架 eg.Bootstrap
框架
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面
框架结构标签（<frameset>）
<frameset>定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档
重要提示
在 <frame> 标签中加入：noresize="noresize"，防止用户拖拽边框改变大小
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
假如添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内
内联框架
iframe 用于在网页内显示网页
<iframe src="URL"></iframe>
设置高度和宽度
height 和 width 属性
默认单位是像素，但也可以用百分比
删除边框
frameborder 属性
设置属性值为 "0" 就可以移除边框
使用 iframe 作为链接的目标
链接的 target 属性必须引用 iframe 的 name 属性
背景
<body> 拥有两个配置背景的标签
背景颜色（bgcolor）
背景图像（background）
背景图像增加了页面的加载时间，图像文件不应超过 10k
应该使用层叠样式表（CSS）（<body>中的背景已被废弃）
脚本
JavaScript 最常用于图片操作、表单验证以及内容动态更新
script元素
<script> 标签用于定义客户端脚本，比如 JavaScript
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件
type 属性规定脚本的 MIME 类型
<noscript> 标签
在浏览器不支持脚本或者禁用脚本时，显示 noscript 元素中的内容
如果浏览器没法识别 <script> 标签，应该将脚本隐藏在注释标签当中
头部
<head> 元素
<head> 元素是所有头部元素的容器
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
<title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的
<base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<base href="" /> <base target="" />
<link> 元素
<link> 标签定义文档与外部资源之间的关系
<link> 标签最常用于连接样式表
<link rel="stylesheet" type="text/css" href="" />
<style> 元素
<style> 标签用于为 HTML 文档定义样式信息
<meta> 元素
meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据
<script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript
实体
HTML 中的预留字符必须被替换为字符实体
使用实体名而不是数字的好处是易于记忆，坏处是浏览器也许并不支持所有实体名称
空格  
URL
URL - Uniform Resource Locator（统一资源定位器，网址）
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
http 超文本传输协议 以 http:// 开头的普通网页，不加密
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL编码
Web 浏览器通过 URL 从 web 服务器请求页面
URL 只能使用 ASCII 字符集来通过因特网进行发送
URL 编码使用 "%" 其后跟随两位十六进制数来替换非 ASCII 字符
URL 不能包含空格，通常使用 + 来替换空格
相关思维导图模板
树图思维导图提供 数与代数思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 数与代数思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：a497513072a953db83962a7fc14040c1
树图思维导图提供 51单片机基础知识和I/O端口应用 在线思维导图免费制作，点击“编辑”按钮，可对 51单片机基础知识和I/O端口应用 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：c45ff8000b9fbc9e4978cba446cece5d
沪公网安备 31011502019485号
上海工商