html基础思维导图

大灰

2022-11-20

浏览量: 13

超文本标记语言

html

html基础知识

互联网前端页面代码知识——html超文本标记语言知识带你

树图思维导图提供《html基础》在线思维导图免费制作，点击“编辑”按钮，可对《html基础》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：632f84f0319455c3a8d8a27e30806b74

思维导图大纲

基础

标题： <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 部分通过 <style> 标签定义内部样式表

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式

使用内联样式的方法是在相关的标签中使用样式属性

标签

<div> 定义文档中的节或区域（块级）。

<span> 定义文档中的行内的小块或区域。

链接

通过使用 <a> 标签在 HTML 中创建链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像

有两种使用 <a> 标签的方式

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 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 元素

块级元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）

内联元素

内联元素在显示时通常不会以新行开始

可以通过 <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 用于在网页内显示网页

设置高度和宽度

height 和 width 属性

默认单位是像素，但也可以用百分比

删除边框

frameborder 属性

设置属性值为 "0" 就可以移除边框

使用 iframe 作为链接的目标

链接的 target 属性必须引用 iframe 的 name 属性

背景

<body> 拥有两个配置背景的标签

背景颜色（bgcolor）

背景图像（background）

背景图像增加了页面的加载时间，图像文件不应超过 10k

应该使用层叠样式表（CSS）（<body>中的背景已被废弃）

脚本

JavaScript 最常用于图片操作、表单验证以及内容动态更新

script元素

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

type 属性规定脚本的 MIME 类型

<noscript> 标签

在浏览器不支持脚本或者禁用脚本时，显示 noscript 元素中的内容

如果浏览器没法识别 <script> 标签，应该将脚本隐藏在注释标签当中

头部

<head> 元素

<head> 元素是所有头部元素的容器

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>

<title> 元素

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的

<base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）

<link> 元素

<style> 元素

<meta> 元素

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

<script> 元素

实体

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 不能包含空格，通常使用 + 来替换空格

Linux 网络基础知识思维导图

U880113127

1.9

树图思维导图提供《Linux 网络基础知识》在线思维导图免费制作，点击“编辑”按钮，可对《Linux 网络基础知识》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：199680f0e48eac8a1aeaadb90447d4f4

思辨阅读表达学习任务群小学语文作业设计理论层面思维导图

素描

3.42

树图思维导图提供《思辨阅读表达学习任务群小学语文作业设计理论层面》在线思维导图免费制作，点击“编辑”按钮，可对《思辨阅读表达学习任务群小学语文作业设计理论层面》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：8988e5a05fb69634e53868891d5ee2b1

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

思维导图模版推荐

首页

我的文件

我的团队

个人中心