导图社区 html
这是一篇关于html的思维导图，什么是html，常用的标签，包括图片，超链接，列表，表格，媒体元素，表单，文本类的标签，标签的分类。
社区模板帮助中心，点此进入>>
论语孔子简单思维导图
《傅雷家书》思维导图
《童年》读书笔记
《茶馆》思维导图
《朝花夕拾》篇目思维导图
《昆虫记》思维导图
《安徒生童话》思维导图
《鲁滨逊漂流记》读书笔记
《这样读书就够了》读书笔记
妈妈必读：一张0-1岁孩子认知发展的精确时间表
HTML
按 Enter 添加主题
什么是HTML
它是什么
是一个超文本标记语言，可以实现网页的开发。 使用标记（标签）来实现网页中的超文本（不仅仅是文本还有图片、音频等）网页的内容的是有标签实现的
HTM的基本结构L
<html> <head> <title>标题</title> </head> <body> html的标签都写在body中 </body> </html>
常用的标签
标签的分类
单标签 标签只有一个
一般只是用来进行设置的 例如：<br/><hr/>
结束/可以省略
双标签 标签有两个组成
一般有包含的作用 例如：<p></p> 一个p标签要包含整个的段落
结束/一定不能省略
是否独占一行
行内元素（内联元素）：内容决定标签的宽度，可以和其他行内元素显示在一行
块级元素：默认宽度就是个窗口等宽，不管内容多少独占一行，无法与其他标签显示在一行
注意：包含时：块级元素包含行内元素（同一等级的也可以相互包容） 例如：段落中的标签加粗 那一定是p标签包含strong标签，反之不行
文本类的标签
<p></p> 段落标签
效果：换行 间距变大 块级元素
<h1-h6><h1-h6> 标题标签
效果：换行 字体加粗 块级元素
<strong></strong> 加粗
效果：不换行 字体加粗 行内元素
<em></em> 斜体
效果：不换行 字体倾斜 行内元素
<br/>
效果：换行 间距不变
<hr/>
效果：生成一条水平线
特殊符号 ：就是html不能直接识别或者有特殊作用的符号 例如：html中不能直接空格要使用& nbsp 如果直接写<>html会识别成标签，name想使用>和小于就要使用& gt和& lt
空格& nbsp
大于& gt
小于& lt
版权& copy
图片
标签
<img属性1=“属性值1”属性2=“属性值2”/> 行内元素
属性：增强标签的效果
src ： 设置图片路径（建议在网页同一文件夹下新建一个保存图片的文件夹）
1.路径简化
2.方便移动
width ： 设置图片的宽度
height ： 设置图片的高度
alt ： 当图片显示失败时，进行的文字说明
title ： 设置鼠标经过图片时显示的文字
注意 ： 当图片只设置一个宽度或者高度时，图片会等比例进行缩放，如果两个都设置有可能会造成图片的比例失调
超链接
作用 ： 点击部分内容时可以跳转到另一个页面（超链接） <a href=""target="">点击的内容</a>
href : 设置跳转的页面的路径 例如 ：文件夹名/文件名 shouye/goods.html
target ： 设置页面跳转时打开方式 _blank:新打开一个窗口，显示新页面
点击的内容 ： 所有的html中的内容都可以作为点击的对象
作用 ：点击部分内容时可以跳转到一个指定的位置（锚链接）
第一步 ：先设置锚点：在想要跳转到的定位置上设置锚点 <a name="#锚点名"></a>
第二步 ： 跳转到锚点 1.同一个页面 2.<a href="锚点所在页面的路径#锚点名">内容</a>
a.在同一个页面中跳转到一个指定位置 b.跳转到另一个页面中的一个指定的位置
注意 ： 不加#默认是页面
列表
无序列表 .<ul type=""> .<li></li> .</ul>
有序列表 1.ol type="" 2.<li></li> 3.</ol>
定义列表 ： 1.<!--定义列表 一级 二级--> 2.<dl> 3. <dt>甲骨文（66.300，-0.730，-1.09%）学院</dt> 4. <dd>大数据应用与技术</dd> 5. <dd>软件技术</dd> 6. <dt>美术学院</dt> 7. <dd>学术学</dd> 8. <dd>园林设计</dd> 9.</dl>
表格
基本结构 1.<table>->表格 2. <tr>->行 3. <td>普通的列/单元格</td> 4. <th>字体加粗的td</th> 5. </tr> 6.</table>
跨行 (垂直方向) 1.<table border="1"width="500"> 2. <tr> 3 <td rowspan="2">张三</td> . 4. <td>语文</td> 5 <td>98</td> . 6. </tr> 7. <tr> 8. <td rowspan="2">李四</td> 9. <td>语文</td> 10. <td>100</td> 11. </tr> 12.</table>
跨列（水平方向） 1.<table border="1"cellspacing="0"cellpadding="0"> 2. <tr> 3. <td colspan="2">考试成绩</td> 4. </tr> 5. <tr> . 6. <td>语文</td> 7. <td>129</td> 8. </tr> 9.</table>
跨行跨列说明 : 跨列 ：colspan 跨行：rowspann 水平是行，垂直是列
媒体元素
音频 audio
属性 1.controls : 显示控件，例如暂停 播放等按钮 2. loop : 循环播放 3. autoplay : 自动播放
代码 1.<!-- 2. 不管是视频还是音乐默认都不显示控件 3.--> 4. <audio controls="true"loop="true"autoplay="true"> 5.<!-- 6. 是视频一样，尽可能多的去提供音乐文件的格式 7. 浏览器会自动识别到自己能够加载的音乐格式 8.--> 9. <source src="video/sound.mp3"> 10. <source src="video/sound.ogg"> 11. </audio>
视频 video 1.<!-- 2. 同一个视频尽可能多提供几种视频格式 3.. 尽可能地让所有浏览器都能打开该视频 4. --> 5. <video width="400"controls="true"loop="true"autoplay=""true> 6. <!-- 7. 通过source可以让video标签加载多个视频的路径 8. 浏览器会自动识别到自己能够加载的视频格式 9. --> 10. <source src="video/for.mp4"/> 11. </video>
表单
form表单 ： 只要是页面中可以填写或者提交数据的都属于表单 注意：所有的表单元素都要写在该标签内部，，否则填写的内容无法提交
表单元素
input 类型： 1. type="text" 文本框 2. type="password“ 密码框 3. type="file” 文件域，用于上传文件 4. type="number“ 数字框 5. type="hidder” 隐藏域 需要提交一些数据，但是有的数据用户没有必要看可以隐藏 6. type="radio“ 单选按钮 注意同一组的单选按钮的name属性值必须一致 属性：checked：设置默认被选中 7. type="checkbox" 复选框 注意同一组的复选按钮的name属性值必须一致 8. type="submit“ 提交按钮 可以通过value设置按你的文字内容 9. type="reset” 重置按钮 让表单中的元素恢复到初始内容 10. type="image“ 提交按钮（图片类型的）可以通过src=”“设置按钮的图片 非input类型 ： 下拉框：select 文本域 ： textarea 1.<!--下拉框（下拉列表）：select 1.<!-- 2. option：列表中的一个选项 2. 文本域 3. selected：设置默认选中项 3. cols：设置文本域显示的列数 4. --> 4. row:设置文本域显示的行数 5. <select name=“nian”> 5.--> 6. <option> 6. <textarea name=“beizhu”cols=“20”row=“6”> 7. <option> 7. 8. <！--把该项设置为默认项--> 8.</textarea> 9. <option selected>2000</option> 10. <option>2001</option> 11. </select>
1.
其他属性
readonly ： 只读，只能查看不能修改
required ： 设置为必填项
placeholder ： 设置文本框的提示文字，
按 Tab 添加子主题
双击编辑文本
