TreeMind树图在线AI思维导图
当前位置:树图思维导图模板高校与高等教育医学HTML学习思维导图

HTML学习思维导图

  收藏
  分享
免费下载
免费使用文件
illusion 浏览量:342022-07-26 09:59:24
已被使用6次
查看详情HTML学习思维导图

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

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

思维导图大纲

HTML学习思维导图模板大纲

基础

路径

目录文件夹和根目录

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

根目录:打开目录文件夹的第一层

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

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

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

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

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

<img src="D:\.....\...\....\img.jpg" />或 <img src="http://www.*******.com/.../logo.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>",需要改为“&lt; p &gt;”再比如空格为&nbsp

HTML常用标签

标题标签

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

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

效果:文字加粗加大,且独占一行

段落标签

将文字分段显示

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

段与段之间有较大的间隔

换行标签(单标签)

强制换行

这是要换的行<br/>

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

文本格式化标签

加粗

<strong></strong>或<b></b>

斜体

<em></em>或<i></i>

删除线

<del></del>或<s></s>

下划线

<ins></ins>或<u></u>

<div>和<span>标签

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

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

图像标签

<img src="图像URL"/>

单标签

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

<img/>的其他属性

alt

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

title

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

width / height / border

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

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

超链接标签

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

<a href="跳转目标" target="目标窗口的弹出方式" 文本或图像 </a>

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

C

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

name

名称

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

表单元素

input输入表单元素

<input type="属性值" name="属性值" value="属性值" />(单标签)

select下拉表单元素

<select> <option>A</option> <option>B</option> </select>

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

textarea文本域

<textarea cols="50"(每行可显示50个字符) rows="10"(可显示10行)> 文本内容 </textarea>

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

<label for="man"> 男:</lable> <input type="radio" name="sex" id="man"/>

相关思维导图模板

学习的意义与快乐思维导图

树图思维导图提供 学习的意义与快乐 在线思维导图免费制作,点击“编辑”按钮,可对 学习的意义与快乐  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:e41041065011de1948bf2b2f59b2760c

科技计划项目资金预算编制总体要求的学习和整理思维导图

树图思维导图提供 科技计划项目资金预算编制总体要求的学习和整理 在线思维导图免费制作,点击“编辑”按钮,可对 科技计划项目资金预算编制总体要求的学习和整理  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:49470946de6296e1813ed1ed5efc14ba