导图社区 HTML基础知识
HTML基础知识的思维导图总结，包括结构HTML页面元素和内容、表现CSS网页元素的外观和位置等页面样式(如：颜色、大小)、行为JS网页模型的定义与领面交互等内容。
软件系统测试基础知识点总结，软件测试是使用人工或自动的手段来运行或测定某个软件系统的过程，其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别。
这是一篇关于Python环境搭建的思维导图，主要内容有Python开发环境主要包括两个部分、Python环境搭建、问题解决。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
HTML
web标准
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小）
行为 JS 网页模型的定义与页面交互
HTML基础知识
HTML（Hyper Text Markup Language）
HTML页面固定结构
HTML标签：网页的整体
head标签：网页的头部
body标签：网页的身体（主题HTML代码书写的地方）
title标签：网页的标题
VScode
创建html主体：！+tab/enter
在浏览器中查看：
右键→open in default/other browser
alt+B/shift+alt+B
注释：ctrl + /（不能在语句后，要换行）
标签构成
这是段落 (双标签)
(单标签)
标签的属性
`<img src=" " alt=" ">`（图片单标签）
属性名=“属性值”
标签关系
嵌套关系/并列关系
标签学习
排版标签
标签标题
<h1>标题一</h1>
h1-h6(放body里)
VS中同时多处光标闪烁：Ctrl+D
段落标签
<p>段落</p>
VScode中自动换行：菜单栏→查看→自动换行
换行'<br>'
水平分割线'<hr>'
文本格式化标签
基本效果
b：加粗
u：下划线
i：倾斜
s：删除线
重要性语句
strong：加粗
ins：下划线
em：倾斜
del：删除线
媒体标签
图片标签（单标签
代码`<img src=” ” alt=” ”>`
属性：src（目标图片路径；快捷键：./）
属性：alt（替换文本；图片加载失败显示）
属性：title（鼠标悬停显示提示文本）
属性：width/height（只写一个图片不会变形）
路径
绝对路径：目录下的绝对位置，可直接到达目标位置
盘符开头：D:\day01\images\1.jpg
完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径：从当前文件开始出发找目标文件的过程
同级目录（快捷键：./）
下级目录（快捷键：./）
上级目录（快捷键：../）
音频标签
插入音频文件：VScode快捷键：./m...（模糊搜索）
代码：`<audio src="./music.mp3" controls>文字</audio>`
属性
src：音频路径
controls：显示播放的控件
autoplay：自动播放（部分浏览器不支持）
loop：循环播放
视频标签
插入视频文件：VScode快捷键：./m...（模糊搜索）
代码：`<video src="./video.mp4" controls></video>`
src：视频路径
autoplay：自动播放（谷歌浏览器需配合muted实现静音播放）
链接标签
a标签/超链接/锚链接：点击之后，从一个页面跳转到另一个页面
代码：`<a href=”./目标网页.html” target=”_blank”>超链接</a>`
href：点击之后跳转去哪一个网页（目标网页的路径）
target：目标网页的打开形式
target=“_self” (默认值，覆盖原网页)
target=“_blank” (新窗口，保留原网页)_
列表标签
无序列表
ul：表示无序列表整体，用于包裹li标签
li：表示无序列表的每一项，用于包含每一行的内容
ul标签只能包含li标签；li标签可以包含任意内容
有序列表
ol：表示有序列表整体，用于包裹li标签
li：表示有序列表的每一项，用于包含每一行的内容
ol标签只能包含li标签；li标签可以包含任意内容
自定义列表
dl：表示自定义列表整体，用于包裹dt/dd标签
dt：表示自定义列表标题
dd：表示自定义列表针对主题的每一项内容
dl标签只能包含dt/dd标签；dt/dd标签可以包含任意内容
表格标签
表格基本标签
table：表格整体，用于包裹多个tr
tr：表格每行，用于包裹td
td：表格单元格，可用于包裹内容
标签的嵌套关系：table > tr > td
表格基本属性（推荐CSS设置）
border=“数字”：边框宽度
width=“数字”：表格宽度
height=“数字”：表格高度
表格标题和表头单元格标签
在表格中表示整体大标题和一列小标题
caption：表格大标题（表格整体的大标题，默认在整体顶部居中位置显示）
th：表格单元格（表示一列小标题，通常用于表格第一行，文字加粗并居中）
注意
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
table > caption + tr > th
表格的结构标签
thead：表格头部
tbody：表格主体
tfoot：表格底部
table > thead > tr > td
合并单元格（属性值）
rowspan=“合并单元格的个数”：跨行合并/垂直合并
colspan=“合并单元格的个数”：跨列合并/水平合并
表单标签
input标签
基本介绍：input可以通过type属性值的不同，展示不同效果
text：文本框（单行文本）
placeholder：占位符，提示用户输入文本内容（常用属性）
例子：`<input type="text" placeholder="请输入昵称">`
password：密码框
例子：`<input type="password" placeholder="请输入密码">`
radio：单选框
name：分组；有相同name属性值的单选框为一组，一组同时只能有一个被选中
checked：默认选中
例子：`<input type="radio" name="marry" checked> 单身`
checkbox:复选框
例子：`<input type="checkbox" name="like"> 妩媚`
file:文件选择
multiple：多文件选择
例子：
submit：提交按钮
点击之后提交数据给后端服务器
配合form标签使用：用form标签把表单标签一起包裹起来
例子：`<input type="submit" value="免费注册">`
reset：重置按钮
点击之后恢复表单默认值
例子：`<input type="reset">`
botton：普通按钮
默认无功能，配合JS添加功能
botton按钮标签（双标签）
select下拉菜单标签
在网页中提供多个选择项的下拉菜单表单控件
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
例子：`<select name="year"> <option value="">请选择年</option> <option value="">1990年</option></select>`
textarea：文本域标签（多行文本）
rows：规定了文本域内可见行数
cols：规定了文本域内可见宽度
右下角可以拖拽改变大小；实际开发时针对于样式效果推荐用CSS设置
label标签
绑定内容与表单标签关系
方法一：`<input type="checkbox" id="one">``<label for="one">代码</label>`
方法二：`<label><input type="checkbox">熬夜</label>`
语义化标签
div/span：没有语义的布局标签
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
有语义的布局标签
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
字符实体
空格合并：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
常见字符实体
 ； 空格
<； 小于号
>； 大于号
&； 和号&
"； 引号
&apos； 撇号（IE不支持）
¢； 分（钱）
£； 镑
¥； 元
&euro； 欧元
§； 小节
©； 版权
