一、HTML是什么？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
1. HTML文档结构
<!DOCTYPE html>文档头
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>标题
</head>
<body>
</body>
</html>
个人理解有头有尾在body写主要内容
2.基本标签
注意（个人认为重要部分）：
（1）在form表单中get和post请求区别。
post请求相对安全，不会显示地址栏url信息参数，大小没有限制。
get请求不安全 地址栏会显示有name属性的信息参数，大小限制64k。
（2）div标签 非常常用 划分区域
（3）< a href=”url”> a 标签默认为get请求
Body标签中 text 表示文本颜色
Link 表示未访问的链接颜色
Vlink 表示已访问的链接颜色
Alink active 活动的链接颜色 和鼠标之间有交互的
（4）input type=””
Type=”text” 文本框 Password 密码框
Radio 单选框
Name属性成一组 checked=“checked” 被勾选
Checkbox 多选框 Reset 重置
Submit 提交 Button 按钮 File 上传组件
disabled=“disabled” 用户禁用某个组件
（5）多框架窗口
Frameset和Frame HTML4.0版本中出现的标签
多窗口框架
frameset标签不能够和body标签同时出现
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset cols="25%,50%,*">
<frame src="one.html"></frame>
<frame src="two.html"></frame>
<frame src="movie.html"></frame>
</frameset>
其中html中还有许多部分也比较重要，并没有呈现在上面。个人体会运用好标签，正确书写代码，就可能有不错效果的html。
二、CSS是什么？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.如何在html文件中引入css
一、 行内样式
在html的标签里面加入style的属性 通过该属性去加入一些样式
<p style="color:red; font-size:36px;">
二、 内嵌样式
在head的标签结束之前 加入style /style
<style type="text/css">
p{
color:blue;
}
</style>
三、 外链样式
在head标签结束之前加入link标签 引入css文件
<link rel="stylesheet" type="text/css" href="css/waibu.css">
四、 嵌入样式 不建议使用
<style type="text/css">
@import url(big.css);
</style>
注意！！4种引入css的方式他们的执行优先级是怎样的？
谁的优先级高，要取决于谁离修饰的目标越近，越近的优先级越高。行内>内嵌>外链>嵌入 提供一种参考
最终谁的优先级高 取决于离修饰目标的距离
2.CSS选择器
选择器主要有标签选择器、class选择器、id选择器、全选择器*、组合选择器等。我们需要熟练掌握他们的区别和用法。
3.伪类
a 标签 input标签
A标签中伪类的常用属性L-H-V-A
状态 语法
未访问的链接 a:link{color:#ff0000}
已访问的链接 a:visited{color:#00ff00}
鼠标移动到链接上 a:hover{color:#ff00ff}
鼠标按下到链接上 a:active{color:#0000ff}
4.盒子模型
div+css一种方式
在网页的设计中所有的页面都是盒子套盒子 大的分区就是大盒子小的分区就是小盒子
针对于盒子找了4个部分
Content 内容
Padding 内边距
Border 边框
Margin 外边距
Padding和margin的使用方法是完全一样的
Padding：100px 上下左右4个方向都是100px
Padding：100px 50px 100指上下 50 指左右
Padding：100px 50px 20px 100 上 50 左右 20 下
Padding：100px 50px 20px 200px 上右下左
Padding-top-right-bottom-left 针对不同的方向
边框 border:1px solid blue;
边框宽度 实线 颜色
5布局
- 默认的文档流模式 按照html的书写顺序去布局
- 表格布局 table来布局 淘汰掉了
- 浮动布局 float
None 不浮动
Left 左浮
Right右浮
当我们使用float的时候左浮时会对后面的元素的显示有影响，这种情况下可以清除浮动来解决这个问题。
清除浮动的方法
Clear 属性
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
4.定位布局
绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
相对定位是“相对于”元素在文档中的初始位置
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
三、思维导图
总结
通过初次对HTML+CSS学习，感觉自己还有许多不足，还有思想上的理解没有特别到位，实践操作中还有许多问题，希望通过后面的学习可以慢慢进步，能把所学过的知识运用得更加熟练。
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
