html 超文本标记语言 web前端开发的一个基础课html5
css 级联样式表
JavaScript/js 就是编程语言 脚本
html结构：
<!doctype html> 声明一个标准的html文档
<html> 根元素
<head> 头部标签
<meta charset="UTF-8"> 设置文件编码：UTF-8
<title>document</title> 网页的总标题
</head>
<body>
结构标签/身体标签
</body>
</html>
sub 下标 sup 上标 img 图片 ol 有序 ul 无序 h1-h5 标题 dr dd dt 表格 form 表格
fromset 框架
b 增大 i 斜体 audio 音频 video 视频 p 段落 br 换行 a 链接
style 样式 div span
创建html文件的过程和注意的地方：
注意：文件的后缀名(.html)
过程：先找到相应的文件夹，鼠标右击，新建文件，快捷键ctrl+s，保存一下文件名(文件+后缀名)
生成html：shift+1，再按tab ，或者是html:5，再按tab
标签复习：
文字 图片 表格 表单 视频 音频 链接
文字标签：i(斜体) sub(下标) sup(上标) br(换行) u(下划线)
b(加粗 span标签：跟内容一样大小
p标签里面包含span标签
大标签：自动占据一行
小标签：小的全部挤在一行
图片img:图片的加载地址 image
第一种情况：html文档和图片在同一目录，直接图片名+图片的后缀名
第二种情况：html文档出几次文件夹，就用几次../
属性src：图片加载路径，source
属性alt：当图片加载不出来的时候，显示的文本内容
列表：所有的type属性都属于li
有序 和 无序
ol li ul li
无序的type类型：disc(默认) square circle none
有序的type类型：1(默认) a A I i start属性：表名从第几个开始
语法：无序列表
<ul type="disc/square/circle/none">
<li><li>
<li><li>
<li><li>
.
.
.
</ul>
有序列表
dl>dt=dd
<ol type="1/a/A/i/I" start="数字">
<li></li>
<li></li>
<li></li>
.
.
.
</ol>
自定义列表
color 颜色 font 字体
background 背景颜色
font-color 字体颜色
font-family 字体形式
width 高度
height 宽度
font-size 尺寸
display
hover 鼠标悬停
cols 列
rows 行
链接标签：a
语法：<a href="" target=""></a>
href:链接下一网址的地址
div：存放内容容器
列表有序和无序
html里面的表单元素：form表单
form表单要和input搭配使用
input:input在网页中以何种方式存在，取决于type属性
value:是让input里面呈现什么内容
width:设置标签的宽度，后面跟单位
height：设置标签的高度，后面也要跟单位
type属性为text:在页面显示的是输入框
type属性为password:在页面显示的是密码框
type属性为submit：在页面显示的是按钮
input：type：
text
password
submit
radio(单选框)
checkbox(复选框)
file(文件)
reset(重置)
image button(按钮)
hidden
value：是决定input里面的内容
radio(单选框):选择性别等只能选一个的功能，结合name属性共同使用
定义一个按钮：button reset submit
select标签：下拉菜单标签，要结合option结合使用
option:代表一个列表项或者一个菜单项
textarea：多行文本域
input: type value name id class placeholder
type="text":定义input是个输入框
type="password":定义input是个密码框
type="submit/button/reset":定义一个按钮
type="radio":定义一个单选框，定义属性name
type="checkbox"：定义一个复选框
type="file"：定义一个上传文件按钮
html框架：一个页面(可视窗口)，有N多个页面组成
frameset：它是一个框架的标签，使用告知html文件是个框架类型，并且设置可视窗口怎么分割，
注意：frameset不能和body同时存在
frame:注意：如果你使用是frameset，那么就一定要使用frame,如果你给frameset分了多少行或者多少列的时候，你就要加相对应数量的子标签frame。
cols:列,竖向分割页面 rows：行，横向分割页面
frameset的属性：border 边框的宽度。
frameborder 表示边框的值，0或者1。
frame的属性：
src：指在框架窗口中要显示的网页链接 name：框架窗口的名称
target的属性值：
blank :新窗口 top：本窗口 parent：上一层窗口 self：超链接中(本身 默认)
但是在此框架中，可以等于目标位置的名称(name值).
多媒体 css
音频和视频
audio video
两者共有的属性：
controls：该属性值要么是controls，要么是空，要是空就可以省略该属性,如果定义了该属性，那就表明该属性值就是controls，播放音频或者视频时则会显示播放滚动条
autoplay:自动播放，该属性值要么是autoplay，要么是空，要是空就可以省略，如果定义了该属性，那就表明该属性值就是autoplay，当音频或者视频装载完全时，就会自动播放
loop：循环播放，该属性值要么是loop，要么是空，是空就可以省略，如果定义了该属性，就表明播放完全后，会再次重复播放
注意点：controls和autoplay不能同时在标签，loop要和二者中的一个搭配使用
video特有属性：width和height
<audio controls>
<source src="" type="">
<source src="" type="">
<source src="" type="">
</audio>
解决浏览器对文件格式不支持的写法。
css：级联样式表/层叠样式表
css1.0 1996年12月
css2.0 1998年5月
css2.1 2004年2月
css3.0 2010年
把css样式表导入到页面中 4种方法
第一种：直接在标签内部使用自带style属性=内联样式
第二种：在head头部标签使用标签style，写入样式的方法，这个内部样式
第三种：在head头部标签里面使用link标签，引入外部css文件，记住引入css文件
第四种：@import url()；导入外部的css文件
html(人的结构)+css(衣服)+js(行为和思想)
background:颜色;
颜色的使用：3种，英文 16进制 rgb
background:url();
css选择器
1.标记选择器/标签名 tag
2.类名选择器 一个类可以有多个标签，一个标签可以有多个类 可以同时给不同的标签取相同的类名 标识符：. 为css做准备
3.id选择器 一个标签只有一个id，一个id只有一个标签 具有唯一性 标识符：# 为后面js做准备
内联>id>class>标签名
4、属性选择器
element[attr]
element[attr=value]
5、包含选择器
selector1 selector2....{
}
包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部
6、子选择器
selector1>selector2...{
}
子选择器用指定目标选择器必须是某个选择器对应的子元素
7、通用选择器 * 找页面所有的元素
8、选择器组合
selector1,selector2,selector3...{}
9、兄弟选择器(css3新增的选择器) ~ +
selector1~selector2{
....
}
selector1+selector2:相同的父元素下，大哥+二哥要么是三弟+四妹，一定是相邻情况下。 只会找到一个，相邻同胞选择器
selector1~selector2：匹配与selector1对应的元素后面跟selector2相同的名字，都能被找到，可以找多个 普通同胞选择器
兄弟选择器匹配与selector1对应的元素后面、能匹配selector2
行高：line-height: 用来使文本上下居中
text-align:用来文本左右居中
1、块元素和行元素
定义：
块元素：在浏览器中独占一行，可以进行宽高的设置。
行元素：在一行内显示，不可以进行宽高的设置
display:inline-block; 行元素转换成块元素