导图社区 HTML5_1
HTML5实训时，根据每天学习的内容进行归纳总结得出来的。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
HTML5
布局
盒子模型
盒子模型用于布局整个网页，在HTML5中盒子模型使用div标签
div标签：默认不可见，默认宽度=浏览器显示宽度，默认高度为0，也不存在边框和背景色，所以初始时是不可见的
CSS样式
定义：给标签添加修饰元素，CSS样式修饰
使用CSS样式，代码需要编写在固定地方，head标签中编写style标签
如何定义css样式？
1、给需要添加样式的标签定义一个选择器
2、在制定的位置编写样式语句
选择器
分类
类选择器：top，buttom
id选择器：logo，list-left/right
标签选择器:单纯标签
定义
div标签声明
class：<div class="top">***</div>
id：<div id="logo">***</div>
label:<div>***</div>
标签定义
class: .top{***}
id: #logo{***}
label: div{***}
标签间关系
标签选择器 > 类选择器，id选择器，其子类能继承子类中没有声明的父类属性。
绘制战网头部导航栏
边框设计
div：division，分出来的部分
涉及基本属性
width，height，left，right，background-color
border：%1，%2，%3（1px,solid,green）
定义宽和高
默认div标签宽和高：宽为当前浏览器显示宽度，高为0
px（如：100px，注意只能是整数）
百分比：借助参照物，其参照物是上一级标签的宽和高的百分比( 如html{height:100%; width : 100 %; } 其相当于html标签是当前浏览器屏幕的100%) 可以是小数即0.50
间距
外间距（Margin）：在两个Div间在同一层次中的距离
内间距（padding）：在两个Div分别在上下级层级中的距离
消除默认间距：*{ width : 0px ; height : 0px ; }，“*”是类似通配符即所有的div消除间距
定位
absolute
以上一个div中的左上角定点为定位
relative
以上一个div紧挨着的左下角定点为定位
问题
怎么利用快捷方式出注释
如border：1px,solid,green如果不知道对应英语，请问能怎么查（如虚线）
标签
标签简介
Html标签：该标签用于标明该文件是一个html文件，所有编写的代码都必须包含在该标签中
Head标签：该标签用于存储网页基本信息以及外部引入的CSS，JS信息
meta标签：用于设置网页基本信息，如网页字符编码、自动加载,刷新.....
Title标签：用于设置网页标题
Body标签：用于绘制网页的主体内容
HTML标签
HTML5标签：搭建网页布局以及添加网页组件，但是没有样式
CSS3样式：给网页中的HTML5标签添加静态样式，让网页更加好看
JavaScript代码：给网页添加动态样式，让网页更加好看
分析页面HTML格式
浏览器按F12，Source是源文件，Elements是HTML代码
编码
注释
<!-- *** -->
/* #$%^& */
注意
每次在写完时及时保存
HTML软件
软件名：HBuilder
新建项目
普通项目
项目命名（见名知意）
基本HTML格式（JS，IMG，index.html）
运行文件
方式一：找到项目所在目录（右键）打开HTML文件
方法二：选择运行------到浏览器运行
新建html文件
选中项目右键-新建-html文件-输入文件名称（可以使用中文）
应用
网页（电商网站、门户网站、管理系统.....）
编写微信小程序以及微信公众号等以及手机APP页面
编写一些小游戏（非网络版游戏）
语言
HyperText Markup Language
标记语言，使用标记标签来描述网页
文档
文档包含了HTML 标签及文本内容
叫Web页面
