HTML学习思维导图

illusion

2022-07-26

浏览量: 34

基础思维导图

语法规范思维导图

基本结构标签（骨架）思维导图

HTML的注释和特殊字符思维导图

HTML常用标签思维导图

布局思维导图

带你从基础学习一步步构建基础网页骨架。从html基础、语法规范到基础结构标签，系统地学习html基础知识，为之后的网页学习打好坚实基础

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

思维导图大纲

基础

路径

目录文件夹：普通文件夹，收纳了做网页相关的所有素材，如html文件、多媒体文件等

相对路径：以“引用文件”为参考建立出的目录路径

同级路径 <img src="img.jpg" />

下一级路径 <img src="images/img.jpg" />

上一级路径 <img src="../img.jpg" />

绝对路径:在电脑中的位置或网络中的地址

用vscode创建html文件

打开VS code，新建文件（Ctrl+N），保存(Ctrl+S)为“.html”文件,输入“！”，按下Tab键或者新一点的版本可以直接创建html文件

语法规范

html标签是由尖括号包围的关键词如<html>，通常成对出现如<html></html>。第一个是开始标签，第二个是结束标签，结束标签比开始标签多一个反斜杠“/”。也有极少数特殊情况，为单标签，如<br/>，关键词后有“/”结束标志。

标签之间的关系

包含（嵌套）

并列

基本结构标签（骨架）

“<html></html>”HTML标签

页面中最大的标签，亦称“根标签”

“<head></head>”文档的头部

在head标签中必须包含title标签

"<title></title>"文档的标题

“<body></body>”文档的主体

notebook中写的代码，最后另存为html格式就能打开，显示body中的文字“牛逼plus”

HTML的注释和特殊字符

注释：给程序员看的，不显示在页面中：  快捷键：ctrl+/

特殊字符：一些符号很难或不方便直接使用时用特殊字符来代替如：在网页中想显示"<p>"，需要改为“< p >”再比如空格为&nbsp

HTML常用标签

标题标签

共分六个等级即<h1>-<h6>（h为head的缩写）作用：作为标题使用，并依据重要性递减，一级最重要

<h1>标题标签均为双标签，有结束标签。</h1>

效果：文字加粗加大，且独占一行

段落标签

将文字分段显示

<p>段落</p> “一段一P”

段与段之间有较大的间隔

换行标签（单标签）

强制换行

这是要换的行<br/>

只有行距，没有较大的间隔

文本格式化标签

加粗

斜体

删除线

下划线

<div>和<span>标签

无语义，相当于收纳盒，用来装内容

<div>表示分区，独占一行为一个区</div> <span>表示跨度</span><span>一行可以有多个</span>

图像标签

单标签

src是<img/>的必须属性，用于指定文件的路径和文件名

<img/>的其他属性

alt

当图像不能正常显示时所显示的文字

title

鼠标放到图片上时所显示的文字

width / height / border

设置图像的宽度/高度/边框粗细

格式：<img+空格+属性="属性值"+空格+属性="属性值"+......+/>属性不分先后，属性之间必须加空格

超链接标签

从当前网页跳到另一个页面

href:用于指定链接目标的url地址 target:用于指定链接页面的打开方式，其中"_self"为当前页面打开，"_blank"为在新窗口中打开

链接分类

外部网站

内部链接：网站站点内部页面的相互链接

空链接：herf="#"

下载链接：herf="***.zip/doc/exe"

锚点链接：快速定位到网页中的某个位置

步骤：1.属性设置#名字的形式如<a href="#名字">他的名字是</a> 2.目标位置的标签里添加id属性=名字如<h1 id="名字">小猪佩奇</h1>

布局

表格标签

作用：显示、展示数据

基本语法

<table></table>用于定义表格

<tr></tr>用于定义表格中的行，必须嵌套在table标签中

<td></td>用于定义表格中的单元格，必须嵌套在tr中

表头单元格标签

<th></th>加粗居中显示

表格的相关属性

align

对齐方式

border

边框，默认为""无边框

cellpadding

单元格边沿与内容之间的空白，默认1像素

cellspacing

单元格之间的空白，默认2像素

width/height

表格的宽/高度

表格结构标签

头部：<thead>

内部必须有<tr>标签，一般位于第一行

主体：<tbody>

合并单元格

方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

目标单元格

跨行：最上侧的单元格

跨列：最左侧

步骤

确定合并方式

找目标单元格，写合并代码，如<td colspan="2"></td>

删除多余的单元格

列表标签

作用：布局

无序列表

有序列表

自定义列表

表单标签

作用：收集用户信息

组成

表单域

<form>用于定义表单域，<form>标签会将范围内的表单元素提交给服务器

常用属性

属性

属性值

作用

action

url地址

用于指定接收并处理数据的服务器的url地址

method

提交数据的方式，其取值为get或post

name

名称

用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素

input输入表单元素

<input type="属性值" name="属性值" value="属性值" />（单标签）

select下拉表单元素

<option>中定义selected="selected"则此选项被默认选中

textarea文本域

<label>用于绑定一个表单元素

一、研究内容思维导图

U682687144

4.78

树图思维导图提供《一、研究内容》在线思维导图免费制作，点击“编辑”按钮，可对《一、研究内容》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：4f21797dd3e8b08f1951dfc24e7be94f

如何从大历史观学习中国历史思维导图

海沙

2.13

树图思维导图提供《如何从大历史观学习中国历史》在线思维导图免费制作，点击“编辑”按钮，可对《如何从大历史观学习中国历史》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5a22832470b2860422e8670dd763724d

思维导图模板

高校与高等教育

医学

正文

相似思维导图模版

医学知识妊娠滋养细胞肿瘤的临床表现思维导图

2022-10-24 18:05:05

思维导图模版推荐

马克思主义政治经济学重难点突破（一）思维导图

首页

我的文件

我的团队

个人中心