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>"，需要改为“< p >”再比如空格为 
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"/>
相关思维导图模板
树图思维导图提供 一、研究内容 在线思维导图免费制作，点击“编辑”按钮，可对 一、研究内容 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：4f21797dd3e8b08f1951dfc24e7be94f
树图思维导图提供 如何从大历史观学习中国历史 在线思维导图免费制作，点击“编辑”按钮，可对 如何从大历史观学习中国历史 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5a22832470b2860422e8670dd763724d
沪公网安备 31011502019485号
上海工商